修改事件管理拖拽组件交互逻辑

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

+/* eslint-disable react/jsx-boolean-value */
 /* eslint-disable indent */
 /* eslint-disable prettier/prettier */
 /* eslint-disable prefer-promise-reject-errors */

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

+/* eslint-disable no-plusplus */
 import React, { useState, useEffect } from 'react';
 import { Modal } from 'antd';
 
-
-import styles from './incident.less';
 import Sortable from 'sortablejs';
+import styles from './incident.less';
 const SortModal = props => {
-    const {callBackSubmit = () => { }, title, visible, onCancel, sortData1 } = props;
-    const [drag, setDrag] = useState([])
+  const {
+    callBackSubmit = () => {},
+    title,
+    visible,
+    onCancel,
+    sortData1,
+  } = props;
+  const [drag, setDrag] = useState([]);
 
-    useEffect(()=>{
-        draftSort()
-    },[visible])
-   
-    const onSumbit = () => {
-        callBackSubmit({str: drag});
-    }
-    
-    //拖拽初始化及逻辑
-    const draftSort = () => {
-        let el = document.getElementById('doctor-drag-items');
-        if (el) {
-            let sortable = Sortable.create(el, {
-                animation: 100, //动画参数
-                onEnd: function (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)
-                }
-            });
-        }
+  useEffect(() => {
+    draftSort();
+  }, [visible]);
 
-    }
-    return (
-        <Modal
-            title={title}
-            visible={visible}
-            onCancel={onCancel}
-            onOk={onSumbit}
-            okText="确认"
-            cancelText="取消"
-        >
-            <div className={styles.cardContent} style={{width: '26rem', marginLeft:'24px'}}>
-                <div className={styles.doctorTable}>
-                    <table style={{width: '104%', marginLeft: '-5px'}}>
-                        <thead>
-                            <tr>
-                                <td>事件名称</td>
-                            </tr>
-                        </thead>
-                        <tbody id='doctor-drag-items'>
-                            {
-                                sortData1.map((item, index) => {
-                                
-                                    return <tr drag-id={item.ID} key={item.ID} style={{ cursor: 'move' }}>
-                                        <td><span title={item.name}>{item.name}</span></td>
-                                    </tr>
-                                })
+  const onSumbit = () => {
+    callBackSubmit({ str: drag });
+  };
 
-                            }
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </Modal>
-    )
-}
-export default SortModal;
\ No newline at end of file
+  // 拖拽初始化及逻辑
+  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);
+        },
+      });
+    }
+  };
+  return (
+    <Modal
+      title={title}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={onSumbit}
+      okText="确认"
+      cancelText="取消"
+    >
+      <div
+        className={styles.cardContent}
+        style={{ width: '26rem', marginLeft: '24px' }}
+      >
+        <div className={styles.doctorTable}>
+          <table style={{ width: '104%', marginLeft: '-5px' }}>
+            <thead>
+              <tr>
+                <td>事件名称</td>
+              </tr>
+            </thead>
+            <tbody id="doctor-drag-items">
+              {sortData1.map((item, index) => (
+                <tr drag-id={item.ID} key={item.ID} style={{ cursor: 'move' }}>
+                  <td>
+                    <span title={item.name}>{item.name}</span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+export default SortModal;

src/pages/platformCenter/bsmanager/workOrder/incident.less

@@ -193,24 +193,26 @@
   .cardContent {
     height: 30rem;
     overflow-y: scroll;
-    width: 19rem;
+    overflow-x: scroll;
+    width: 100%;
   }
   .cardItemData {
     padding: 1rem;
     border: 1px solid #b5b8c8;
     margin-bottom: 1rem;
-    overflow-x: hidden;
+    overflow-x: scroll;
   }
 }
 .listCard1 {
   display: flex;
   .cardItem1 {
     padding: 0.5rem;
+    width: 100%;
   }
   .cardContent1 {
     height: 33rem;
     overflow-y: scroll;
-    width: 1350px;
+    width: 100%;
     display: flex;
     justify-content: space-around;
   }
@@ -219,7 +221,7 @@
     border: 1px solid #b5b8c8;
     margin-bottom: 1rem;
     width: 33.3%;
-    overflow-x: hidden;
+    overflow-x: scroll;
   }
 }
 .doctorTable {

src/pages/platformCenter/standingBook/changeAdd.jsx

+/* eslint-disable no-shadow */
+/* eslint-disable arrow-body-style */
+/* eslint-disable array-callback-return */
 /* eslint-disable indent */
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
@@ -115,6 +118,7 @@ const AddModal = props => {
         }
       });
     }
+    console.log(newSelect);
     setSelectData(newSelect);
   };
 
@@ -153,12 +157,14 @@ const AddModal = props => {
       setCheckedList(checkArr);
       setIndeterminate(indeterminateArr);
       setCheckAll(checkAllArr);
+      // eslint-disable-next-line arrow-body-style
       let newArr = newCheckedList.map(item => {
         return { name: item };
       });
       if (newArr.length === 1 && newArr[0].name === '') {
         newArr = [];
       }
+      console.log(newArr);
       setSelectData(newArr);
     } else {
       // 弹窗关闭时清空数据
@@ -171,6 +177,7 @@ const AddModal = props => {
   }, [visible]);
 
   const dragCallBack = arr => {
+    console.log(arr);
     if (arr && !isFirst) {
       setSelectData(arr);
     }