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, WeaLocaleProvider, WeaSearchGroup, WeaSelect } from "ecCom";
import { Button, message, Modal } from "antd";
import { getTaxAgentRangeForm, getYggxList } from "../../apis/taxAgent";
import { commonEnumList } from "../../apis/ruleconfig";
import { SelectWithAll } from "../../pages/socialSecurityBenefits/standingBookDetail/components/regAddEmployee";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

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

  componentDidMount() {
    const { isTaxgent = true } = this.props;
    if (isTaxgent) {
      this.getTaxAgentRangeForm();
    } else {
      this.commonEnumList().then(r => {
      });
      // 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 });
    }
  }

  commonEnumList = async () => {
    const { data: reslut } = await getYggxList();
    commonEnumList({ enumClass: "com.engine.salary.enums.UserStatusEnum" }).then(({ status, data }) => {
      if (status) {
        const targetTypeList = [
          {
            key: "EMPLOYEE",
            showname: getLabel(30042, "人员"),
            selected: false
          },
          {
            key: "SUBCOMPANY",
            showname: getLabel(33553, "分部"),
            selected: false
          },
          {
            key: "DEPT",
            showname: getLabel(27511, "部门"),
            selected: false
          },
          {
            key: "POSITION",
            showname: getLabel(6086, "岗位"),
            selected: false
          },
          {
            key: "YGGX",
            showname: getLabel(547801, "用工关系"),
            selected: false
          }
        ];
        this.setState({
          targetTypeList,
          employeeStatus: _.map(_.filter(data, o => o.value !== 7), it => ({
            key: it.enum,
            showname: it.defaultLabel
          })),
          yggxOptions: _.map(reslut, it => ({ key: it.id, showname: it.name }))
        });
      }
    });
  };
  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: getLabel(131329, "信息确认"),
        content: getLabel(384146, "必要信息不完整，红色*为必填项！")
      });
      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(getLabel(22619, "保存成功"));
        this.handleReset();
        onSuccess();
        onCancel();
      } else {
        message.error(errormsg || getLabel(22620, "保存失败"));
      }
    }).catch(() => this.setState({ loading: true }));
  };
  renderBrowser = () => {
    const { targetType, targetTypeIds, targetTypeIdsNames } = this.state;
    let browserType = {};
    switch (targetType) {
      case "EMPLOYEE":
        browserType = { ...browserType, type: 17, title: getLabel(82246, "人员选择") };
        break;
      case "DEPT":
        browserType = { ...browserType, type: 57, title: getLabel(82248, "部门选择") };
        break;
      case "SUBCOMPANY":
        browserType = { ...browserType, type: 164, title: getLabel(82247, "分部选择") };
        break;
      case "POSITION":
        browserType = { ...browserType, type: 278, title: getLabel(543490, "岗位选择") };
        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, yggxOptions, targetTypeIds
    } = this.state;
    const buttons = [
      <Button type="primary" onClick={this.handleSubmit} loading={loading}>{getLabel(826, "确定")}</Button>,
      <Button type="ghost" onClick={this.handleReset}>{getLabel(2022, "重置")}</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={getLabel(21956, "对象类型")}
            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 })}
              />
              {
                targetType !== "YGGX" ? this.renderBrowser() :
                  <WeaSelect
                    viewAttr={3} value={targetTypeIds} multiple
                    options={yggxOptions} style={{ width: 200 }}
                    onChange={(targetTypeIds, targetTypeIdsNames) => this.setState({
                      targetTypeIds,
                      targetTypeIdsNames
                    })}
                  />
              }
            </div>
          </WeaFormItem>
          {
            SelectWithAll({
              label: getLabel(543491, "选择员工状态"),
              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;