diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
index 6c8e324c..64b3892d 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
@@ -23,6 +23,26 @@
 }
 
 .showSettingForm {
+  .themeSetting {
+    border: 1px solid #e5e5e5;
+    border-bottom: none;
+
+    & > div {
+      padding: 5px 16px;
+      border-bottom: 1px solid #e5e5e5;
+
+      .wea-form-item-wrapper {
+        display: flex !important;
+        align-items: center;
+        justify-content: space-between;
+
+        .wea-input-normal {
+          flex: 1;
+          padding-right: 8px;
+        }
+      }
+    }
+  }
 
   .settingItemWrapper {
     .itemTitle {
@@ -197,8 +217,9 @@
     }
   }
 }
-.salaryItemModalWrapper{
-  .modalContent{
+
+.salaryItemModalWrapper {
+  .modalContent {
     padding: 16px;
   }
 }
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemModal.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemModal.js
index 7a6e5557..1eea09a3 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemModal.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemModal.js
@@ -20,7 +20,7 @@ class SalaryItemModal extends Component {
         onCancel={onCancel}
         title={title}
         visible={visible}
-        style={{ width: 500 }}
+        style={{ width: 600 }}
         hasScroll
         buttons={buttons}
         initLoadCss
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js
index b2865829..bdd1b1c8 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js
@@ -6,7 +6,7 @@
  */
 import React, { Component } from "react";
 import { toJS } from "mobx";
-import { WeaFormItem, WeaInput, WeaSelect, WeaSortable } from "ecCom";
+import { WeaFormItem, WeaInput, WeaSortable, WeaTransfer } from "ecCom";
 import { Icon, Modal } from "antd";
 import SalaryItemModal from "./salaryItemModal";
 import { getAvailableSalaryGroupSet, getAvailableSalaryItemSet } from "../../../apis/payroll";
@@ -134,7 +134,7 @@ class SalaryItemSettings extends Component {
             visible: true,
             title,
             groupId: record.groupId,
-            options: _.map(data, it => ({ ...it, showname: it.name, key: it.salaryItemId }))
+            options: _.map(data, it => ({ ...it, name: it.name, id: it.salaryItemId }))
           }
         });
       }
@@ -155,7 +155,7 @@ class SalaryItemSettings extends Component {
             ...modalPayload,
             visible: true,
             title,
-            options: _.map(data, it => ({ ...it, showname: it.groupName, key: it.groupId }))
+            options: _.map(data, it => ({ ...it, name: it.groupName, id: it.groupId }))
           }
         });
       }
@@ -269,12 +269,10 @@ class SalaryItemSettings extends Component {
                 <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 })}
+                : <WeaTransfer
+                  data={modalPayload.options}
+                  selectedKeys={checkedValue ? checkedValue.split(",") : []}
+                  onChange={v => this.setState({ checkedValue: v.join(",") })}
                 />
             }
           </div>
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
index 0477bca2..50972199 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
@@ -56,16 +56,17 @@ export default class ShowSettingForm extends React.Component {
     } = { ...salaryTemplateShowSet, ...JSON.parse(salaryTemplateShowSetStorage) };
     return (
       <div className="showSettingForm">
-        <WeaSearchGroup title="主题及其他设置" items={[]} needTigger showGroup center>
-          <WeaFormItem
-            label="工资单主题"
-            labelCol={{ span: 6 }}
-            wrapperCol={{ span: 18 }}
-          >
-            <WeaInput style={{ width: "200px" }} viewAttr={3} value={theme} onChange={(value) => {
-              this.handleChange({ theme: value });
-            }}/>
-            <span style={{ float: "right" }}>
+        <WeaSearchGroup title="主题及其他设置" items={[]} needTigger showGroup>
+          <div className="themeSetting">
+            <WeaFormItem
+              label="工资单主题"
+              labelCol={{ span: 6 }}
+              wrapperCol={{ span: 18 }}
+            >
+              <WeaInput style={{ width: "200px" }} viewAttr={3} value={theme} onChange={(value) => {
+                this.handleChange({ theme: value });
+              }}/>
+              <span style={{ float: "right" }}>
               <span>插入变量：</span>
               <a onClick={() => {
                 this.handleThemeNameCllck("${companyName}");
@@ -74,55 +75,56 @@ export default class ShowSettingForm extends React.Component {
                 this.handleThemeNameCllck("${salaryMonth}");
               }} className="themeFormalStr">薪资所属月</a>
             </span>
-          </WeaFormItem>
-          <WeaFormItem
-            label="工资单背景"
-            labelCol={{ span: 6 }}
-            wrapperCol={{ span: 18 }}
-          >
-            <BackgroundUpload imageUrl={background} onChange={(value) => {
-              this.handleChange({ background: value });
-            }}/>
-          </WeaFormItem>
-          <WeaFormItem
-            label="文本内容"
-            labelCol={{ span: 6 }}
-            wrapperCol={{ span: 18 }}
-          >
-            <WeaInput value={textContent} onChange={(value) => {
-              this.handleChange({ textContent: value });
-            }}/>
-          </WeaFormItem>
-          <WeaFormItem
-            label="文本内容位置"
-            labelCol={{ span: 6 }}
-            wrapperCol={{ span: 18 }}
-          >
-            <Radio.Group value={textContentPosition} onChange={(e) => {
-              this.handleChange({ textContentPosition: e.target.value });
-            }}>
-              <Radio value={"1"}>薪资项目前</Radio>
-              <Radio value={"2"}>薪资项目后</Radio>
-            </Radio.Group>
-          </WeaFormItem>
-          <WeaFormItem
-            label="薪资项为空时不显示"
-            labelCol={{ span: 6 }}
-            wrapperCol={{ span: 18 }}
-          >
-            <Switch checked={salaryItemNullStatus} onChange={(value) => {
-              this.handleChange({ salaryItemNullStatus: value });
-            }}/>
-          </WeaFormItem>
-          <WeaFormItem
-            label="薪资项为0时不显示"
-            labelCol={{ span: 6 }}
-            wrapperCol={{ span: 18 }}
-          >
-            <Switch checked={salaryItemZeroStatus} onChange={(value) => {
-              this.handleChange({ salaryItemZeroStatus: value });
-            }}/>
-          </WeaFormItem>
+            </WeaFormItem>
+            <WeaFormItem
+              label="工资单背景"
+              labelCol={{ span: 6 }}
+              wrapperCol={{ span: 18 }}
+            >
+              <BackgroundUpload imageUrl={background} onChange={(value) => {
+                this.handleChange({ background: value });
+              }}/>
+            </WeaFormItem>
+            <WeaFormItem
+              label="文本内容"
+              labelCol={{ span: 6 }}
+              wrapperCol={{ span: 18 }}
+            >
+              <WeaInput value={textContent} onChange={(value) => {
+                this.handleChange({ textContent: value });
+              }}/>
+            </WeaFormItem>
+            <WeaFormItem
+              label="文本内容位置"
+              labelCol={{ span: 6 }}
+              wrapperCol={{ span: 18 }}
+            >
+              <Radio.Group value={textContentPosition} onChange={(e) => {
+                this.handleChange({ textContentPosition: e.target.value });
+              }}>
+                <Radio value={"1"}>薪资项目前</Radio>
+                <Radio value={"2"}>薪资项目后</Radio>
+              </Radio.Group>
+            </WeaFormItem>
+            <WeaFormItem
+              label="薪资项为空时不显示"
+              labelCol={{ span: 6 }}
+              wrapperCol={{ span: 18 }}
+            >
+              <Switch checked={salaryItemNullStatus} onChange={(value) => {
+                this.handleChange({ salaryItemNullStatus: value });
+              }}/>
+            </WeaFormItem>
+            <WeaFormItem
+              label="薪资项为0时不显示"
+              labelCol={{ span: 6 }}
+              wrapperCol={{ span: 18 }}
+            >
+              <Switch checked={salaryItemZeroStatus} onChange={(value) => {
+                this.handleChange({ salaryItemZeroStatus: value });
+              }}/>
+            </WeaFormItem>
+          </div>
         </WeaSearchGroup>
 
         <WeaSearchGroup