salary-management-front/pc4mobx/hrmSalary/pages/taxAgent/slideTaxagentUser.js

import React from "react";
import { Button, message } from "antd";
import { WeaInputSearch, WeaTable } from "ecCom";
import AddTaxAgentModal from "./addTaxAgentModal";

export default class SlideTaxagentUser extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      addTaxagentModalVisible: false,
      includeType: 1,
      selectedRowKeys: [],
      searchValue: ""
    };
  }

  handleTabClick(includeType) {
    const { onChangeTab } = this.props;
    this.setState(
      {
        includeType
      },
      () => {
        onChangeTab && onChangeTab(includeType);
      }
    );
  }

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

  handleTabDelete = () => {
    const { onDeleteTaxAgent } = this.props;
    const { includeType } = this.state;
    if (this.state.selectedRowKeys.length == 0) {
      message.warning("未选择条目");
      return;
    }
    onDeleteTaxAgent({ ids: this.state.selectedRowKeys, tab: includeType });
  };

  handleSearch = value => {
    const { includeType } = this.state;
    const { onTaxAngetSearch } = this.props;
    onTaxAngetSearch({
      tab: includeType,
      targetName: value
    });
  };

  closeModal = () => {
    this.setState({
      addTaxagentModalVisible: false
    }, () => {
      this.addTaxRef.handleReset();
    });
  };

  render() {
    const {
      includeType,
      selectedRowKeys,
      searchValue,
      addTaxagentModalVisible
    } = this.state;
    const {
      submitLoading,
      queryLoading,
      dataSource,
      columns: taxAgentColumns,
      pageObj,
      setPageObj,
      employeeStatus,
      targetTypeList,
      onTaxAgentSave,
      hideIconInTax,
      showSalaryItemBtn
    } = this.props;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
    };
    const pagination = {
      total: pageObj.total,
      showTotal: total => `共 ${total} 条`,
      showSizeChanger: true,
      onShowSizeChange: (current, pageSize) => {
        setPageObj &&
        setPageObj({
          current,
          pageSize,
          tab: includeType,
          targetName: searchValue
        });
      },
      onChange: current => {
        setPageObj &&
        setPageObj({
          current,
          tab: includeType,
          targetName: searchValue
        });
      }
    };

    return (
      <div className="slideRefereUser">
        <div
          style={{
            height: "47px",
            lineHeight: "47px",
            paddingLeft: "10px",
            paddingRight: "10px",
            display: "flex",
            justifyContent: "space-between"
          }}>
          <div
            style={{
              display: "inlineBlock",
              color: "#666"
            }}>
            <span
              style={{
                cursor: "pointer",
                color: includeType == 1 ? "#4ba9f2" : "#000"
              }}
              onClick={() => {
                this.handleTabClick(1);
              }}>
              人员范围
            </span>|<span
            style={{
              cursor: "pointer",
              color: includeType == 0 ? "#4ba9f2" : "#000"
            }}
            onClick={() => {
              this.handleTabClick(0);
            }}>
              从范围中排除
            </span>
          </div>
          <div>
            <div
              style={{
                color: "#4ba9f2",
                display: "inlineBlock",
                float: "left"
              }}>
              {
                (hideIconInTax || showSalaryItemBtn) && <React.Fragment>
                  <Button type="primary"
                          size="small"
                          onClick={() => {
                            this.handleTabDelete();
                          }}
                  ><span className="icon-coms-form-delete-hot" title="删除"></span></Button>
                  <Button type="primary"
                          size="small"
                          style={{ marginRight: 10 }}
                          onClick={() => this.setState({ addTaxagentModalVisible: true })}
                  ><span className="icon-coms-Add-to-hot" title="添加"></span></Button>
                </React.Fragment>
              }
            </div>
            <WeaInputSearch
              style={{ marginTop: "8px", float: "right" }}
              value={searchValue}
              onChange={value => {
                this.setState({ searchValue: value });
              }}
              onSearch={value => {
                this.handleSearch(value);
              }}
            />
          </div>
        </div>
        <div style={{ maxHeight: "500px", scrollY: "scroll" }}>
          <WeaTable
            rowKey="id"
            loading={queryLoading}
            rowSelection={rowSelection}
            dataSource={dataSource}
            columns={taxAgentColumns}
            pagination={pagination}
          />
        </div>

        <AddTaxAgentModal
          ref={(ref) => this.addTaxRef = ref}
          loading={submitLoading}
          employeeStatus={employeeStatus}
          targetTypeList={targetTypeList}
          onTaxAgentSave={val =>
            onTaxAgentSave &&
            onTaxAgentSave({ ...val, includeType: includeType })}
          visible={addTaxagentModalVisible}
          onCancel={() => {
            this.setState({ addTaxagentModalVisible: false });
          }}
        />
      </div>
    );
  }
}