字段排序不能滚动问题

src/index.less

@@ -104,3 +104,11 @@ div[id^='__qiankun_microapp_wrapper_'] {
 .yy-typography, .yy-typography p {
   margin-bottom: 0 !important;
 }
+
+tr.drop-over-downward td {
+  border-bottom: 2px dashed #1890ff;
+}
+
+tr.drop-over-upward td {
+  border-top: 2px dashed #1890ff;
+}
\ No newline at end of file

src/view/Manage/Model/Component/ImportAction.jsx

@@ -253,8 +253,7 @@ const ImportAction = (props) => {
     return newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
   }
 
-  return (
-    <Spin spinning={loading}>
+  const container = (<>
     {
       <div className='d-flex mb-5' style={{ alignItems: 'center' }}>
         <span style={{ marginLeft: 'auto' }}>规范:</span>
@@ -298,7 +297,17 @@ const ImportAction = (props) => {
       editable={action!=='detail'} 
       terms={terms}
     />
-    </Spin>
+  </>);
+ 
+  return (
+    <>
+    {
+      //container包裹在Spin中,会有谷歌浏览器字段排序拖动不能滚动鼠标的问题,所以加载完成后,直接展示container
+      loading ? <Spin spinning={loading}>
+      { container }
+      </Spin> : container
+    }
+    </>
   );
 };
 

src/view/Manage/Model/Component/ImportActionIndex.jsx

@@ -603,36 +603,18 @@ const ImportActionIndex = (props) => {
     return hasValidateReports ? includeValidateColumn : columns;
   }
 
-  let pendingUpdateFn = undefined;
-  let requestedFrame = undefined;
-
-  const drawFrame = () => {
-    const newData = update(data, pendingUpdateFn);
-    
-    onChange && onChange(newData);
-
-    pendingUpdateFn = undefined;
-    requestedFrame = undefined;
-  };
-
-  const scheduleUpdate = (updateFn) => {
-    pendingUpdateFn = updateFn;
-    if (!requestedFrame) {
-      requestedFrame = requestAnimationFrame(drawFrame);
-    }
-  }
-
   const moveRow = useCallback(
     (dragIndex, hoverIndex) => {
 
       const dragRow = data[dragIndex];
-      scheduleUpdate({
+      const newData = update(data, {
         $splice: [
           [dragIndex, 1],
           [hoverIndex, 0, dragRow],
         ],
       });
 
+      onChange && onChange(newData);
     },
     //eslint-disable-next-line react-hooks/exhaustive-deps
     [data],
@@ -671,6 +653,7 @@ const ImportActionIndex = (props) => {
           editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!==null || keyword!=='' } >新增索引</Button>
         }
       </div>
+      <div className='content'>
         <DndProvider backend={HTML5Backend} >
           <Form form={form} component={false} onValuesChange={onValuesChange}>
             <Table
@@ -700,6 +683,7 @@ const ImportActionIndex = (props) => {
           </Form>
         </DndProvider>
       </div>
+    </div>
   );
 };
 

src/view/Manage/Model/Component/ImportActionIndex.less

 .model-import-action-index {
-
-  .yy-table {
+  .content {
     max-height: 200px !important;
     overflow: auto !important;
   }

src/view/Manage/Model/Component/ImportActionTable.jsx

@@ -691,39 +691,18 @@ const ImportActionTable = (props) => {
     return hasValidateReports ? includeValidateColumn : columns;
   }
 
-  //增加拖拽自动滚动功能
-  //https://codesandbox.io/s/react-dnd-example-12-s3nnf?file=/src/Container.jsx:393-425 
-  let pendingUpdateFn = undefined;
-  let requestedFrame = undefined;
-
-  const drawFrame = () => {
-    const newData = update(data, pendingUpdateFn);
-    
-    onChangeRef.current && onChangeRef.current(newData);
-
-    pendingUpdateFn = undefined;
-    requestedFrame = undefined;
-  };
-
-  const scheduleUpdate = (updateFn) => {
-    pendingUpdateFn = updateFn;
-    if (!requestedFrame) {
-      requestedFrame = requestAnimationFrame(drawFrame);
-    }
-  }
-
   const moveRow = useCallback(
     (dragIndex, hoverIndex) => {
 
       const dragRow = data[dragIndex];
-      scheduleUpdate({
+      const newData = update(data, {
         $splice: [
           [dragIndex, 1],
           [hoverIndex, 0, dragRow],
         ],
       });
 
-      // onChangeRef.current && onChangeRef.current(newData);
+      onChangeRef.current && onChangeRef.current(newData);
     },
     //eslint-disable-next-line react-hooks/exhaustive-deps
     [data],
@@ -762,6 +741,7 @@ const ImportActionTable = (props) => {
           editable && <Button className='ml-3' type="primary" onClick={onAddClick}  disabled={ editingKey!=='' || keyword!=='' } >新增字段</Button>
         }
       </div>
+      <div className='content'>
         <DndProvider backend={HTML5Backend} >
           <Form form={form} component={false} onValuesChange={onValuesChange}>
             <Table
@@ -845,6 +825,7 @@ const ImportActionTable = (props) => {
           </Form>
         </DndProvider>
       </div>
+    </div>
   );
 };
 

src/view/Manage/Model/Component/ImportActionTable.less

 .model-import-action-table {
 
-  .yy-table {
+  .content {
     max-height: 400px !important;
     overflow: auto !important;
   }