Merge branch 'feature/2.14.4.2406.02-工资单发放预览' into release/2.14.4.2406.02

2024-06-18 15:31:19 +08:00 · 2024-06-18 15:31:19 +08:00 · e50be3d3f3
parent 24f9d7e57f 1c67adbd25
commit e50be3d3f3
5 changed files with 129 additions and 38 deletions
--- a/pc4mobx/hrmSalary/apis/payroll.js
+++ b/pc4mobx/hrmSalary/apis/payroll.js
@ -244,3 +244,7 @@ export const getSmsSalaryItemSet = (params) => {
 export const genPdfBeforeExport = (params) => {
  return WeaTools.callApi("/api/bs/hrmsalary/salaryBill/genPdfBeforeExport", "GET", params);
 };
+//工资单预览
+export const salaryBillPreview = (params) => {
+  return postFetch("/api/bs/hrmsalary/salaryBill/preview", params);
+};
--- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/index.less
@ -0,0 +1,6 @@
+.payPreBox {
+  .pay-preview-layout {
+    width: 100%;
+    height: 100%;
+  }
+}
--- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/payrollPreviewDialog.js
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/payrollPreviewDialog.js
@ -0,0 +1,62 @@
+/*
+  *
+  * 工资单预览
+  * @Author:    黎永顺
+  * @Date:      2024/6/17
+  * @Wechat:
+  * @Email:     971387674@qq.com
+  * @description:
+*/
+import React, { Component } from "react";
+import { WeaDialog, WeaLocaleProvider } from "ecCom";
+import { salaryBillPreview } from "../../../../apis/payroll";
+import Content from "../../../../components/pcTemplate/content";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class PayrollPreviewDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      salaryBillData: { salaryTemplate: {}, salaryGroups: [], employeeInformation: {} }
+    };
+    this.preRef = null;
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) {
+      const { salaryInfoId, recipient } = nextProps;
+      salaryBillPreview({ salaryInfoId, recipient }).then(({ status, data }) => {
+        if (status) {
+          this.setState({ salaryBillData: data });
+        }
+      });
+    }
+  }
+
+
+  render() {
+    const {
+      salaryTemplate, salaryGroups, employeeInformation, sendTime
+    } = this.state.salaryBillData;
+    const salaryProps = {
+      theme: salaryTemplate.theme, tip: salaryTemplate.textContent, sendTime,
+      background: salaryTemplate.background, tipPosi: salaryTemplate.textContentPosition || "",
+      itemTypeList: [employeeInformation, ...salaryGroups]
+    };
+    return (
+      <WeaDialog
+        {...this.props} ref={dom => this.preRef = dom} scalable hasScroll className="payPreBox" initLoadCss
+        style={{
+          width: 998, height: window.innerHeight - 40, minHeight: 200, minWidth: 380, maxHeight: "90%",
+          maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
+        }}
+      >
+        <div className="pay-preview-layout">{!_.isEmpty(salaryGroups) && <Content {...salaryProps}/>}</div>
+      </WeaDialog>
+    );
+  }
+}
+
+export default PayrollPreviewDialog;
--- a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
@ -10,6 +10,7 @@ import CustomPaginationTable from "../../../components/customPaginationTable";
 import PayrollPartTable from "./payrollPartTable";
 import { genPdfBeforeExport, getPayrollIssuanceProgressBar } from "../../../apis/payroll";
 import ProgressModal from "../../../components/progressModal";
+import PayrollPreviewDialog from "./components/payrollPreviewDialog";

 const getLabel = WeaLocaleProvider.getLabel;
 const { ButtonSelect } = WeaDropdown;
@ -31,6 +32,10 @@ export default class PayrollGrant extends React.Component {
        title: "工资单发放",
        grantType: "",
        salarySendId: ""
+      },
+      payrollPreviewDialog: {
+        visible: false, title: getLabel(111, "工资单预览"),
+        salaryInfoId: "", recipient: ""
      }
    };
    this.pageInfo = { current: 1, pageSize: 10 };
@ -303,7 +308,7 @@ export default class PayrollGrant extends React.Component {
  };

  getColumns = () => {
-    const { selectedKey, showFeedbackColumn } = this.state;
+    const { selectedKey, showFeedbackColumn, payrollPreviewDialog } = this.state;
    const { payrollStore } = this.props;
    const { salaryGrantTableStore: columns, salarySendDetailBaseInfo } = payrollStore;
    return _.map([
@ -323,6 +328,15 @@ export default class PayrollGrant extends React.Component {
                    onClick={() => this.handleWithdraw({ ids: [record.id] })}>
                    撤回
                  </a>
+                  <a href="javascript:void(0);" style={{ marginRight: 10 }}
+                     onClick={() => this.setState({
+                       payrollPreviewDialog: {
+                         ...payrollPreviewDialog,
+                         visible: true, salaryInfoId: record.id, recipient: record.employeeId
+                       }
+                     })}>
+                    {getLabel(111, "查看")}
+                  </a>
                  {
                    salarySendDetailBaseInfo.showPdfBtn &&
                    <a
@ -367,11 +381,21 @@ export default class PayrollGrant extends React.Component {
            }
          } else if (salarySendDetailBaseInfo.canSend) {
            return (
-              <a
-                href="javascript:void(0);"
-                onClick={() => this.handleGrant({ ids: [record.id] })}>
-                发放
-              </a>
+              <React.Fragment>
+                <a
+                  href="javascript:void(0);" style={{ marginRight: 10 }}
+                  onClick={() => this.handleGrant({ ids: [record.id] })}>
+                  发放
+                </a>
+                <a href="javascript:void(0);" onClick={() => this.setState({
+                  payrollPreviewDialog: {
+                    ...payrollPreviewDialog,
+                    visible: true, salaryInfoId: record.id, recipient: record.employeeId
+                  }
+                })}>
+                  {getLabel(111, "查看")}
+                </a>
+              </React.Fragment>
            );
          }
        }
@ -538,9 +562,10 @@ export default class PayrollGrant extends React.Component {
      grantListCondition,
      setGrantListShowSearchAd,
      salaryGrantPageInfo,
-      getInfoList
+      getInfoList,
+      loading
    } = payrollStore;
-    const { selectedRowKeys, selectedKey, currentId, payrollPartModalParams } = this.state;
+    const { selectedRowKeys, selectedKey, currentId, payrollPartModalParams, payrollPreviewDialog } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange
@ -569,35 +594,19 @@ export default class PayrollGrant extends React.Component {
    ];
    return (
      <div className="payrollGrant_new">
-        <WeaTop
-          title="工资单发放" // 文字
-          icon={<i className="icon-coms-meeting"/>} // 左侧图标
-          iconBgcolor="#F14A2D" // 左侧图标背景色
-          showDropIcon={true} // 是否显示下拉按钮
-          buttons={this.getSearchsAdQuick()}
-        />
-
+        <WeaTop title="工资单发放" icon={<i className="icon-coms-meeting"/>} iconBgcolor="#F14A2D"
+                showDropIcon={true} buttons={this.getSearchsAdQuick()}/>
        <WeaTab
-          datas={topTab}
-          keyParam="viewcondition"
-          selectedKey={selectedKey}
-          onChange={v =>
-            this.setState({ selectedKey: v }, () => {
-              getInfoList({
-                salarySendId: currentId,
-                isGranted: v !== "0"
-              });
-            })
-          }
-          searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
-          searchsBasePlaceHolder="请输入姓名"
-          showSearchAd={grantListShowSearchAd} // 是否展开高级搜索面板
-          setShowSearchAd={bool => setGrantListShowSearchAd(bool)} //高级搜索面板受控
-          searchsAd={getSearchs(grantListConditionForm, toJS(grantListCondition), 2)} // 高级搜索内部数据
-          buttonsAd={adBtn} // 高级搜索内部按钮
-          onSearch={() => this.handleSearch()} // 点搜索按钮时的回调
-          onSearchChange={v => grantListConditionForm.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
-          searchsBaseValue={grantListConditionForm.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
+          datas={topTab} keyParam="viewcondition" selectedKey={selectedKey} searchType={["base", "advanced"]}
+          onChange={v => this.setState({ selectedKey: v }, () => {
+            getInfoList({ salarySendId: currentId, isGranted: v !== "0" });
+          })}
+          searchsBasePlaceHolder="请输入姓名" showSearchAd={grantListShowSearchAd} buttonsAd={adBtn}
+          setShowSearchAd={bool => setGrantListShowSearchAd(bool)}
+          searchsAd={getSearchs(grantListConditionForm, toJS(grantListCondition), 2)}
+          onSearch={() => this.handleSearch()}
+          onSearchChange={v => grantListConditionForm.updateFields({ username: v })}
+          searchsBaseValue={grantListConditionForm.getFormParams().username}
        />
        <div className="titleBar">
          <div className="titleBarLeft">
@ -626,7 +635,7 @@ export default class PayrollGrant extends React.Component {
        </div>
        <div className="tableWrapper">
          {
-            !_.isEmpty(this.getColumns()) ?
+            !loading ?
              <CustomPaginationTable
                rowKey="id"
                rowSelection={rowSelection}
@ -666,6 +675,14 @@ export default class PayrollGrant extends React.Component {
            progress={this.state.progress}
          />
        }
+        {/*工资单预览*/}
+        <PayrollPreviewDialog {...payrollPreviewDialog}
+                              onCancel={() => this.setState({
+                                payrollPreviewDialog: {
+                                  ...payrollPreviewDialog,
+                                  visible: false
+                                }
+                              })}/>
      </div>
    );
  }
--- a/pc4mobx/hrmSalary/stores/payroll.js
+++ b/pc4mobx/hrmSalary/stores/payroll.js
@ -458,7 +458,9 @@ export class payrollStore {
      departmentIds: form.departmentIds ? form.departmentIds.split(",") : [],
      subCompanyIds: form.subCompanyIds ? form.subCompanyIds.split(",") : []
    };
+    this.loading = true;
    API.getInfoList(params).then(res => {
+      this.loading = false;
      if (res.status) {
        this.salaryGrantTableStore = res.data.columns;
        this.salaryGrantDataSource = res.data.list;
@ -470,7 +472,7 @@ export class payrollStore {
      } else {
        message.error(res.errormsg || "获取失败");
      }
-    });
+    }).catch(() => this.loading = false);
  };

  // 工资单-工资单发放详情列表