salary-management-front/pc4mobx/hrmSalary/components/PersonalScopeModal/index.js

/*
 * Author: 黎永顺
 * name: 新增人员范围弹框
 * Description:
 * Date: 2022/11/30
 */
import React, { Component } from "react";
import { WeaBrowser, WeaDialog, WeaFormItem, WeaSearchGroup, WeaSelect } from "ecCom";
import { Button, message, Modal } from "antd";
import { getTaxAgentRangeForm } from "../../apis/taxAgent";
import { SelectWithAll } from "../../pages/socialSecurityBenefits/standingBookDetail/components/regAddEmployee";
import "./index.less";

class PersonalScopeModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      employeeStatus: [],
      targetTypeList: [],
      targetType: "EMPLOYEE",
      targetTypeIds: "",
      targetTypeIdsNames: "",
      status: "",
      statusAll: ""
    };
  }

  componentDidMount() {
    const { isTaxgent = true } = this.props;
    if (isTaxgent) {
      this.getTaxAgentRangeForm();
    } else {
      const employeeStatus = [
        { key: "TRIAL", showname: "试用" },
        { key: "FORMAL", showname: "正式" },
        { key: "TEMPORARY", showname: "临时" },
        { key: "DELAY", showname: "试用延期" },
        { key: "FIRE", showname: "解雇" },
        { key: "DEPARTURE", showname: "离职" },
        { key: "RETIRED", showname: "退休" }
      ];
      const targetTypeList = [
        {
          key: "EMPLOYEE",
          showname: "人员",
          selected: false
        },
        {
          key: "SUBCOMPANY",
          showname: "分部",
          selected: false
        },
        {
          key: "DEPT",
          showname: "部门",
          selected: false
        },
        {
          key: "POSITION",
          showname: "岗位",
          selected: false
        }
      ];
      this.setState({ targetTypeList, employeeStatus });
    }
  }

  getTaxAgentRangeForm = () => {
    getTaxAgentRangeForm().then(({ status, data }) => {
      if (status) {
        const { employeeStatus, targetTypeList } = data;
        this.setState({
          targetTypeList: _.map(targetTypeList, it => ({ key: it.id, showname: it.name })),
          employeeStatus: _.map(employeeStatus, it => ({ key: it.id, showname: it.name }))
        });
      }
    });
  };
  handleSubmit = () => {
    const { status, targetTypeIds, targetType } = this.state;
    const { includeType, saveKeyVal, onSuccess, onCancel, APISaveFox } = this.props;
    if (_.isEmpty(status) || _.isEmpty(targetTypeIds)) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return;
    }
    const payload = {
      employeeStatus: status.split(","),
      includeType,
      targetParams: _.map(targetTypeIds.split(","), it => ({ targetType, targetId: it })),
      [saveKeyVal["key"]]: saveKeyVal["value"],
    };
    this.setState({ loading: true });
    APISaveFox["save"](payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        message.success("保存成功");
        this.handleReset();
        onSuccess();
        onCancel();
      } else {
        message.error(errormsg || "保存失败");
      }
    }).catch(() => this.setState({ loading: true }));
  };
  renderBrowser = () => {
    const { targetType, targetTypeIds, targetTypeIdsNames } = this.state;
    let browserType = {};
    switch (targetType) {
      case "EMPLOYEE":
        browserType = { ...browserType, type: 17, title: "人员选择" };
        break;
      case "DEPT":
        browserType = { ...browserType, type: 57, title: "部门选择" };
        break;
      case "SUBCOMPANY":
        browserType = { ...browserType, type: 164, title: "分部选择" };
        break;
      case "POSITION":
        browserType = { ...browserType, type: 278, title: "岗位选择" };
        break;
      default:
        break;
    }
    return <WeaBrowser
      {...browserType}
      viewAttr={3}
      isSingle={false}
      value={targetTypeIds}
      valueSpan={targetTypeIdsNames}
      inputStyle={{ width: 200 }}
      onChange={(targetTypeIds, targetTypeIdsNames) => {
        this.setState({ targetTypeIds, targetTypeIdsNames });
      }}
    />;
  };
  handleReset = () => {
    this.setState({
      targetType: "EMPLOYEE",
      targetTypeIds: "",
      status: "",
      statusAll: ""
    });
  };

  render() {
    const { onCancel, title, visible } = this.props;
    const { employeeStatus, targetTypeList, targetType, status, statusAll, loading } = this.state;
    const buttons = [
      <Button type="primary" onClick={this.handleSubmit} loading={loading}>确定</Button>,
      <Button type="ghost" onClick={this.handleReset}>重置</Button>
    ];
    return (
      <WeaDialog
        initLoadCss
        className="personalScopeModalWrapper"
        title={title}
        visible={visible}
        style={{ width: 600 }}
        buttons={buttons}
        onCancel={() => {
          this.handleReset();
          onCancel();
        }}
      >
        <WeaSearchGroup col={1} needTigger title="" showGroup center>
          <WeaFormItem
            label="对象类型"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
          >
            <div style={{ display: "flex", alignItems: "center" }}>
              <WeaSelect
                style={{ width: 60, marginRight: 12 }}
                value={targetType}
                options={targetTypeList}
                onChange={(targetType) => this.setState({ targetType })}
              />
              {this.renderBrowser()}
            </div>
          </WeaFormItem>
          {
            SelectWithAll({
              label: "选择员工状态",
              options: employeeStatus,
              detailtype: 2,
              valueAll: statusAll,
              value: status,
              onChangeAll: ({ selected }) => {
                if (selected) {
                  this.setState({
                    status: _.map(employeeStatus, it => it.key).join(","),
                    statusAll: selected
                  });
                } else {
                  this.setState({
                    status: "",
                    statusAll: selected
                  });
                }
              },
              onChange: ({ selected }) => {
                const bool = _.every(_.map(employeeStatus, it => it.key), item => selected.split(",").includes(item));
                if (bool) {
                  this.setState({
                    status: selected,
                    statusAll: "0"
                  });
                } else {
                  this.setState({
                    status: selected,
                    statusAll: ""
                  });
                }
              }
            })
          }
        </WeaSearchGroup>
      </WeaDialog>
    );
  }
}

export default PersonalScopeModal;