模型列表拖动问题

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(() => {
-    const includePathCols = [...cols];
-    includePathCols.splice(3, 0, pathColumn);
+    if (tableWidth>0 && columns.length===0) {
+      let newColumns = [], newIncludePathColumns = [];
 
-    setColumns(cols);
-    setIncludePathColumns(includePathCols);
+      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);
+
+      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,51 +725,57 @@ const ModelTable = (props) => {
 
   return (
     <div className={classes}>
-      <Table
-        rowSelection={rowSelection} 
-        components={{
-          header: {
-            cell: ResizeableHeaderCell,
-          }
-        }}
-        columns={mergedColumns()}
-        rowKey={'id'}
-        dataSource={modelId?(subData||[]):(filterData||[])}
-        pagination={false}
-        size={modelId?'small':'default'}
-        onRow={(record, index) => {
-          return {
-            id: `data-model-${record?.id}`,
-            style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
-            onContextMenu: event => {
-              setCurrentItem(record);
-              displayMenu(event);
-            },
-          }
+      <ResizeObserver
+        onResize={({ width }) => {
+          setTableWidth(width);
         }}
-        scroll={{ y: modelId?null:((filterData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)') }}
-        onChange={onTableChange}
-        expandable={expandable}
-      />
-      {
-        !modelId && (data||[]).length>0 && <Pagination
-          className="text-center mt-3"
-          showSizeChanger
-          showQuickJumper
-          onChange={(_pageNum, _pageSize) => {
-            setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
+      >
+        <Table
+          rowSelection={rowSelection} 
+          components={{
+            header: {
+              cell: ResizeableHeaderCell,
+            }
           }}
-          onShowSizeChange={(_pageNum, _pageSize) => {
-            setPagination({ pageNum: 1, pageSize: _pageSize });
+          columns={mergedColumns()}
+          rowKey={'id'}
+          dataSource={modelId?(subData||[]):(filterData||[])}
+          pagination={false}
+          size={modelId?'small':'default'}
+          onRow={(record, index) => {
+            return {
+              id: `data-model-${record?.id}`,
+              style: { backgroundColor: (record?.id===anchorId)?'#e7f7ff':'transparent' },
+              onContextMenu: event => {
+                setCurrentItem(record);
+                displayMenu(event);
+              },
+            }
           }}
-          current={pageNum}
-          pageSize={pageSize}
-          defaultCurrent={1}
-          total={(data||[]).length}
-          pageSizeOptions={[10,20,50]}
-          showTotal={total => `共 ${total} 条`}
+          scroll={{ y: modelId?null:((filterData||[]).length===0?null:'calc(100vh - 121px - 57px - 24px - 38px - 44px)') }}
+          onChange={onTableChange}
+          expandable={expandable}
         />
-      }
+      </ResizeObserver>
+        {
+          !modelId && (data||[]).length>0 && <Pagination
+            className="text-center mt-3"
+            showSizeChanger
+            showQuickJumper
+            onChange={(_pageNum, _pageSize) => {
+              setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
+            }}
+            onShowSizeChange={(_pageNum, _pageSize) => {
+              setPagination({ pageNum: 1, pageSize: _pageSize });
+            }}
+            current={pageNum}
+            pageSize={pageSize}
+            defaultCurrent={1}
+            total={(data||[]).length}
+            pageSizeOptions={[10,20,50]}
+            showTotal={total => `共 ${total} 条`}
+          />
+        }
       <RcMenu id={MENU_ID}>
         {
           (getDataModelerRole(user)!==DataModelerRoleReader) && <RcItem id="edit" disabled={disableEdit} onClick={handleItemClick}>