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

/*
 * Author: 黎永顺
 * name: 添加退差人员弹框
 * Description:
 * Date: 2022/11/22
 */
import React, { Component } from "react";
import { WeaDatePicker, WeaDialog, WeaFormItem, WeaSearchGroup, WeaSelect } from "ecCom";
import { Button, Modal } from "antd";
import { Select } from "../../../ruleConfig";
import * as API from "../../../../apis/standingBook";

class RegAddEmployee extends Component {
  constructor(props) {
    super(props);
    this.state = {
      baseInfo: {
        billMonth: "",
        items: "",
        itemsAll: ""
      },
      returnPersonInfo: {
        employee: "",
        employeeOptions: []
      },
      selectPersonInfo: {
        employee: "",
        employeeOptions: []
      }
    };
  }

  componentDidMount() {
    this.getEmployeeListByTaxAgent();
  }

  getEmployeeListByTaxAgent = () => {
    const { returnPersonInfo, selectPersonInfo } = this.state;
    const payload = {
      pageNum: 1,
      pageSize: 10000,
      name: null
    };
    API.getEmployeeListByTaxAgent(payload).then(({ status, data }) => {
      if (status) {
        const { list } = data;
        this.setState({
          returnPersonInfo: {
            ...returnPersonInfo,
            employeeOptions: _.map(list || [], it => ({ key: String(it.employeeId), showname: it.username }))
          },
          selectPersonInfo: {
            ...selectPersonInfo,
            employeeOptions: _.map(list || [], it => ({ key: String(it.employeeId), showname: it.username }))
          }
        });
      }
    });
  };
  handleReset = () => {
    this.setState({
      baseInfo: {
        billMonth: "",
        items: "",
        itemsAll: ""
      },
      returnPersonInfo: {
        ...this.state.returnPersonInfo,
        employee: ""
      },
      selectPersonInfo: {
        ...this.state.selectPersonInfo,
        employee: ""
      }
    });
  };
  handleSave = () => {
    const { baseInfo, returnPersonInfo, selectPersonInfo } = this.state;
    const { onSave } = this.props;
    const payload = {
      recessionMonthList: baseInfo.billMonth.split(","),
      projects: baseInfo.itemsAll ? ["0"] : baseInfo.items.split(","),
      includes: returnPersonInfo.employee.split(","),
      excludes: selectPersonInfo.employee.split(",")
    };
    if (_.isEmpty(baseInfo.billMonth) || _.isEmpty(baseInfo.items) || _.isEmpty(returnPersonInfo.employee)) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return;
    }
    onSave(payload);
  };

  render() {
    const { baseInfo, returnPersonInfo, selectPersonInfo } = this.state;
    const { loading } = this.props;
    const buttons = [
      <Button type="primary" onClick={this.handleSave} loading={loading.save}>保存</Button>,
      <Button type="ghost" onClick={this.handleReset}>重置</Button>
    ];
    const baseItems = [
      {
        com: Picker({
          label: "退差月份",
          value: baseInfo.billMonth,
          onChange: (billMonth) => {
            this.setState({ baseInfo: { ...baseInfo, billMonth } });
          }
        })
      },
      {
        com: SelectWithAll({
          label: "退差项目",
          options: [
            { key: "1", showname: "社保" },
            { key: "2", showname: "公积金" },
            { key: "3", showname: "企业年金及其他福利" }
          ],
          detailtype: 2,
          valueAll: baseInfo.itemsAll,
          value: baseInfo.items,
          onChangeAll: ({ selected }) => {
            if (selected) {
              this.setState({ baseInfo: { ...baseInfo, itemsAll: selected, items: "1,2,3" } });
            } else {
              this.setState({ baseInfo: { ...baseInfo, itemsAll: selected, items: "" } });
            }
          },
          onChange: ({ selected }) => {
            const bool1 = selected.split(",").includes("1");
            const bool2 = selected.split(",").includes("2");
            const bool3 = selected.split(",").includes("3");
            if (bool1 && bool2 && bool3) {
              this.setState({ baseInfo: { ...baseInfo, itemsAll: "0", items: selected } });
            } else {
              this.setState({ baseInfo: { ...baseInfo, itemsAll: "", items: selected } });
            }
          }
        })
      }
    ];
    const returnPersonItems = [
      {
        com: Select({
          multiple: true,
          label: "对象",
          viewAttr: 3,
          showSearch: true,
          options: returnPersonInfo.employeeOptions,
          value: returnPersonInfo.employee,
          onChange: ({ selected }) => {
            this.setState({ returnPersonInfo: { ...returnPersonInfo, employee: selected } });
          }
        })
      }
    ];
    const selectPersonItems = [
      {
        com: Select({
          multiple: true,
          label: "选择人员",
          viewAttr: 2,
          showSearch: true,
          options: selectPersonInfo.employeeOptions,
          value: selectPersonInfo.employee,
          onChange: ({ selected }) => {
            this.setState({ selectPersonInfo: { ...selectPersonInfo, employee: selected } });
          }
        })
      }
    ];
    return (
      <WeaDialog
        {...this.props}
        style={{ width: 900 }}
        hasScroll
        buttons={buttons}
      >
        <WeaSearchGroup title="基础信息" items={baseItems} showGroup col={1}/>
        <WeaSearchGroup title="退差人员" items={returnPersonItems} col={1} showGroup/>
        <WeaSearchGroup title="人员范围中排除" items={selectPersonItems} col={1} showGroup/>
      </WeaDialog>
    );
  }
}

export default RegAddEmployee;


export const Picker = payload => {
  const { label, onChange, value, viewAttr = 3, format = "YYYY-MM" } = payload;
  return (
    <WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
      <WeaDatePicker
        format={format}
        value={value}
        viewAttr={viewAttr}
        onChange={onChange}
      />
    </WeaFormItem>
  );
};
export const SelectWithAll = payload => {
  const { label, onChange, value, valueAll, onChangeAll, options = [], viewAttr = 3, detailtype = 1 } = payload;
  return (
    <WeaFormItem label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
      <div>
        <WeaSelect
          options={[{ key: "0", showname: "全部" }]}
          detailtype={detailtype}
          value={valueAll}
          onChange={(selected, showName) => onChangeAll({ selected, showName })}
          style={{ width: "inherit" }}
        />
        <WeaSelect
          options={options}
          viewAttr={viewAttr}
          detailtype={detailtype}
          value={value}
          onChange={(selected, showName) => onChange({ type: label, selected, showName })}
          style={{ width: "inherit" }}
        />
      </div>
    </WeaFormItem>
  );
};