模型字段列宽可调

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

@@ -7,6 +7,7 @@ import update from 'immutability-helper';
 import { useClickAway } from 'ahooks';
 import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
 import ResizeObserver from 'rc-resize-observer';
+import { Resizable } from 'react-resizable';
 
 import { generateUUID, highlightSearchContentByTerms, showMessage, inputWidth, paginate } from '../../../../util';
 import { dispatch, dispatchLatest } from '../../../../model'; 
@@ -26,6 +27,36 @@ const MENU_ID = 'model-attribute-menu';
 
 const InputDebounce = DebounceInput(300)(Input);
 
+const ResizeableHeaderCell = props => {
+  const { onResize, width, onClick, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th
+        onClick={onClick}
+        {...restProps}
+      />
+    </Resizable>
+  );
+};
+
 const DatatypeInput = ({ value = {}, datatypes, onChange }) => {
 
   const onNameChange = (value) => {
@@ -273,6 +304,211 @@ const ImportActionTable = (props) => {
     id: MENU_ID,
   });
 
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      editable: false,
+      width: 60,
+      fixed: 'left',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      }
+    },
+    {
+      title: '中文名称',
+      width: 200,
+      dataIndex: 'cnName',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      fixed: 'left',
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+          <span>
+          {highlightSearchContentByTerms(text, terms)}
+          </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '英文名称',
+      width: 200,
+      dataIndex: 'name',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      render: (text, record, index) => {
+        return (
+          <Tooltip title={text||''}>
+          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '类型',
+      width: (editingKey!=='')?250:150,
+      dataIndex: 'datatype',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      render: (_, record, __) => {
+        if (record?.datatype) {
+
+          if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {
+
+            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
+          
+          } else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
+            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
+          }
+
+          return record.datatype.name||'';
+        }
+
+        return '';
+      }
+    },
+    {
+      title: 'Not Null',
+      width: 80,
+      dataIndex: 'notNull',
+      editable: (type==='model'?true:false),
+      render: (notNull, record, index) => {
+        if (!notNull) {
+          return '-'; 
+        } else if (notNull) {
+          return (
+            <CheckOutlined />
+          )
+        }
+
+        return '';
+      }
+    },
+    {
+      title: '主键',
+      width: 50,
+      dataIndex: 'partOfPrimaryKeyLogically',
+      editable: (type==='model'?true:false),
+      render: (partOfPrimaryKeyLogically, record, index) => {
+        if (!partOfPrimaryKeyLogically) {
+          return '-'; 
+        } else if (partOfPrimaryKeyLogically === true) {
+          return (
+            <CheckOutlined />
+          )
+        }
+
+        return '';
+      }
+    },
+    {
+      title: '外键',
+      width: 50,
+      dataIndex: 'foreignKey',
+      editable: (type==='model'?true:false),
+      render: (foreignKey, record, index) => {
+        if (!foreignKey) {
+          return '-'; 
+        } else if (foreignKey === true) {
+          return (
+            <CheckOutlined />
+          )
+        }
+
+        return '';
+      }
+    },
+    {
+      title: '重点关注',
+      width: 75,
+      dataIndex: 'needAttention',
+      editable: (type==='model'?true:false),
+      render: (needAttention, record, index) => {
+        if (!needAttention) {
+          return '-'; 
+        } else if (needAttention === true) {
+          return (
+            <CheckOutlined />
+          )
+        }
+
+        return '';
+      }
+    },
+    {
+      title: '业务含义',
+      dataIndex: 'remark',
+      editable: true,
+      ellipsis: true,
+      require: true,
+      width: 200,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>
+            {highlightSearchContentByTerms(text, terms)}
+            </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '默认值',
+      dataIndex: 'defaultValue',
+      editable: true,
+      ellipsis: true,
+      width: 100,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>
+            {highlightSearchContentByTerms(text, terms)}
+            </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '计算规则',
+      dataIndex: 'definition',
+      editable: true,
+      ellipsis: true,
+      width: 200,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>
+            {highlightSearchContentByTerms(text, terms)}
+            </span>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      title: '值域',
+      dataIndex: 'valueRange',
+      editable: true,
+      ellipsis: true,
+      width: 100,
+      render: (text, _, __) => {
+        return (
+          <Tooltip title={text||''}>
+            <span>
+            {highlightSearchContentByTerms(text, terms)}
+            </span>
+          </Tooltip>
+        )
+      }
+    },
+  ];
+
+  const [ columns, setColumns ] = useState(cols);
+
   useClickAway(() => {
     save();
   }, tableRef);
@@ -324,6 +560,11 @@ const ImportActionTable = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filterPageCondition])
 
+  useEffect(() => {
+    mergedColumns();
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [validateReports, editable, editingKey])
+
   const isEditing = (record) => record?.iid === editingKey;
 
   const onAddClick = (event) => {
@@ -674,211 +915,8 @@ const ImportActionTable = (props) => {
     setSuggests([]);
   };
 
-  const columns = [
-    {
-      title: '序号',
-      dataIndex: 'key',
-      editable: false,
-      width: 60,
-      fixed: 'left',
-      render: (text, record, index) => {
-        return (index+1).toString();
-      }
-    },
-    {
-      title: '中文名称',
-      width: 200,
-      dataIndex: 'cnName',
-      editable: true,
-      ellipsis: true,
-      require: true,
-      fixed: 'left',
-      render: (text, _, __) => {
-        return (
-          <Tooltip title={text||''}>
-          <span>
-          {highlightSearchContentByTerms(text, terms)}
-          </span>
-          </Tooltip>
-        )
-      }
-    },
-    {
-      title: '英文名称',
-      width: 200,
-      dataIndex: 'name',
-      editable: true,
-      ellipsis: true,
-      require: true,
-      render: (text, record, index) => {
-        return (
-          <Tooltip title={text||''}>
-          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
-          </Tooltip>
-        )
-      }
-    },
-    {
-      title: '类型',
-      width: (editingKey!=='')?250:150,
-      dataIndex: 'datatype',
-      editable: true,
-      ellipsis: true,
-      require: true,
-      render: (_, record, __) => {
-        if (record?.datatype) {
-
-          if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {
-
-            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
-          
-          } else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
-            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
-          }
-
-          return record.datatype.name||'';
-        }
-
-        return '';
-      }
-    },
-    {
-      title: 'Not Null',
-      width: 80,
-      dataIndex: 'notNull',
-      editable: (type==='model'?true:false),
-      render: (notNull, record, index) => {
-        if (!notNull) {
-          return '-'; 
-        } else if (notNull) {
-          return (
-            <CheckOutlined />
-          )
-        }
-
-        return '';
-      }
-    },
-    {
-      title: '主键',
-      width: 50,
-      dataIndex: 'partOfPrimaryKeyLogically',
-      editable: (type==='model'?true:false),
-      render: (partOfPrimaryKeyLogically, record, index) => {
-        if (!partOfPrimaryKeyLogically) {
-          return '-'; 
-        } else if (partOfPrimaryKeyLogically === true) {
-          return (
-            <CheckOutlined />
-          )
-        }
-
-        return '';
-      }
-    },
-    {
-      title: '外键',
-      width: 50,
-      dataIndex: 'foreignKey',
-      editable: (type==='model'?true:false),
-      render: (foreignKey, record, index) => {
-        if (!foreignKey) {
-          return '-'; 
-        } else if (foreignKey === true) {
-          return (
-            <CheckOutlined />
-          )
-        }
-
-        return '';
-      }
-    },
-    {
-      title: '重点关注',
-      width: 75,
-      dataIndex: 'needAttention',
-      editable: (type==='model'?true:false),
-      render: (needAttention, record, index) => {
-        if (!needAttention) {
-          return '-'; 
-        } else if (needAttention === true) {
-          return (
-            <CheckOutlined />
-          )
-        }
-
-        return '';
-      }
-    },
-    {
-      title: '业务含义',
-      dataIndex: 'remark',
-      editable: true,
-      ellipsis: true,
-      require: true,
-      width: 200,
-      render: (text, _, __) => {
-        return (
-          <Tooltip title={text||''}>
-            <span>
-            {highlightSearchContentByTerms(text, terms)}
-            </span>
-          </Tooltip>
-        )
-      }
-    },
-    {
-      title: '默认值',
-      dataIndex: 'defaultValue',
-      editable: true,
-      ellipsis: true,
-      width: 100,
-      render: (text, _, __) => {
-        return (
-          <Tooltip title={text||''}>
-            <span>
-            {highlightSearchContentByTerms(text, terms)}
-            </span>
-          </Tooltip>
-        )
-      }
-    },
-    {
-      title: '计算规则',
-      dataIndex: 'definition',
-      editable: true,
-      ellipsis: true,
-      width: 200,
-      render: (text, _, __) => {
-        return (
-          <Tooltip title={text||''}>
-            <span>
-            {highlightSearchContentByTerms(text, terms)}
-            </span>
-          </Tooltip>
-        )
-      }
-    },
-    {
-      title: '值域',
-      dataIndex: 'valueRange',
-      editable: true,
-      ellipsis: true,
-      width: 100,
-      render: (text, _, __) => {
-        return (
-          <Tooltip title={text||''}>
-            <span>
-            {highlightSearchContentByTerms(text, terms)}
-            </span>
-          </Tooltip>
-        )
-      }
-    },
-  ];
-
   const editableColumn = [
-    ...columns,
+    ...cols,
     {
       title: '操作',
       dataIndex: 'action',
@@ -1017,7 +1055,7 @@ const ImportActionTable = (props) => {
   };
 
   const includeValidateColumn = [
-    ...columns,
+    ...cols,
     validateColumn
   ]
 
@@ -1030,10 +1068,9 @@ const ImportActionTable = (props) => {
     const hasValidateReports = (validateReports||[]).filter(report => report.type==='DataModelAttribute').length>0;
 
     if (editable) {
-
       let _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
 
-      return _columns.map((col) => {
+      _columns = _columns.map((col) => {
         if (!col.editable) {
           return col;
         }
@@ -1051,10 +1088,11 @@ const ImportActionTable = (props) => {
           }),
         };
       });
-    }
 
+      setColumns(_columns);
+    } else {
       //非编辑状态下 隐藏重点关注
-    let _columns = hasValidateReports ? includeValidateColumn: columns;
+      let _columns = hasValidateReports ? includeValidateColumn: cols;
 
       if (action === 'flow') {
         _columns = hasValidateReports ? includeValidateEditableColumn: editableColumn;
@@ -1062,7 +1100,8 @@ const ImportActionTable = (props) => {
 
       _columns = _columns.filter((col) => col.dataIndex!=='needAttention');
 
-    return _columns;
+      setColumns(_columns);
+    }
   }
 
   const moveRow = useCallback(
@@ -1127,6 +1166,30 @@ const ImportActionTable = (props) => {
     }
   }
 
+  const handleResize = index => (e, { size }) => {
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
+  const resizeColumns = () => {
+    return (
+      columns.map((column, index) => { 
+        return {
+          ...column,
+          onHeaderCell: column => ({
+            width: column.width,
+            onResize: handleResize(index),
+          }),
+        };
+      })
+    );
+  }
+
   return (
     <div className='model-import-action-table'>
       <div className='d-flex mb-3' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
@@ -1174,6 +1237,9 @@ const ImportActionTable = (props) => {
             <Form form={form} component={false} onValuesChange={onValuesChange}>
               <Table
                 components={{
+                  header: {
+                    cell: ResizeableHeaderCell,
+                  },
                   body: {
                     cell: EditableCell,
                     //编辑或者搜索状态下不允许拖动
@@ -1221,7 +1287,7 @@ const ImportActionTable = (props) => {
                   return rowParams;
                 }}
                 dataSource={filterPageData||[]}
-                columns={mergedColumns()}
+                columns={resizeColumns()}
                 size='small'
                 rowKey='iid'
                 pagination={false}