diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
index ebcbbe4c..ad636d55 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
@@ -96,6 +96,10 @@
   & > ul {
     border: 1px solid #e5e5e5;
 
+    .sortable-handle {
+      display: none;
+    }
+
     .wea-sortable-salary-item {
       padding: 0;
       margin: 0;
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempBaseSet/index.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempBaseSet/index.js
index fbb75a46..339429a8 100644
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempBaseSet/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempBaseSet/index.js
@@ -56,7 +56,7 @@ class Index extends Component {
       });
   };
   getPayrollBaseForm = (props) => {
-    const { tmplId: id, payrollStore: { payrollTempForm, payrollTempFeedbackForm, tmplDataSource } } = props;
+    const { detail, tmplId: id, payrollStore: { payrollTempForm, payrollTempFeedbackForm, tmplDataSource } } = props;
     getPayrollBaseForm({ id }).then(async ({ status, data }) => {
       if (status) {
         const { salaryTemplateBaseSet: { salarySobOptions, data: result } } = data;
@@ -84,7 +84,7 @@ class Index extends Component {
                     };
                   } else if (getKey(o) === "reissueRule") {
                     return {
-                      ...o, options: [
+                      ...o, viewAttr: !detail ? o.viewAttr : 1, options: [
                         { key: "0", showname: getLabel(332, "全部") },
                         { key: "1", showname: getLabel(542696, "按规则") }
                       ]
@@ -92,10 +92,11 @@ class Index extends Component {
                   } else if (getKey(o) === "replenishRule") {
                     return {
                       ...o, hide: (_.isNil(fieldsEchoData["reissueRule"]) || fieldsEchoData["reissueRule"] === "0"),
-                      options: _.map(replenishRuleOptions, t => ({ key: t.id, showname: t.content }))
+                      options: _.map(replenishRuleOptions, t => ({ key: t.id, showname: t.content })),
+                      viewAttr: !detail ? o.viewAttr : 1
                     };
                   }
-                  return { ...o };
+                  return { ...o, viewAttr: !detail ? o.viewAttr : 1 };
                 })
               };
             } else if (it.title === "sendSet") {
@@ -104,16 +105,16 @@ class Index extends Component {
                 items: _.map(it.items, o => {
                   if (getKey(o) === "autoSendStatus") {
                     return {
-                      ...o,
+                      ...o, viewAttr: !detail ? o.viewAttr : 1,
                       helpfulTitle: getLabel(544272, "开启后，还需在计划任务中配置定时任务，执行工资单定时发送任务；")
                     };
                   } else if (getKey(o) === "smsSetting") {
                     return {
-                      ...o,
+                      ...o, viewAttr: !detail ? o.viewAttr : 1,
                       hide: _.isNil(fieldsEchoData["smsStatus"]) || !fieldsEchoData["smsStatus"] || (!_.isNil(fieldsEchoData["smsStatus"]) && (fieldsEchoData["smsStatus"].toString() === "0"))
                     };
                   }
-                  return { ...o };
+                  return { ...o, viewAttr: !detail ? o.viewAttr : 1 };
                 })
               };
             }
@@ -125,17 +126,17 @@ class Index extends Component {
                 items: _.map(it.items, o => {
                   if (getKey(o) === "autoAckDays") {
                     return {
-                      ...o,
+                      ...o, viewAttr: !detail ? o.viewAttr : 1,
                       hide: _.isNil(fieldsEchoData["ackFeedbackStatus"]) ? o.hide : !fieldsEchoData["ackFeedbackStatus"],
                       helpfulTitle: getLabel(544273, "开启后，还需在计划任务中配置定时任务，执行自动确认任务；邮箱端查看工资单暂不支持确认及反馈；")
                     };
                   } else if (getKey(o) === "feedbackUrl" || getKey(o) === "mobileFeedbackUrl") {
                     return {
-                      ...o,
+                      ...o, viewAttr: !detail ? o.viewAttr : 1,
                       hide: _.isNil(fieldsEchoData["feedbackStatus"]) ? o.hide : !fieldsEchoData["feedbackStatus"]
                     };
                   }
-                  return { ...o };
+                  return { ...o, viewAttr: !detail ? o.viewAttr : 1 };
                 })
               };
             }
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/formRender.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/formRender.js
index 2556e25a..b004e177 100644
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/formRender.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/formRender.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { WeaSwitch } from "comsMobx";
 import { WeaButtonIcon, WeaFormItem, WeaLocaleProvider, WeaSearchGroup, WeaTools } from "ecCom";
 
@@ -41,7 +41,7 @@ export const payrollTempNormalSetForm = (form, condition, background, onChange =
                 />
             }
             {
-              getKey(fields) === "theme" &&
+              getKey(fields) === "theme" && c.viewAttr === 3 &&
               <div className="sft-variables">
                 <span className="sftv-tip">{getLabel(500143, "插入变量")}：</span>
                 <a className="sftv-item"
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js
index 6de4485a..19a55b79 100644
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/index.js
@@ -12,6 +12,7 @@ import { getPayrollItemList, getPayrollShowForm } from "../../../../apis/payroll
 import { tempNormalSetConditions } from "../conditions";
 import { payrollTempNormalSetForm } from "./formRender";
 import SalaryItemSettings from "../../../payroll/stepForm/salaryItemSettings";
+import SalaryItems from "./salaryItems";
 
 const getKey = WeaTools.getKey;
 const getLabel = WeaLocaleProvider.getLabel;
@@ -36,7 +37,9 @@ class Index extends Component {
   }
 
   getPayrollShowForm = () => {
-    const { tmplId: id, payrollStore: { payrollTempNormalForm, tmplDataSource, setTmplDataSource } } = this.props;
+    const {
+      detail, tmplId: id, payrollStore: { payrollTempNormalForm, tmplDataSource, setTmplDataSource }
+    } = this.props;
     getPayrollShowForm({ id }).then(async ({ status, data }) => {
       if (status) {
         const { salaryTemplateShowSet, salaryTemplateSalaryItemSet: salaryItemSet, salaryBillItemNameSet } = data;
@@ -69,7 +72,7 @@ class Index extends Component {
                 items: _.map(it.items, o => {
                   if (getKey(o) === "textContentPosition") {
                     return {
-                      ...o, label: getLabel(o.lanId, o.label),
+                      ...o, label: getLabel(o.lanId, o.label), viewAttr: !detail ? o.viewAttr : 1,
                       options: [
                         { key: "1", showname: getLabel(542697, "薪资项目前") },
                         { key: "2", showname: getLabel(542698, "薪资项目后") }
@@ -77,10 +80,10 @@ class Index extends Component {
                     };
                   } else if (getKey(o) === "background") {
                     return {
-                      ...o, title: getLabel(20001, "上传图片")
+                      ...o, viewAttr: !detail ? o.viewAttr : 1, title: getLabel(20001, "上传图片")
                     };
                   }
-                  return { ...o, label: getLabel(o.lanId, o.label) };
+                  return { ...o, viewAttr: !detail ? o.viewAttr : 1, label: getLabel(o.lanId, o.label) };
                 })
               };
             }
@@ -150,7 +153,7 @@ class Index extends Component {
 
   render() {
     const { conditions, salaryBillItemNameSet, salaryItemSet } = this.state;
-    const { payrollStore: { payrollTempNormalForm, tmplDataSource } } = this.props;
+    const { detail, payrollStore: { payrollTempNormalForm, tmplDataSource } } = this.props;
     return (
       <React.Fragment>
         {!_.isEmpty(conditions) && payrollTempNormalSetForm(payrollTempNormalForm, conditions, toJS(tmplDataSource).background, this.handleChange, this.handleInsertVar)}
@@ -158,20 +161,22 @@ class Index extends Component {
           title={
             <div className="salarySetTitle">
               <span>{getLabel(543593, "薪资项目设置")}</span>
-              <WeaButtonIcon buttonType="add" type="primary"
+              <WeaButtonIcon buttonType="add" type="primary" disabled={detail}
                              onClick={() => this.salaryItemSettingsRef.handleOpenModal(toJS(tmplDataSource).salarySob, getLabel(543594, "添加分类"))}/>
             </div>
           }
           items={[]} needTigger showGroup
         >
-          <SalaryItemSettings
-            ref={dom => this.salaryItemSettingsRef = dom}
-            dataSource={salaryItemSet} salaryTemplateId={this.props.tmplId || ""}
-            onChangeSalaryItem={this.handleChangeSalaryItem}
-            onChangeSalaryItemShowNamesetting={this.handleChangeSalaryItemShowNamesetting}
-            salarySobId={toJS(tmplDataSource).salarySob}
-            isReplenish={false} salaryBillItemNameSet={salaryBillItemNameSet}
-          />
+          {
+            detail ? <SalaryItems dataSource={salaryItemSet}/> : <SalaryItemSettings
+              ref={dom => this.salaryItemSettingsRef = dom}
+              dataSource={salaryItemSet} salaryTemplateId={this.props.tmplId || ""}
+              onChangeSalaryItem={this.handleChangeSalaryItem}
+              onChangeSalaryItemShowNamesetting={this.handleChangeSalaryItemShowNamesetting}
+              salarySobId={toJS(tmplDataSource).salarySob}
+              isReplenish={false} salaryBillItemNameSet={salaryBillItemNameSet}
+            />
+          }
         </WeaSearchGroup>
       </React.Fragment>
     );
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/salaryItems.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/salaryItems.js
new file mode 100644
index 00000000..90698f4f
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempNormalSet/salaryItems.js
@@ -0,0 +1,57 @@
+/*
+  * 工资单模板设置
+  * 薪资项目查看
+  * @Author:    黎永顺
+  * @Date:      2024/11/12
+  * @Wechat:
+  * @Email:     971387674@qq.com
+  * @description:
+*/
+import React, { Component } from "react";
+import { toJS } from "mobx";
+import { WeaLocaleProvider, WeaSortable } from "ecCom";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class SalaryItems extends Component {
+  render() {
+    const { dataSource } = this.props;
+    const dataList = _.map(toJS(dataSource), item => ({ ...item, id: item.groupId }));
+    return (
+      <div className="salaryItemSettingWrapper">
+        <WeaSortable datas={dataList} draggableType="icon"
+                     renderNodeItem={(item) => {
+                       return <div className="salaryItemWrapper">
+                         <div className="salaryItemHeader">
+                <span className="titleWrapper">
+                  <span className="salaryClassTitle">{item.groupName}</span>
+                  <span className="iconWrapper"/>
+                </span>
+                         </div>
+                         <div className="salaryItemContent">
+                           {
+                             !_.isEmpty(item.items) ?
+                               <WeaSortable
+                                 datas={item.items} draggableType="icon"
+                                 renderNodeItem={(filed) => {
+                                   return <div className="salaryItemList">
+                                     <div className="salaryItem" title={filed.name}>
+                                       <div className="salaryItemName"> {filed.name} </div>
+                                     </div>
+                                   </div>;
+                                 }}
+                                 className="wea-sortable-salary-item"
+                               /> :
+                               <div className="empty">暂无数据</div>
+                           }
+                         </div>
+                       </div>;
+                     }}
+                     className="wea-sortable-salary-item"
+        />
+      </div>
+    );
+  }
+}
+
+export default SalaryItems;
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempReissueSet/index.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempReissueSet/index.js
index fd443897..5a22198d 100644
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempReissueSet/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTempReissueSet/index.js
@@ -8,6 +8,7 @@ import React, { Component } from "react";
 import { toJS } from "mobx";
 import { WeaButtonIcon, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
 import SalaryItemSettings from "../../../payroll/stepForm/salaryItemSettings";
+import SalaryItems from "../payrollTempNormalSet/salaryItems";
 import { getReplenishForm } from "../../../../apis/payroll";
 
 const getLabel = WeaLocaleProvider.getLabel;
@@ -68,27 +69,30 @@ class Index extends Component {
   };
 
   render() {
-    const { payrollStore: { tmplDataSource } } = this.props;
+    const { payrollStore: { tmplDataSource }, detail } = this.props;
     const { replenishSalaryTemplateSalaryItemSet, salaryBillItemNameSet } = this.state;
     return (
       <WeaSearchGroup
         title={
           <div className="salarySetTitle">
             <span>{getLabel(543593, "薪资项目设置")}</span>
-            <WeaButtonIcon buttonType="add" type="primary"
+            <WeaButtonIcon buttonType="add" type="primary" disabled={detail}
                            onClick={() => this.salaryItemSettingsRef.handleOpenModal(toJS(tmplDataSource).salarySob, getLabel(543594, "添加分类"))}/>
           </div>
         }
         items={[]} needTigger showGroup>
-        <SalaryItemSettings
-          ref={dom => this.salaryItemSettingsRef = dom}
-          dataSource={replenishSalaryTemplateSalaryItemSet}
-          onChangeSalaryItem={this.handleChangeSalaryItem}
-          onChangeSalaryItemShowNamesetting={this.handleChangeSalaryItemShowNamesetting}
-          salarySobId={toJS(tmplDataSource).salarySob}
-          salaryTemplateId={this.props.tmplId || ""}
-          isReplenish={true} salaryBillItemNameSet={salaryBillItemNameSet}
-        />
+        {
+          detail ? <SalaryItems dataSource={replenishSalaryTemplateSalaryItemSet}/> :
+          <SalaryItemSettings
+            ref={dom => this.salaryItemSettingsRef = dom}
+            dataSource={replenishSalaryTemplateSalaryItemSet}
+            onChangeSalaryItem={this.handleChangeSalaryItem}
+            onChangeSalaryItemShowNamesetting={this.handleChangeSalaryItemShowNamesetting}
+            salarySobId={toJS(tmplDataSource).salarySob}
+            salaryTemplateId={this.props.tmplId || ""}
+            isReplenish={true} salaryBillItemNameSet={salaryBillItemNameSet}
+          />
+        }
       </WeaSearchGroup>
     );
   }
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTemplateTableList/index.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTemplateTableList/index.js
index 47fe8228..31f8c5e7 100644
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTemplateTableList/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/payrollTemplateTableList/index.js
@@ -25,7 +25,7 @@ class Index extends Component {
       copyDialog: { visible: false, title: "", copyId: "", salarySobId: "" },
       tmplSlide: {
         visible: false, tmplId: "", top: 0, width: 792, height: 100,
-        measureT: "%", measureX: "px", measureY: "%"
+        measureT: "%", measureX: "px", measureY: "%", detail: false
       }
     };
   }
@@ -82,9 +82,10 @@ class Index extends Component {
     const { copyDialog, tmplSlide, selectedRowKeys } = this.state;
     const { id, salarySobId } = record;
     switch (key) {
+      case "view":
       case "edit":
         this.setState({
-          tmplSlide: { ...tmplSlide, visible: true, tmplId: id }
+          tmplSlide: { ...tmplSlide, visible: true, tmplId: id, detail: key === "view" }
         });
         break;
       case "copy":
@@ -160,21 +161,22 @@ class Index extends Component {
                 const {} = record;
                 //显示更新模板
                 return showOperateBtn ? <React.Fragment>
-                  <a href="javascript:void(0);" onClick={() => this.handleOpts({ key: "edit" }, record)}
-                     style={{ marginRight: 10 }}>{getLabel(501169, "编辑")}</a>
-                  <a href="javascript:void(0);" style={{ marginRight: 10 }}
-                     onClick={() => this.handleOpts({ key: "copy" }, record)}
-                  >{getLabel(77, "复制")}</a>
-                  <Dropdown
-                    overlay={<Menu onClick={e => this.handleOpts(e, record)}>
-                      <Menu.Item key="del">{getLabel(535052, "删除")}</Menu.Item>
-                      <Menu.Item key="log">{getLabel(545781, "操作日志")}</Menu.Item>
-                    </Menu>
-                    }
-                  >
-                    <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
-                  </Dropdown>
-                </React.Fragment> : <a href="javascript:void(0);">{getLabel(83110, "查看详情")}</a>;
+                    <a href="javascript:void(0);" onClick={() => this.handleOpts({ key: "edit" }, record)}
+                       style={{ marginRight: 10 }}>{getLabel(501169, "编辑")}</a>
+                    <a href="javascript:void(0);" style={{ marginRight: 10 }}
+                       onClick={() => this.handleOpts({ key: "copy" }, record)}
+                    >{getLabel(77, "复制")}</a>
+                    <Dropdown
+                      overlay={<Menu onClick={e => this.handleOpts(e, record)}>
+                        <Menu.Item key="del">{getLabel(535052, "删除")}</Menu.Item>
+                        <Menu.Item key="log">{getLabel(545781, "操作日志")}</Menu.Item>
+                      </Menu>
+                      }>
+                      <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
+                    </Dropdown>
+                  </React.Fragment> :
+                  <a href="javascript:void(0);"
+                     onClick={() => this.handleOpts({ key: "view" }, record)}>{getLabel(83110, "查看详情")}</a>;
               }
             }
           ]}
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
index e59cf608..1ebc0216 100644
--- a/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/updatePayrollTemplateSlide/index.js
@@ -123,7 +123,7 @@ class Index extends Component {
     }).catch(() => this.setState({ loading: false }));
   };
   renderTitle = () => {
-    const { tmplId } = this.props, { current, loading } = this.state;
+    const { tmplId, detail } = this.props, { current, loading } = this.state;
     const { payrollStore: { payrollTempNormalForm, setTmplDataSource, tmplDataSource } } = this.props;
     return <div className="payroll-title-flex titleDialog">
       <div className="titleCol titleLeftBox">
@@ -156,7 +156,11 @@ class Index extends Component {
               <React.Fragment>
                 <Button type="ghost"
                         onClick={() => this.setState({ current: current - 1 })}>{getLabel(1876, "上一步")}</Button>
-                <Button type="primary" loading={loading} onClick={this.savePayroll}>{getLabel(537558, "保存")}</Button>
+                {
+                  !detail &&
+                  <Button type="primary" loading={loading}
+                          onClick={this.savePayroll}>{getLabel(537558, "保存")}</Button>
+                }
               </React.Fragment>
         }
       </div>
@@ -185,8 +189,29 @@ class Index extends Component {
       payrollStore: {
         initPayrollTempForm, initPayrollTempFeedbackForm, setSalaryBillItemNameSetting,
         initPayrollTempNormalForm, setTmplDataSource, hasBeenModify
-      }, onClose
+      }, onClose, detail
     } = this.props;
+    if (detail) {
+      initPayrollTempForm();
+      initPayrollTempFeedbackForm();
+      initPayrollTempNormalForm();
+      setTmplDataSource({});
+      setSalaryBillItemNameSetting([
+        {
+          salaryTemplateId: "",
+          salaryBillType: 0,
+          itemShowNameSetting: []
+        },
+        {
+          salaryTemplateId: "",
+          salaryBillType: 1,
+          itemShowNameSetting: []
+        }
+      ]);
+      this.setState({ current: 0 });
+      onClose(type);
+      return;
+    }
     if (hasBeenModify) {
       Modal.confirm({
         title: getLabel(131329, "信息确认"),