diff --git a/pc4mobx/hrmSalary/apis/payroll.js b/pc4mobx/hrmSalary/apis/payroll.js
index b78fac43..8ca9fab7 100644
--- 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);
+};
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/index.less b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/index.less
new file mode 100644
index 00000000..6c2c71f7
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/index.less
@@ -0,0 +1,6 @@
+.payPreBox {
+  .pay-preview-layout {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/payrollPreviewDialog.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/components/payrollPreviewDialog.js
new file mode 100644
index 00000000..763a45a6
--- /dev/null
+++ 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;
diff --git a/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js b/pc4mobx/hrmSalary/pages/payroll/payrollGrant/index.js
index 16043fcd..acc6bfd1 100644
--- 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,7 +328,13 @@ export default class PayrollGrant extends React.Component {
                     onClick={() => this.handleWithdraw({ ids: [record.id] })}>
                     撤回
                   </a>
-                  <a href="javascript:void(0);" style={{ marginRight: 10 }}>
+                  <a href="javascript:void(0);" style={{ marginRight: 10 }}
+                     onClick={() => this.setState({
+                       payrollPreviewDialog: {
+                         ...payrollPreviewDialog,
+                         visible: true, salaryInfoId: record.id, recipient: record.employeeId
+                       }
+                     })}>
                     预览
                   </a>
                   {
@@ -376,7 +387,12 @@ export default class PayrollGrant extends React.Component {
                   onClick={() => this.handleGrant({ ids: [record.id] })}>
                   发放
                 </a>
-                <a href="javascript:void(0);">
+                <a href="javascript:void(0);" onClick={() => this.setState({
+                  payrollPreviewDialog: {
+                    ...payrollPreviewDialog,
+                    visible: true, salaryInfoId: record.id, recipient: record.employeeId
+                  }
+                })}>
                   预览
                 </a>
               </React.Fragment>
@@ -549,7 +565,7 @@ export default class PayrollGrant extends React.Component {
       getInfoList,
       loading
     } = payrollStore;
-    const { selectedRowKeys, selectedKey, currentId, payrollPartModalParams } = this.state;
+    const { selectedRowKeys, selectedKey, currentId, payrollPartModalParams, payrollPreviewDialog } = this.state;
     const rowSelection = {
       selectedRowKeys,
       onChange: this.onSelectChange
@@ -659,6 +675,14 @@ export default class PayrollGrant extends React.Component {
             progress={this.state.progress}
           />
         }
+        {/*工资单预览*/}
+        <PayrollPreviewDialog {...payrollPreviewDialog}
+                              onCancel={() => this.setState({
+                                payrollPreviewDialog: {
+                                  ...payrollPreviewDialog,
+                                  visible: false
+                                }
+                              })}/>
       </div>
     );
   }