salary-management-front/pc4mobx/hrmSalary/pages/payroll/templateBaseSettings.js

/*
 * Author: 黎永顺
 * name: 工资单模板基础设置
 * Description:
 * Date: 2023/6/12
 */
import React, { Component } from "react";
import {
  WeaCheckbox,
  WeaFormItem,
  WeaHelpfulTip,
  WeaInput,
  WeaInputNumber,
  WeaLocaleProvider,
  WeaSearchGroup,
  WeaSelect
} from "ecCom";
import { message, Modal } from "antd";
import { getSalaryBillBaseSetForm, salaryBillBaseSetSave } from "../../apis/payroll";
import WaterMarkSetModal from "./components/waterMarkSetModal";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class TemplateBaseSettings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      watermarkStatus: "0",
      watermark: "DEFAULT",
      wmSetting: null,
      watermarkSet: {
        visible: false, watermarkSetting: null
      },
      ackFeedbackSetting: {
        ackStatus: "0",
        feedbackStatus: "0",
        autoAckDays: 7,
        feedBackUrl: "",
        mobileFeedbackUrl: ""
      },
      salaryBillViewingLimitSetting: {
        limitMonth: 0, burningAfterReadingMin: null
      }
    };
  }

  componentDidMount() {
    this.getSalaryBillBaseSetForm();
  }

  getSalaryBillBaseSetForm = () => {
    const { watermarkSet } = this.state;
    getSalaryBillBaseSetForm().then(({ status, data }) => {
      if (status) {
        const {
          watermarkStatus, watermark = "DEFAULT", watermarkSetting,
          ackFeedbackSetting, salaryBillViewingLimitSetting = {}
        } = data;
        this.setState({
          watermark, watermarkStatus: watermarkStatus ? "1" : "0", ackFeedbackSetting, salaryBillViewingLimitSetting,
          wmSetting: { wmSetting: watermarkSetting },
          watermarkSet: {
            ...watermarkSet,
            watermarkSetting
          }
        }, () => window.localStorage.setItem("wmSetting", JSON.stringify({ wmSetting: watermarkSetting })));
      }
    });
  };
  salaryBillBaseSetSave = () => {
    const { watermark, watermarkStatus, wmSetting, ackFeedbackSetting, salaryBillViewingLimitSetting } = this.state;
    const { feedBackUrl, mobileFeedbackUrl, feedbackStatus, autoAckDays, ackStatus } = ackFeedbackSetting;
    if (ackStatus === "1" && _.isNil(autoAckDays)) {
      Modal.warning({
        title: getLabel(111, "信息确认"),
        content: getLabel(111, "必要信息不完整，红色*为必填项！")
      });
      return;
    }
    if (feedbackStatus === "1" && (!feedBackUrl || !mobileFeedbackUrl)) {
      Modal.warning({
        title: getLabel(111, "信息确认"),
        content: getLabel(111, "必要信息不完整，红色*为必填项！")
      });
      return;
    }
    let payload = {
      watermarkStatus: watermarkStatus === "1", ackFeedbackSetting: { ...ackFeedbackSetting },
      salaryBillViewingLimitSetting: { ...salaryBillViewingLimitSetting }
    };
    if (watermarkStatus === "1") payload = { ...payload, watermark };
    if (!_.isNil(wmSetting)) payload = { ...payload, watermark, ...wmSetting };
    this.props.onChangeLoading(true);
    salaryBillBaseSetSave(payload).then(({ status, errormsg }) => {
      this.props.onChangeLoading(false);
      if (status) {
        message.success(getLabel(111, "保存成功"));
        this.getSalaryBillBaseSetForm();
      } else {
        message.error(errormsg || getLabel(111, "保存失败"));
      }
    }).catch(() => this.props.onChangeLoading(false));
  };

  render() {
    const { watermarkStatus, watermark, watermarkSet, ackFeedbackSetting, salaryBillViewingLimitSetting } = this.state;
    const { ackStatus, feedbackStatus, autoAckDays, feedBackUrl, mobileFeedbackUrl } = ackFeedbackSetting;
    const { monthType = "SALARY_DATE", limitMonth, burningAfterReadingMin } = salaryBillViewingLimitSetting;
    return (
      <React.Fragment>
        <WeaSearchGroup title={getLabel(111, "水印设置")} showGroup needTigger className="waterMarkWrapper">
          <WeaFormItem label={getLabel(111, "启用水印")} labelCol={{ span: 2 }} wrapperCol={{ span: 4 }}>
            <WeaCheckbox value={watermarkStatus} display="switch"
                         onChange={watermarkStatus => this.setState({ watermarkStatus, watermark: "DEFAULT" })}/>
          </WeaFormItem>
          {
            watermarkStatus === "1" &&
            <WeaFormItem label={getLabel(111, "水印类型")} labelCol={{ span: 2 }} wrapperCol={{ span: 4 }}>
              <WeaSelect
                value={watermark}
                options={[
                  { key: "DEFAULT", showname: getLabel(111, "系统默认水印") },
                  { key: "CUSTOM", showname: getLabel(111, "自定义水印") }
                ]}
                onChange={watermark => this.setState({ watermark })}
              />
              {
                watermark === "CUSTOM" &&
                <span className="waterMarkTitle" onClick={() => this.setState({
                  watermarkSet: {
                    ...watermarkSet,
                    visible: true
                  }
                })}>{getLabel(111, "水印设置")}</span>
              }
              <WaterMarkSetModal {...watermarkSet}
                                 onClose={() => this.setState({ watermarkSet: { ...watermarkSet, visible: false } })}
                                 onChange={wmSetting => this.setState({ wmSetting })}
              />
            </WeaFormItem>
          }
        </WeaSearchGroup>
        <WeaSearchGroup title={getLabel(111, "工资单确认反馈设置")} showGroup needTigger className="waterMarkWrapper">
          <WeaFormItem label={getLabel(111, "启用工资单确认")} labelCol={{ span: 2 }} wrapperCol={{ span: 4 }}>
            <WeaCheckbox value={ackStatus} display="switch"
                         onChange={ackStatus => this.setState({
                           ackFeedbackSetting: {
                             ...ackFeedbackSetting, ackStatus, autoAckDays: 7
                           }
                         })}/>
          </WeaFormItem>
          {
            ackStatus === "1" &&
            <React.Fragment>
              <WeaFormItem label={getLabel(111, "自动确认超时天数")} labelCol={{ span: 2 }} wrapperCol={{ span: 4 }}>
                <WeaInputNumber
                  min={1} value={autoAckDays} viewAttr={3}
                  style={{ width: "90%" }}
                  onChange={autoAckDays => this.setState({
                    ackFeedbackSetting: {
                      ...ackFeedbackSetting, autoAckDays
                    }
                  })}/>
                <WeaHelpfulTip
                  title={getLabel(111, "开启后，还需在计划任务中配置定时任务，执行自动确认任务；邮箱端查看工资单暂不支持确认及反馈；")}
                  style={{ marginLeft: 5 }}
                  placement="top" width={200}/>
              </WeaFormItem>
            </React.Fragment>
          }
          <WeaFormItem label={getLabel(111, "启用工资单反馈")} labelCol={{ span: 2 }} wrapperCol={{ span: 4 }}>
            <WeaCheckbox value={feedbackStatus} display="switch"
                         onChange={feedbackStatus => this.setState({
                           ackFeedbackSetting: {
                             ...ackFeedbackSetting, feedbackStatus
                           }
                         })}/>
          </WeaFormItem>
          {
            feedbackStatus === "1" &&
            <React.Fragment>
              <WeaFormItem label={getLabel(111, "PC端反馈流程地址")} labelCol={{ span: 2 }} wrapperCol={{ span: 4 }}>
                <WeaInput
                  value={feedBackUrl} viewAttr={3}
                  onChange={feedBackUrl => this.setState({
                    ackFeedbackSetting: {
                      ...ackFeedbackSetting, feedBackUrl
                    }
                  })}/>
              </WeaFormItem>
              <WeaFormItem label={getLabel(111, "移动端反馈流程地址")} labelCol={{ span: 2 }} wrapperCol={{ span: 4 }}>
                <WeaInput
                  value={mobileFeedbackUrl} viewAttr={3}
                  onChange={mobileFeedbackUrl => this.setState({
                    ackFeedbackSetting: {
                      ...ackFeedbackSetting, mobileFeedbackUrl
                    }
                  })}/>
              </WeaFormItem>
            </React.Fragment>
          }
        </WeaSearchGroup>
        <WeaSearchGroup title={getLabel(111, "工资单时效设置")} showGroup needTigger className="waterMarkWrapper">
          <div className="agingBox">
            <span>{getLabel(111, "仅可查看")}</span>
            <WeaSelect
              value={monthType} onChange={monthType => this.setState({
              salaryBillViewingLimitSetting: { ...salaryBillViewingLimitSetting, monthType }
            })}
              options={[
                { key: "SALARY_DATE", showname: getLabel(111, "薪资所属月"), selected: true },
                { key: "SEND_DATE", showname: getLabel(111, "发放日期") }
              ]}/>
            <WeaInputNumber min={0} value={limitMonth}
                            onChange={limitMonth => this.setState({
                              salaryBillViewingLimitSetting: {
                                ...salaryBillViewingLimitSetting, limitMonth
                              }
                            })}/>
            <span>{getLabel(111, "个月内的工资单")}</span>
            <WeaHelpfulTip
              title={getLabel(111, "0表示不控制！")}
              style={{ marginLeft: 10 }}
              placement="top"/>
          </div>
          <div className="agingBox">
            <span>{getLabel(111, "首次查看")}</span>
            <WeaInputNumber min={0} value={burningAfterReadingMin}
                            onChange={burningAfterReadingMin => this.setState({
                              salaryBillViewingLimitSetting: {
                                ...salaryBillViewingLimitSetting, burningAfterReadingMin
                              }
                            })}/>
            <span>{getLabel(111, "分钟后无法查看工资单")}</span>
            <WeaHelpfulTip
              title={getLabel(111, "空代表不控制，0代表只能查看一次工资单！设置后对所有工资单（包含已发工资单）立即生效！")}
              style={{ marginLeft: 10 }}
              placement="top"/>
          </div>
        </WeaSearchGroup>
      </React.Fragment>
    );
  }
}

export default TemplateBaseSettings;