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 { getAddMonthYearMonth, getCurrentYearMonth, getSubtractMonthYearMonth } from "../../../util/date";
import moment from "moment";
import "./index.less";

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

  componentDidMount() {
    this.getTaxAgentSelectListAsAdmin();
    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) {
        const { baseForm } = this.state;
        this.setState({
          baseForm: _.map(baseForm, it => {
            if (it.key === "taxAgentId") {
              return {
                ...it,
                options: _.map(data, it => ({ key: it.id, showname: it.content }))
              };
            }
            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 } = 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" && 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={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 { salaryCycleType, salaryCycleFromDay, attendCycleType, attendCycleFromDay, canEdit } = baseInfo;
  const salaryCycleStrObj = initPeriodStr("inputStr", salaryCycleType, salaryCycleFromDay);
  const attendCycleStrObj = initPeriodStr("inputStr", attendCycleType, attendCycleFromDay);
  return <Row gutter={10} key={key}>
    {
      _.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" ? salaryCycleStrObj.inputStr : attendCycleStrObj.inputStr}</Col>
  </Row>;
};
const MonthCycleDesc = (props) => {
  const {
    taxCycleType,
    socialSecurityCycleType,
    salaryCycleFromDay,
    salaryCycleType,
    attendCycleType,
    attendCycleFromDay
  } = props;
  const salaryCycleStrObj = initPeriodStr("salaryCycleStr", salaryCycleType, salaryCycleFromDay);
  const attendCycleStrObj = initPeriodStr("attendCycleStr", attendCycleType, attendCycleFromDay);
  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">{getStartDate(salaryCycleType, salaryCycleFromDay)}</span>至
        <span className="notice">{salaryCycleStrObj.date}</span>
      </div>
      <div className="descTitle">税款所属期</div>
      <div className="notice">{getMonth(taxCycleType)}</div>
      <div className="descTitle">考勤取值周期</div>
      <div>
        <span className="notice">{getStartDate(attendCycleType, attendCycleFromDay)}</span>至
        <span className="notice">{attendCycleStrObj.date}</span>
      </div>
      <div className="descTitle">福利台账月份</div>
      <div>引用<span className="notice">{getMonth(socialSecurityCycleType)}</span>的福利台账数据</div>
    </div>
  </div>;
};

// 获取开始日期
const getStartDate = (salaryCycleType, day) => {
  day = Number(day);
  return getMonth(salaryCycleType) + "-" + (day < 10 ? "0" + day : day);
};

const getMonth = (salaryCycleType) => {
  switch (salaryCycleType) {
    case "1": // 上上月
      return getSubtractMonthYearMonth(2);
    case "2": //  上月
      return getSubtractMonthYearMonth(1);
    case "3": // 本月
      return getCurrentYearMonth();
    case "4": // 下月
      return getAddMonthYearMonth(1);
  }
};
const initPeriodStr = (periodStrType, types, fromDay) => {
  let str = "", tmpDate = null;
  switch (types) {
    case "1":
      tmpDate = moment().subtract(2, "month");
      const is_31H = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
      if (fromDay == 1) {
        tmpDate = moment().subtract(2, "month").endOf("month");
        str = `至上上月最后一天`;
      } else {
        tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
          .add(is_31H ? 30 : 29, "days");
        str = `至上月${moment(tmpDate).date()}号`;
      }
      break;
    case "2":
      tmpDate = moment().subtract(1, "month");
      const is_31 = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
      if (fromDay == 1) {
        tmpDate = moment().subtract(1, "month").endOf("month");
        str = `至上月最后一天`;
      } else {
        tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
          .add(is_31 ? 30 : 29, "days");
        str = `至本月${moment(tmpDate).date()}号`;
      }
      break;
    case "3":
      tmpDate = moment().add(0, "month");
      const is_31K = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
      if (fromDay == 1) {
        tmpDate = moment().endOf("month");
        str = `至本月最后一天`;
      } else {
        tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
          .add(is_31K ? 30 : 29, "days");
        str = `至下月${moment(tmpDate).date()}号`;
      }
      break;
    case "4":
      tmpDate = moment().add(1, "month");
      const is_31L = moment(tmpDate, "YYYY-MM").daysInMonth() === 31;
      if (fromDay == 1) {
        tmpDate = moment().add(1, "month").endOf("month");
        str = `至下月最后一天`;
      } else {
        tmpDate = moment(new Date(`${moment(tmpDate).format("YYYY-MM")}-0${fromDay}`))
          .add(is_31L ? 30 : 29, "days");
        str = `至下下月${moment(tmpDate).date()}号`;
      }
      break;
    default:
      break;
  }
  return {
    [periodStrType]: str,
    date: moment(tmpDate).format("YYYY-MM-DD")
  };
};