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: [],
      columns: [],
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visivle && nextProps.visible) {
      this.setState({ selectedRowKeys: [] }, () => {
        this.listSalaryItem();
      });
    }
  }

  listSalaryItem = () => {
    const { itemGroups } = this.props;
    const { name, pageInfo, loading } = this.state;
    let excludeIds = [];
    itemGroups.map(item => {
      item.items && item.items.map(i => {
        excludeIds.push(i.salaryItemId);
      });
    });
    const payload = {
      excludeIds,
      name,
      ...pageInfo
    };
    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;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
          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 "useInEmployeeSalary":
            return <Switch checked={text == 1}/>;
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });
    return newColumns;
  };

  handleAdd = () => {
    const { dataSource, selectedRowKeys } = this.state;
    const { onAddSalaryItems, id, onCancel } = this.props;
    let selectItems = [];
    dataSource.map((item, index) => {
      item = { ...item };
      selectedRowKeys.map(key => {
        if (item.id === key) {
          item.salaryItemId = item.id;
          item.key = item.id;
          item.sortedIndex = index;
          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,
      pageSizeOptions: ["10", "20", "50", "100"],
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => {
          this.listSalaryItem();
        });
      }
    };
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => {
        this.setState({ selectedRowKeys }, () => {
        });
      }
    };
    return (
      <WeaDialog
        visible={visible}
        onCancel={onCancel}
        title="添加薪资项目"
        style={{ width: "80vw", height: 600 }}
        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()}
          />
        </div>
        <WeaTable
          rowKey="id"
          rowSelection={rowSelection}
          dataSource={dataSource}
          pagination={pagination}
          loading={loading.query}
          columns={this.getSalaryItemAddColumns()}
        />
      </WeaDialog>
    );
  }
}