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

  componentDidMount() {
    this.getTaxAgentSelectListAsAdmin();
  }

  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 { baseForm, settingBaseInfo } = this.state;
    return (
      <div className="baseSettingWrapper">
        <Row gutter={20}>
          <Col span={18} className="baseSettingLeft">
            {
              _.map(baseForm, item => {
                const { key, label, type, options = [], children = [] } = item;
                return <WeaFormItem
                  key={key} label={label}
                  labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}
                >
                  {
                    type === "INPUT" ?
                      <WeaInput value={settingBaseInfo[key]} viewAttr={3}
                                onChange={(v) => this.handleChangeField(key, v)}/> :
                      type === "TEXTAREA" ?
                        <WeaTextarea value={settingBaseInfo[key]} 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}
                                       onChange={(v) => this.handleChangeField(key, v)}/> :
                            type === "CUSTOM" ? <CustomSelect list={children} baseInfo={settingBaseInfo}
                                                              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 } = props;
  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}
                     onChange={(v) => onChange(key, v)}/>
        </Col>;
      })
    }
    <Col span={4} className="desc">111</Col>
  </Row>;
};
const MonthCycleDesc = (props) => {
  const { taxCycleType, socialSecurityCycleType } = 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>2022-12-04至2023-01-03</div>
      <div className="descTitle">税款所属期</div>
      <div className="notice">{getMonth(taxCycleType)}</div>
      <div className="descTitle">考勤取值周期</div>
      <div>2022-12-04至2023-01-03</div>
      <div className="descTitle">福利台账月份</div>
      <div>引用<span className="notice">{getMonth(socialSecurityCycleType)}</span>的福利台账数据</div>
    </div>
  </div>;
};

const getMonth = (salaryCycleType) => {
  switch (salaryCycleType) {
    case "1": // 上上月
      return getSubtractMonthYearMonth(2);
    case "2": //  上月
      return getSubtractMonthYearMonth(1);
    case "3": // 本月
      return getCurrentYearMonth();
    case "4": // 下月
      return getAddMonthYearMonth(1);
  }
};