feature/2.9.42310.01-工资单发放页面重构

2023-10-18 17:12:44 +08:00 · 2023-10-18 17:12:44 +08:00 · dadb749c4c
parent 55c6fd80be
commit dadb749c4c
11 changed files with 298 additions and 54 deletions
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.js
@ -0,0 +1,24 @@
+import React, { Component } from "react";
+import { toJS } from "mobx";
+import "./index.less";
+
+class Index extends Component {
+  componentDidMount() {
+    const { store: { tmplDataSource } } = this.props;
+    console.log(toJS(tmplDataSource));
+  }
+
+  render() {
+    return (
+      <div className="pbpc-content">
+        <div className="weapp-salary-sp weapp-salary-payroll-pc-preview">
+          <div className="salary-preview-container">
+            <div className="edition-center"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Index;
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.less
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.less
@ -0,0 +1,32 @@
+.pbpc-content {
+  height: 100%;
+  border: 1px solid #e5e5e5;
+  overflow-y: auto;
+
+  .weapp-salary-sp {
+    background: #f6f6f6;
+
+    .salary-preview-container {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: column;
+      width: 100%;
+
+      .edition-center {
+        max-width: 1000px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        padding-bottom: 32px;
+      }
+    }
+  }
+
+  .weapp-salary-payroll-pc-preview {
+    padding: 32px 0;
+    height: 100%;
+    overflow-y: auto;
+  }
+}
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@ -18,7 +18,7 @@ import Ledger from "./pages/ledgerPage";
 // import Calculate from "./pages/calculate";
 import Calculate from "./pages/calculate/calculate"; //重构的薪资核算页面
 // import Payroll from "./pages/payroll";
-import Payroll from "./pages/payrollRelease";//重构的工资单发放页面
+import Payroll from "./pages/payrollRelease"; //重构的工资单发放页面
 import PayrollGrant from "./pages/payroll/payrollGrant";
 import PayrollDetail from "./pages/payroll/payrollDetail";
 import Declare from "./pages/declare";
@ -31,6 +31,7 @@ import DoCalcDetail from "./pages/calculate/doCalc";
 import OfflineCompare from "./pages/calculate/calcOc";
 import GenerateDeclarationDetail from "./pages/declare/generateDeclarationDetail";
 import TemplatePreview from "./pages/payroll/templatePreview";
+import PayrollTemplatePreview from "./pages/payroll/templatePreview/tmpPreview"; //重构的工资单模板预览页面
 import MobilePayroll from "./pages/mobilePayroll";
 import SysConfig from "./pages/sysConfig";
 import RuleConfig from "./pages/ruleConfig";
@ -144,11 +145,8 @@ const Routes = (
    <Route key="watermarkPreview" path="payroll/watermark/preview" component={WatermarkPreview}/>
    <Route key="payrollGrant" path="payrollGrant" component={PayrollGrant}/>
    <Route key="payrollDetail" path="payrollDetail" component={PayrollDetail}/>
-    <Route
-      key="templatePreview"
-      path="templatePreview"
-      component={TemplatePreview}
-    />
+    <Route key="templatePreview" path="templatePreview" component={TemplatePreview}/>
+    <Route key="payrollinfo" path="payrollinfo" component={PayrollTemplatePreview}/>
    <Route key="declare" path="declare" component={Declare}/>
    <Route
      key="generateDeclarationDetail"
--- a/pc4mobx/hrmSalary/pages/payroll/templatePreview/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/templatePreview/index.less
@ -152,3 +152,58 @@
    }
  }
 }
+
+//工资单发放-重构页面-工资单模板预览
+.salary-payroll-preview {
+  width: 100%;
+  height: 100%;
+  background: #f6f6f6;
+  display: flex;
+  flex-direction: column;
+
+  .p-header {
+    height: 50px;
+    background-color: #0470C1;
+
+    .ph-switch {
+      height: 100%;
+      margin: 0 auto;
+      text-align: center;
+
+      .active, .phs-btn:hover {
+        background-color: rgba(0, 0, 0, .15);
+        transition: all .15s linear;
+      }
+
+      .phs-btn {
+        height: 50px;
+        min-width: 88px;
+        line-height: 50px;
+        display: inline-block;
+        color: #fff;
+        padding: 0 15px;
+        cursor: pointer;
+
+        img {
+          width: 28px
+        }
+      }
+    }
+  }
+
+  .p-body {
+    flex: 1;
+    overflow-y: auto;
+
+    .pb-pc-container {
+      width: 800px;
+      height: calc(100% - 40px);
+      margin: 20px auto;
+      padding: 10px;
+      background-color: #fff;
+      box-shadow: 0 0 14px 0 hsla(0, 0%, 84%, .5);
+      border-radius: 5px;
+    }
+  }
+}
+
--- a/pc4mobx/hrmSalary/pages/payroll/templatePreview/tmpPreview.js
+++ b/pc4mobx/hrmSalary/pages/payroll/templatePreview/tmpPreview.js
@ -0,0 +1,54 @@
+/*
+ * Author: 黎永顺
+ * name:工资单发放-重构页面-工资单模板预览
+ * Description:
+ * Date: 2023/10/18
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import computer from "./computer.png";
+import phone from "./phone_new.png";
+import PcTemplate from "../../../components/pcTemplate";
+import cs from "classnames";
+import "./index.less";
+
+@inject("payrollStore")
+@observer
+class TmpPreview extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      active: "0",
+      phsImgList: [
+        { key: "0", src: computer },
+        { key: "1", src: phone }
+      ]
+    };
+  }
+
+  render() {
+    const { phsImgList, active } = this.state;
+    return (
+      <div className="salary-payroll-preview">
+        <div className="p-header">
+          <div className="ph-switch">
+            {
+              _.map(phsImgList, o => (
+                <div className={cs("phs-btn", { "active": active === o.key })}
+                     onClick={() => this.setState({ active: o.key })}><img src={o.src} alt=""/>
+                </div>))
+            }
+          </div>
+        </div>
+        <div className="p-body">
+          <div className="pb-pc-container" style={{ display: active === "0" ? "block" : "none" }}>
+            <PcTemplate store={this.props.payrollStore}/>
+          </div>
+          <div className="pb-mobile-container" style={{ display: active === "1" ? "block" : "none" }}></div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default TmpPreview;
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempBaseSet/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempBaseSet/index.js
@ -61,7 +61,13 @@ class Index extends Component {
        const {
          autoSendDayOfMonth = "1", autoSendTimeOfDay = "09:00", autoSendCycleType = "1",
          ...fieldsEchoData
-        } = { ...result, ...toJS(tmplDataSource) };
+        } = {
+          ...result, ...toJS(tmplDataSource),
+          reissueRule: (
+            (!id && (_.isEmpty(toJS(tmplDataSource)) || (!_.isEmpty(toJS(tmplDataSource)) && toJS(tmplDataSource).replenishRule === "ALL"))) ||
+            (id && ((_.isEmpty(toJS(tmplDataSource)) && !result.replenishRule) || (!_.isEmpty(toJS(tmplDataSource)) && toJS(tmplDataSource).replenishRule === "ALL")))
+          ) ? "0" : "1"
+        };
        const { data: replenishRuleOptions } = (fieldsEchoData["reissueRule"] === "1" && fieldsEchoData["salarySob"]) ? await getReplenishRuleSetOptions({ salarySobId: fieldsEchoData["salarySob"] }) : [];
        this.setState({
          conditions: _.map(tempBaseSetConditions, it => {
@ -170,7 +176,7 @@ class Index extends Component {
    });
  };
  handleChange = async (params) => {
-    const { payrollStore: { payrollTempForm } } = this.props;
+    const { payrollStore: { payrollTempForm, setHasBeenModify } } = this.props;
    const key = _.keys(params)[0], salarySobId = payrollTempForm.getFormParams().salarySob,
      reissueRule = payrollTempForm.getFormParams().reissueRule;
    const { data: replenishRuleOptions } = (reissueRule === "1" && salarySobId) ? await getReplenishRuleSetOptions({ salarySobId }) : [];
@ -227,6 +233,7 @@ class Index extends Component {
        this.resetRequiredForm();
      });
    }
+    setHasBeenModify(true);
    this.forceUpdate();
  };
  resetRequiredForm = () => {
@ -236,7 +243,7 @@ class Index extends Component {
    if (reissueRule === "1") payrollTempForm.updateFields({ replenishRule: "" });
  };
  handleFbChange = (params) => {
-    const { payrollStore: { payrollTempFeedbackForm } } = this.props;
+    const { payrollStore: { payrollTempFeedbackForm, setHasBeenModify } } = this.props;
    const key = _.keys(params)[0];
    if (key === "ackFeedbackStatus") {
      this.setState({
@ -261,6 +268,7 @@ class Index extends Component {
        if (ackFeedbackStatus === "0") payrollTempFeedbackForm.updateFields({ autoAckDays: "7", feedbackUrl: "/" });
      });
    }
+    setHasBeenModify(true);
    this.forceUpdate();
  };

--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js
@ -36,12 +36,13 @@ class Index extends Component {
  }

  getPayrollShowForm = () => {
-    const { tmplId: id, payrollStore: { payrollTempNormalForm, tmplDataSource } } = this.props;
+    const { tmplId: id, payrollStore: { payrollTempNormalForm, tmplDataSource, setTmplDataSource } } = this.props;
    getPayrollShowForm({ id }).then(async ({ status, data }) => {
      if (status) {
        const { salaryTemplateShowSet, salaryTemplateSalaryItemSet: salaryItemSet, salaryBillItemNameSet } = data;
        const { data: result } = salaryTemplateShowSet;
-        const { ...fieldsEchoData } = { ...result, ...toJS(tmplDataSource) };
+        const fieldsEchoData = { ...result, ...toJS(tmplDataSource) };
+        setTmplDataSource(fieldsEchoData);
        this.setState({
          conditions: _.map(tempNormalSetConditions, it => {
            if (it.title === "themeSet") {
@ -66,7 +67,7 @@ class Index extends Component {
              };
            }
          }),
-          salaryBillItemNameSet, salaryItemSet
+          salaryBillItemNameSet
        }, () => {
          payrollTempNormalForm.initFormFields(this.state.conditions);
          //字段回显
@ -82,7 +83,25 @@ class Index extends Component {
                break;
            }
          });
-          !id && this.getPayrollItemList();
+          if (!id && !fieldsEchoData.salaryItemSetting) this.getPayrollItemList();
+          if (id && !fieldsEchoData.salaryItemSetting) {
+            setTmplDataSource({ ...toJS(tmplDataSource), salaryItemSetting: salaryItemSet });
+            this.setState({ salaryItemSet });
+          }
+          if (fieldsEchoData.salaryItemSetting) {
+            setTmplDataSource({
+              ...toJS(tmplDataSource), salaryItemSetting: _.map(toJS(fieldsEchoData.salaryItemSetting), o => ({
+                ...o,
+                items: _.map(o.items, it => ({ ...it, viewAttr: 1 }))
+              }))
+            });
+            this.setState({
+              salaryItemSet: _.map(toJS(fieldsEchoData.salaryItemSetting), o => ({
+                ...o,
+                items: _.map(o.items, it => ({ ...it, viewAttr: 1 }))
+              }))
+            });
+          }
        });
      }
    });
@ -117,9 +136,8 @@ class Index extends Component {
  };
  handleChangeSalaryItem = (resultSet) => {
    const { payrollStore: { setTmplDataSource, tmplDataSource } } = this.props;
-    this.setState({ salaryItemSet: resultSet }, () => {
-      setTmplDataSource({ ...toJS(tmplDataSource), salaryItemSetting: resultSet });
-    });
+    setTmplDataSource({ ...toJS(tmplDataSource), salaryItemSetting: resultSet });
+    this.setState({ salaryItemSet: resultSet });
  };
  handleChangeSalaryItemShowNamesetting = (itemShowNamesetting) => {
    const { payrollStore: { setSalaryBillItemNameSetting, salaryBillItemNameSetting } } = this.props;
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempReissueSet/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempReissueSet/index.js
@ -21,7 +21,17 @@ class Index extends Component {
  }

  componentDidMount() {
-    this.getReplenishForm();
+    const { payrollStore: { tmplDataSource } } = this.props;
+    if (!toJS(tmplDataSource.replenishSalaryItemSetting)) {
+      this.getReplenishForm();
+    } else {
+      this.setState({
+        replenishSalaryTemplateSalaryItemSet: _.map(toJS(tmplDataSource.replenishSalaryItemSetting), o => ({
+          ...o,
+          items: _.map(o.items, it => ({ ...it, viewAttr: 1 }))
+        }))
+      });
+    }
  }

  getReplenishForm = () => {
@ -44,12 +54,8 @@ class Index extends Component {

  handleChangeSalaryItem = (resultSet) => {
    const { payrollStore: { setTmplDataSource, tmplDataSource } } = this.props;
-    this.setState({ replenishSalaryTemplateSalaryItemSet: resultSet }, () => {
-      setTmplDataSource({
-        ...toJS(tmplDataSource),
-        replenishSalaryItemSetting: resultSet
-      });
-    });
+    setTmplDataSource({ ...toJS(tmplDataSource), replenishSalaryItemSetting: resultSet });
+    this.setState({ replenishSalaryTemplateSalaryItemSet: resultSet });
  };
  handleChangeSalaryItemShowNamesetting = (itemShowNamesetting) => {
    const { payrollStore: { setSalaryBillItemNameSetting, salaryBillItemNameSetting } } = this.props;
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTemplateTableList/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTemplateTableList/index.js
@ -181,7 +181,7 @@ class Index extends Component {
        {/*  新建编辑工资单模板*/}
        <UpdatePayrollTemplateSlide {...tmplSlide}
                                    onClose={v => this.setState({
-                                      tmplSlide: { ...tmplSlide, visible: false, copyId: "" }
+                                      tmplSlide: { ...tmplSlide, visible: false, tmplId: "" }
                                    }, () => v === "refresh" && this.getPayrollTemplateList(this.props))}

        />
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
@ -8,14 +8,15 @@ import React, { Component } from "react";
 import { toJS } from "mobx";
 import { inject, observer } from "mobx-react";
 import { WeaLocaleProvider, WeaSlideModal, WeaSteps } from "ecCom";
-import { Button, message } from "antd";
+import { Button, message, Modal } from "antd";
 import PayrollTempBaseSet from "../payrollTempBaseSet";
 import PayrollTempNormalSet from "../payrollTempNormalSet";
 import PayrollTempReissueSet from "../payrollTempReissueSet";
-import { savePayroll } from "../../../../apis/payroll";
+import { savePayroll, updatePayroll } from "../../../../apis/payroll";

 const Step = WeaSteps.Step;
 const getLabel = WeaLocaleProvider.getLabel;
+const APIFox = { save: savePayroll, update: updatePayroll };

@inject("payrollStore")
@observer
@ -28,11 +29,16 @@ class Index extends Component {
    this.tmpBaseSetRef = null;
  }

+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && !nextProps.visible) nextProps.payrollStore.setHasBeenModify(false);
+  }
+
  save = async () => {
    const {
      payrollStore: {
        payrollTempForm, payrollTempFeedbackForm, initPayrollTempForm,
-        initPayrollTempFeedbackForm, setTmplDataSource, tmplDataSource
+        initPayrollTempFeedbackForm, setTmplDataSource, tmplDataSource,
+        setHasBeenModify
      }
    } = this.props;
    const [tempFormm, fbForm] = await Promise.all([payrollTempForm.validateForm(), payrollTempFeedbackForm.validateForm()]);
@ -47,12 +53,13 @@ class Index extends Component {
        emailStatus: emailStatus === "1",
        msgStatus: msgStatus === "1",
        autoAckDays: Number(autoAckDays),
-        replenishRule: replenishRule === "0" ? "" : replenishRule
+        replenishRule: (replenishRule === "0" || !replenishRule) ? "ALL" : replenishRule
      };
      setTmplDataSource(payload);
      this.setState({ current: this.state.current + 1 }, () => {
        initPayrollTempForm();
        initPayrollTempFeedbackForm();
+        setHasBeenModify(true);
      });
    } else {
      tempFormm.showErrors();
@ -84,35 +91,20 @@ class Index extends Component {
    });
  };
  savePayroll = () => {
-    const {
-      payrollStore: {
-        tmplDataSource, salaryBillItemNameSetting, initPayrollTempForm, initPayrollTempFeedbackForm,
-        initPayrollTempNormalForm, setTmplDataSource, setSalaryBillItemNameSetting
-      }
-    } = this.props;
-    const payload = { ...toJS(tmplDataSource), salaryBillItemNameSetting: toJS(salaryBillItemNameSetting) };
+    const { payrollStore: { tmplDataSource, salaryBillItemNameSetting, setHasBeenModify }, tmplId: id } = this.props;
+    const payload = {
+      ...toJS(tmplDataSource), id,
+      salarySobId: toJS(tmplDataSource).salarySob,
+      salaryBillItemNameSetting: toJS(salaryBillItemNameSetting)
+    };
    this.setState({ loading: true });
-    savePayroll(payload).then(({ status, errormsg }) => {
+    const API = APIFox[id ? "update" : "save"];
+    API(payload).then(({ status, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
-        initPayrollTempForm();
-        initPayrollTempFeedbackForm();
-        initPayrollTempNormalForm();
-        setTmplDataSource({});
-        setSalaryBillItemNameSetting([
-          {
-            salaryTemplateId: "",
-            salaryBillType: 0,
-            itemShowNameSetting: []
-          },
-          {
-            salaryTemplateId: "",
-            salaryBillType: 1,
-            itemShowNameSetting: []
-          }
-        ]);
        message.success(getLabel(30700, "操作成功！"));
-        this.props.onClose("refresh");
+        setHasBeenModify(false);
+        this.handleClose("refresh");
      } else {
        message.error(errormsg);
      }
@ -147,7 +139,8 @@ class Index extends Component {
                          this.setState({ current: current - 1 });
                        }}>{getLabel(1876, "上一步")}</Button>
                <Button type="primary" onClick={this.normalSave}>{getLabel(1402, "下一步")}</Button>
-                <Button type="ghost">{getLabel(221, "预览")}</Button>
+                <Button type="ghost"
+                        onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollinfo")}>{getLabel(221, "预览")}</Button>
              </React.Fragment> :
              <React.Fragment>
                <Button type="ghost"
@ -176,6 +169,59 @@ class Index extends Component {
    }
    return dom;
  };
+  handleClose = (type) => {
+    const {
+      payrollStore: {
+        initPayrollTempForm, initPayrollTempFeedbackForm, setSalaryBillItemNameSetting,
+        initPayrollTempNormalForm, setTmplDataSource, hasBeenModify
+      }, onClose
+    } = this.props;
+    if (hasBeenModify) {
+      Modal.confirm({
+        title: getLabel(131329, "信息确认"),
+        content: getLabel(111, "确定放弃填写吗？放弃后数据将不会被保存！"),
+        onOk: () => {
+          initPayrollTempForm();
+          initPayrollTempFeedbackForm();
+          initPayrollTempNormalForm();
+          setTmplDataSource({});
+          setSalaryBillItemNameSetting([
+            {
+              salaryTemplateId: "",
+              salaryBillType: 0,
+              itemShowNameSetting: []
+            },
+            {
+              salaryTemplateId: "",
+              salaryBillType: 1,
+              itemShowNameSetting: []
+            }
+          ]);
+          this.setState({ current: 0 });
+          onClose(type);
+        }
+      });
+    } else {
+      initPayrollTempForm();
+      initPayrollTempFeedbackForm();
+      initPayrollTempNormalForm();
+      setTmplDataSource({});
+      setSalaryBillItemNameSetting([
+        {
+          salaryTemplateId: "",
+          salaryBillType: 0,
+          itemShowNameSetting: []
+        },
+        {
+          salaryTemplateId: "",
+          salaryBillType: 1,
+          itemShowNameSetting: []
+        }
+      ]);
+      this.setState({ current: 0 });
+      onClose(type);
+    }
+  };

  render() {
    const { current } = this.state;
@ -186,6 +232,7 @@ class Index extends Component {
    ];
    return (
      <WeaSlideModal {...this.props} title={this.renderTitle()} className="payroll-tmpl-layout"
+                     onClose={() => this.handleClose(null)}
                     content={(<div className="payroll-tmpl-content">
                       <WeaSteps current={current} style={{ margin: "0 0 20px 0" }}>
                         {
--- a/pc4mobx/hrmSalary/stores/payroll.js
+++ b/pc4mobx/hrmSalary/stores/payroll.js
@ -18,6 +18,8 @@ export class payrollStore {
  @action initPayrollTempFeedbackForm = () => this.payrollTempFeedbackForm = new WeaForm();
  @observable tmplDataSource = {}; //工资单模板数据
  @action setTmplDataSource = (v) => this.tmplDataSource = v;//设置工资单模板数据
+  @observable hasBeenModify = false; //工资单模板数据-是否修改过
+  @action setHasBeenModify = (v) => this.hasBeenModify = v;//设置工资单模板数据

  @observable payrollTempNormalForm = new WeaForm(); //新建编辑工资单模板-主题设置form
  @action initPayrollTempNormalForm = () => this.payrollTempNormalForm = new WeaForm();