From 3eb8c47a877a9df3e5624fed6c7da30fedb95d0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Fri, 8 Dec 2023 13:39:55 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feature/2.9.9.2312.01-=E5=B7=A5=E8=B5=84?=
 =?UTF-8?q?=E5=8D=95=E6=9F=A5=E7=9C=8B=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pcTemplate/content.js          |  81 +++++
 .../hrmSalary/components/pcTemplate/index.js  |  71 +----
 .../components/pcTemplate/index.less          | 276 +++++++++---------
 pc4mobx/hrmSalary/pages/mySalary/index.less   |   9 +
 .../hrmSalary/pages/mySalary/mySalaryView.js  |  54 ++--
 .../hrmSalary/pages/mySalaryMobile/index.js   |   8 +-
 6 files changed, 266 insertions(+), 233 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/components/pcTemplate/content.js

diff --git a/pc4mobx/hrmSalary/components/pcTemplate/content.js b/pc4mobx/hrmSalary/components/pcTemplate/content.js
new file mode 100644
index 00000000..97497f2b
--- /dev/null
+++ b/pc4mobx/hrmSalary/components/pcTemplate/content.js
@@ -0,0 +1,81 @@
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import moment from "moment";
+import { dealTemplate } from "./index";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Content extends Component {
+  render() {
+    const { theme, background, tip, tipPosi, itemTypeList, sendTime = new Date() } = this.props;
+    const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "pc");
+    return (
+      <div className="salary-preview-container">
+        <div className="edition-center">
+          <div className="header">
+            <div className="header-title">{theme || ""}</div>
+            <div className="header-salary-date-time">{moment(sendTime).format("YYYY-MM-DD HH:mm:ss")}</div>
+          </div>
+          <div className="body">
+            {
+              background &&
+              <div className="comp-img"><img src={`${background}`} alt="logo"/></div>
+            }
+            {
+              !onlyOneGrup && tipPosi.toString() === "1" && tip &&
+              <div className="corporate-culture-text" title={tip}>{tip}</div>
+            }
+            <div className="data-detail">
+              {
+                showData.map((groupItem, index) => {
+                  // 如果当前组下没有条目 当前组直接不展示。
+                  if (!groupItem) return null;
+                  const { groupId, groupName, items = [] } = groupItem;
+                  return (
+                    <div className="salary-group" key={groupId || index}>
+                      {
+                        groupName ? <div className="group-title">{groupName}</div> : null
+                      }
+                      <div className="group-list">
+                        {
+                          (onlyOneGrup && tipPosi.toString() === "1" && tip) && (<div className="send-tip top">
+                            <div className="label">{getLabel(111, "发放说明")}</div>
+                            <div className="detail">{tip}</div>
+                          </div>)
+                        }
+                        {
+                          items.map((templatItem, index) => {
+                            const { salaryItemValue, name, salaryItemShowName } = templatItem || {};
+                            return <div key={index}
+                                        className={`list-item ${index % 2 === 0 ? "even" : "odd"} ${index === 0 ? "zero" : ""} ${index === 1 ? "first" : ""}`}>
+                              <div className="item-name" title={salaryItemShowName || name}>
+                                <span className="text">{salaryItemShowName || name || ""}</span>
+                              </div>
+                              <div className="item-count">{salaryItemValue || ""}</div>
+                            </div>;
+
+                          })
+                        }
+                        {
+                          (onlyOneGrup && tipPosi.toString() === "2" && tip) && (<div className="send-tip bottom">
+                            <div className="label">{getLabel(111, "发放说明")}</div>
+                            <div className="detail">{tip}</div>
+                          </div>)
+                        }
+                      </div>
+                    </div>);
+                })
+              }
+            </div>
+            {
+              !onlyOneGrup && tipPosi.toString() === "2" && tip &&
+              <div className="corporate-culture-text" title={tip}>{tip}</div>
+            }
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Content;
diff --git a/pc4mobx/hrmSalary/components/pcTemplate/index.js b/pc4mobx/hrmSalary/components/pcTemplate/index.js
index 511a42bc..88e12f72 100644
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.js
@@ -1,82 +1,15 @@
 import React, { Component } from "react";
 import { WeaLocaleProvider } from "ecCom";
-import moment from "moment";
+import Content from "./content";
 import "./index.less";
 
 const getLabel = WeaLocaleProvider.getLabel;
 
 class Index extends Component {
   render() {
-    const { theme, background, tip, tipPosi, itemTypeList } = this.props;
-    const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "pc");
     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 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 className="body">
-                {
-                  background &&
-                  <div className="comp-img"><img src={`${background}`} alt="logo"/></div>
-                }
-                {
-                  !onlyOneGrup && tipPosi === "1" && tip &&
-                  <div className="corporate-culture-text" title={tip}>{tip}</div>
-                }
-                <div className="data-detail">
-                  {
-                    showData.map((groupItem, index) => {
-                      // 如果当前组下没有条目 当前组直接不展示。
-                      if (!groupItem) return null;
-                      const { groupId, groupName, items = [] } = groupItem;
-                      return (
-                        <div className="salary-group" key={groupId || index}>
-                          {
-                            groupName ? <div className="group-title">{groupName}</div> : null
-                          }
-                          <div className="group-list">
-                            {
-                              (onlyOneGrup && tipPosi === "1" && tip) && (<div className="send-tip top">
-                                <div className="label">{getLabel(111, "发放说明")}</div>
-                                <div className="detail">{tip}</div>
-                              </div>)
-                            }
-                            {
-                              items.map((templatItem, index) => {
-                                const { salaryItemValue, name, salaryItemShowName } = templatItem || {};
-                                return <div key={index}
-                                            className={`list-item ${index % 2 === 0 ? "even" : "odd"} ${index === 0 ? "zero" : ""} ${index === 1 ? "first" : ""}`}>
-                                  <div className="item-name" title={salaryItemShowName || name}>
-                                    <span className="text">{salaryItemShowName || name || ""}</span>
-                                  </div>
-                                  <div className="item-count">{salaryItemValue || ""}</div>
-                                </div>;
-
-                              })
-                            }
-                            {
-                              (onlyOneGrup && tipPosi === "2" && tip) && (<div className="send-tip bottom">
-                                <div className="label">{getLabel(111, "发放说明")}</div>
-                                <div className="detail">{tip}</div>
-                              </div>)
-                            }
-                          </div>
-                        </div>);
-                    })
-                  }
-                </div>
-                {
-                  !onlyOneGrup && tipPosi === "2" && tip &&
-                  <div className="corporate-culture-text" title={tip}>{tip}</div>
-                }
-              </div>
-            </div>
-          </div>
-        </div>
+        <div className="weapp-salary-sp weapp-salary-payroll-pc-preview"><Content {...this.props}/></div>
       </div>
     );
   }
diff --git a/pc4mobx/hrmSalary/components/pcTemplate/index.less b/pc4mobx/hrmSalary/components/pcTemplate/index.less
index 1341316d..404b8a20 100644
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.less
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.less
@@ -5,144 +5,6 @@
 
   .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;
-
-        .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;
-          }
-        }
-
-        .body {
-          width: 100%;
-          margin-top: 32px;
-
-          .comp-img {
-            text-align: center;
-
-            img {
-              width: 100%;
-            }
-          }
-
-          .corporate-culture-text {
-            width: 100%;
-            margin-top: 16px;
-            text-align: center;
-            min-height: 12px;
-            font-size: 12px;
-            color: #111;
-            white-space: pre-wrap;
-            word-break: break-all;
-          }
-
-          .data-detail {
-            margin-top: 16px;
-
-            .salary-group {
-              margin-bottom: 16px;
-
-              .group-title {
-                font-size: 14px;
-              }
-
-              .group-list {
-                margin-top: 16px;
-                display: flex;
-                flex-wrap: wrap;
-
-                .even {
-                  border-left: 1px solid #e5e5e5;
-                }
-
-                .zero, .first {
-                  border-top: 1px solid #e5e5e5;
-                }
-
-                .list-item {
-                  width: 50%;
-                  display: flex;
-                  justify-content: left;
-                  min-height: 40px;
-                  align-items: center;
-                  border-bottom: 1px solid #e5e5e5;
-                  border-right: 1px solid #e5e5e5;
-
-                  .item-name {
-                    flex-basis: 170px;
-                    box-sizing: border-box;
-                    width: 170px;
-                    padding: 0 16px;
-                    height: 100%;
-                    background: #fbfbfb;
-                    border-right: 1px solid #e5e5e5;
-                    font-size: 12px;
-                    color: #666;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    flex-shrink: 0;
-
-                    .text {
-                      display: -webkit-box;
-                      -webkit-box-orient: vertical;
-                      -webkit-line-clamp: 2;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                    }
-                  }
-
-                  .item-count {
-                    flex-basis: 328px;
-                    padding-left: 16px;
-                    height: 100%;
-                    line-height: 40px;
-                    background: #fff;
-                    font-size: 12px;
-                    color: #111;
-                    word-break: break-all;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
   }
 
   .weapp-salary-payroll-pc-preview {
@@ -151,3 +13,141 @@
     overflow-y: auto;
   }
 }
+
+.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;
+
+    .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;
+      }
+    }
+
+    .body {
+      width: 100%;
+      margin-top: 32px;
+
+      .comp-img {
+        text-align: center;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .corporate-culture-text {
+        width: 100%;
+        margin-top: 16px;
+        text-align: center;
+        min-height: 12px;
+        font-size: 12px;
+        color: #111;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .data-detail {
+        margin-top: 16px;
+
+        .salary-group {
+          margin-bottom: 16px;
+
+          .group-title {
+            font-size: 14px;
+          }
+
+          .group-list {
+            margin-top: 16px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .even {
+              border-left: 1px solid #e5e5e5;
+            }
+
+            .zero, .first {
+              border-top: 1px solid #e5e5e5;
+            }
+
+            .list-item {
+              width: 50%;
+              display: flex;
+              justify-content: left;
+              min-height: 40px;
+              align-items: center;
+              border-bottom: 1px solid #e5e5e5;
+              border-right: 1px solid #e5e5e5;
+
+              .item-name {
+                flex-basis: 170px;
+                box-sizing: border-box;
+                width: 170px;
+                padding: 0 16px;
+                height: 100%;
+                background: #fbfbfb;
+                border-right: 1px solid #e5e5e5;
+                font-size: 12px;
+                color: #666;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-shrink: 0;
+
+                .text {
+                  display: -webkit-box;
+                  -webkit-box-orient: vertical;
+                  -webkit-line-clamp: 2;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+              }
+
+              .item-count {
+                flex-basis: 328px;
+                padding-left: 16px;
+                height: 100%;
+                line-height: 40px;
+                background: #fff;
+                font-size: 12px;
+                color: #111;
+                word-break: break-all;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/pc4mobx/hrmSalary/pages/mySalary/index.less b/pc4mobx/hrmSalary/pages/mySalary/index.less
index 8a2b690e..9f744351 100644
--- a/pc4mobx/hrmSalary/pages/mySalary/index.less
+++ b/pc4mobx/hrmSalary/pages/mySalary/index.less
@@ -20,3 +20,12 @@
     }
   }
 }
+
+.weapp-salary-my-salary-view-payroll {
+  padding: 32px 0;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.page {
+}
diff --git a/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js b/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
index 574c315d..0a3e05a3 100644
--- a/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
+++ b/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
@@ -9,10 +9,12 @@ import { inject, observer } from "mobx-react";
 import { Button, message, Modal } from "antd";
 import { WeaLocaleProvider } from "ecCom";
 import Authority from "./authority";
-import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
+import Content from "../../components/pcTemplate/content";
+// import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
 import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../apis/payroll";
 import CaptchaModal from "../../components/captchaModal";
-import "../payroll/templatePreview/index.less";
+import "./index.less";
+// import "../payroll/templatePreview/index.less";
 
 const { getLabel } = WeaLocaleProvider;
 
@@ -57,7 +59,7 @@ class MySalaryView extends Component {
   handleGoFeedback = () => {
     Modal.confirm({
       title: getLabel(131329, "信息确认"),
-      content: getLabel(111, "请确认薪资信息是有误，进行反馈并发起反馈流程。"),
+      content: getLabel(544271, "请确认薪资信息是有误，进行反馈并发起反馈流程。"),
       onOk: () => {
         const { params: { salaryInfoId }, mySalaryStore: { getMySalaryBill } } = this.props;
         feedBackSalaryBill({ salaryInfoId }).then(({ status, errorMsg }) => {
@@ -84,29 +86,37 @@ class MySalaryView extends Component {
     if (_.isEmpty(mySalaryStore)) {
       return <div></div>;
     }
-    const employeeInformation = !_.isEmpty(mySalaryStore) && mySalaryStore.employeeInformation;
-    const salaryGroups = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryGroups;
-    const salaryTemplateShowSet = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryTemplate;
+    const { salaryTemplate, salaryGroups, employeeInformation, sendTime } = mySalaryStore;
+    const salaryProps = {
+      theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime,
+      background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "",
+      itemTypeList: [employeeInformation, ...salaryGroups]
+    };
+    console.log(mySalaryStore);
+    // const employeeInformation = !_.isEmpty(mySalaryStore) && mySalaryStore.employeeInformation;
+    // const salaryGroups = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryGroups;
+    // const salaryTemplateShowSet = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryTemplate;
     return (
       <React.Fragment>
         <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                    store={this.props.mySalaryStore}>
-          <div style={{ height: "100%", overflow: "auto" }}>
-            <div className="templatePreview">
-              <ComputerTemplate
-                isMsgPreview
-                salaryTemplateShowSet={salaryTemplateShowSet ? JSON.stringify(salaryTemplateShowSet) : []}
-                salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
-              >
-                {
-                  (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0")) &&
-                  <ConfirmBtns
-                    confirmSalaryBill={this.confirmSalaryBill}
-                    goFeedback={this.handleGoFeedback}
-                  />
-                }
-              </ComputerTemplate>
-            </div>
+          <div className="weapp-salary-my-salary-view-payroll page">
+            <Content {...salaryProps}/>
+            {/*<div className="templatePreview">*/}
+            {/*  <ComputerTemplate*/}
+            {/*    isMsgPreview*/}
+            {/*    salaryTemplateShowSet={salaryTemplateShowSet ? JSON.stringify(salaryTemplateShowSet) : []}*/}
+            {/*    salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}*/}
+            {/*  >*/}
+            {/*    {*/}
+            {/*      (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0")) &&*/}
+            {/*      <ConfirmBtns*/}
+            {/*        confirmSalaryBill={this.confirmSalaryBill}*/}
+            {/*        goFeedback={this.handleGoFeedback}*/}
+            {/*      />*/}
+            {/*    }*/}
+            {/*  </ComputerTemplate>*/}
+            {/*</div>*/}
           </div>
         </Authority>
         <CaptchaModal
diff --git a/pc4mobx/hrmSalary/pages/mySalaryMobile/index.js b/pc4mobx/hrmSalary/pages/mySalaryMobile/index.js
index e1fade72..88fd95b1 100644
--- a/pc4mobx/hrmSalary/pages/mySalaryMobile/index.js
+++ b/pc4mobx/hrmSalary/pages/mySalaryMobile/index.js
@@ -39,7 +39,7 @@ class Index extends Component {
     mySalaryMobile.removeEventListener("scroll", this.handleScroll, true);
   }
 
-  getMySalaryBillList = () => {
+  getMySalaryBillList = (type) => {
     const { salaryYearMonth, pageInfo } = this.state;
     this.setState({ loading: true });
     mySalaryBillList({ salaryYearMonth, ...pageInfo }).then(({ status, data }) => {
@@ -48,14 +48,13 @@ class Index extends Component {
         const { datas: dataSource, pageInfo: pageResult } = data;
         const { pageNum: current, pageSize, total } = pageResult;
         this.setState({
-          dataSource: [...this.state.dataSource, ...dataSource],
+          dataSource: type ? dataSource : [...this.state.dataSource, ...dataSource],
           pageInfo: { ...pageInfo, current, pageSize, total }
         }, () => this.setState({ isMore: this.state.dataSource.length < total }));
       }
     }).catch(() => this.setState({ loading: false }));
   };
   handleLoadMore = () => {
-    // 为测试效果临时使用 message
     const { pageInfo, isMore } = this.state;
     if (!isMore) return;
     const { current } = pageInfo;
@@ -71,8 +70,9 @@ class Index extends Component {
     const { salaryYearMonth } = this.state;
     const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
     this.setState({
+      pageInfo: { ...this.state.pageInfo, current: 1 },
       salaryYearMonth: type === "salaryStartYearMonth" ? [val, salaryEndYearMonth] : [salaryStartYearMonth, val]
-    }, () => this.getMySalaryBillList());
+    }, () => this.getMySalaryBillList(true));
   };
 
   render() {

From 43012b20256d2ff925b4ba2927e0f8ff23d56541 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Fri, 8 Dec 2023 15:56:39 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feature/2.9.9.2312.01-=E5=B7=A5=E8=B5=84?=
 =?UTF-8?q?=E5=8D=95=E6=9F=A5=E7=9C=8B=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobileTemplate/index.js        |  5 +-
 .../components/mobileTemplate/index.less      | 12 +++
 .../components/pcTemplate/content.js          |  1 +
 .../hrmSalary/components/pcTemplate/index.js  |  2 +-
 .../hrmSalary/pages/mobilePayroll/index.js    | 78 +++++++++----------
 pc4mobx/hrmSalary/pages/mySalary/index.less   | 13 ++++
 .../hrmSalary/pages/mySalary/mySalaryView.js  | 33 +++-----
 .../components/payrollList/index.js           |  5 +-
 8 files changed, 79 insertions(+), 70 deletions(-)

diff --git a/pc4mobx/hrmSalary/components/mobileTemplate/index.js b/pc4mobx/hrmSalary/components/mobileTemplate/index.js
index 063b8b8d..8b9c771e 100644
--- a/pc4mobx/hrmSalary/components/mobileTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/mobileTemplate/index.js
@@ -14,11 +14,11 @@ const getLabel = WeaLocaleProvider.getLabel;
 
 class Index extends Component {
   render() {
-    const { theme, background, tip, tipPosi, itemTypeList } = this.props;
+    const { theme, background, tip, tipPosi, itemTypeList, title } = this.props;
     const { onlyOneGrup, showData } = dealTemplate(itemTypeList, "mobile");
     return (
       <React.Fragment>
-        <div className="pbmc-head">{getLabel(111, "薪酬预览")}</div>
+        <div className="pbmc-head">{title || getLabel(111, "薪酬预览")}</div>
         <div className="pbmc-body">
           <div className="weapp-salary-payroll-mobile-preview">
             <div className="bill-container">
@@ -76,6 +76,7 @@ class Index extends Component {
                 !onlyOneGrup && tipPosi === "2" && tip &&
                 <div className="corporate-culture-text footer" title={tip}>{tip}</div>
               }
+              {this.props.children}
             </div>
           </div>
         </div>
diff --git a/pc4mobx/hrmSalary/components/mobileTemplate/index.less b/pc4mobx/hrmSalary/components/mobileTemplate/index.less
index 49f8df16..5338957f 100644
--- a/pc4mobx/hrmSalary/components/mobileTemplate/index.less
+++ b/pc4mobx/hrmSalary/components/mobileTemplate/index.less
@@ -20,6 +20,18 @@
     .bill-container {
       background: #f6f6f6;
 
+      .space {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-bottom: 16px;
+
+        .ant-btn {
+          margin-right: 16px;
+        }
+      }
+
       .bill-info-header {
         padding-top: 16px;
 
diff --git a/pc4mobx/hrmSalary/components/pcTemplate/content.js b/pc4mobx/hrmSalary/components/pcTemplate/content.js
index 97497f2b..a294e2df 100644
--- a/pc4mobx/hrmSalary/components/pcTemplate/content.js
+++ b/pc4mobx/hrmSalary/components/pcTemplate/content.js
@@ -73,6 +73,7 @@ class Content extends Component {
             }
           </div>
         </div>
+        {this.props.children}
       </div>
     );
   }
diff --git a/pc4mobx/hrmSalary/components/pcTemplate/index.js b/pc4mobx/hrmSalary/components/pcTemplate/index.js
index 88e12f72..b8485277 100644
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.js
@@ -24,7 +24,7 @@ export const dealTemplate = (itemTypeList, type) => {
     const { items, groupName, groupId } = group;
     if (items.length !== 0) {
       items.forEach((item) => {
-        item.salaryItemValue = "100";
+        item.salaryItemValue = item.salaryItemValue || "100";
       });
       if (items.length % 2 && type === "pc") items.push({});
       // 未分类不展示标题
diff --git a/pc4mobx/hrmSalary/pages/mobilePayroll/index.js b/pc4mobx/hrmSalary/pages/mobilePayroll/index.js
index 2b2308d1..ba88093a 100644
--- a/pc4mobx/hrmSalary/pages/mobilePayroll/index.js
+++ b/pc4mobx/hrmSalary/pages/mobilePayroll/index.js
@@ -1,11 +1,10 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
+import { toJS } from "mobx";
 import { getQueryString } from "../../util/url";
 import { WeaDialog, WeaError, WeaInput, WeaLocaleProvider } from "ecCom";
 import { Button, message, Modal } from "antd";
 import Authority from "../mySalary/authority";
-import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
-import PhoneTemplate from "../payroll/templatePreview/phoneTemplate";
 import "../payroll/templatePreview/index.less";
 import * as API from "../../apis/mySalaryBenefits";
 import { salaryBillGetToken } from "../../apis/mySalaryBenefits";
@@ -13,7 +12,9 @@ import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../a
 import CaptchaModal from "../../components/captchaModal";
 import PassSetDialog from "./passSetDialog";
 import { ConfirmBtns } from "../mySalary/mySalaryView";
-import "./index.less";
+import Content from "../../components/pcTemplate/content";
+import MobileTemplate from "../../components/mobileTemplate";
+import "../mySalary/index.less";
 
 const getLabel = WeaLocaleProvider.getLabel;
 
@@ -174,14 +175,18 @@ export default class MobilePayroll extends React.Component {
     const { mySalaryStore: { clearLoading, pwdForm } } = this.props;
     const { mySalaryBillData, visible, captchaVisible, notSetting, pwdSetVisible } = this.state;
     const type = getQueryString("type");
-    const employeeInformation = mySalaryBillData.employeeInformation ? mySalaryBillData.employeeInformation : {};
-    const salaryGroups = mySalaryBillData.salaryGroups ? mySalaryBillData.salaryGroups : [];
+    if (_.isEmpty(toJS(this.props.mySalaryStore.mySalaryBill))) return <div></div>;
+    const {
+      salaryTemplate, salaryGroups, employeeInformation,
+      sendTime, confirmStatus
+    } = toJS(this.props.mySalaryStore.mySalaryBill);
+    const salaryProps = {
+      theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime,
+      background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "",
+      itemTypeList: [employeeInformation, ...salaryGroups]
+    };
     return (
-      <div className="computerTemplate" style={{
-        height: "100%",
-        overflowY: "hidden",
-        paddingBottom: "20px"
-      }}>
+      <React.Fragment>
         <WeaDialog
           onCancel={() => this.setState({ visible: false }, () => clearLoading())}
           title="请输入二次验证密码" visible={visible} initLoadCss
@@ -208,42 +213,29 @@ export default class MobilePayroll extends React.Component {
           type === "phone" ?
             <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                        store={this.props.mySalaryStore}>
-              <div className="templatePreview">
-                <div className="contentWrapper">
-                  <PhoneTemplate
-                    isPreview
-                    salaryTemplateShowSet={JSON.stringify(mySalaryBillData.salaryTemplate)}
-                    salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}
-                  >
-                    {
-                      (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryBillData.confirmStatus) || mySalaryBillData.confirmStatus === "0")) &&
-                      <ConfirmBtns
-                        confirmSalaryBill={this.confirmSalaryBill}
-                        goFeedback={this.handleGoFeedback}
-                      />
-                    }
-                  </PhoneTemplate>
-                </div>
-              </div>
+              <MobileTemplate {...salaryProps} title={getLabel(111, "工资单查看")}>
+                {
+                  (_.isNil(confirmStatus) || confirmStatus === "0") &&
+                  <ConfirmBtns
+                    confirmSalaryBill={this.confirmSalaryBill}
+                    goFeedback={this.handleGoFeedback}
+                  />
+                }
+              </MobileTemplate>
             </Authority>
             :
             <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                        store={this.props.mySalaryStore}>
-              <div className="templatePreview">
-                <div className="contentWrapper">
-                  <ComputerTemplate
-                    salaryTemplateShowSet={JSON.stringify(mySalaryBillData.salaryTemplate)}
-                    salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : JSON.stringify([])}
-                  >
-                    {
-                      (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryBillData.confirmStatus) || mySalaryBillData.confirmStatus === "0")) &&
-                      <ConfirmBtns
-                        confirmSalaryBill={this.confirmSalaryBill}
-                        goFeedback={this.handleGoFeedback}
-                      />
-                    }
-                  </ComputerTemplate>
-                </div>
+              <div className="weapp-salary-my-salary-view-payroll">
+                <Content {...salaryProps}>
+                  {
+                    (_.isNil(confirmStatus) || confirmStatus === "0") &&
+                    <ConfirmBtns
+                      confirmSalaryBill={this.confirmSalaryBill}
+                      goFeedback={this.handleGoFeedback}
+                    />
+                  }
+                </Content>
               </div>
             </Authority>
         }
@@ -252,7 +244,7 @@ export default class MobilePayroll extends React.Component {
           onCancel={() => this.setState({ captchaVisible: false })}
           onConfirm={() => this.props.mySalaryStore.setInitEmVerify()}
         />
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/pc4mobx/hrmSalary/pages/mySalary/index.less b/pc4mobx/hrmSalary/pages/mySalary/index.less
index 9f744351..84745bee 100644
--- a/pc4mobx/hrmSalary/pages/mySalary/index.less
+++ b/pc4mobx/hrmSalary/pages/mySalary/index.less
@@ -25,6 +25,19 @@
   padding: 32px 0;
   height: 100vh;
   overflow-y: auto;
+  background: #f6f6f6;
+
+  .space {
+    width: 100%;
+    max-width: 1000px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .ant-btn {
+      margin-right: 16px;
+    }
+  }
 }
 
 .page {
diff --git a/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js b/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
index 0a3e05a3..0ddd835d 100644
--- a/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
+++ b/pc4mobx/hrmSalary/pages/mySalary/mySalaryView.js
@@ -10,11 +10,9 @@ import { Button, message, Modal } from "antd";
 import { WeaLocaleProvider } from "ecCom";
 import Authority from "./authority";
 import Content from "../../components/pcTemplate/content";
-// import ComputerTemplate from "../payroll/templatePreview/computerTemplate";
 import { confirmSalaryBill, feedBackSalaryBill, payrollCheckType } from "../../apis/payroll";
 import CaptchaModal from "../../components/captchaModal";
 import "./index.less";
-// import "../payroll/templatePreview/index.less";
 
 const { getLabel } = WeaLocaleProvider;
 
@@ -92,31 +90,20 @@ class MySalaryView extends Component {
       background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "",
       itemTypeList: [employeeInformation, ...salaryGroups]
     };
-    console.log(mySalaryStore);
-    // const employeeInformation = !_.isEmpty(mySalaryStore) && mySalaryStore.employeeInformation;
-    // const salaryGroups = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryGroups;
-    // const salaryTemplateShowSet = !_.isEmpty(mySalaryStore) && mySalaryStore.salaryTemplate;
     return (
       <React.Fragment>
         <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}
                    store={this.props.mySalaryStore}>
-          <div className="weapp-salary-my-salary-view-payroll page">
-            <Content {...salaryProps}/>
-            {/*<div className="templatePreview">*/}
-            {/*  <ComputerTemplate*/}
-            {/*    isMsgPreview*/}
-            {/*    salaryTemplateShowSet={salaryTemplateShowSet ? JSON.stringify(salaryTemplateShowSet) : []}*/}
-            {/*    salaryItemSet={!_.isEmpty(salaryGroups) ? JSON.stringify([employeeInformation, ...salaryGroups]) : []}*/}
-            {/*  >*/}
-            {/*    {*/}
-            {/*      (!_.isEmpty(salaryGroups) && (_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0")) &&*/}
-            {/*      <ConfirmBtns*/}
-            {/*        confirmSalaryBill={this.confirmSalaryBill}*/}
-            {/*        goFeedback={this.handleGoFeedback}*/}
-            {/*      />*/}
-            {/*    }*/}
-            {/*  </ComputerTemplate>*/}
-            {/*</div>*/}
+          <div className="weapp-salary-my-salary-view-payroll">
+            <Content {...salaryProps}>
+              {
+                (_.isNil(mySalaryStore.confirmStatus) || mySalaryStore.confirmStatus === "0") &&
+                <ConfirmBtns
+                  confirmSalaryBill={this.confirmSalaryBill}
+                  goFeedback={this.handleGoFeedback}
+                />
+              }
+            </Content>
           </div>
         </Authority>
         <CaptchaModal
diff --git a/pc4mobx/hrmSalary/pages/mySalaryMobile/components/payrollList/index.js b/pc4mobx/hrmSalary/pages/mySalaryMobile/components/payrollList/index.js
index ae884bc6..8968b469 100644
--- a/pc4mobx/hrmSalary/pages/mySalaryMobile/components/payrollList/index.js
+++ b/pc4mobx/hrmSalary/pages/mySalaryMobile/components/payrollList/index.js
@@ -27,7 +27,10 @@ class Index extends Component {
                 <span>{getLabel(111, "发放时间")}</span>
                 <span>{moment(it.sendTime).format("YYYY-MM")}</span>
               </div>
-              <a href="javascript:void(0);">{`${getLabel(33564, "查看")}>`}</a>
+              <a href={`/spa/hrmSalary/static/index.html#/main/hrmSalary/mobilepayroll?id=${it.id}&type=phone`}
+                 target="_blank">
+                {`${getLabel(33564, "查看")}>`}
+              </a>
             </li>;
           })
         }

From b5dba954c6d1eb86ec7ef859bbd3c6cc4f1d176a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Tue, 12 Dec 2023 13:41:59 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feature/2.9.9.2312.01-=E5=B7=A5=E8=B5=84?=
 =?UTF-8?q?=E5=8D=95=E6=9F=A5=E7=9C=8B=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../hrmSalary/pages/mobilePayroll/index.js    | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/pc4mobx/hrmSalary/pages/mobilePayroll/index.js b/pc4mobx/hrmSalary/pages/mobilePayroll/index.js
index ba88093a..6ae229c8 100644
--- a/pc4mobx/hrmSalary/pages/mobilePayroll/index.js
+++ b/pc4mobx/hrmSalary/pages/mobilePayroll/index.js
@@ -175,7 +175,30 @@ export default class MobilePayroll extends React.Component {
     const { mySalaryStore: { clearLoading, pwdForm } } = this.props;
     const { mySalaryBillData, visible, captchaVisible, notSetting, pwdSetVisible } = this.state;
     const type = getQueryString("type");
-    if (_.isEmpty(toJS(this.props.mySalaryStore.mySalaryBill))) return <div></div>;
+    if (_.isEmpty(toJS(this.props.mySalaryStore.mySalaryBill))) return <div>
+      <WeaDialog
+        onCancel={() => this.setState({ visible: false }, () => clearLoading())}
+        title="请输入二次验证密码" visible={visible} initLoadCss
+        className="verifyWrapper"
+        hasScroll buttons={[
+        <Button type="primary" size="small" onClick={this.doSecondAuth}>确定</Button>
+      ]}
+      >
+        <WeaError tipPosition="bottom" ref="weaError" error="此项必填">
+          <WeaInput value={this.state.authCode} type="password" viewAttr={3}
+                    onChange={authCode => this.setState({ authCode })}/>
+        </WeaError>
+        {
+          notSetting &&
+          <div style={{ clear: "both", paddingTop: 10 }}>
+            {getLabel("514970", "您还未设置二次验证密码，点击")}
+            <a href="javascript:void(0);"
+               onClick={() => this.setState({ pwdSetVisible: true })}>{getLabel("30747", "设置")}</a>
+          </div>
+        }
+      </WeaDialog>
+      <PassSetDialog form={pwdForm} visible={pwdSetVisible} onCancel={() => this.setState({ pwdSetVisible: false })}/>
+    </div>;
     const {
       salaryTemplate, salaryGroups, employeeInformation,
       sendTime, confirmStatus
@@ -187,28 +210,6 @@ export default class MobilePayroll extends React.Component {
     };
     return (
       <React.Fragment>
-        <WeaDialog
-          onCancel={() => this.setState({ visible: false }, () => clearLoading())}
-          title="请输入二次验证密码" visible={visible} initLoadCss
-          className="verifyWrapper"
-          hasScroll buttons={[
-          <Button type="primary" size="small" onClick={this.doSecondAuth}>确定</Button>
-        ]}
-        >
-          <WeaError tipPosition="bottom" ref="weaError" error="此项必填">
-            <WeaInput value={this.state.authCode} type="password" viewAttr={3}
-                      onChange={authCode => this.setState({ authCode })}/>
-          </WeaError>
-          {
-            notSetting &&
-            <div style={{ clear: "both", paddingTop: 10 }}>
-              {getLabel("514970", "您还未设置二次验证密码，点击")}
-              <a href="javascript:void(0);"
-                 onClick={() => this.setState({ pwdSetVisible: true })}>{getLabel("30747", "设置")}</a>
-            </div>
-          }
-        </WeaDialog>
-        <PassSetDialog form={pwdForm} visible={pwdSetVisible} onCancel={() => this.setState({ pwdSetVisible: false })}/>
         {
           type === "phone" ?
             <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`}

From 7db9e03b0d648d82dc682ca5d9ceaaba32c76d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Wed, 20 Dec 2023 10:18:58 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feature/2.9.9.2312.01-=E5=B7=A5=E8=B5=84?=
 =?UTF-8?q?=E5=8D=95=E6=9F=A5=E7=9C=8B=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc4mobx/hrmSalary/components/pcTemplate/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pc4mobx/hrmSalary/components/pcTemplate/index.js b/pc4mobx/hrmSalary/components/pcTemplate/index.js
index b8485277..824722e6 100644
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.js
@@ -24,7 +24,7 @@ export const dealTemplate = (itemTypeList, type) => {
     const { items, groupName, groupId } = group;
     if (items.length !== 0) {
       items.forEach((item) => {
-        item.salaryItemValue = item.salaryItemValue || "100";
+        item.salaryItemValue = !_.isNil(item.salaryItemValue) ? item.salaryItemValue : "100";
       });
       if (items.length % 2 && type === "pc") items.push({});
       // 未分类不展示标题

From a59bc06d7a3d689501ada4604515d90e4bc293fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Wed, 20 Dec 2023 13:25:47 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feature/2.9.9.2312.01-=E5=B7=A5=E8=B5=84?=
 =?UTF-8?q?=E5=8D=95=E6=9F=A5=E7=9C=8B=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc4mobx/hrmSalary/components/mobileTemplate/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pc4mobx/hrmSalary/components/mobileTemplate/index.js b/pc4mobx/hrmSalary/components/mobileTemplate/index.js
index 8b9c771e..aeb0898e 100644
--- a/pc4mobx/hrmSalary/components/mobileTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/mobileTemplate/index.js
@@ -57,7 +57,7 @@ class Index extends Component {
                               return <div className="list-item" key={index}>
                                 <div className="item-name" title={salaryItemShowName || name}><span
                                   className="text">{salaryItemShowName || name || ""}</span></div>
-                                <div className="item-count">{salaryItemValue || "100"}</div>
+                                <div className="item-count">{salaryItemValue}</div>
                               </div>;
                             })
                           }