salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSalaryItemAddModal.js

import React from "react";
import { Button, Switch } from "antd";
import { WeaDialog, WeaInputSearch, WeaTable } from "ecCom";
import { listSalaryItem } from "../../../apis/ledger";

export default class LedgerSalaryItemAddModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: {
        query: false
      },
      name: "",
      selectedRowKeys: [],
      dataSource: [],
      dataSourceCopy: [],
      columns: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visivle && nextProps.visible) {
      this.setState({ selectedRowKeys: [], dataSourceCopy: [] }, () => {
        this.listSalaryItem();
      });
    } else {
      this.setState({ pageInfo: { current: 1, pageSize: 10, total: 0 } });
    }
  }

  listSalaryItem = (extra = {}) => {
    const { itemGroups } = this.props;
    const { name, pageInfo, loading, dataSourceCopy } = this.state;
    let excludeIds = [];
    itemGroups.map(item => {
      item.items && item.items.map(i => {
        excludeIds.push(i.salaryItemId);
      });
    });
    const payload = {
      excludeIds,
      name,
      ...pageInfo,
      ...extra
    };
    this.setState({ loading: { ...loading, query: true } });
    listSalaryItem(payload).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status) {
        const { pageNum: current, pageSize, total, columns, list: dataSource } = data;
        const tmpV = !_.isEmpty(dataSource) ? dataSource : [];
        this.setState({
          dataSourceCopy: [...dataSourceCopy, ...tmpV],
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource: tmpV,
          columns
        });
      }
    }).catch(() => {
      this.setState({ loading: { ...loading, query: false } });
    });
  };
  getSalaryItemAddColumns = () => {
    const { columns } = this.state;
    let newColumns = [];
    newColumns = columns.map(column => {
      let newColumn = column;
      newColumn.render = (text, record, index) => { //前端元素转义
        let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
        switch (newColumn.dataIndex) {
          case "useDefault":
          case "hideDefault":
          case "useInEmployeeSalary":
            return <Switch checked={text === 1}/>;
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });
    return newColumns;
  };

  handleAdd = () => {
    const { dataSourceCopy, selectedRowKeys } = this.state;
    const { onAddSalaryItems, id, onCancel, itemGroups } = this.props;
    const arrItems = _.find(itemGroups, it => it.uuid === id).items || [];
    let selectItems = [];
    _.uniqWith(dataSourceCopy, _.isEqual).map((item) => {
      item = { ...item };
      selectedRowKeys.map((key, keyIdx) => {
        if (item.id === key) {
          item.salaryItemId = item.id;
          item.key = item.id;
          item.itemHide = item.hideDefault;
          item.sortedIndex = (!_.isEmpty(_.maxBy(arrItems, it => it.sortedIndex)) ? _.maxBy(arrItems, it => it.sortedIndex).sortedIndex : 0) + keyIdx + 1;
          selectItems.push(item);
        }
      });
    });
    onCancel();
    onAddSalaryItems(id, selectItems);
  };

  render() {
    const { onCancel, visible } = this.props;
    const { name, selectedRowKeys, pageInfo, dataSource, loading } = this.state;
    const pagination = {
      ...pageInfo,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize }
        }, () => this.listSalaryItem());
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.listSalaryItem());
      }
    };
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => {
        this.setState({ selectedRowKeys }, () => {
        });
      }
    };
    return (
      <WeaDialog
        visible={visible} onCancel={onCancel} hasScroll
        title="添加薪资项目" style={{
        width: "80vw", height: 606.6, minHeight: 200,
        minWidth: 380, maxHeight: "80%", maxWidth: "80vw",
        overflow: "hidden", transform: "translate(0px, 0px)"
      }}
        buttons={[<Button type="primary" onClick={this.handleAdd} disabled={_.isEmpty(selectedRowKeys)}>添加</Button>]}
      >
        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", padding: 20 }}>
          <WeaInputSearch
            placeholder="请输入薪资项目名称"
            value={name}
            onChange={(name) => this.setState({ name })}
            onSearch={() => this.listSalaryItem({ current: 1 })}
          />
        </div>
        <WeaTable
          rowKey={record => record.id || record.key}
          rowSelection={rowSelection}
          dataSource={dataSource}
          pagination={pagination}
          loading={loading.query}
          columns={this.getSalaryItemAddColumns()}
        />
      </WeaDialog>
    );
  }
}