diff --git a/pc4mobx/hrmSalary/apis/payroll.js b/pc4mobx/hrmSalary/apis/payroll.js
index 80011331..8cf120c9 100644
--- a/pc4mobx/hrmSalary/apis/payroll.js
+++ b/pc4mobx/hrmSalary/apis/payroll.js
@@ -350,3 +350,11 @@ export const sendRangeSave = (params) => {
 export const sendRangeDelete = (params) => {
   return postFetch('/api/bs/hrmsalary/salaryBill/send/range/delete', params);
 }
+//工资单模板-获取模板可用的分组
+export const getAvailableSalaryGroupSet = (params) => {
+  return postFetch('/api/bs/hrmsalary/salaryBill/template/getAvailableSalaryGroupSet', params);
+}
+//工资单模板-获取模板分组下可用的薪资项目
+export const getAvailableSalaryItemSet = (params) => {
+  return postFetch('/api/bs/hrmsalary/salaryBill/template/getAvailableSalaryItemSet', params);
+}
diff --git a/pc4mobx/hrmSalary/pages/payroll/index.js b/pc4mobx/hrmSalary/pages/payroll/index.js
index f026277b..e098f240 100644
--- a/pc4mobx/hrmSalary/pages/payroll/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/index.js
@@ -101,7 +101,7 @@ export default class Payroll extends React.Component {
   // 模板搜索
   handleTemplateSearch() {
     const { templateSearchValue, templateSelect } = this.state;
-    let params = { name: templateSearchValue, salarySobId: templateSelect,current: 1 };
+    let params = { name: templateSearchValue, salarySobId: templateSelect, current: 1 };
     const { payrollStore: { getPayrollTemplateList } } = this.props;
     getPayrollTemplateList(params);
   }
@@ -344,8 +344,8 @@ export default class Payroll extends React.Component {
         });
         return;
       }
-      if(templateBaseData.replenishName === templateBaseData.name){
-        message.error("工资单模板名称和补发工资单模板名称不可相同")
+      if (templateBaseData.replenishName === templateBaseData.name) {
+        message.error("工资单模板名称和补发工资单模板名称不可相同");
         return;
       }
       this.setState({
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
index 7a704b62..6c8e324c 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
@@ -62,4 +62,143 @@
       }
     }
   }
+
+  .salarySetTitle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+}
+
+//拖拽列表
+.salaryItemSettingWrapper {
+  & > ul {
+    border: 1px solid #e5e5e5;
+
+    .wea-sortable-salary-item {
+      padding: 0;
+      margin: 0;
+      border: none;
+      cursor: default;
+
+      .salaryItemWrapper {
+        width: 100%;
+
+        .salaryItemHeader {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 32px;
+          line-height: 32px;
+          background: #f5f5f5;
+          border-bottom: 1px solid #f2f2f2;
+          padding: 0 12px;
+
+          .icon-coms-Add-to {
+            cursor: pointer;
+            color: #5d9cec;
+            position: relative;
+            z-index: 999;
+          }
+
+          .titleWrapper {
+            display: flex;
+            align-items: center;
+
+            .salaryClassTitle {
+              font-weight: 400;
+              font-size: 12px;
+              color: #111;
+              vertical-align: middle;
+            }
+
+            .iconWrapper {
+              display: none;
+              align-items: center;
+
+              i {
+                padding-left: 8px;
+                color: #666;
+                cursor: pointer;
+                position: relative;
+                z-index: 999;
+              }
+            }
+          }
+        }
+
+        .salaryItemHeader:hover {
+          .iconWrapper {
+            display: flex;
+          }
+        }
+
+        .salaryItemContent {
+          padding: 4px 16px;
+          background: #fff;
+          min-height: 52px;
+
+          & > ul {
+            display: flex;
+            width: 100%;
+            flex-wrap: wrap;
+
+            li {
+              width: 25%;
+
+              .salaryItemList {
+                width: 100%;
+
+                .salaryItem:hover {
+                  i.anticon-cross {
+                    display: block;
+                  }
+                }
+
+                .salaryItem {
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  min-height: 40px;
+                  color: #000;
+                  font-size: 12px;
+                  text-align: left;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  padding: 0 8px;
+
+                  .salaryItemName {
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  }
+
+                  i.anticon-cross {
+                    display: none;
+                    cursor: pointer;
+                  }
+                }
+              }
+            }
+          }
+
+          .empty {
+            width: 100%;
+            height: 44px;
+            line-height: 44px;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+.salaryItemModalWrapper{
+  .modalContent{
+    padding: 16px;
+  }
 }
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemModal.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemModal.js
new file mode 100644
index 00000000..7a6e5557
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemModal.js
@@ -0,0 +1,35 @@
+/*
+ * Author: 黎永顺
+ * name: 工资单模板-新增编辑薪资项目项
+ * Description:
+ * Date: 2023/2/2
+ */
+import React, { Component } from "react";
+import { WeaDialog } from "ecCom";
+import { Button } from "antd";
+
+class SalaryItemModal extends Component {
+  render() {
+    const { visible, title, onCancel, onConfirm } = this.props;
+    const buttons = [
+      <Button type="primary" onClick={onConfirm}>确定</Button>,
+      <Button type="ghost" onClick={onCancel}>取消</Button>
+    ];
+    return (
+      <WeaDialog
+        onCancel={onCancel}
+        title={title}
+        visible={visible}
+        style={{ width: 500 }}
+        hasScroll
+        buttons={buttons}
+        initLoadCss
+        className="salaryItemModalWrapper"
+      >
+        {this.props.children}
+      </WeaDialog>
+    );
+  }
+}
+
+export default SalaryItemModal;
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js
new file mode 100644
index 00000000..b2865829
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js
@@ -0,0 +1,287 @@
+/*
+ * Author: 黎永顺
+ * name: 工资单模板-薪资项目设置
+ * Description:
+ * Date: 2023/2/2
+ */
+import React, { Component } from "react";
+import { toJS } from "mobx";
+import { WeaFormItem, WeaInput, WeaSelect, WeaSortable } from "ecCom";
+import { Icon, Modal } from "antd";
+import SalaryItemModal from "./salaryItemModal";
+import { getAvailableSalaryGroupSet, getAvailableSalaryItemSet } from "../../../apis/payroll";
+
+class SalaryItemSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataList: [],
+      checkedValue: "",
+      modalPayload: {
+        visible: false,
+        title: "",
+        groupId: "",
+        groupName: "",
+        options: []
+      }
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.dataSource !== this.props.dataSource) {
+      this.setState({
+        dataList: _.map(toJS(nextProps.dataSource), item => {
+          return {
+            ...item,
+            id: item.groupId
+          };
+        })
+      });
+    }
+  }
+
+  /*
+   * Author: 黎永顺
+   * Description:删除薪资项目大类
+   * Params:
+   * Date: 2023/2/2
+   */
+  handleDeleteClick = (group) => {
+    Modal.confirm({
+      title: "信息确认",
+      content: "确认删除",
+      onOk: () => {
+        let resultSalaryItemSet = [...this.state.dataList];
+        resultSalaryItemSet.map((sourceGroup, index) => {
+          if (sourceGroup.groupId === group.groupId) {
+            resultSalaryItemSet.splice(index, 1);
+          }
+        });
+        this.setState({
+          dataList: resultSalaryItemSet
+        }, () => {
+          this.props.onChangeSalaryItem(resultSalaryItemSet);
+        });
+      }
+    });
+  };
+  /*
+   * Author: 黎永顺
+   * Description: 删除薪资项目项
+   * Params:
+   * Date: 2023/2/2
+   */
+  handleDeleteSalaryItem = (group, item) => {
+    let resultSalaryItemSet = [...this.state.dataList];
+    resultSalaryItemSet.map(sourceGroup => {
+      if (sourceGroup.groupId === group.groupId) {
+        sourceGroup.items.map((sourceItem, index) => {
+          if (sourceItem.id === item.id) {
+            sourceGroup.items.splice(index, 1);
+          }
+        });
+      }
+    });
+    this.setState({
+      dataList: resultSalaryItemSet
+    }, () => {
+      this.props.onChangeSalaryItem(resultSalaryItemSet);
+    });
+  };
+  handleCloseModal = () => {
+    const { modalPayload } = this.state;
+    this.setState({
+      checkedValue: "",
+      modalPayload: {
+        ...modalPayload,
+        visible: false,
+        title: "",
+        groupId: "",
+        groupName: "",
+        options: []
+      }
+    });
+  };
+  handleOpenModal = (record, title, isItem) => {
+    if (title === "分类名称编辑") {
+      const { modalPayload } = this.state;
+      this.setState({
+        modalPayload: {
+          ...modalPayload,
+          visible: true,
+          title,
+          groupId: record.groupId,
+          groupName: record.groupName
+        }
+      });
+    } else {
+      isItem ? this.getAvailableSalaryItemSet(record, title) : this.getAvailableSalaryGroupSet(record, title);
+    }
+  };
+  getAvailableSalaryItemSet = (record, title) => {
+    const payload = {
+      salarySobId: this.props.salarySobId,
+      existSalaryItemIds: _.map(record.items, it => it.id),
+      groupId: record.groupId,
+      isReplenish: this.props.isReplenish
+    };
+    getAvailableSalaryItemSet(payload).then(({ status, data }) => {
+      if (status) {
+        const { modalPayload } = this.state;
+        this.setState({
+          modalPayload: {
+            ...modalPayload,
+            visible: true,
+            title,
+            groupId: record.groupId,
+            options: _.map(data, it => ({ ...it, showname: it.name, key: it.salaryItemId }))
+          }
+        });
+      }
+    });
+  };
+  getAvailableSalaryGroupSet = (salarySobId, title) => {
+    const { dataList } = this.state;
+    const payload = {
+      salarySobId,
+      existSalaryGroupIds: _.map(dataList, it => it.groupId),
+      isReplenish: this.props.isReplenish
+    };
+    getAvailableSalaryGroupSet(payload).then(({ status, data }) => {
+      if (status) {
+        const { modalPayload } = this.state;
+        this.setState({
+          modalPayload: {
+            ...modalPayload,
+            visible: true,
+            title,
+            options: _.map(data, it => ({ ...it, showname: it.groupName, key: it.groupId }))
+          }
+        });
+      }
+    });
+  };
+  handleChangeClassName = (groupName) => {
+    const { modalPayload } = this.state;
+    this.setState({
+      modalPayload: {
+        ...modalPayload,
+        groupName
+      }
+    });
+  };
+  /*
+   * Author: 黎永顺
+   * Description:添加薪资项目项
+   * Params:
+   * Date: 2023/2/2
+   */
+  handleConfirm = () => {
+    const { modalPayload, checkedValue, dataList } = this.state;
+    const { options = [], groupId, groupName } = modalPayload;
+    if (groupName) {
+      this.setState({
+        dataList: _.map(dataList, it => {
+          if (it.groupId === groupId) {
+            return {
+              ...it,
+              groupName
+            };
+          }
+          return { ...it };
+        })
+      }, () => {
+        this.props.onChangeSalaryItem(this.state.dataList);
+        this.handleCloseModal();
+      });
+    } else {
+      this.setState({
+        dataList: groupId ? _.map(dataList, it => {
+          if (it.groupId === groupId) {
+            return {
+              ...it,
+              items: [...it.items, ..._.filter(options, child => checkedValue.split(",").includes(child.salaryItemId))]
+            };
+          }
+          return { ...it };
+        }) : [...dataList, ..._.filter(options, child => checkedValue.split(",").includes(child.groupId))]
+      }, () => {
+        this.props.onChangeSalaryItem(this.state.dataList);
+        this.handleCloseModal();
+      });
+    }
+  };
+
+  render() {
+    const { onChangeSalaryItem } = this.props;
+    const { dataList, modalPayload, checkedValue } = this.state;
+    return (
+      <div className="salaryItemSettingWrapper">
+        <WeaSortable
+          datas={dataList}
+          onChange={(list) => onChangeSalaryItem(list)}
+          renderNodeItem={(item) => {
+            return <div className="salaryItemWrapper">
+              <div className="salaryItemHeader">
+                <span className="titleWrapper">
+                  <span className="salaryClassTitle">{item.groupName}</span>
+                  <span className="iconWrapper">
+                    <i className="icon-coms-edit" onClick={() => this.handleOpenModal(item, "分类名称编辑")}/>
+                    <i className="icon-coms-Delete" onClick={() => this.handleDeleteClick(item)}/>
+                  </span>
+                </span>
+                <i className="icon-coms-Add-to" onClick={() => this.handleOpenModal(item, "请选择薪资项目", true)}/>
+              </div>
+              <div className="salaryItemContent">
+                {
+                  !_.isEmpty(item.items) ?
+                    <WeaSortable
+                      datas={item.items}
+                      onChange={(items) => onChangeSalaryItem(
+                        _.map(dataList, child => {
+                          if (child.id === item.id) {
+                            return { ...child, items };
+                          }
+                          return { ...child };
+                        })
+                      )}
+                      renderNodeItem={(filed) => {
+                        return <div className="salaryItemList">
+                          <div className="salaryItem">
+                            <div className="salaryItemName">{filed.name}</div>
+                            <Icon type="cross" onClick={() => this.handleDeleteSalaryItem(item, filed)}/>
+                          </div>
+                        </div>;
+                      }}
+                      className="wea-sortable-salary-item"
+                    /> :
+                    <div className="empty">暂无数据</div>
+                }
+              </div>
+            </div>;
+          }}
+          className="wea-sortable-salary-item"
+        />
+        <SalaryItemModal {...modalPayload} onCancel={this.handleCloseModal} onConfirm={this.handleConfirm}>
+          <div className="modalContent">
+            {
+              modalPayload.title === "分类名称编辑" ?
+                <WeaFormItem label="分类名称" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
+                  <WeaInput value={modalPayload.groupName} onChange={this.handleChangeClassName}/>
+                </WeaFormItem>
+                : <WeaSelect
+                  multiple
+                  style={{ width: "100%" }}
+                  value={checkedValue}
+                  options={modalPayload.options}
+                  onChange={v => this.setState({ checkedValue: v })}
+                />
+            }
+          </div>
+        </SalaryItemModal>
+      </div>
+    );
+  }
+}
+
+export default SalaryItemSettings;
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
index ef34deed..cec7f7d2 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
@@ -1,8 +1,10 @@
 import React from "react";
-import { Icon, Modal, Radio, Switch } from "antd";
-import { WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
+import { Radio, Switch } from "antd";
+import { WeaButtonIcon, WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
 import { inject, observer } from "mobx-react";
+import { toJS } from "mobx";
 import BackgroundUpload from "../components/backgroundUpload";
+import SalaryItemSettings from "./salaryItemSettings";
 import "./index.less";
 
 
@@ -21,6 +23,7 @@ export default class ShowSettingForm extends React.Component {
     const { payrollStore: { salaryTemplateShowSet, setSalaryTemplateShowSet } } = this.props;
     let request = { ...salaryTemplateShowSet, ...params };
     setSalaryTemplateShowSet(request);
+    window.localStorage.setItem("salary-showset", JSON.stringify(request));
   };
 
   // 工资单主题 插入变量
@@ -30,61 +33,19 @@ export default class ShowSettingForm extends React.Component {
     let request = { ...salaryTemplateShowSet };
     request.theme = (request.theme ? request.theme : "") + param;
     setSalaryTemplateShowSet(request);
+    window.localStorage.setItem("salary-showset", JSON.stringify(request));
   };
 
-  handleDownClick = (index) => {
-    const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
-    let downItem = salaryItemSet[index + 1];
-    let thisItem = salaryItemSet[index];
-    let resultSet = [...salaryItemSet];
-    resultSet[index] = downItem;
-    resultSet[index + 1] = thisItem;
+  handleChangeSalaryItem = (resultSet) => {
+    const { payrollStore: { setSalaryItemSet } } = this.props;
     setSalaryItemSet(resultSet);
   };
 
-  handleUpClick = (index) => {
-    const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
-    let upItem = salaryItemSet[index - 1];
-    let thisItem = salaryItemSet[index];
-    let resultSet = [...salaryItemSet];
-    resultSet[index] = upItem;
-    resultSet[index - 1] = thisItem;
-    setSalaryItemSet(resultSet);
-  };
-
-  handleDeleteItem = (group, item) => {
-    const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
-    let resultSalaryItemSet = [...salaryItemSet];
-    resultSalaryItemSet.map(sourceGroup => {
-      if (sourceGroup.id == group.id) {
-        sourceGroup.items.map((sourceItem, index) => {
-          if (sourceItem.id == item.id) {
-            sourceGroup.items.splice(index, 1);
-          }
-        });
-      }
-    });
-    setSalaryItemSet(resultSalaryItemSet);
-  };
-
-  handleDeleteClick = (index) => {
-    Modal.confirm({
-      title: "信息确认",
-      content: "确认删除",
-      onOk: () => {
-        const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
-        let resultSalaryItemSet = [...salaryItemSet];
-        resultSalaryItemSet.splice(index, 1);
-        setSalaryItemSet(resultSalaryItemSet);
-      }
-    });
-  };
-
   render() {
     const { payrollStore, id } = this.props;
-    const salaryTemplateShowSetStorage = id ? "{}" : window.localStorage.getItem("salary-showset") || "{}";
+    const salaryTemplateShowSetStorage = (id ? "{}" : window.localStorage.getItem("salary-showset") || "{}");
     const { salaryTemplateShowSet } = payrollStore;
-    const { salaryItemSet } = payrollStore;
+    const { salaryItemSet, templateBaseData } = payrollStore;
     const {
       theme,
       background,
@@ -164,54 +125,23 @@ export default class ShowSettingForm extends React.Component {
           </WeaFormItem>
         </WeaSearchGroup>
 
-        <WeaSearchGroup title="薪资项目设置" items={[]} needTigger showGroup>
-          {
-            salaryItemSet.map((group, index) => (
-              <div className="configItemWrapper">
-                <div className="configTitle">{group.groupName}
-                  {
-                    index < salaryItemSet.length - 1 &&
-                    <Icon
-                      type="caret-down"
-                      style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}
-                      onClick={() => {
-                        this.handleDownClick(index);
-                      }}
-                    />
-                  }
-                  {
-                    index > 0 &&
-                    <Icon
-                      type="caret-up"
-                      style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}
-                      onClick={() => {
-                        this.handleUpClick(index);
-                      }}
-                    />
-                  }
-                  <i
-                    className="icon-coms-Delete"
-                    style={{ cursor: "pointer", color: "#666", marginLeft: "10px" }}
-                    onClick={() => {
-                      this.handleDeleteClick(index);
-                    }}
-                  />
-                </div>
-                <div className="configContent">
-                  {group.items.map(item => (
-                    <span className="editItem">{item.name}
-                      <Icon
-                        type="cross" style={{ cursor: "pointer" }}
-                        onClick={() => {
-                          this.handleDeleteItem(group, item);
-                        }}
-                      />
-                    </span>
-                  ))}
-                </div>
-              </div>
-            ))
+        <WeaSearchGroup
+          title={
+            <div className="salarySetTitle">
+              <span>薪资项目设置</span>
+              <WeaButtonIcon buttonType="add" type="primary"
+                             onClick={() => this.salaryItemSettingsRef.handleOpenModal(toJS(templateBaseData).salarySob, "添加分类")}/>
+            </div>
           }
+          items={[]} needTigger showGroup
+        >
+          <SalaryItemSettings
+            ref={dom => this.salaryItemSettingsRef = dom}
+            dataSource={salaryItemSet}
+            onChangeSalaryItem={this.handleChangeSalaryItem}
+            salarySobId={toJS(templateBaseData).salarySob}
+            isReplenish={true}
+          />
         </WeaSearchGroup>
       </div>
     );
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/tmplateSettingForm.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/tmplateSettingForm.js
index af2ea5de..ad0fabfe 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/tmplateSettingForm.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/tmplateSettingForm.js
@@ -1,119 +1,40 @@
 import React from "react";
-import { Icon, Modal } from "antd";
-import { WeaSearchGroup } from "ecCom";
+import { WeaButtonIcon, WeaSearchGroup } from "ecCom";
 import { inject, observer } from "mobx-react";
 import { toJS } from "mobx";
 import "./index.less";
+import SalaryItemSettings from "./salaryItemSettings";
 
 
 @inject("payrollStore")
 @observer
 export default class TemplateSettingForm extends React.Component {
-
-  handleDownClick = (index) => {
-    const { payrollStore: { replenishSalaryTemplateSalaryItemSet, setReplenishSalaryTemplateSalaryItemSet } } = this.props;
-    let downItem = replenishSalaryTemplateSalaryItemSet[index + 1];
-    let thisItem = replenishSalaryTemplateSalaryItemSet[index];
-    let resultSet = [...replenishSalaryTemplateSalaryItemSet];
-    resultSet[index] = downItem;
-    resultSet[index + 1] = thisItem;
+  handleChangeSalaryItem = (resultSet) => {
+    const { payrollStore: { setReplenishSalaryTemplateSalaryItemSet } } = this.props;
     setReplenishSalaryTemplateSalaryItemSet(resultSet);
   };
 
-  handleUpClick = (index) => {
-    const { payrollStore: { replenishSalaryTemplateSalaryItemSet, setReplenishSalaryTemplateSalaryItemSet } } = this.props;
-    let upItem = replenishSalaryTemplateSalaryItemSet[index - 1];
-    let thisItem = replenishSalaryTemplateSalaryItemSet[index];
-    let resultSet = [...replenishSalaryTemplateSalaryItemSet];
-    resultSet[index] = upItem;
-    resultSet[index - 1] = thisItem;
-    setReplenishSalaryTemplateSalaryItemSet(resultSet);
-  };
-
-  handleDeleteItem = (group, item) => {
-    const { payrollStore: { replenishSalaryTemplateSalaryItemSet, setReplenishSalaryTemplateSalaryItemSet } } = this.props;
-    let resultSalaryItemSet = [...replenishSalaryTemplateSalaryItemSet];
-    resultSalaryItemSet.map(sourceGroup => {
-      if (sourceGroup.id === group.id) {
-        sourceGroup.items.map((sourceItem, index) => {
-          if (sourceItem.id === item.id) {
-            sourceGroup.items.splice(index, 1);
-          }
-        });
-      }
-    });
-    setReplenishSalaryTemplateSalaryItemSet(resultSalaryItemSet);
-  };
-
-  handleDeleteClick = (index) => {
-    Modal.confirm({
-      title: "信息确认",
-      content: "确认删除",
-      onOk: () => {
-        const { payrollStore: { replenishSalaryTemplateSalaryItemSet, setReplenishSalaryTemplateSalaryItemSet } } = this.props;
-        let resultSalaryItemSet = [...replenishSalaryTemplateSalaryItemSet];
-        resultSalaryItemSet.splice(index, 1);
-        setReplenishSalaryTemplateSalaryItemSet(resultSalaryItemSet);
-      },
-      onCancel: () => {
-      }
-    });
-  };
-
   render() {
     const { payrollStore } = this.props;
-    const { replenishSalaryTemplateSalaryItemSet } = payrollStore;
+    const { replenishSalaryTemplateSalaryItemSet, templateBaseData } = payrollStore;
     return (
       <div className="showSettingForm">
-        <WeaSearchGroup title="薪资项目设置" items={[]} needTigger showGroup>
-          {
-            !_.isEmpty(toJS(replenishSalaryTemplateSalaryItemSet)) &&
-            replenishSalaryTemplateSalaryItemSet.map((group, index) => (
-              <div className="configItemWrapper">
-                <div className="configTitle">{group.groupName}
-                  {
-                    index < replenishSalaryTemplateSalaryItemSet.length - 1 &&
-                    <Icon
-                      type="caret-down"
-                      style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}
-                      onClick={() => {
-                        this.handleDownClick(index);
-                      }}
-                    />
-                  }
-                  {
-                    index > 0 &&
-                    <Icon
-                      type="caret-up"
-                      style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}
-                      onClick={() => {
-                        this.handleUpClick(index);
-                      }}
-                    />
-                  }
-                  <i
-                    className="icon-coms-Delete"
-                    style={{ cursor: "pointer", color: "#666", marginLeft: "10px" }}
-                    onClick={() => {
-                      this.handleDeleteClick(index);
-                    }}
-                  />
-                </div>
-                <div className="configContent">
-                  {group.items.map(item => (
-                    <span className="editItem">{item.name}
-                      <Icon
-                        type="cross" style={{ cursor: "pointer" }}
-                        onClick={() => {
-                          this.handleDeleteItem(group, item);
-                        }}
-                      />
-                    </span>
-                  ))}
-                </div>
-              </div>
-            ))
+        <WeaSearchGroup
+          title={
+            <div className="salarySetTitle">
+              <span>薪资项目设置</span>
+              <WeaButtonIcon buttonType="add" type="primary"
+                             onClick={() => this.salaryItemSettingsRef.handleOpenModal(toJS(templateBaseData).salarySob, "添加分类")}/>
+            </div>
           }
+          items={[]} needTigger showGroup>
+          <SalaryItemSettings
+            ref={dom => this.salaryItemSettingsRef = dom}
+            dataSource={replenishSalaryTemplateSalaryItemSet}
+            onChangeSalaryItem={this.handleChangeSalaryItem}
+            salarySobId={toJS(templateBaseData).salarySob}
+            isReplenish={true}
+          />
         </WeaSearchGroup>
       </div>
     );