替换新拖拽组件

src/pages/platformCenter/bsmanager/workOrder/SortModal.jsx

+/* eslint-disable array-callback-return */
 /* eslint-disable no-plusplus */
 import React, { useState, useEffect } from 'react';
 import { Modal } from 'antd';
 
 import Sortable from 'sortablejs';
 import styles from './incident.less';
+import DragTable from '@/components/DragTable/DragTable';
 const SortModal = props => {
   const {
     callBackSubmit = () => {},
@@ -12,36 +14,46 @@ const SortModal = props => {
     onCancel,
     sortData1,
   } = props;
-  const [drag, setDrag] = useState([]);
-
-  useEffect(() => {
-    draftSort();
-  }, [visible]);
+  const [orderTable, setOrderTable] = useState([]);
+  const [flowIDs, setFlowIDs] = useState([]);
 
   const onSumbit = () => {
-    callBackSubmit({ str: drag });
+    console.log(flowIDs);
+    callBackSubmit({ str: flowIDs });
   };
 
-  // 拖拽初始化及逻辑
-  const draftSort = () => {
-    let el = document.getElementById('doctor-drag-items');
-    if (el) {
-      let sortable = Sortable.create(el, {
-        animation: 100, // 动画参数
-        onEnd(evt) {
-          // 拖拽完毕之后发生，只需关注该事件
-          let arr = [];
-          let len = evt.from.children.length;
-          for (let i = 0; i < len; i++) {
-            console.log(i);
-            arr.push(evt.from.children[i].getAttribute('drag-id'));
-          }
-          console.log(arr);
-          setDrag(arr);
-        },
-      });
+  // 根据orderTable值改变flowIDs
+  useEffect(() => {
+    let ids = [];
+    orderTable.map(item => {
+      ids.push(item.ID);
+    });
+    console.log(ids);
+    setFlowIDs(ids);
+  }, [orderTable]);
+
+  useEffect(() => {
+    console.log(sortData1);
+    if (visible) {
+      setOrderTable(sortData1);
+    }
+  }, [visible]);
+
+  // 拖拽回调函数
+  const dragCallBack = data => {
+    console.log(data);
+    if (data) {
+      setOrderTable(data);
     }
   };
+  const columns = [
+    {
+      title: '字段名',
+      dataIndex: 'name',
+      width: 150,
+      key: 'name',
+    },
+  ];
   return (
     <Modal
       title={title}
@@ -56,7 +68,7 @@ const SortModal = props => {
         style={{ width: '26rem', marginLeft: '24px' }}
       >
         <div className={styles.doctorTable}>
-          <table style={{ width: '104%', marginLeft: '-5px' }}>
+          {/* <table style={{ width: '104%', marginLeft: '-5px' }}>
             <thead>
               <tr>
                 <td>事件名称</td>
@@ -71,7 +83,19 @@ const SortModal = props => {
                 </tr>
               ))}
             </tbody>
-          </table>
+          </table> */}
+          <DragTable
+            bordered
+            style={{ marginBottom: '10px' }}
+            rowKey={record => record.extendID}
+            columns={columns}
+            dataSource={orderTable}
+            showHeader={false}
+            pagination={false}
+            size="small"
+            dragCallBack={dragCallBack}
+            ItemTypes="flowOrder"
+          />
         </div>
       </div>
     </Modal>

src/pages/platformCenter/bsmanager/workOrder/changeAdd.jsx

@@ -40,7 +40,7 @@ const AddModal = props => {
   const [arrValue, setArrValue] = useState([]);
   const [data, setData] = useState([]);
   const [flagg, setFlagg] = useState(0);
-  const [type, setType] = useState();
+  const [type, setType] = useState(); // 是否全选
   let objArr = [];
 
   const onChangeList = (list, index, title) => {
@@ -181,57 +181,6 @@ const AddModal = props => {
       ? (checkedListArr[e.target.index] = e.target.checkvalue)
       : (checkedListArr[e.target.index] = []);
     setType(e.target.checked);
-    // console.log(checkedListArr);
-    // console.log(arrValue);
-    // let objArr = [];
-    // checkedListArr.map((item, index) => {
-    //   objArr = objArr.concat(item);
-    // });
-    // console.log(objArr);
-    // let newArr = [];
-    // let lastArr = [];
-    // arrValue.map(item => {
-    //   if (item.name == undefined) {
-    //     newArr = arrValue;
-    //   } else {
-    //     newArr = arrValue.map(item => item.name);
-    //   }
-    // });
-    // console.log(newArr);
-    // if (e.target.checked == false) {
-    //   newArr.map(item => {
-    //     if (objArr.indexOf(item) != -1) {
-    //       lastArr.push(item);
-    //     }
-    //   });
-    //   let newArr1 = lastArr.map(item => ({ name: item }));
-    //   if (newArr1.length === 1 && newArr1[0].name === '') {
-    //     newArr1 = [];
-    //   }
-    //   console.log(newArr1);
-    //   setSelectData(newArr1);
-    //   setArrValue(lastArr);
-    // } else {
-    //   let addArr = [];
-    //   objArr.map(item => {
-    //     if (newArr.indexOf(item) == -1) {
-    //       addArr.push(item);
-    //     }
-    //   });
-    //   console.log(addArr);
-    //   addArr.map(item => {
-    //     newArr.push(item);
-    //   });
-    //   console.log(newArr);
-    //   let newArr1 = newArr.map(item => ({ name: item }));
-    //   if (newArr1.length === 1 && newArr1[0].name === '') {
-    //     newArr1 = [];
-    //   }
-    //   console.log(newArr1);
-
-    //   setSelectData(newArr1);
-    //   setArrValue(newArr);
-    // }
     setCheckedList(checkedListArr);
     setIndeterminate(indeterminateArr);
     setCheckAll(checkAllArr);
@@ -377,12 +326,7 @@ const AddModal = props => {
         let indeterminateArr = [];
         let checkAllArr = [];
         console.log(newCheckedList);
-        // let b = []
-        // let a = []
         arr.map((item, index) => {
-          // filed1[item].map((i, j) => {
-          //     b.push(i)
-          // })
           checkArr[index] = [];
           newCheckedList.map(checkItem => {
             if (filed1[item].includes(checkItem)) {
@@ -402,7 +346,6 @@ const AddModal = props => {
         let newArr = characterValue.length ? characterValue.split(',') : [];
         console.log(newArr);
         setSelectData(newArr);
-        // draftSort();
       }
     } else {
       setSelectData([]);

src/services/standingBook/api.js

+/* eslint-disable camelcase */
 /*
  * @Description:
  * @Author: leizhe
  * @Date: 2021-07-23 10:42:58
- * @LastEditTime: 2021-09-16 16:57:48
+ * @LastEditTime: 2021-12-03 11:26:01
  * @LastEditors: leizhe
  */
 import { CITY_SERVICE, get, PUBLISH_SERVICE, post, postForm } from '../index';