salary-management-front/pc4mobx/hrmSalary/pages/ledger/step3/AddSalaryItemModal.js

import React from "react";
import { inject, observer } from "mobx-react";
import { Button, message, Switch } from "antd";
import { WeaDialog, WeaInputSearch } from "ecCom";
import CustomTable from "../../../components/customTable";

@inject("ledgerStore")
@observer
export default class AddSalaryItemModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: "",
      selectedRowKeys: []
    };
  }

  componentWillMount() {
    const { ledgerStore: { listSalaryItem } } = this.props;
    listSalaryItem();
  }

  // 增加编辑功能，重写columns绑定事件
  getColumns(columns) {
    if (!columns) {
      return [];
    }
    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 { ledgerStore } = this.props;
    const { addSalaryItemDataSource, addItemsToGroup, addExcludeIds } = ledgerStore;
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length == 0) {
      message.warning("未选择条目");
      return;
    }
    let selectItems = [];

    addSalaryItemDataSource.map(item => {
      item = { ...item };
      selectedRowKeys.map(key => {
        if (item.id == key) {
          item.salaryItemId = item.id;
          item.key = item.id;
          selectItems.push(item);
        }
      });
    });

    addItemsToGroup(this.props.title, selectItems);
    this.props.onCancel();
  }

  handleSearch = (value) => {
    const { ledgerStore: { listSalaryItem } } = this.props;
    listSalaryItem(value);
  };


  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };

  // 分页
  handleDataPageChange(value) {
    const { ledgerStore: { listSalaryItem } } = this.props;
    listSalaryItem(this.state.searchValue, value);
  }

  render() {
    const { ledgerStore } = this.props;
    const { addSalaryItemDataSource, addSalaryItemColumns, addSalaryItemPageInfo, loading } = ledgerStore;
    const { searchValue, selectedRowKeys } = this.state;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };

    return (
      <WeaDialog
        visible={this.props.visible}
        onCancel={() => {
          this.props.onCancel();
        }}
        title="添加薪资项目"
        style={{ width: "80vw", height: 600 }}
        buttons={[
          <Button
            type="primary"
            onClick={() => {
              this.handleAdd();
            }}>添加</Button>
        ]}
      >
        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", padding: 20 }}>
          <WeaInputSearch value={searchValue} onChange={(value) => {
            this.setState({ searchValue: value });
          }} onSearch={(value) => {
            this.handleSearch(value);
          }}/>
        </div>

        <div style={{ height: "calc(100% - 68px)", overflowY: "scroll" }}>
          <CustomTable
            loading={loading}
            dataSource={addSalaryItemDataSource}
            columns={this.getColumns(addSalaryItemColumns)}
            rowSelection={rowSelection}
            pagination={{
              onChange: (value) => {
                this.handleDataPageChange(value);
              },
              total: addSalaryItemPageInfo.total,
              showTotal: (total) => `共 ${total} 条`,
              current: addSalaryItemPageInfo.pageNum
            }}
          />
        </div>
      </WeaDialog>
    );
  }
}