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

/*
 * Author: 黎永顺
 * name: 薪资账套基本设置
 * Description:
 * Date: 2022/12/9
 */
import React, { Component } from "react";
import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaInput, WeaSelect, WeaTextarea } from "ecCom";
import { Col, Row } from "antd";
import { inject, observer } from "mobx-react";
import { baseSettingFormItem } from "../config";
import { getLedgerBasicForm } from "../../../apis/ledger";
import {
  generateBasicInfo,
  getAddMonthYearMonth,
  getCurrentYearMonth,
  getMonthDays,
  getSubtractMonthYearMonth,
  prefixAddZero
} from "../../../util/date";
import { commonEnumList } from "../../../apis/ruleconfig";
import moment from "moment";
import "./index.less";

@inject("taxAgentStore")
@observer
class LedgerBaseSetting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      baseForm: [],
      settingBaseInfo: {
        name: "",
        taxAgentId: "",
        taxableItems: "1",
        salaryCycleType: "3",
        salaryCycleFromDay: "1",
        taxCycleType: "3",
        attendCycleType: "3",
        attendCycleFromDay: "1",
        socialSecurityCycleType: "3",
        description: "",
        canEdit: false
      }
    };
  }

  componentWillMount() {
    this.getTaxAgentSelectListAsAdmin();
  }

  componentDidMount() {
    // this.getTaxAgentSelectListAsAdmin();
    // this.commonEenumList();
    if (this.props.visible && this.props.editId) {
      this.getLedgerBasicForm(this.props.editId);
    }
  }

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

  handleResetBaseInfo = () => {
    this.setState({
      settingBaseInfo: {
        name: "",
        taxAgentId: "",
        taxableItems: "1",
        salaryCycleType: "3",
        salaryCycleFromDay: "1",
        taxCycleType: "3",
        attendCycleType: "3",
        attendCycleFromDay: "1",
        socialSecurityCycleType: "3",
        description: "",
        canEdit: "true"
      }
    });
  };
  getLedgerBasicForm = (id) => {
    getLedgerBasicForm({ id }).then(({ status, data }) => {
      if (status) {
        const { basicForm } = data;
        const { settingBaseInfo } = this.state;
        let tmpV = {};
        _.map(Object.keys(settingBaseInfo), key => {
          tmpV[key] = !_.isNil(basicForm[key]) ? basicForm[key].toString() : "";
        });
        this.setState({
          settingBaseInfo: {
            ...settingBaseInfo,
            ...tmpV
          }
        }, () => {
          this.props.onSaveParams(this.state.settingBaseInfo);
        });
      }
    });
  };
  getTaxAgentSelectListAsAdmin = () => {
    const { taxAgentStore } = this.props;
    const { getTaxAgentSelectListAsAdmin } = taxAgentStore;
    getTaxAgentSelectListAsAdmin().then(({ status, data }) => {
      if (status) {
        this.setState({
          baseForm: _.map(baseSettingFormItem, it => {
            if (it.key === "taxAgentId") {
              return {
                ...it,
                options: _.map(data, it => ({ key: it.id, showname: it.content }))
              };
            }
            return { ...it };
          })
        }, () => this.commonEenumList());
      }
    });
  };
  commonEenumList = () => {
    const payload = {
      enumClass: "com.engine.salary.enums.salarysob.IncomeCategoryEnum"
    };
    commonEnumList(payload).then(({ status, data }) => {
      if (status) {
        const { baseForm } = this.state;
        this.setState({
          baseForm: _.map(baseForm, it => {
            if (it.key === "taxableItems") {
              return {
                ...it,
                options: _.map(data, it => ({ key: it.value.toString(), showname: it.defaultLabel }))
              };
            }
            return { ...it };
          })
        });
      }
    });
  };
  handleChangeField = (key, value) => {
    const { onSaveParams } = this.props;
    const { settingBaseInfo } = this.state;
    this.setState({
      settingBaseInfo: {
        ...settingBaseInfo,
        [key]: value
      }
    }, () => {
      onSaveParams(this.state.settingBaseInfo);
    });
  };

  render() {
    const { editId, taxAgentStore: { taxAgentOption } } = this.props;
    const { baseForm, settingBaseInfo } = this.state;
    const { canEdit, taxAgentId } = settingBaseInfo;
    let taxAgentIdDisabled = false, taxableItemsDisabled = false;
    return (
      <div className="baseSettingWrapper">
        <Row gutter={20}>
          <Col span={18} className="baseSettingLeft">
            {
              _.map(baseForm, item => {
                const { key, label, type, options = [], children = [] } = item;
                taxAgentIdDisabled = key === "taxAgentId" && editId && taxAgentId;
                taxableItemsDisabled = key === "taxableItems" && editId;
                return <WeaFormItem
                  key={key} label={label}
                  labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}
                >
                  {
                    type === "INPUT" ?
                      <WeaInput value={settingBaseInfo[key]} viewAttr={3} disabled={canEdit !== "true"}
                                onChange={(v) => this.handleChangeField(key, v)}/> :
                      type === "TEXTAREA" ?
                        <WeaTextarea value={settingBaseInfo[key]} disabled={canEdit !== "true"}
                                     onChange={(v) => this.handleChangeField(key, v)}/> :
                        type === "CHECKBOX" ?
                          <React.Fragment>
                            <WeaCheckbox value={true} viewAttr={1}
                                         content="【起薪日期≤薪资周期止】且【最后发薪日期≥薪资周期起】"/>
                            <WeaHelpfulTip width={200} title="提示：最后发薪日期为空，默认为无穷大" placement="topLeft"/>
                          </React.Fragment> :
                          type === "SELECT" ?
                            <WeaSelect value={settingBaseInfo[key]}
                                       options={((canEdit !== "true" || taxAgentIdDisabled || taxableItemsDisabled) && key === "taxAgentId") ? taxAgentOption : options}
                                       viewAttr={3}
                                       disabled={canEdit !== "true" || taxAgentIdDisabled || taxableItemsDisabled}
                                       onChange={(v) => this.handleChangeField(key, v)}/> :
                            type === "CUSTOM" ?
                              <CustomSelect list={children} baseInfo={settingBaseInfo} inputStr={key}
                                            onChange={(key, v) => this.handleChangeField(key, v)}/> : null
                  }
                </WeaFormItem>;
              })
            }
          </Col>
          <Col span={6}><MonthCycleDesc {...settingBaseInfo}/></Col>
        </Row>
      </div>
    );
  }
}

export default LedgerBaseSetting;

const CustomSelect = (props) => {
  const { list, baseInfo, onChange, inputStr } = props;
  const { canEdit } = baseInfo;
  const selectInfo = buildEditBasicInfo(baseInfo);
  return <Row gutter={10} key={inputStr}>
    {
      _.map(list, item => {
        const { key, options = [] } = item;
        return <Col span={6}>
          <WeaSelect value={baseInfo[key]} options={options} viewAttr={3}
                     disabled={canEdit !== "true"}
                     onChange={(v) => onChange(key, v)}/>
        </Col>;
      })
    }
    <Col span={12}
         className="desc">{inputStr === "salaryCycleStrObj" ? selectInfo.salaryCycleInfo.salaryPeriodTip : selectInfo.attendCycleInfo.attendancePeriodTip}</Col>
  </Row>;
};
const MonthCycleDesc = (props) => {
  const { taxCycleType, socialSecurityCycleType } = props;
  const selectInfo = buildEditBasicInfo({ ...props });
  return <div className="baseSettingRight">
    <div className="title">月份周期说明</div>
    <div className="descContent">
      <div>
        例：薪资所属月是<span className="notice">{moment().format("YYYY-MM")}</span>（即核算员工<span
        className="notice">{moment().format("MM")}</span>月的工资）
      </div>
      <div>根据您当前的选择，相应的周期为：</div>
      <div className="descTitle">薪资周期</div>
      <div>
        <span className="notice">{selectInfo.salaryCycleInfo.salaryPeriodStart}</span>至
        <span className="notice">{selectInfo.salaryCycleInfo.salaryPeriodEnd}</span>
      </div>
      <div className="descTitle">税款所属期</div>
      <div className="notice">{getMonth(taxCycleType)}</div>
      <div className="descTitle">考勤取值周期</div>
      <div>
        <span className="notice">{selectInfo.attendCycleInfo.attendancePeriodStart}</span>至
        <span className="notice">{selectInfo.attendCycleInfo.attendancePeriodEnd}</span>
      </div>
      <div className="descTitle">福利台账月份</div>
      <div>引用<span className="notice">{getMonth(socialSecurityCycleType)}</span>的福利台账数据</div>
    </div>
  </div>;
};
const buildEditBasicInfo = (editBasicInfo) => {
  const { attendCycleType, salaryCycleType } = editBasicInfo;
  const now = new Date();
  let nowYear = now.getFullYear();
  let nowMonth = now.getMonth() + 1;
  let tmpV = {};
  // 薪资联动
  switch (salaryCycleType) {
    case "1" :
      tmpV["salaryCycleInfo"] = buildSalaryInfo(editBasicInfo, -2, nowYear, nowMonth);
      break;
    case "2" :
      tmpV["salaryCycleInfo"] = buildSalaryInfo(editBasicInfo, -1, nowYear, nowMonth);
      break;
    case "3" :
      tmpV["salaryCycleInfo"] = buildSalaryInfo(editBasicInfo, 0, nowYear, nowMonth);
      break;
    case "4" :
      tmpV["salaryCycleInfo"] = buildSalaryInfo(editBasicInfo, 1, nowYear, nowMonth);
      break;
  }
  // 考勤联动
  switch (attendCycleType) {
    case "1" :
      tmpV["attendCycleInfo"] = buildAttendanceInfo(editBasicInfo, -2, nowYear, nowMonth);
      break;
    case "2" :
      tmpV["attendCycleInfo"] = buildAttendanceInfo(editBasicInfo, -1, nowYear, nowMonth);
      break;
    case "3" :
      tmpV["attendCycleInfo"] = buildAttendanceInfo(editBasicInfo, 0, nowYear, nowMonth);
      break;
    case "4" :
      tmpV["attendCycleInfo"] = buildAttendanceInfo(editBasicInfo, 1, nowYear, nowMonth);
      break;
  }
  return tmpV;
};
/*
 * Author: 黎永顺
 * Description:构建薪资周期联动信息
 * Params:
 * Date: 2023/4/17
 */
const buildSalaryInfo = (editBasicInfo, monthCal, nowYear, nowMonth) => {
  const { salaryCycleFromDay } = editBasicInfo;
  let salaryCycleFromDayNum = Number(salaryCycleFromDay), customInfo = {};
  const basicInfo = generateBasicInfo(monthCal, nowYear, nowMonth);
  const { nowMonthStr, nextMonthStr, year, month } = basicInfo;
  customInfo.salaryYear = year;
  customInfo.salaryMonth = month;

  if (salaryCycleFromDayNum === 1) {
    customInfo.salaryPeriodTip = "至" + nowMonthStr + "最后一天";
    customInfo.salaryPeriodStart = customInfo.salaryYear + "-"
      + prefixAddZero(customInfo.salaryMonth, 2) + "-01";
    customInfo.salaryPeriodEnd = customInfo.salaryYear + "-"
      + prefixAddZero(customInfo.salaryMonth, 2) + "-"
      + prefixAddZero(getMonthDays(customInfo.salaryYear, customInfo.salaryMonth), 2);
  } else {
    customInfo.salaryPeriodTip = "至" + nextMonthStr + (salaryCycleFromDayNum - 1) + "号";
    customInfo.salaryPeriodStart = customInfo.salaryYear + "-"
      + prefixAddZero(customInfo.salaryMonth, 2) + "-" + prefixAddZero(salaryCycleFromDayNum, 2);
    let year = customInfo.salaryYear;
    let month = customInfo.salaryMonth;
    if (month === "12") {
      year = Number(year) + 1;
      month = 1;
    } else {
      month = Number(month) + 1;
    }
    customInfo.salaryPeriodEnd = year + "-"
      + prefixAddZero(month, 2) + "-"
      + prefixAddZero(salaryCycleFromDayNum - 1, 2);
  }
  return customInfo;
};
const buildAttendanceInfo = (editBasicInfo, monthCal, nowYear, nowMonth) => {
  const { attendCycleFromDay } = editBasicInfo;
  let attendCycleFromDayNum = Number(attendCycleFromDay), customInfo = {};

  const basicInfo = generateBasicInfo(monthCal, nowYear, nowMonth);
  const { nowMonthStr, nextMonthStr } = basicInfo;
  let year = basicInfo.year;
  let month = basicInfo.month;

  if (attendCycleFromDayNum === 1) {
    customInfo.attendancePeriodTip = "至" + nowMonthStr + "最后一天";

    customInfo.attendancePeriodStart = year + "-"
      + prefixAddZero(month, 2) + "-01";
    customInfo.attendancePeriodEnd = year + "-"
      + prefixAddZero(month, 2) + "-"
      + prefixAddZero(getMonthDays(year, month), 2);
  } else {
    customInfo.attendancePeriodTip = "至" + nextMonthStr + (attendCycleFromDayNum - 1) + "号";
    customInfo.attendancePeriodStart = year + "-"
      + prefixAddZero(month, 2) + "-" + prefixAddZero(attendCycleFromDayNum, 2);
    if (month === "12") {
      year = (Number(year) + 1).toString();
      month = "1";
    } else {
      month = (Number(month) + 1).toString();
    }
    customInfo.attendancePeriodEnd = year + "-"
      + prefixAddZero(month, 2) + "-"
      + prefixAddZero(attendCycleFromDayNum - 1, 2);
  }
  return customInfo;
};
const getMonth = (salaryCycleType) => {
  switch (salaryCycleType) {
    case "1": // 上上月
      return getSubtractMonthYearMonth(2);
    case "2": //  上月
      return getSubtractMonthYearMonth(1);
    case "3": // 本月
      return getCurrentYearMonth();
    case "4": // 下月
      return getAddMonthYearMonth(1);
  }
};