feature/2.9.9.2312.01-工资单查看页面重构

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>

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;
 

pc4mobx/hrmSalary/components/pcTemplate/content.js

@@ -73,6 +73,7 @@ class Content extends Component {
             }
           </div>
         </div>
+        {this.props.children}
       </div>
     );
   }

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({});
       // 未分类不展示标题

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>
     );
   }
 }

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 {

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

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>;
           })
         }