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

import React from "react";
import { Icon, Table, message } from "antd";
import { WeaInputSearch } 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,
    });
  };

  render() {
    const {
      includeType,
      selectedRowKeys,
      searchValue,
      addTaxagentModalVisible,
    } = this.state;
    const {
      submitLoading,
      queryLoading,
      dataSource,
      columns: taxAgentColumns,
      pageObj,
      setPageObj,
      employeeStatus,
      targetTypeList,
      onTaxAgentSave,
    } = 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",
              }}>
              <Icon
                style={{ cursor: "pointer", marginRight: "10px" }}
                type="minus-square"
                onClick={() => {
                  this.handleTabDelete();
                }}
              />
              <Icon
                style={{ cursor: "pointer", marginRight: "10px" }}
                type="plus-square"
                onClick={() => this.setState({ addTaxagentModalVisible: true })}
              />
            </div>
            <WeaInputSearch
              style={{ marginTop: "8px", float: "right" }}
              value={searchValue}
              onChange={(value) => {
                this.setState({ searchValue: value });
              }}
              onSearch={(value) => {
                this.handleSearch(value);
              }}
            />
          </div>
        </div>
        <div>
          <Table
            rowKey="id"
            loading={queryLoading}
            rowSelection={rowSelection}
            dataSource={dataSource}
            columns={taxAgentColumns}
            pagination={pagination}
          />
        </div>

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