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, 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";

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

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

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

  getSalaryFieldForm = (id) => {
    getSalaryFieldForm({ id }).then(({ status, data }) => {
      if (status) {
        const { name, useDefault, dataType, description, sharedType, roundingMode, taxAgentIds, pattern } = data;
        this.setState({
          name,
          useDefault: useDefault ? useDefault.toString() : "0",
          dataType,
          description,
          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: [{
            key: "",
            showname: ""
          }, ...result]
        });
      }
    });
  };
  /*
   * Author: 黎永顺
   * Description: 保存字段信息
   * Params:
   * Date: 2022/12/12
   */
  saveFieldInfo = () => {
    if (_.isEmpty(this.state.name)) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return false;
    }
    const { onRefreshList, onCancel, editId } = this.props;
    const { name, useDefault, dataType, description, sharedType, roundingMode, taxAgentIds, pattern } = this.state;
    const payload = {
      name,
      useDefault: Number(useDefault),
      dataType,
      description,
      sharedType,
      roundingMode: Number(roundingMode),
      taxAgentIds,
      pattern: Number(pattern)
    };
    this.setState({ loading: true });
    saveSalaryField({ ...payload, id: editId }).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: "",
      useDefault: "",
      sharedType: "",
      taxAgentIds: "",
      dataType: "number",
      roundingMode: "",
      pattern: "2",
      description: ""
    });
  };

  render() {
    const { title, visible, taxAgentStore: { showOperateBtn, taxAgentAdminOption }, onCancel } = this.props;
    const {
      loading,
      name,
      useDefault,
      shareTypeList,
      sharedType,
      taxAgentIds,
      dataType,
      roundingMode,
      pattern,
      description
    } = this.state;
    return (
      <WeaSlideModal
        className="slideOuterWrapper"
        visible={visible}
        top={0}
        width={55}
        height={100}
        direction="right"
        measure="%"
        title={
          <SlideModalTitle
            subtitle={title}
            tabs={[]}
            loading={loading}
            showOperateBtn={showOperateBtn}
            editable={true}
            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>
            <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="可见性" 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={taxAgentAdminOption}
                  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 }}>
              <WeaTextarea
                value={description}
                onChange={value => this.handleChangeFields("description", value)}
              />
            </WeaFormItem>
          </div>
        }
        onClose={() => {
          this.handleReset();
          onCancel();
        }}
      />
    );
  }
}

export default FieldSlide;