模型基本信息自适应

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

@@ -497,28 +497,28 @@ const ImportActionHeader = (props) => {
           {...formItemLayout}
           onValuesChange={onValuesChange}
         >
-          <Row >
-            <Col span={8}>
+          <Row gutter={10}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="中文名称"
                 name="cnName"
                 labelAlign="left"
                 rules={[{ required: true, message: '请输入中文名称!' }]}
               >
-                <InputDebounce style={{ width: 300 }} />
+                <InputDebounce />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="英文名称"
                 name="name"
                 labelAlign="left"
                 rules={[{ required: true, message: '请输入英文名称!' }]}
               >
-                <AutoComplete options={options} onSearch={onSearch} style={{ width: 300 }}  />
+                <AutoComplete options={options} onSearch={onSearch} />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="规范"
                 name="easyDataModelerModelingConstraint"
@@ -532,19 +532,17 @@ const ImportActionHeader = (props) => {
                 />
               </Form.Item>
             </Col>
-          </Row>
-          <Row >
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="数据内容"
                 name="remark"
                 labelAlign="left"
                 rules={[{ required: true, message: '请输入数据内容!' }]}
               >
-                <TextArea row={4} style={{ width: 300 }} />
+                <TextArea row={4} />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="生成表类型"
                 name="easyDataModelerModelingTemplate"
@@ -559,102 +557,104 @@ const ImportActionHeader = (props) => {
                 />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="数据表类型"
                 name="tableType"
                 labelAlign="left"
                 hidden={onlyShowRequireChange}
               >
-                <Input style={{ width: 300 }} />
+                <Input />
               </Form.Item>
             </Col>
-          </Row>
-          <Row hidden={onlyShowRequireChange}>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="数据平台"
                 name="dataResidence"
                 labelAlign="left"
+                hidden={onlyShowRequireChange}
               >
-                <Input style={{ width: 300 }} disabled={true} />
+                <Input disabled={true} />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="数据情况"
                 name="dataCircumstances"
                 labelAlign="left"
                 hidden={onlyShowRequireChange}
               >
-                <Input style={{ width: 300 }} />
+                <Input />
               </Form.Item>
             </Col>
-            <Col span={8}>     
+            <Col md={24} lg={12} xl={8}>     
               <Form.Item
                 label="分布键"
                 name="easyDataModelerDistributionKey"
                 labelAlign="left"
+                hidden={onlyShowRequireChange}
               >
                 <AttributesSelect modelerData={modelerData} />
               </Form.Item>
             </Col>
-          </Row>
-          <Row hidden={onlyShowRequireChange}>
-            <Col span={8}>  
+            <Col md={24} lg={12} xl={8}>  
               <Form.Item
                 label="分区键"
                 name="partition"
                 labelAlign="left"
+                hidden={onlyShowRequireChange}
               >
                 <PartitionSelect modelerData={modelerData} partitionTypes={supportedPartitionTypes} />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="主键"
                 name="easyDataModelerPrimaryKey"
                 labelAlign="left"
+                hidden={onlyShowRequireChange}
               >
                 <AttributesSelect modelerData={modelerData} />
               </Form.Item>
             </Col>
-            <Col span={8}>  
+            <Col md={24} lg={12} xl={8}>  
               <Form.Item
                 label="类主键"
                 name="easyDataModelerSemiPrimaryKey"
                 labelAlign="left"
+                hidden={onlyShowRequireChange}
               >
                 <AttributesSelect modelerData={modelerData} mode='tags' />
               </Form.Item>
             </Col>
-          </Row>
-          <Row hidden={onlyShowRequireChange}>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="加载方式"
                 name="dataLoadingStrategy"
                 labelAlign="left"
+                hidden={onlyShowRequireChange}
               >
                 <LoadSelect />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="更新时间"
                 name="dataUpdatingTiming"
                 labelAlign="left"
+                hidden={onlyShowRequireChange}
               >
                 <UpdateSelect />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            <Col md={24} lg={12} xl={8}>
               <Form.Item
                 label="维护历史"
                 name="maintenanceRecords"
                 labelAlign="left"
+                hidden={onlyShowRequireChange}
               >
-                <Input style={{ width: 300 }} disabled={true} />
+                <Input disabled={true} />
               </Form.Item>
             </Col>
           </Row>  

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, getTextLength, getTextWidth } from '../../../../util';
@@ -124,7 +125,7 @@ const ModelTable = (props) => {
   const [ filterData, setFilterData ] = useState([]);
   const [ subData, setSubData ] = useState([]);
 
-  const commonColumns = [
+  const cols = [
     {
       title: '序号',
       dataIndex: 'key',
@@ -240,7 +241,7 @@ const ModelTable = (props) => {
     }
   };
 
-  const [ columns, setColumns ] = useState(commonColumns);
+  const [ columns, setColumns ] = useState(cols);
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
   const [ currentItem, setCurrentItem ] = useState(null);
   const { pageNum, pageSize } = pagination;
@@ -256,7 +257,7 @@ const ModelTable = (props) => {
 
     if ((modelId||'') !== '') {
       
-      setColumns(commonColumns.filter(item => item.dataIndex!=='key'));
+      setColumns(cols.filter(item => item.dataIndex!=='key'));
 
       window?.addEventListener("storage", (e) => {
         if (e.key === 'modelChange') {
@@ -264,7 +265,7 @@ const ModelTable = (props) => {
         }
       });
     } else if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
-      setColumns(commonColumns.splice(3, 0, pathColumn));
+      setColumns(cols.splice(3, 0, pathColumn));
     }
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
@@ -617,43 +618,69 @@ const ModelTable = (props) => {
 
   return (
     <div className={classes}>
-      <Table
-        rowSelection={rowSelection} 
-        components={{
-          header: {
-            cell: ResizeableHeaderCell,
+      <ResizeObserver
+        onResize={({ width }) => {
+          let newColumns = [...cols];
+
+          if ((modelId||'') !== '') {
+
+            newColumns = cols.filter(item => item.dataIndex!=='key');
+            
+          } else if ((modelId||'')==='' && (view==='state'||(keyword||'')!=='')) {
+            newColumns = cols.splice(3, 0, pathColumn);
           }
+
+          newColumns.forEach((column, index) => { 
+
+            if (!column.width) {
+              const rowWidth = (columns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 50;
+              
+              if (width > rowWidth) {
+                column.width = (width-rowWidth)>200?(width-rowWidth):200;        
+              } else {
+                column.width = 200;
+              }
+            }
+
+          });
+
+          setColumns(newColumns);
         }}
-        columns={
-          columns.map((col, index) => ({
-            ...col,
-            onHeaderCell: column => ({
-              width: column.width,
-              onResize: handleResize(index),
-            }),
-          }))
-        }
-        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);
-            },
+      >
+        <Table
+          rowSelection={rowSelection} 
+          components={{
+            header: {
+              cell: ResizeableHeaderCell,
+            }
+          }}
+          columns={
+            columns.map((col, index) => ({
+              ...col,
+              onHeaderCell: column => ({
+                width: column.width,
+                onResize: handleResize(index),
+              }),
+            }))
           }
-        }}
-        onChange={onTableChange}
-        expandable={expandable}
-        sticky={!modelId}
-        scroll={{
-          x: (modelId || (filterData||[]).length>0)?'max-content':null
-        }}
-      />
+          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);
+              },
+            }
+          }}
+          onChange={onTableChange}
+          expandable={expandable}
+        />
+      </ResizeObserver>
       {
         !modelId && (data||[]).length>0 && <Pagination
           className="text-center mt-3"

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

@@ -182,8 +182,7 @@ const SuggestTable = (props) => {
               const rowWidth = (columns.reduce((preVal, col) => (col.width?col.width:0) + preVal, 0)) + 50;
               
               if (width > rowWidth) {
-                column.width = width - rowWidth;
-        
+                column.width = (width-rowWidth)>200?(width-rowWidth):200;        
               } else {
                 column.width = 200;
               }