模型表头可拖动

package.json

@@ -10,7 +10,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
-    "antd": "^4.14.0",
+    "antd": "^4.18.2",
     "axios": "^0.19.0",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.4.2",

src/util/index.js

@@ -356,3 +356,26 @@ export function formatVersionHistoryDate(t) {
   var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
   return YY + MM + DD +" "+hh + mm + ss;
 }
+
+export function getTextLength(str) {
+  ///<summary>获得字符串实际长度，中文2，英文1</summary>
+  ///<param name="str">要获得长度的字符串</param>
+  var realLength = 0, len = str.length, charCode = -1;
+  for (var i = 0; i < len; i++) {
+    charCode = str.charCodeAt(i);
+    if (charCode >= 0 && charCode <= 128) 
+      realLength += 1;
+    else
+      realLength += 2;
+  }
+  return realLength;
+};
+
+export function getTextWidth(text, font='14px tabular-nums') {
+  // re-use canvas object for better performance
+  const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
+  const context = canvas.getContext("2d");
+  context.font = font;
+  const metrics = context.measureText(text);
+  return metrics.width;
+}
\ No newline at end of file

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

@@ -3,14 +3,34 @@ import { Button, Tooltip, Modal, Pagination, Table, Dropdown, Menu, Divider } fr
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import SmoothScroll from 'smooth-scroll';
 import classnames from 'classnames';
+import { Resizable } from 'react-resizable';
 
 import { dispatch } from '../../../../model'; 
-import { showMessage, getQueryParam, paginate, isSzseEnv } from '../../../../util';
+import { showMessage, getQueryParam, paginate, isSzseEnv, getTextLength, getTextWidth } from '../../../../util';
 import { AnchorId, AnchorTimestamp, Action, CatalogId, ModelerId } from '../../../../util/constant';
 // import Tag from "../../Tag";
 
 import './ModelTable.less';
 
+const ResizeableHeaderCell = props => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+
 const ModelTable = (props) => {
 
   const { data, onChange, onItemAction, onSelect, onHistory, catalogId, keyword, onAutoCreateTable, offset = null, modelId = null, view, selectModelerIds, onSubSelect } = props;
@@ -18,6 +38,7 @@ const ModelTable = (props) => {
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ subSelectedRowKeys, setSubSelectedRowKeys ] = useState([]);
   // const [ mouseEnterKey, setMouseEnterKey ] = useState(null);
+  const [ filterData, setFilterData ] = useState([]);
   const [ subData, setSubData ] = useState([]);
   
   const moreMenu = (record) => {
@@ -45,7 +66,7 @@ const ModelTable = (props) => {
     </Menu>
   }
 
-  const columns = [
+  const commonColumns = [
     {
       title: '序号',
       dataIndex: 'key',
@@ -53,6 +74,7 @@ const ModelTable = (props) => {
         return (index+1).toString();
       },
       width: 60,
+      ellipsis: true,
     },
     {
       title: '模型名称',
@@ -86,6 +108,7 @@ const ModelTable = (props) => {
       title: '模型描述',
       dataIndex: 'remark',
       ellipsis: true,
+      width: 200,
       render: (text, _, __) => {
         return (
           <Tooltip title={text||''}>
@@ -145,7 +168,8 @@ const ModelTable = (props) => {
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      // width: 180,
+      ellipsis: true,
       render: (_,record) => {
 
         let disableEdit = false, disableDelete = false, editTip = '', deleteTip = '';
@@ -228,6 +252,7 @@ const ModelTable = (props) => {
     }
   };
 
+  const [ columns, setColumns ] = useState(commonColumns);
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
   const { pageNum, pageSize } = pagination;
   
@@ -241,11 +266,16 @@ const ModelTable = (props) => {
   useEffect(() => {
 
     if ((modelId||'') !== '') {
+      
+      setColumns(commonColumns.filter(item => item.dataIndex!=='key'));
+
       window?.addEventListener("storage", (e) => {
         if (e.key === 'modelChange') {
           getDataModel();
         }
       });
+    } else if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
+      setColumns(commonColumns.splice(3, 0, pathColumn));
     }
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
@@ -300,6 +330,52 @@ const ModelTable = (props) => {
     }
   })
 
+  useEffect(() => {
+    const _data = paginate(data||[], pageNum, pageSize);
+
+    autoResizeColumns(_data);
+    setFilterData(_data);
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, pagination])
+
+  const autoResizeColumns = (val) => {
+    if ((val||[]).length>0) {
+      let maxLength = 0, maxLength_cn = 0, name = '', cnName = '';
+
+      (val||[]).forEach(item => {
+        let len = getTextLength(item.name||'');
+        let len_cn = getTextLength(item.cnName||'');
+
+        if (maxLength<len) {
+          name = item.name;
+          maxLength = len;
+        }
+
+        if (maxLength_cn<len_cn) {
+          cnName = item.cnName;
+          maxLength_cn = len_cn;
+        }
+      })
+
+      let newColumns = [...columns];
+      newColumns[1].width = getTextWidth(name)+24;
+      newColumns[2].width = getTextWidth(cnName)+24;
+
+      let minWidth = isSzseEnv?200:120;
+
+      if (newColumns[1].width < minWidth) {
+        newColumns[1].width = minWidth;
+      }
+
+      if (newColumns[2].width < minWidth) {
+        newColumns[2].width = minWidth;
+      }
+      
+      setColumns(newColumns);
+    }
+  }
+
   const getDataModel = () => {
     dispatch({
       type: 'datamodel.getDataModel',
@@ -308,6 +384,7 @@ const ModelTable = (props) => {
       },
       callback: data => {
         setSubData(data?[data]:[]);
+        autoResizeColumns(data?[data]:[]);
       },
       error: () => {
 
@@ -440,14 +517,22 @@ const ModelTable = (props) => {
     }
   }
 
+  const handleResize = index => (e, { size }) => {
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
   const rowSelection = {
     selectedRowKeys,
     onChange: onSelectChange,
     hideSelectAll: (modelId||'') !=='',
   };
 
-  const _data = paginate(data||[], pageNum, pageSize);
-
   const classes = classnames('model-table', {
     'model-table-sub': modelId
   });  
@@ -455,7 +540,7 @@ const ModelTable = (props) => {
   let expandable = undefined;
   if (!modelId) {
     let needExpand = false;
-    (_data||[]).forEach(record => {
+    (filterData||[]).forEach(record => {
       if (record?.alreadyCheckedOut) {
         needExpand = true;
       }
@@ -491,23 +576,26 @@ const ModelTable = (props) => {
     }
   }
 
-  let _columns = [...columns];
-
-  if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
-    _columns.splice(3, 0, pathColumn);
-  }
-
-  if ((modelId||'')!=='') {
-    _columns = _columns.filter(item => item.dataIndex!=='key')
-  }
-
   return (
     <div className={classes}>
       <Table
         rowSelection={rowSelection} 
-        columns={_columns||[]} 
+        components={{
+          header: {
+            cell: ResizeableHeaderCell,
+          }
+        }}
+        columns={
+          columns.map((col, index) => ({
+            ...col,
+            onHeaderCell: column => ({
+              width: column.width,
+              onResize: handleResize(index),
+            }),
+          }))
+        }
         rowKey={'id'}
-        dataSource={modelId?(subData||[]):(_data||[])}
+        dataSource={modelId?(subData||[]):(filterData||[])}
         pagination={false}
         size={modelId?'small':'default'}
         onRow={(record, index) => {