产品-工资单模板添加发放薪资项目名称修改的功能

pc4mobx/hrmSalary/pages/payroll/index.js

@@ -316,7 +316,7 @@ export default class Payroll extends React.Component {
             {
               showOperateBtn &&
               <Button type="primary" onClick={() => {
-                this.setState({ stepSlideVisible: true });
+                this.setState({ stepSlideVisible: true, currentStep: 0 });
               }}>新建</Button>
             }
             {

pc4mobx/hrmSalary/pages/payroll/stepForm/index.less

@@ -192,9 +192,11 @@
 
                   .salaryItemName {
                     width: 100%;
+                    min-height: 18px;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
+                    cursor: pointer;
                   }
 
                   i.anticon-cross {

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

@@ -22,7 +22,9 @@ class SalaryItemSettings extends Component {
         title: "",
         groupId: "",
         groupName: "",
-        options: []
+        options: [],
+        salaryItemName: "",
+        salaryItemId: ""
       }
     };
   }
@@ -98,7 +100,9 @@ class SalaryItemSettings extends Component {
         title: "",
         groupId: "",
         groupName: "",
-        options: []
+        options: [],
+        salaryItemName: "",
+        salaryItemId: ""
       }
     });
   };
@@ -211,6 +215,57 @@ class SalaryItemSettings extends Component {
       });
     }
   };
+  handleEditSalaryItemName = (item, field, viewAttr, name) => {
+    const { salaryBillItemNameSet } = this.props;
+    const { groupId } = item, { salaryItemId } = field, { dataList } = this.state;
+    if (groupId === "111111111111111111") return;
+    this.setState({
+      dataList: _.map(dataList, item => {
+        if (item.groupId === groupId) {
+          return {
+            ...item,
+            items: _.map(item.items, child => {
+              if (child.salaryItemId === salaryItemId) {
+                console.log(child, name);
+                const originName = salaryBillItemNameSet[salaryItemId] && salaryBillItemNameSet[salaryItemId].salaryItemName;
+                return {
+                  ...child,
+                  name: (name && name !== (originName || child.originName)) ? `${child.name}(${originName || child.originName})` : `${child.name}`,
+                  viewAttr
+                };
+              }
+              return { ...child, viewAttr: 1 };
+            })
+          };
+        }
+        return {
+          ...item,
+          items: _.map(item.items, child => {
+            return { ...child, viewAttr: 1 };
+          })
+        };
+      })
+    });
+  };
+  handleChangeSalaryItemShowName = (item, field, name) => {
+    const { groupId } = item, { salaryItemId } = field, { dataList } = this.state;
+    this.setState({
+      dataList: _.map(dataList, item => {
+        if (item.groupId === groupId) {
+          return {
+            ...item,
+            items: _.map(item.items, child => {
+              if (child.salaryItemId === salaryItemId) {
+                return { ...child, name };
+              }
+              return { ...child };
+            })
+          };
+        }
+        return { ...item };
+      })
+    }, () => this.props.onChangeSalaryItem(this.state.dataList));
+  };
 
   render() {
     const { onChangeSalaryItem } = this.props;
@@ -248,7 +303,15 @@ class SalaryItemSettings extends Component {
                       renderNodeItem={(filed) => {
                         return <div className="salaryItemList">
                           <div className="salaryItem" title={filed.name}>
-                            <div className="salaryItemName">{filed.name}</div>
+                            {
+                              filed.viewAttr === 2 ?
+                                <WeaInput value={filed.name}
+                                          onBlur={(val) => this.handleEditSalaryItemName(item, filed, 1, val)}
+                                          onChange={(val) => this.handleChangeSalaryItemShowName(item, filed, val)}
+                                /> :
+                                <div className="salaryItemName"
+                                     onClick={() => this.handleEditSalaryItemName(item, filed, 2)}>{filed.name}</div>
+                            }
                             <Icon type="cross" onClick={() => this.handleDeleteSalaryItem(item, filed)}/>
                           </div>
                         </div>;

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

@@ -45,7 +45,7 @@ export default class ShowSettingForm extends React.Component {
     const { payrollStore, id } = this.props;
     const salaryTemplateShowSetStorage = (id ? "{}" : window.localStorage.getItem("salary-showset") || "{}");
     const { salaryTemplateShowSet } = payrollStore;
-    const { salaryItemSet, templateBaseData } = payrollStore;
+    const { salaryItemSet, templateBaseData, salaryBillItemNameSet } = payrollStore;
     const {
       theme,
       background,
@@ -142,7 +142,7 @@ export default class ShowSettingForm extends React.Component {
             dataSource={salaryItemSet}
             onChangeSalaryItem={this.handleChangeSalaryItem}
             salarySobId={toJS(templateBaseData).salarySob}
-            isReplenish={false}
+            isReplenish={false} salaryBillItemNameSet={salaryBillItemNameSet}
           />
         </WeaSearchGroup>
       </div>

pc4mobx/hrmSalary/stores/payroll.js

@@ -26,6 +26,7 @@ export class payrollStore {
   @observable salaryTemplateShowSet = {}; // 显示设置基础表单
   @observable replenishSalaryTemplateSalaryItemSet = []; // 补发工资单模版基础表单
   @observable salaryItemSet = []; // 显示设置薪资项
+  @observable salaryBillItemNameSet = {}; // 工资单模板薪资项目名称修改列表
 
   // **** 工资单页面 ****
   @observable salarySendTableStore = new TableStore(); // 工资单列表
@@ -214,6 +215,7 @@ export class payrollStore {
       if (res.status) {
         if (id !== "") {
           this.salaryItemSet = res.data.salaryTemplateSalaryItemSet;
+          this.salaryBillItemNameSet = res.data.salaryBillItemNameSet;
           this.replenishSalaryTemplateSalaryItemSet = res.data.salaryTemplateSalaryItemSet;
         }
         this.salaryTemplateShowSet = { ...res.data.salaryTemplateShowSet.data, ...JSON.parse(salaryTemplateShowSetStorage) };
@@ -289,6 +291,8 @@ export class payrollStore {
     return new Promise((resolve, reject) => {
       let params = this.convertParams();
       params.id = id;
+      console.log(params);
+      return
       API.updatePayroll(params).then(res => {
         if (res.status) {
           message.success("保存成功");