salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/components/regSelect.js

/*
 * Author: 黎永顺
 * name: 退差人员选择弹框
 * Description:
 * Date: 2022/11/25
 */
import React, { Component } from "react";
import { Button, Tag } from "antd";
import { WeaDialog, WeaFormItem, WeaInputSearch, WeaTable } from "ecCom";
import * as API from "../../../../apis/standingBook";
import "./index.less";

class RegSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: "",
      visible: false,
      loading: false,
      selectedRowKeys: [],
      selectedRow: [],
      dataSource: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    };
  }

  getEmployeeListByTaxAgent = (params = {}) => {
    const { pageInfo } = this.state;
    const payload = {
      ...pageInfo,
      ...params
    };
    this.setState({ loading: true });
    API.getEmployeeListByTaxAgent(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { list: dataSource, pageNum, pageSize, total } = data;
        this.setState({
          dataSource,
          pageInfo: { ...pageInfo, pageNum, pageSize, total }
        });
      }
    });
  };
  handleSave = () => {
    const { onChange } = this.props;
    this.setState({
      visible: false
    }, () => {
      const { selectedRowKeys } = this.state;
      onChange({ selected: selectedRowKeys });
    });
  };
  handleClose = (key) => {
    const { onChange } = this.props;
    const { selectedRow } = this.state;
    this.setState({
      selectedRow: _.filter(selectedRow, it => it.employeeId !== key)
    }, () => {
      const { selectedRow } = this.state;
      this.setState({
        selectedRowKeys: _.map(selectedRow, it => it.employeeId)
      });
      onChange({ selected: _.map(selectedRow, it => it.employeeId) });
    });
  };

  render() {
    const { visible, loading, dataSource, pageInfo, selectedRowKeys, selectedRow, userName } = this.state;
    const { label, viewAttr } = this.props;
    const pagination = {
      current: pageInfo.pageNum,
      pageSize: pageInfo.pageSize,
      total: pageInfo.total,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      onChange: (current) => {
        this.setState({ pageInfo: { ...pageInfo, pageNum: current } }, () => {
          this.getEmployeeListByTaxAgent();
        });
      }
    };
    const rowSelection = {
      selectedRowKeys: selectedRowKeys,
      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys }),
      onSelect: (record, selected) => {
        if (selected) {
          this.setState({ selectedRow: [...selectedRow, record] });
        } else {
          this.setState({ selectedRow: _.xorWith(selectedRow, [record], _.isEqual) });
        }
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        this.setState({ selectedRow: _.xorWith(selectedRow, changeRows, _.isEqual) });
      }
    };
    const buttons = [
      <Button type="primary" onClick={this.handleSave}>保存</Button>,
      <Button type="ghost" onClick={() => this.setState({ visible: false })}>取消</Button>
    ];
    return (
      <div className="regSelectWrapper">
        <WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
          {selectedRow.map(tag =>
            <Tag key={tag.employeeId} closable onClose={() => this.handleClose(tag.employeeId)}>
              {tag.username}
            </Tag>
          )}
          <Button
            size="small"
            type="dashed"
            onClick={() => this.setState({ visible: true }, () => this.getEmployeeListByTaxAgent())}
          >添加人员</Button>
          {
            _.isEmpty(selectedRow) && viewAttr === 3 &&
            <span className="wea-required-e9" style={{ verticalAlign: "middle" }}>
              <img src="/images/BacoError_wev9.png" alt=""/>
            </span>
          }
        </WeaFormItem>
        <WeaDialog
          onCancel={() => this.setState({ visible: false })}
          title="人员"
          visible={visible}
          loading={loading}
          style={{ width: 680, height: 500 }}
          hasScroll
          buttons={buttons}
        >
          <div style={{ display: "flex", justifyContent: "flex-end", margin: 10 }}>
            <WeaInputSearch
              value={userName}
              placeholder="请输入姓名"
              onChange={(userName) => this.setState({ userName })}
              onSearch={() => this.getEmployeeListByTaxAgent({ userName })}
            />
          </div>
          <WeaTable
            rowKey="employeeId"
            columns={[
              {
                title: "姓名",
                dataIndex: "username",
                key: "username"
              }
            ]}
            dataSource={dataSource}
            loading={loading.query}
            pagination={pagination}
            rowSelection={rowSelection}
          />
        </WeaDialog>
      </div>
    );
  }
}

export default RegSelect;