模型列表拖动问题

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

@@ -5,6 +5,7 @@ import SmoothScroll from 'smooth-scroll';
 import classnames from 'classnames';
 import { Resizable } from 'react-resizable';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
+import ResizeObserver from 'rc-resize-observer';
 
 import { dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam, paginate, isSzseEnv, formatDate, getDataModelerRole } from '../../../../util';
@@ -15,6 +16,7 @@ import './ModelTable.less';
 import 'react-contexify/dist/ReactContexify.css';
 
 const { Text } = Typography;
+const { Column } = Table;
 
 const ModelNameColumn = (props) => {
   const { text, record, detailItem } = props;
@@ -132,6 +134,7 @@ const ModelTable = (props) => {
     id: MENU_ID,
   });
   
+  const [ tableWidth, setTableWidth ] = useState(0);
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
   // const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
@@ -384,14 +387,52 @@ const ModelTable = (props) => {
   }, [data, pagination, sortRule])
 
   useEffect(() => {
+    if (tableWidth>0 && columns.length===0) {
+      let newColumns = [], newIncludePathColumns = [];
+
+      let excludePathCols = [...cols];
+      if ((modelId||'') !== '') {
+        excludePathCols = cols.filter(item => item.dataIndex!=='key');
+      }
+
+      excludePathCols.forEach((column, index) => {
+        const newColumn = {...column}; 
+        if (!newColumn.width) {
+          const rowWidth = (excludePathCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97; //展开50 勾选32 滚动条15
+          
+          if (tableWidth - rowWidth > 200) {
+            newColumn.width = tableWidth - rowWidth;        
+          } else {
+            newColumn.width = 200;
+          }
+        }
+
+        newColumns.push(newColumn);
+      });
+
       const includePathCols = [...cols];
       includePathCols.splice(3, 0, pathColumn);
 
-    setColumns(cols);
-    setIncludePathColumns(includePathCols);
+      includePathCols.forEach((column, index) => {
+        const newColumn = {...column}; 
+        if (!newColumn.width) {
+          const rowWidth = (includePathCols.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 97;
           
+          if (tableWidth - rowWidth > 200) {
+            newColumn.width = tableWidth-rowWidth;        
+          } else {
+            newColumn.width = 200;
+          }
+        }
+
+        newIncludePathColumns.push(newColumn);
+      });
+
+      setColumns([ ...newColumns, <Column key='auto' />]);
+      setIncludePathColumns([ ...newIncludePathColumns, <Column key='auto' />]);
+    }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [ tableWidth ])
 
   const modelEventChange = (e) => {
     if (e.key === 'modelChange') {
@@ -551,6 +592,8 @@ const ModelTable = (props) => {
       width: size.width,
     };
 
+    console.log('nextColumns', nextColumns);
+
     if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
       setIncludePathColumns(nextColumns);
     } else {
@@ -682,6 +725,11 @@ const ModelTable = (props) => {
 
   return (
     <div className={classes}>
+      <ResizeObserver
+        onResize={({ width }) => {
+          setTableWidth(width);
+        }}
+      >
         <Table
           rowSelection={rowSelection} 
           components={{
@@ -708,6 +756,7 @@ const ModelTable = (props) => {
           onChange={onTableChange}
           expandable={expandable}
         />
+      </ResizeObserver>
         {
           !modelId && (data||[]).length>0 && <Pagination
             className="text-center mt-3"