From 7ea4a6f6a8fbb5791057bd8c5e9a8630dfc86cff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Thu, 2 Feb 2023 14:46:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E8=B5=84=E5=8D=95=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=B0=E5=A2=9E=E8=96=AA=E8=B5=84=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E5=A4=A7=E7=B1=BB=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/payroll/stepForm/index.less         | 134 ++++++++++++++++
 .../payroll/stepForm/salaryItemSettings.js    | 135 ++++++++++++++++
 .../pages/payroll/stepForm/showSettingForm.js | 148 ++++++++----------
 3 files changed, 337 insertions(+), 80 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js

diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
index 7a704b62..f1356562 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/index.less
@@ -62,4 +62,138 @@
       }
     }
   }
+
+  .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;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js
new file mode 100644
index 00000000..41a0af9a
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/salaryItemSettings.js
@@ -0,0 +1,135 @@
+/*
+ * Author: 黎永顺
+ * name: 工资单模板-薪资项目设置
+ * Description:
+ * Date: 2023/2/2
+ */
+import React, { Component } from "react";
+import { toJS } from "mobx";
+import { WeaSortable } from "ecCom";
+import { Icon, Modal } from "antd";
+
+class SalaryItemSettings extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataList: []
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      dataList: _.map(toJS(this.props.dataSource), item => {
+        return {
+          ...item,
+          id: item.groupId
+        };
+      })
+    });
+  }
+
+  /*
+   * Author: 黎永顺
+   * Description:删除薪资项目大类
+   * Params:
+   * Date: 2023/2/2
+   */
+  handleDeleteClick = (group) => {
+    Modal.confirm({
+      title: "信息确认",
+      content: "确认删除",
+      onOk: () => {
+        let resultSalaryItemSet = [...toJS(this.props.dataSource)];
+        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 = [...toJS(this.props.dataSource)];
+    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);
+    });
+  };
+
+  render() {
+    const { onChangeSalaryItem } = this.props;
+    const { dataList } = 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={() => alert(1)}/>
+                    <i className="icon-coms-Delete" onClick={() => this.handleDeleteClick(item)}/>
+                  </span>
+                </span>
+                <i className="icon-coms-Add-to" onClick={() => alert(2)}/>
+              </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"
+        />
+      </div>
+    );
+  }
+}
+
+export default SalaryItemSettings;
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
index ef34deed..ae73027d 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js
@@ -1,8 +1,9 @@
 import React from "react";
-import { Icon, Modal, Radio, Switch } from "antd";
-import { WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
+import { Modal, Radio, Switch } from "antd";
+import { WeaButtonIcon, WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
 import { inject, observer } from "mobx-react";
 import BackgroundUpload from "../components/backgroundUpload";
+import SalaryItemSettings from "./salaryItemSettings";
 import "./index.less";
 
 
@@ -32,23 +33,8 @@ 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;
+  handleChangeSalaryItem = (resultSet) => {
+    const { payrollStore: { setSalaryItemSet } } = this.props;
     setSalaryItemSet(resultSet);
   };
 
@@ -56,9 +42,9 @@ export default class ShowSettingForm extends React.Component {
     const { payrollStore: { salaryItemSet, setSalaryItemSet } } = this.props;
     let resultSalaryItemSet = [...salaryItemSet];
     resultSalaryItemSet.map(sourceGroup => {
-      if (sourceGroup.id == group.id) {
+      if (sourceGroup.groupId === group.groupId) {
         sourceGroup.items.map((sourceItem, index) => {
-          if (sourceItem.id == item.id) {
+          if (sourceItem.id === item.id) {
             sourceGroup.items.splice(index, 1);
           }
         });
@@ -67,18 +53,6 @@ export default class ShowSettingForm extends React.Component {
     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;
@@ -164,54 +138,68 @@ 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"/>
+            </div>
           }
+          items={[]}
+          needTigger
+          showGroup
+        >
+          <SalaryItemSettings
+            dataSource={salaryItemSet}
+            onChangeSalaryItem={this.handleChangeSalaryItem}
+          />
+          {/*{*/}
+          {/*  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>
       </div>
     );