salary-management-front/pc4mobx/hrmSalary/components/CustomBrowser/components/customBrowserDialog.js

/*
  *  自定义浏览框组件
  *   弹框选择
  * @Author:    黎永顺
  * @Date:      2024/8/30
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { WeaDialog, WeaInputSearch, WeaLocaleProvider, WeaNewScroll, WeaTable } from "ecCom";
import { Button, Col, Row, Spin } from "antd";
import CustomBrowserMutiLeft from "./customBrowserMutiLeft";
import CustomBrowserMutiRight from "./customBrowserMutiRight";
import CustomBrowserOperation from "./customBrowserOperation";
import { postFetch } from "../../../util/request";

const getLabel = WeaLocaleProvider.getLabel;

class CustomBrowserDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false, listDatas: [], pageInfo: { current: 1, pageSize: 10, total: 0 }, selectedRowKeys: [],
      query: { [props.searchParamsKey]: "" }
    };
    this.selectedData = {};
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) this.getData();
    if (nextProps.visible !== this.props.visible && nextProps.visible) this.setState({ selectedRowKeys: nextProps.selectedValues });
    if (nextProps.visible !== this.props.visible && !nextProps.visible) {
      this.setState({ pageInfo: { current: 1, pageSize: 10, total: 0 } });
      this.selectedData = {};
    }
  }

  getData = () => {
    const { pageInfo, query } = this.state;
    const { dialogType, completeURL, convertDatasource, dataParams = {} } = this.props;
    let payload = { ...dataParams };
    dialogType === "table" && (payload = { ...pageInfo, ...payload, ...query });
    this.setState({ loading: true });
    postFetch(completeURL, payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status && data.list) {
        const { pageNum: current, pageSize, total } = data;
        this.setState({
          listDatas: convertDatasource ? convertDatasource(data.list) : data.list,
          pageInfo: { ...pageInfo, current, pageSize, total }
        });
      } else {
        this.setState({ listDatas: data });
      }
    });
  };
  handleRowClick = record => {
    if (!this.props.isSingle) return;
    const values = [record.id];
    const selectedData = { [record["id"]]: record };
    this.props.onCancel();
    this.props.onChange && this.props.onChange(values, selectedData);
  };
  handleClear = () => {
    this.props.onCancel();
    this.props.onChange && this.props.onChange([], {});
  };
  handleOk = () => {
    const { selectedRowKeys } = this.state;
    selectedRowKeys.forEach((v) => {
      let item = this.getItemById(v);
      if (item) this.selectedData[v] = item;
    });
    this.props.onChange && this.props.onChange(selectedRowKeys, this.selectedData);
    this.props.onCancel && this.props.onCancel();
  };
  getItemById = (id) => {
    const { listDatas } = this.state;
    if (this.selectedData[id]) return this.selectedData[id];
    if (!_.isEmpty(listDatas)) {
      for (let i = 0; i < listDatas.length; i++) {
        if (id === listDatas[i].id) return listDatas[i];
      }
    }
  };

  render() {
    const { loading, listDatas, pageInfo, selectedRowKeys, query } = this.state;
    const { dialogType, tableProps: { rowKey, columns }, isSingle, searchParamsKey } = this.props;
    const sheight = this.dialog ? this.dialog.state.height - 55 : 260;
    const buttons = [
      <Button type="primary" onClick={this.handleOk}>{getLabel(111, "确 定")}</Button>,
      <Button type="ghost" onClick={this.handleClear}>{getLabel(111, "清 除")}</Button>,
      <Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取 消")}</Button>];
    let dom = <Spin spinning={loading}>
      <div style={{ padding: 10, height: "100%" }}>
        <div className="wea-hr-muti-input-left">
          <Row style={{ height: 35 }}>
            <Col span="24"> <WeaInputSearch/> </Col>
          </Row>
          <div>
            <WeaNewScroll height={sheight}>
              <CustomBrowserMutiLeft
                datas={listDatas}
              />
            </WeaNewScroll>
          </div>
        </div>
        <div className="wea-transfer-opration">
          <CustomBrowserOperation/>
        </div>
        <div className="wea-hr-muti-input-right">
          <CustomBrowserMutiRight height={sheight}/>
        </div>
      </div>
    </Spin>;
    if (dialogType === "table") {
      const pagination = {
        ...pageInfo,
        showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],
        onShowSizeChange: (current, pageSize) => {
          this.setState({
            pageInfo: { ...pageInfo, current, pageSize }
          }, () => {
            this.getData();
            selectedRowKeys.forEach((v) => {
              let item = this.getItemById(v);
              if (item) this.selectedData[v] = item;
            });
          });
        },
        onChange: current => {
          this.setState({ pageInfo: { ...pageInfo, current } }, () => {
            this.getData();
            selectedRowKeys.forEach((v) => {
              let item = this.getItemById(v);
              if (item) this.selectedData[v] = item;
            });
          });
        }
      };
      const rowSelection = {
        selectedRowKeys,
        onChange: selectedRowKeys => this.setState({ selectedRowKeys })
      };
      dom = <React.Fragment>
        <WeaInputSearch value={query[searchParamsKey]} className="tableSearch"
                        onChange={value => this.setState({ query: { ...query, [searchParamsKey]: value } })}
                        onSearch={() => {
                          this.setState({ pageInfo: { ...pageInfo, current: 1 } }, () => {
                            this.getData();
                            selectedRowKeys.forEach((v) => {
                              let item = this.getItemById(v);
                              if (item) this.selectedData[v] = item;
                            });
                          });
                        }}/>
        <WeaTable dataSource={listDatas} loading={loading} pagination={pagination} scroll={{ y: sheight }}
                  onRowClick={this.handleRowClick} rowSelection={!isSingle ? rowSelection : null}
                  rowKey={rowKey || "id"} columns={columns}/>
      </React.Fragment>;
    }
    dialogType === "table" && isSingle && buttons.splice(0, 1);
    return (
      <WeaDialog
        {...this.props} initLoadCss ref={dom => this.dialog = dom} title={getLabel(111, "数据选择")}
        className="custom_browser_dialog" style={{
        width: 784, height: 460, minHeight: 200, minWidth: 380,
        maxHeight: "90%", maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
      }} buttons={buttons}>
        {dom}
      </WeaDialog>
    );
  }
}

export default CustomBrowserDialog;