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

2023-10-19 11:51:41 +08:00 · 2023-10-19 11:51:41 +08:00 · bec2e5a5b2
parent 5031d3a032
commit bec2e5a5b2
7 changed files with 426 additions and 6 deletions
--- a/pc4mobx/hrmSalary/components/mobileTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/mobileTemplate/index.js
@ -0,0 +1,89 @@
+/*
+ * Author: 黎永顺
+ * name: 移动端-工资单预览
+ * Description:
+ * Date: 2023/10/19
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
+import { dealTemplate } from "../pcTemplate";
+import moment from "moment";
+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, "mobile");
+    return (
+      <React.Fragment>
+        <div className="pbmc-head">{getLabel(111, "薪酬预览")}</div>
+        <div className="pbmc-body">
+          <div className="weapp-salary-payroll-mobile-preview">
+            <div className="bill-container">
+              <div className="bill-info-header">
+                <div className="title">{theme || ""}</div>
+                <div className="time">{moment().format("YYYY-MM-DD HH:mm:ss")}</div>
+                {
+                  background &&
+                  <div className="img"><img src={`${background}`} alt="logo"/></div>
+                }
+              </div>
+              {
+                !onlyOneGrup && tipPosi === "1" && tip &&
+                <div className="corporate-culture-text top" title={tip}>{tip}</div>
+              }
+              <div className="salary-detail-table-container">
+                {
+                  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="list-item send-tip top">
+                              <div className="label">{getLabel(111, "发放说明")}</div>
+                              <div className="detail">{tip}</div>
+                            </div>)
+                          }
+                          {
+                            items.map((templatItem, index) => {
+                              const { salaryItemValue, name } = templatItem || {};
+                              return <div className="list-item" key={index}>
+                                <div className="item-name" title={name}><span className="text">{name || ""}</span></div>
+                                <div className="item-count">{salaryItemValue || "100"}</div>
+                              </div>;
+                            })
+                          }
+                          {
+                            (onlyOneGrup && tipPosi === "2" && tip) && (<div className="list-item 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 footer" title={tip}>{tip}</div>
+              }
+            </div>
+          </div>
+        </div>
+        <div className="pbmc-footer">
+          <div className="pbmcf-indicator"></div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Index;
--- a/pc4mobx/hrmSalary/components/mobileTemplate/index.less
+++ b/pc4mobx/hrmSalary/components/mobileTemplate/index.less
@ -0,0 +1,137 @@
+.pbmc-head {
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px solid #f4f4f4;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.pbmc-body {
+  height: calc(100% - 150px);
+  background: #f6f6f6;
+  overflow: auto;
+
+  .weapp-salary-payroll-mobile-preview {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+
+    .bill-container {
+      background: #f6f6f6;
+
+      .bill-info-header {
+        padding-top: 16px;
+
+        .title {
+          padding: 0 16px;
+          font-size: 19px;
+          font-weight: 700;
+          margin-bottom: 12px;
+        }
+
+        .time {
+          padding: 0 16px;
+          font-size: 12px;
+          color: #999;
+        }
+
+        .img {
+          margin-top: 20px;
+          width: 100%;
+
+          img {
+            width: 100%;
+          }
+        }
+      }
+
+      .top {
+        padding-bottom: 0;
+      }
+
+      .footer {
+        padding-top: 8px;
+      }
+
+      .corporate-culture-text {
+        font-size: 14px;
+        text-align: left;
+        color: #111;
+        padding: 8px 16px;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .salary-detail-table-container {
+        padding-top: 8px;
+
+        .salary-group {
+          border-top: 1px solid #f2f2f2;
+          margin-bottom: 16px;
+
+          .group-title {
+            background: #fff;
+            background: var(--base-white);
+            display: flex;
+            color: #2780c4;
+            align-items: center;
+            min-height: 45px;
+            padding: 0 16px;
+            border-bottom: 1px solid #f2f2f2;
+            font-weight: bolder;
+            font-size: 16px;
+          }
+
+          .group-list {
+            .list-item {
+              display: flex;
+              min-height: 45px;
+              border-bottom: 1px solid #f2f2f2;
+              width: 100%;
+              background: #fff;
+
+              .item-name {
+                font-size: 16px;
+                padding: 8px 16px;
+                width: 40%;
+                display: flex;
+                align-items: center;
+                background: #fbfbfb;
+                border-right: 1px solid #f2f2f2;
+                flex-shrink: 0;
+                color: #2780c4;
+                font-weight: bolder;
+              }
+
+              .item-count {
+                display: flex;
+                align-items: center;
+                padding: 16px;
+                white-space: pre-wrap;
+                word-break: break-all;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.pbmc-footer {
+  position: relative;
+  height: 50px;
+
+  .pbmcf-indicator {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    width: 110px;
+    height: 4px;
+    background-color: #ebebeb;
+    border-radius: 2px;
+  }
+}
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.js
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.js
@ -1,11 +1,14 @@
 import React, { Component } from "react";
+import { WeaLocaleProvider } from "ecCom";
 import moment from "moment";
 import "./index.less";

-class Index extends Component {
+const getLabel = WeaLocaleProvider.getLabel;

+class Index extends Component {
  render() {
-    const { theme } = this.props;
+    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">
@ -15,6 +18,62 @@ class Index extends Component {
                <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 } = templatItem || {};
+                                return <div key={index}
+                                            className={`list-item ${index % 2 === 0 ? "even" : "odd"} ${index === 0 ? "zero" : ""} ${index === 1 ? "first" : ""}`}>
+                                  <div className="item-name" title={name}>
+                                    <span className="text">{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>
@ -24,3 +83,29 @@ class Index extends Component {
 }

 export default Index;
+
+export const dealTemplate = (itemTypeList, type) => {
+  let cloneItemTypeList = _.cloneDeep(itemTypeList);
+  let showData = [], onlyOneGrup = false;
+  cloneItemTypeList.forEach((group) => {
+    const { items, groupName, groupId } = group;
+    if (items.length !== 0) {
+      items.forEach((item) => {
+        item.salaryItemValue = "100";
+      });
+      if (items.length % 2 && type === "pc") items.push({});
+      // 未分类不展示标题
+      if (!groupId.includes("222222222222222222")) {
+        showData.push({ groupId, groupName, items });
+      } else {
+        showData.push({ items });
+      }
+    }
+  });
+  if (cloneItemTypeList.length === 1) {
+    onlyOneGrup = true;
+    // 只有一个分组的时候不展示分组名
+    cloneItemTypeList[0].name = "";
+  }
+  return { onlyOneGrup, showData };
+};
--- a/pc4mobx/hrmSalary/components/pcTemplate/index.less
+++ b/pc4mobx/hrmSalary/components/pcTemplate/index.less
@ -46,6 +46,101 @@
            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;
+                  }
+                }
+              }
+            }
+          }
+        }
      }
    }
  }
--- a/pc4mobx/hrmSalary/pages/payroll/templatePreview/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/templatePreview/index.less
@ -204,6 +204,16 @@
      box-shadow: 0 0 14px 0 hsla(0, 0%, 84%, .5);
      border-radius: 5px;
    }
+
+    .pb-mobile-container {
+      position: relative;
+      width: 430px;
+      height: calc(100vh - 170px);
+      background-color: #fff;
+      box-shadow: 0 0 14px 0 hsla(0, 0%, 84%, .5);
+      border-radius: 24px;
+      margin: 60px auto;
+    }
  }
 }

--- a/pc4mobx/hrmSalary/pages/payroll/templatePreview/tmpPreview.js
+++ b/pc4mobx/hrmSalary/pages/payroll/templatePreview/tmpPreview.js
@ -11,6 +11,7 @@ import moment from "moment";
 import computer from "./computer.png";
 import phone from "./phone_new.png";
 import PcTemplate from "../../../components/pcTemplate";
+import MobileTemplate from "../../../components/mobileTemplate";
 import cs from "classnames";
 import "./index.less";

@ -20,7 +21,7 @@ class TmpPreview extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      active: "0", theme: "", tip: "", background: "", tipPosi: "", itemTypeList: "",
+      active: "0", theme: "", tip: "", background: "", tipPosi: "", itemTypeList: [],
      phsImgList: [
        { key: "0", src: computer },
        { key: "1", src: phone }
@ -45,7 +46,8 @@ class TmpPreview extends Component {
    });
    if (theme.indexOf("${companyName}") !== -1) {
      const themeAccount = window.localStorage.getItem("theme-account") || {};
-      this.setState({ theme: theme.replaceAll("${companyName}", themeAccount.subcompanyname) });
+      if (themeAccount)
+        this.setState({ theme: theme.replaceAll("${companyName}", JSON.parse(themeAccount).subcompanyname) });
    }
  }

@ -67,7 +69,9 @@ class TmpPreview extends Component {
          <div className="pb-pc-container" style={{ display: active === "0" ? "block" : "none" }}>
            <PcTemplate {...this.state}/>
          </div>
-          <div className="pb-mobile-container" style={{ display: active === "1" ? "block" : "none" }}></div>
+          <div className="pb-mobile-container" style={{ display: active === "1" ? "block" : "none" }}>
+            <MobileTemplate {...this.state}/>
+          </div>
        </div>
      </div>
    );
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
@ -236,7 +236,7 @@ class Index extends Component {
          salaryItemZeroStatus: salaryItemZeroStatus === "1",
          salaryItemNullStatus: salaryItemNullStatus === "1"
        };
-        if ((textContentPosition && !textContent) || (!textContentPosition && textContent)) {
+        if (textContentPosition !== "0" && ((textContentPosition && !textContent) || (!textContentPosition && textContent))) {
          message.warning(getLabel(111, "请完善文本内容与文本内容位置设置！"));
          return;
        }