工资单模板

pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js

@@ -32,6 +32,42 @@ export default class ShowSettingForm extends React.Component {
         setSalaryTemplateShowSet(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;
+        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;
+        console.log("item:", item);
+        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)
+    }
+
     render() {
         const { payrollStore } = this.props;
         const { salaryTemplateShowSet } = payrollStore;
@@ -132,12 +168,24 @@ export default class ShowSettingForm extends React.Component {
                     <div className="itemTitle">薪资项目设置</div>
                     <div className="itemContent">
                         {
-                            salaryItemSet.map(group => (
+                            salaryItemSet.map((group, index) => (
                                 <div className="configItemWrapper">
-                                    <div className="configTitle">{group.groupName}</div>
+                                    <div className="configTitle">{group.groupName} 
+                                        {
+                                            index < salaryItemSet.length - 1 && 
+                                            <Icon type="caret-down" style={{marginLeft: "10px" , cursor: "pointer"}}
+                                                onClick={() => {this.handleDownClick(index)}} 
+                                            />
+                                        }
+                                        
+                                        {
+                                            index > 0 && <Icon type="caret-up" style={{marginLeft: "10px", cursor: 'pointer'}}
+                                            onClick={() => {this.handleUpClick(index)}}/>
+                                        }
+                                        </div>
                                     <div className="configContent">
                                         {group.items.map(item => (
-                                            <span className="editItem">{item.name}</span> 
+                                            <span className="editItem">{item.name} <Icon type="cross" style={{cursor: "pointer"}} onClick={() => {this.handleDeleteItem(group, item)}}/></span> 
                                         ))}
                                     </div>
                                 </div>

pc4mobx/hrmSalary/stores/payroll.js

@@ -69,6 +69,9 @@ export class payrollStore {
   @action
   setSalaryTemplateShowSet = (salaryTemplateShowSet) => this.salaryTemplateShowSet = salaryTemplateShowSet
 
+  @action
+  setSalaryItemSet = (salaryItemSet) => this.salaryItemSet = salaryItemSet
+
   // 初始化操作
   @action
   doInit = () => {