salary-management-front/pc4mobx/hrmSalary/pages/fieldManagement/components/fieldSlide.js

/*
 * Author: 黎永顺
 * name: 编辑新增字段弹框
 * Description:
 * Date: 2023/1/19
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import {
  WeaCheckbox,
  WeaFormItem,
  WeaHelpfulTip,
  WeaInput,
  WeaInputNumber,
  WeaLocaleProvider,
  WeaSelect,
  WeaSlideModal,
  WeaTextarea
} from "ecCom";
import { message, Modal } from "antd";
import SlideModalTitle from "../../../components/slideModalTitle";
import { getSalaryFieldForm, saveSalaryField } from "../../../apis/fieldManage";
import { commonEnumList } from "../../../apis/payrollFiles";
import { dataTypeOptions, patternOptions, roundingModeOptions } from "../../salaryItem/options";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class FieldSlide extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      name: "",
      useInEmployeeSalary: "1",
      useDefault: "0",
      hideDefault: "0",
      sharedType: "0",
      shareTypeList: [],
      taxAgentIds: "",
      dataType: "number",
      roundingMode: "1",
      pattern: "2",
      sortedIndex: "",
      description: ""
    };
  }

  componentDidMount() {
    const { taxAgentStore } = this.props;
    this.commonEnumList();
    const { fetchTaxAgentOption } = taxAgentStore;
    fetchTaxAgentOption();
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.record.id !== this.props.record.id && nextProps.record.id) {
      this.getSalaryFieldForm(nextProps.record.id);
    }
  }

  getSalaryFieldForm = (id) => {
    getSalaryFieldForm({ id }).then(({ status, data }) => {
      if (status) {
        const { onChangeRecord } = this.props;
        const {
          name,
          useDefault,
          hideDefault,
          useInEmployeeSalary,
          dataType,
          description,
          sortedIndex,
          sharedType,
          roundingMode,
          taxAgentIds,
          pattern
        } = data;
        onChangeRecord(data);
        this.setState({
          name,
          useInEmployeeSalary: useInEmployeeSalary ? useInEmployeeSalary.toString() : "0",
          useDefault: useDefault ? useDefault.toString() : "0",
          hideDefault: hideDefault ? hideDefault.toString() : "0",
          dataType,
          description,
          sortedIndex,
          sharedType: sharedType ? sharedType.toString() : "0",
          roundingMode: roundingMode ? roundingMode.toString() : "0",
          taxAgentIds,
          pattern: pattern ? pattern.toString() : "0"
        });
      }
    });
  };

  /*
   * Author: 黎永顺
   * Description: 获取可见性列表
   * Params:
   * Date: 2023/1/28
   */
  commonEnumList = () => {
    const payload = {
      enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum"
    };
    commonEnumList(payload).then(({ status, data }) => {
      if (status) {
        const result = _.map(data, it => ({
          key: String(it.value),
          showname: it.defaultLabel
        }));
        this.setState({
          shareTypeList: result
        });
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description: 保存字段信息
   * Params:
   * Date: 2022/12/12
   */
  saveFieldInfo = () => {
    if (_.isEmpty(this.state.name) || (this.state.sharedType === "1" && _.isEmpty(this.state.taxAgentIds))) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return false;
    }
    const { onRefreshList, onCancel, record } = this.props;
    const {
      name,
      useDefault,
      hideDefault,
      useInEmployeeSalary,
      dataType,
      description,
      sortedIndex,
      sharedType,
      roundingMode,
      taxAgentIds,
      pattern
    } = this.state;
    const payload = {
      name,
      useInEmployeeSalary: Number(useInEmployeeSalary),
      useDefault: Number(useDefault),
      hideDefault: Number(hideDefault),
      dataType,
      description,
      sortedIndex,
      sharedType,
      roundingMode: Number(roundingMode),
      taxAgentIds,
      pattern: Number(pattern)
    };
    this.setState({ loading: true });
    saveSalaryField({ ...record, ...payload }).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        onRefreshList();
        onCancel();
        this.handleReset();
        message.success("保存成功");
      } else {
        message.error(errormsg || "保存失败");
      }
    }).catch(() => this.setState({ loading: false }));
  };
  /*
   * Author: 黎永顺
   * Description: 字段项修改
   * Params:
   * Date: 2022/12/14
   */
  handleChangeFields = (type, value) => {
    this.setState({ [type]: value });
  };
  handleReset = () => {
    this.setState({
      name: "",
      useInEmployeeSalary: "1",
      useDefault: "0",
      hideDefault: "0",
      sharedType: "0",
      taxAgentIds: "",
      dataType: "number",
      roundingMode: "1",
      pattern: "2",
      sortedIndex: "",
      description: ""
    });
  };

  render() {
    const {
      title,
      visible,
      record: { id: editId },
      taxAgentStore: { taxAgentOption, showSalaryItemBtn, showOperateBtn },
      onCancel
    } = this.props;
    const {
      loading,
      name,
      useInEmployeeSalary,
      useDefault,
      hideDefault,
      shareTypeList,
      sharedType,
      taxAgentIds,
      dataType,
      roundingMode,
      pattern,
      sortedIndex,
      description
    } = this.state;
    return (
      <WeaSlideModal
        className="slideOuterWrapper"
        visible={visible}
        top={0}
        width={50}
        height={100}
        direction="right"
        measure="%"
        title={
          <SlideModalTitle
            subtitle={title}
            tabs={[]}
            loading={loading}
            showOperateBtn={true}
            editable={(showSalaryItemBtn || showOperateBtn)}
            onSave={this.saveFieldInfo}
          />
        }
        content={
          <div className="wea-form-item-group">
            <WeaFormItem label="名称" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaInput viewAttr={3} value={name}
                        onChange={value => this.handleChangeFields("name", value)}/>
            </WeaFormItem>
            {/*{*/}
            {/*  editId &&*/}
            {/*  <WeaFormItem label="薪资档案引用" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>*/}
            {/*    <WeaCheckbox*/}
            {/*      value={useInEmployeeSalary}*/}
            {/*      display="switch"*/}
            {/*      onChange={value => this.handleChangeFields("useInEmployeeSalary", value)}*/}
            {/*    />*/}
            {/*    <WeaHelpfulTip style={{ marginLeft: "10px" }} width={200}*/}
            {/*                   title="提示：开启后，该薪资项目不可删除或设为无效，取值方式会默认置为输入"*/}
            {/*                   placement="topLeft"*/}
            {/*    />*/}
            {/*  </WeaFormItem>*/}
            {/*}*/}
            <WeaFormItem label="默认使用" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaCheckbox
                value={useDefault}
                display="switch"
                onChange={value => this.handleChangeFields("useDefault", value)}
              />
              <WeaHelpfulTip style={{ marginLeft: "10px" }}
                             title="提示：开启后，每个薪资方案都有该薪资项目，可在具体薪资方案中删除"
                             placement="topLeft"
              />
            </WeaFormItem>
            <WeaFormItem label={getLabel(111, "核算时隐藏")} labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaCheckbox
                value={hideDefault}
                display="switch"
                onChange={value => this.handleChangeFields("hideDefault", value)}
              />
              <WeaHelpfulTip style={{ marginLeft: "10px" }}
                             title={getLabel(111, "提示：开启后，在薪资账套中添加该项目时，默认勾选隐藏且在核算时隐藏该薪资项目，可在具体薪资账套中设置是否隐藏")}
                             placement="topLeft"
              />
            </WeaFormItem>
            <WeaFormItem label="可见性" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaSelect
                value={sharedType}
                options={shareTypeList}
                onChange={value => this.handleChangeFields("sharedType", value)}
              />
            </WeaFormItem>
            {
              sharedType === "1" &&
              <WeaFormItem label="可见性范围" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
                <WeaSelect
                  multiple
                  viewAttr={3}
                  value={taxAgentIds}
                  options={taxAgentOption}
                  onChange={value => this.handleChangeFields("taxAgentIds", value)}
                />
              </WeaFormItem>
            }
            <WeaFormItem label="字段类型" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaSelect
                value={dataType}
                options={dataTypeOptions}
                onChange={value => this.handleChangeFields("dataType", value)}
              />
            </WeaFormItem>
            <WeaFormItem label="舍入规则" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaSelect
                value={roundingMode}
                options={roundingModeOptions}
                onChange={value => this.handleChangeFields("roundingMode", value)}
              />
            </WeaFormItem>
            <WeaFormItem label="保留小数位" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaSelect
                value={pattern}
                options={patternOptions}
                onChange={value => this.handleChangeFields("pattern", value)}
              />
            </WeaFormItem>
            <WeaFormItem label="显示顺序" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaInputNumber value={sortedIndex} precision={0}
                              onChange={value => this.handleChangeFields("sortedIndex", value)}/>
            </WeaFormItem>
            <WeaFormItem label="备注" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
              <WeaTextarea
                value={description}
                onChange={value => this.handleChangeFields("description", value)}
              />
            </WeaFormItem>
          </div>
        }
        onClose={() => {
          this.handleReset();
          onCancel();
        }}
      />
    );
  }
}

export default FieldSlide;