fix: 重构了台账管理模块，流程模块选择表字段并排序的逻辑

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNode.less

@@ -78,27 +78,6 @@
       margin-bottom: 16px;
       height: 530px;
       overflow-y: scroll;
-      table {
-        width: 100%;
-        td {
-          padding: 6px;
-          border: 1px solid #e8e8e8;
-        }
-        thead {
-          tr {
-            font-weight: 600;
-            background: #fafafa;
-          }
-          td {
-            width: 12rem;
-          }
-        }
-        tbody {
-          tr:hover {
-            background-color: #ededed;
-          }
-        }
-      }
     }
   }
   .header {

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/NodeEdit.jsx

@@ -34,6 +34,7 @@ const NodeEdit = props => {
   const [backType, setBackType] = useState([]); // 反馈类型
   const [eventTable, setEventTable] = useState([]); // 表名
   const [isDisable, setIsDisable] = useState(); // 允许回退是否可选择
+  const [filedData, setFiledData] = useState([]); // 已选字段列表
   const [form] = Form.useForm();
   useEffect(() => {
     form.resetFields();
@@ -100,6 +101,9 @@ const NodeEdit = props => {
     loadEventFields({ eventTableName: value.TableName }).then(res => {
       if (res.code === 0) {
         let defaultCheckedList = value[val] ? value[val].split(',') : [];
+
+        // 保存所有的字段用于右侧显示
+        setFiledData(defaultCheckedList);
         let allFields = []; // 所有得字段用来判断是否为外部字段
         // 处理树形结构
         let checkList = res.data.map(item => {
@@ -393,6 +397,7 @@ const NodeEdit = props => {
         handleCancel={() => setShowField(false)}
         fieldList={fieldList}
         onSubumit={val => setFiled(val)}
+        filedData={filedData}
       />
     </Drawer>
   );

src/pages/platformCenter/bsmanager/workFlow/flowNode/flowNodeComponents/nodeEditComponents/Fieldselection.jsx

-import React, { useEffect, useState } from 'react';
-import Sortable from 'sortablejs';
+import React, { useEffect, useState, useRef } from 'react';
 import { Modal, Divider, Checkbox } from 'antd';
 import styles from '../../flowNode.less';
+import DragTable from '@/components/DragTable/DragTable';
 const CheckboxGroup = Checkbox.Group;
 
 const Fieldselection = props => {
-  const { onSubumit, handleCancel, visible, fieldList } = props;
+  // 自定义获取改变后的值hooks
+  const usePrevious = value => {
+    const ref = useRef();
+    useEffect(() => {
+      ref.current = value;
+    });
+    return ref.current;
+  };
+  const { onSubumit, handleCancel, visible, fieldList, filedData } = props;
   const [checkList, setCheckList] = useState([]);
   const [selectList, setSelectList] = useState([]); // 选中字段列表
+  const [isFirst, setIsFirst] = useState(true);
+  const prevAmount = usePrevious({ checkList });
+  const columns = [
+    {
+      title: '字段名',
+      dataIndex: 'name',
+      width: 150,
+      key: 'name',
+    },
+  ];
   useEffect(() => {
     if (visible) {
       setCheckList(fieldList);
+      let newArr = filedData.map(item => {
+        return { name: item };
+      });
+      setSelectList(newArr);
+    } else {
+      setSelectList([]);
+      setCheckList([]);
+      setIsFirst(true);
     }
   }, [visible]);
   useEffect(() => {
-    let arr = [];
-    if (checkList.length < 0) {
+    if (prevAmount) {
+      selectAll();
+    }
+  }, [checkList]);
+  const selectAll = () => {
+    if (!visible) {
+      return;
+    }
+    // 是否第一次保存数据
+    if (isFirst) {
+      setIsFirst(false);
       return;
     }
-    checkList.forEach(element => {
-      arr = [...arr, ...element.defaultCheckedList];
+    // 新的选择后的数据（已选字段列表数据）
+    let newSelect = JSON.parse(JSON.stringify(selectList));
+    // 当前选中的
+    let currentArr = [];
+    // 上一次选中的
+    let preArr = [];
+    // 获取扁平化后的数组
+    checkList.forEach(item => {
+      currentArr = [...currentArr, ...item.defaultCheckedList];
     });
-    setSelectList(arr);
-    // 初始化拖拽
-    setTimeout(() => {
-      dragSort();
-    }, 0);
-  }, [checkList]);
+    prevAmount.checkList.forEach(item => {
+      preArr = [...preArr, ...item.defaultCheckedList];
+    });
+    currentArr = new Set(currentArr);
+    preArr = new Set(preArr);
+    // 找出相同的部分
+    let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))];
+    // 复选框事选中还是取消选中 add or del
+    let checkType;
+    if ([...currentArr].length > [...preArr].length) {
+      checkType = 'add';
+    } else if ([...currentArr].length < [...preArr].length) {
+      checkType = 'del';
+    }
+    if (checkType === 'add') {
+      // 添加新选中的元素
+      currentArr.forEach(item => {
+        if (someArr.indexOf(item) === -1) {
+          newSelect.push({ name: item });
+        }
+      });
+    } else if (checkType === 'del') {
+      // 删除取消勾选的元素
+      preArr.forEach(item => {
+        if (someArr.indexOf(item) === -1) {
+          newSelect.splice(newSelect.findIndex(ele => ele.name === item), 1);
+        }
+      });
+    }
+    console.log(newSelect, 'newSelect');
+    setSelectList(newSelect);
+  };
   // 提交表单
   const onFinish = () => {
-    onSubumit(selectList);
+    let callArr = selectList.map(item => item.name);
+    onSubumit(callArr);
   };
   // 复选框
   const onChange = (list, index) => {
@@ -55,23 +124,10 @@ const Fieldselection = props => {
       return chooseList;
     });
   };
-
-  // 初始化排序
-  const dragSort = () => {
-    let el = document.getElementById('doctor-drag-items');
-    if (el) {
-      Sortable.create(el, {
-        animation: 100, // 动画参数
-        onEnd(evt) {
-          // 拖拽完毕之后发生，只需关注该事件
-          let arr = [];
-          let len = evt.from.children;
-          len.forEach(item => {
-            arr.push(item.getAttribute('drag-id'));
-          });
-          setSelectList(arr);
-        },
-      });
+  // 拖拽回调
+  const dragCallBack = arr => {
+    if (arr) {
+      setSelectList(arr);
     }
   };
   return (
@@ -126,30 +182,16 @@ const Fieldselection = props => {
             </Divider>
           </div>
           <div className={styles.doctorTable}>
-            <table>
-              <thead>
-                <tr>
-                  <td>字段名</td>
-                </tr>
-              </thead>
-              <tbody id="doctor-drag-items">
-                {selectList && selectList.length > 0 ? (
-                  selectList.map((item, index) => (
-                    <tr drag-id={item} key={index} style={{ cursor: 'move' }}>
-                      <td>
-                        <span title={item}>{item}</span>
-                      </td>
-                    </tr>
-                  ))
-                ) : (
-                  <tr>
-                    <td colSpan="10" style={{ textAlign: 'center' }}>
-                      暂无数据
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-            </table>
+            <DragTable
+              bordered
+              rowKey={record => record.name}
+              columns={columns}
+              dataSource={selectList}
+              pagination={false}
+              size="small"
+              dragCallBack={dragCallBack}
+              ItemTypes="stadingOrder"
+            />
           </div>
         </div>
       </div>

src/pages/platformCenter/standingBook/standingBook.less

@@ -295,7 +295,7 @@
         padding: 0.5rem;
     }
     .cardContent{
-        height: 30rem;
+        height: 40rem;
         overflow-y: scroll;
         width: 19.5rem;
     }
@@ -311,24 +311,6 @@
   
   .doctorTable {
     margin-bottom: 16px;
-    table {
-      width: 100%;
-      td {
-        padding: 6px;
-        border: 1px solid #e8e8e8;
-      }
-      thead {
-        tr {
-          font-weight: 600;
-          background: #FAFAFA;
-        }
-      }
-      tbody{
-          tr:hover{
-              background-color:#ededed ;
-          }
-      }
-    }
   }
 .formData{
     height: calc(100vh - 170px);

src/routes/config.js

@@ -22,7 +22,7 @@ import CurrentSolution from '@/pages/currentSolution/CurrentSolution';
 import UserManage from '../pages/userCenter/userManage/UserManage';
 import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
 import SiteManage from '../pages/userCenter/siteManage/SiteManage';
-import SiteManageV2 from '../pages/userCenter/siteManageV2/SiteManage';
+import SiteManageV2 from '../pages/userCenter/siteManageV2/siteManage';
 import Dictionary from '../pages/dataCenter/dictionary';
 import Dictionary1 from '../pages/dataCenter/dictionary1';
 // import Search from '../pages/dataCenter/search';