salary-management-front/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerBackCalcEditSlide.js

/*
 * Author: 黎永顺
 * name: 编辑回算薪资项目
 * Description:
 * Date: 2022/12/13
 */
import React, { Component } from "react";
import { WeaFormItem, WeaInput, WeaSelect, WeaSlideModal, WeaTextarea } from "ecCom";
import { Col, message, Modal, Row } from "antd";
import SlideModalTitle from "../../../components/slideModalTitle";
import { getBackitemForm, salarysobBackitemSave } from "../../../apis/ledger";
import { fieldType, keepDecimalPlaces, roundingRules, valueTaking } from "../config";
import FormalFormModal from "../../salaryItem/formalFormModal";
import "./index.less";

class LedgerBackCalcEditSlide extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      dataType: "",
      formulaContent: "",
      pattern: "",
      roundingMode: "",
      valueType: "",
      salaryItem: [],
      backCalcEditFormulModal: {
        visible: false,
        valueType: "",
        dataType: ""
      }
    };
  }

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

  getBackitemForm = (id) => {
    getBackitemForm({ id }).then(({ status, data }) => {
      if (status) {
        this.setState({ ...data });
      }
    });
  };
  handleChange = (type, value) => {
    this.setState({
      ...this.state,
      [type]: value
    });
  };
  handleSaveBackCalcItems = () => {
    const { salaryItem, loading, backCalcEditFormulModal, ...extra } = this.state;
    const { salaryItemId, editId: salarySobId, onCancle } = this.props;
    if (extra.valueType === "FORMULA" && _.isEmpty(extra.formulaContent)) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return;
    }
    const payload = { ...extra, salarySobId, salaryItemId };
    this.setState({ loading: true });
    salarysobBackitemSave(payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        message.success("保存成功");
        onCancle(true);
      } else {
        message.error(errormsg || "保存失败");
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleEditFormnul = () => {
    const { backCalcEditFormulModal, valueType, dataType } = this.state;
    this.setState({
      backCalcEditFormulModal: {
        ...backCalcEditFormulModal,
        visible: true,
        valueType,
        dataType: _.lowerCase(dataType)
      }
    });
  };
  handleCloseEditFormnul = () => {
    const { backCalcEditFormulModal } = this.state;
    this.setState({
      backCalcEditFormulModal: {
        ...backCalcEditFormulModal,
        visible: false,
        valueType: "",
        dataType: ""
      }
    });
  };

  render() {
    const { title, visible, showOperateBtn, onCancle } = this.props;
    const {
      valueType,
      dataType,
      roundingMode,
      pattern,
      salaryItem = [],
      loading,
      formulaContent,
      backCalcEditFormulModal
    } = this.state;
    const salaryItemName = salaryItem[0] ? salaryItem[0].name : "";
    return (
      <WeaSlideModal
        className="backCalcSlideWrapper"
        visible={visible}
        top={0}
        width={100}
        height={100}
        direction="right"
        measure="%"
        title={
          <SlideModalTitle
            subtitle={title}
            tabs={[]}
            loading={loading}
            showOperateBtn={showOperateBtn}
            editable={true}
            onSave={this.handleSaveBackCalcItems}
          />
        }
        content={
          <div className="backCalcSlideContent">
            <Row>
              <Col span={16} className="backCalcSlideCol">
                <WeaFormItem label="薪资项目" labelCol={{ span: 3 }} wrapperCol={{ span: 12 }}>
                  <WeaInput value={salaryItemName} viewAttr={1}/>
                </WeaFormItem>
                <WeaFormItem label="字段类型" labelCol={{ span: 3 }} wrapperCol={{ span: 12 }}>
                  <WeaSelect options={fieldType} value={dataType} viewAttr={1}/>
                </WeaFormItem>
                <Row gutter={20}>
                  <Col span={12}>
                    <WeaFormItem label="舍入规则" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
                      <WeaSelect
                        options={roundingRules} value={roundingMode} viewAttr={3}
                        onChange={(v) => this.handleChange("roundingMode", v)}
                      />
                    </WeaFormItem>
                  </Col>
                  <Col span={12}>
                    <WeaFormItem label="保留小数位" labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}>
                      <WeaSelect
                        options={keepDecimalPlaces} value={pattern} viewAttr={3}
                        onChange={(v) => this.handleChange("pattern", v)}
                      />
                    </WeaFormItem>
                  </Col>
                </Row>
                <WeaFormItem label="取值方式" labelCol={{ span: 3 }} wrapperCol={{ span: 12 }}>
                  <WeaSelect
                    options={valueTaking} value={valueType} detailtype={3}
                    viewAttr={3}
                    onChange={(v) => this.handleChange("valueType", v)}
                  />
                </WeaFormItem>
                {
                  valueType === "FORMULA" &&
                  <WeaFormItem label="公式内容" labelCol={{ span: 3 }} wrapperCol={{ span: 12 }}>
                    <div className="textareaBox" onClick={this.handleEditFormnul}>
                      <WeaTextarea viewAttr={3} value={formulaContent}/>
                    </div>
                    {/*公式弹框*/}
                    {
                      backCalcEditFormulModal.visible &&
                      <FormalFormModal
                        {...backCalcEditFormulModal}
                        formulaContent={formulaContent}
                        onSaveFormal={data => this.setState({
                          ...this.state,
                          formulaId: data.id,
                          formulaContent: data.formula
                        })}
                        onCancel={this.handleCloseEditFormnul}
                      />
                    }
                  </WeaFormItem>
                }
              </Col>
            </Row>
          </div>
        }
        onClose={onCancle}
      />
    );
  }
}

export default LedgerBackCalcEditSlide;