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

2023-10-19 09:42:46 +08:00 · 2023-10-19 09:42:46 +08:00 · 5031d3a032
parent dadb749c4c
commit 5031d3a032
6 changed files with 112 additions and 34 deletions
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.js
@ -1,19 +1,21 @@
 import React, { Component } from "react";
-import { toJS } from "mobx";
+import moment from "moment";
 import "./index.less";

 class Index extends Component {
-  componentDidMount() {
-    const { store: { tmplDataSource } } = this.props;
-    console.log(toJS(tmplDataSource));
-  }

  render() {
+    const { theme } = this.props;
    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 className="edition-center">
+              <div className="header">
+                <div className="header-title">{theme || ""}</div>
+                <div className="header-salary-date-time">{moment().format("YYYY-MM-DD HH:mm:ss")}</div>
+              </div>
+            </div>
          </div>
        </div>
      </div>
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.less
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.less
@ -20,6 +20,32 @@
        align-items: center;
        width: 100%;
        padding-bottom: 32px;
+
+        .header {
+          height: 48px;
+          padding: 0 16px;
+          font-size: 12px;
+          color: #111;
+
+          .header-title {
+            height: 22px;
+            font-size: 17px;
+            color: #111;
+            line-height: 22px;
+            font-weight: 400;
+            text-align: center;
+          }
+
+          .header-salary-date-time {
+            margin-top: 16px;
+            text-align: center;
+            height: 14px;
+            font-size: 14px;
+            color: #999;
+            line-height: 14px;
+            font-weight: 400;
+          }
+        }
      }
    }
  }
--- a/pc4mobx/hrmSalary/pages/payroll/templatePreview/tmpPreview.js
+++ b/pc4mobx/hrmSalary/pages/payroll/templatePreview/tmpPreview.js
@ -5,20 +5,22 @@
 * Date: 2023/10/18
 */
 import React, { Component } from "react";
-import { inject, observer } from "mobx-react";
+import { WeaLocaleProvider } from "ecCom";
+import { message } from "antd";
+import moment from "moment";
 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
+const getLabel = WeaLocaleProvider.getLabel;
+
 class TmpPreview extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      active: "0",
+      active: "0", theme: "", tip: "", background: "", tipPosi: "", itemTypeList: "",
      phsImgList: [
        { key: "0", src: computer },
        { key: "1", src: phone }
@ -26,6 +28,27 @@ class TmpPreview extends Component {
    };
  }

+  componentDidMount() {
+    const dataStr = window.localStorage.getItem("weapp-salary-payroll-preview-data");
+    if (!dataStr) {
+      message.warning(getLabel(111, "参数异常！"));
+      return;
+    }
+    const data = JSON.parse(dataStr);
+    let theme = data.theme || "";
+    theme = theme.replaceAll("${salaryMonth}", moment().format("YYYY-MM"));
+    this.setState({
+      theme, tip: data.textContent || "",
+      background: data.background || "",
+      tipPosi: data.textContentPosition || "",
+      itemTypeList: data.salaryItemSetting || []
+    });
+    if (theme.indexOf("${companyName}") !== -1) {
+      const themeAccount = window.localStorage.getItem("theme-account") || {};
+      this.setState({ theme: theme.replaceAll("${companyName}", themeAccount.subcompanyname) });
+    }
+  }
+
  render() {
    const { phsImgList, active } = this.state;
    return (
@ -42,7 +65,7 @@ class TmpPreview extends Component {
        </div>
        <div className="p-body">
          <div className="pb-pc-container" style={{ display: active === "0" ? "block" : "none" }}>
-            <PcTemplate store={this.props.payrollStore}/>
+            <PcTemplate {...this.state}/>
          </div>
          <div className="pb-mobile-container" style={{ display: active === "1" ? "block" : "none" }}></div>
        </div>
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/formRender.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/formRender.js
@ -7,7 +7,7 @@ export const payrollTempNormalSetForm = (form, condition, background, onChange =
  const { isFormInit } = form;
  const formParams = form.getFormParams();
  const img1Props = {
-    src: "/weaver/weaver.file.FileDownload?fileid=a897b63092c473b95d98ed95138518e72fcaff559a225b618062f453c4d21b4bc43d18cd849d0ba00c94d2b02a53750b08e683c37ee144133",
+    src: background,
    width: 100,
    height: 100
  };
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js
@ -42,7 +42,25 @@ class Index extends Component {
        const { salaryTemplateShowSet, salaryTemplateSalaryItemSet: salaryItemSet, salaryBillItemNameSet } = data;
        const { data: result } = salaryTemplateShowSet;
        const fieldsEchoData = { ...result, ...toJS(tmplDataSource) };
-        setTmplDataSource(fieldsEchoData);
+        if (!id && !fieldsEchoData.salaryItemSetting) this.getPayrollItemList();
+        if (id && !fieldsEchoData.salaryItemSetting) {
+          setTmplDataSource({ salaryItemSetting: salaryItemSet, ...fieldsEchoData });
+          this.setState({ salaryItemSet });
+        }
+        if (fieldsEchoData.salaryItemSetting) {
+          setTmplDataSource({
+            salaryItemSetting: _.map(toJS(fieldsEchoData.salaryItemSetting), o => ({
+              ...o,
+              items: _.map(o.items, it => ({ ...it, viewAttr: 1 }))
+            })), ...fieldsEchoData
+          });
+          this.setState({
+            salaryItemSet: _.map(toJS(fieldsEchoData.salaryItemSetting), o => ({
+              ...o,
+              items: _.map(o.items, it => ({ ...it, viewAttr: 1 }))
+            }))
+          });
+        }
        this.setState({
          conditions: _.map(tempNormalSetConditions, it => {
            if (it.title === "themeSet") {
@ -83,25 +101,6 @@ class Index extends Component {
                break;
            }
          });
-          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 }))
-              }))
-            });
-          }
        });
      }
    });
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
@ -139,8 +139,7 @@ class Index extends Component {
                          this.setState({ current: current - 1 });
                        }}>{getLabel(1876, "上一步")}</Button>
                <Button type="primary" onClick={this.normalSave}>{getLabel(1402, "下一步")}</Button>
-                <Button type="ghost"
-                        onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollinfo")}>{getLabel(221, "预览")}</Button>
+                <Button type="ghost" onClick={this.handlePreview}>{getLabel(221, "预览")}</Button>
              </React.Fragment> :
              <React.Fragment>
                <Button type="ghost"
@ -222,6 +221,35 @@ class Index extends Component {
      onClose(type);
    }
  };
+  handlePreview = () => {
+    const { payrollStore: { payrollTempNormalForm, tmplDataSource } } = this.props;
+    window.localStorage.removeItem("weapp-salary-payroll-preview-data");
+    payrollTempNormalForm.validateForm().then(f => {
+      if (f.isValid) {
+        const {
+          salaryItemNullStatus, salaryItemZeroStatus, background, ...extra
+        } = payrollTempNormalForm.getFormParams();
+        const { textContentPosition, textContent } = extra;
+        const bkView = toJS(tmplDataSource).background;
+        const payload = {
+          ...toJS(tmplDataSource), ...extra, background: bkView,
+          salaryItemZeroStatus: salaryItemZeroStatus === "1",
+          salaryItemNullStatus: salaryItemNullStatus === "1"
+        };
+        if ((textContentPosition && !textContent) || (!textContentPosition && textContent)) {
+          message.warning(getLabel(111, "请完善文本内容与文本内容位置设置！"));
+          return;
+        }
+        window.localStorage.setItem("weapp-salary-payroll-preview-data", JSON.stringify(payload));
+        setTimeout(() => {
+          window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollinfo");
+        }, 300);
+      } else {
+        f.showErrors();
+        this.forceUpdate();
+      }
+    });
+  };

  render() {
    const { current } = this.state;