salary-management-front/pc4mobx/hrmSalary/pages/ledger/validRulesForm.js

import React from "react";
import {WeaInputSearch} from "ecCom";
import {Icon, message, Modal, Table} from "antd";
import ValidRuleEditModal from "./step5/ValidRuleEditModal";
import AddValidRuleModal from "./addValidRuleModal";
import {inject, observer} from "mobx-react";

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

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

  handleItemDelete(record) {
    const {ledgerStore: {deleteLedgerRule}} = this.props;
    deleteLedgerRule([record.id]);
  }

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

  handleBatchDelete() {
    const {ledgerStore: {deleteLedgerRule}} = this.props;
    const {selectedRowKeys} = this.state;
    if (selectedRowKeys.length == 0) {
      message.warning("未选择条目");
      return;
    }
    Modal.confirm({
      title: "信息确认",
      content: "确认删除",
      onOk: () => {
        deleteLedgerRule(selectedRowKeys);
      },
      onCancel: () => {

      }
    });
  }

  handeSearch() {
    const {ledgerStore: {getLedgerRuleList}} = this.props;
    const {searchValue} = this.state;
    getLedgerRuleList(searchValue);
  }

  render() {
    const {ledgerStore} = this.props;
    const {ledgerRuleList} = ledgerStore;
    const {selectedRowKeys} = this.state;
    let columns = ledgerRuleList.columns ? ledgerRuleList.columns.filter(item => item.dataIndex != "id") : [];

    if (columns.length > 0) {
      columns.push({
        title: "操作",
        key: "cz",
        render: (text, record) => (
          <a onClick={() => {
            this.handleItemDelete(record);
          }}>删除</a>
        )
      });
    }


    let dataSource = ledgerRuleList.list ? ledgerRuleList.list : [];
    dataSource.map(item => item.key = item.id);

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this)
    };
    return (
      <div className="validRulesForm">
        <div className="headerBar">
          <WeaInputSearch className="inputSearch" value={this.state.searchValue} onChange={(value) => {
            this.setState({searchValue: value});
          }}
                          onSearch={(value) => {
                            this.handeSearch(value);
                          }}
          />
          <span className="btnsWrapper">
            {
              dataSource.length > 0 &&
              <Icon className="iconItem" title="批量删除" type="minus-square" onClick={() => {
                this.handleBatchDelete();
              }}/>
            }
            <Icon className="iconItem" type="plus-square" title="新增" onClick={() => {
              this.setState({
                modalVisible: true
              });
            }}/>
          </span>
        </div>
        <div className="tableWrapper">
          {
            ledgerRuleList.list &&
            <Table rowSelection={rowSelection} dataSource={ledgerRuleList.list} columns={columns} pagination={{
              total: ledgerRuleList.total,
              showTotal: (total) => `共 ${total} 条`,
              current: ledgerRuleList.pageNum
            }}/>
          }

        </div>
        <ValidRuleEditModal
          visible={this.state.modalVisible}
          onCancel={() => {
            this.setState({modalVisible: false});
          }}
          onAddValidRule={() => this.setState({ruleVisible: true})}
        />
        <AddValidRuleModal
          visible={this.state.ruleVisible}
          onCancel={() => {
            this.setState({ruleVisible: false});
          }}
        />
      </div>
    );

  }
}