Merge branch 'derive' into 'master'

Derive

See merge request !10

src/model/datamodel.js

@@ -316,4 +316,12 @@ export function* dataTypeList() {
 
 export function* bindingLoadRangeList(payload) {
   return yield call(datamodelerService.bindingLoadRangeList, payload);
+}
+
+export function* getInheritanceTypes() {
+  return yield call(datamodelerService.getInheritanceTypes);
+}
+
+export function* inheriteDataModel(payload) {
+  return yield call(datamodelerService.inheriteDataModel, payload);
 }
\ No newline at end of file

src/service/datamodeler.js

@@ -267,4 +267,12 @@ export function dataTypeList() {
 
 export function bindingLoadRangeList(payload) {
   return GetJSON("/datamodeler/easyDataModelerDataType/bindingLoadRangeList", payload);
+}
+
+export function getInheritanceTypes() {
+  return PostJSON("/datamodeler/easyDataModelerInheritance/getInheritanceTypes");
+}
+
+export function inheriteDataModel(payload) {
+  return PostJSON("/datamodeler/easyDataModelerInheritance/inheriteDataModel", payload);
 }
\ No newline at end of file

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

@@ -3,4 +3,11 @@ import React from 'react';
 export const EditModelContext = React.createContext({
   attrIsEditingFunction: null,
   indexIsEditingFunction: null,
-});
+});
\ No newline at end of file
+
+export const EditInheritedModelContext = React.createContext({
+  createHistoryModel: false,
+  createZipperModel: false,
+  setInheriteState: null,
+  setInheriteData: null,
+}); 
\ No newline at end of file

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

+import React, { useState, useEffect, useContext } from "react";
+import { Modal, Space, Button, Form } from "antd";
+
+import ImportAction from "./ImportAction";
+import { inheritanceHistoricalType, inheritanceZipperType } from "./ImportActionInherited";
+import { EditInheritedModelContext } from "./ContextManage";
+
+const FC = (props) => {
+  const { visible, modelerData, type, onCancel } = props;
+
+  const [_modelerData, setModelerData] = useState(undefined);
+  const [modifyModelerData, setModifyModelerData] = useState(undefined);
+  const [form] = Form.useForm();
+  const { setInheriteData } = useContext(EditInheritedModelContext);
+
+  useEffect(() => {
+    if (visible) {
+      setModelerData(modelerData);
+    } else {
+      setModelerData(undefined);
+    }
+  }, [visible])
+
+  const onChange = (newModelerData) => {
+    setModifyModelerData(newModelerData);
+  }
+
+  const onOk = () => {
+    setInheriteData(type, modifyModelerData);
+    onCancel?.();
+  }
+
+  return (
+    <Modal
+      title='编辑衍生表'
+      visible={visible}
+      onCancel={() => { onCancel?.(); }}
+      width='95%'
+      footer={
+        <Space>
+          <Button onClick={ () => { onCancel?.(); } }>取消</Button>
+          <Button type="primary" onClick={ onOk }>确定</Button>
+        </Space>
+      }
+      maskClosable={false}
+      centered={true}
+      bodyStyle={{
+        height: '80vh',
+        overflow: 'auto'
+      }}
+    >
+      { visible && _modelerData && <ImportAction form={form} action='edit-inherite-modal' roughModelerData={_modelerData} onChange={onChange} /> }
+    </Modal>
+  )
+}
+
+export default FC;
\ No newline at end of file

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

@@ -10,6 +10,7 @@ import { getQueryParam, showMessage, showNotifaction } from '../../../../util';
 import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, VersionId, Holder, DDL, ReadOnly } from '../../../../util/constant';
 import HistoryAndVersionDrawer from './HistoryAndVersionDrawer';
 import { EditModelContext } from './ContextManage';
+import { inheritanceHistoricalType, inheritanceZipperType } from './ImportActionInherited';
 
 import './EditModel.less';
 
@@ -24,6 +25,9 @@ const EditModel = (props) => {
   const [ historyAndVersionDrawerVisible, setHistoryAndVersionDrawerVisible ] = useState(false);
   const [ autoTabKey, setAutoTabKey ] = useState(null);
 
+  const [createHistoryModel, setCreateHistoryModel] = useState(false);
+  const [createZipperModel, setCreateZipperModel] = useState(false);
+
   const actionRef = useRef('');
   const attrIsEditingRef = useRef(false);
   const indexIsEditingRef = useRef(false);
@@ -217,6 +221,11 @@ const EditModel = (props) => {
 
   }
 
+  const editInherite = () => {
+    setActionData({ ...actionData, action: 'edit-inherite' });
+    actionRef.current = 'edit-inherite';
+  }
+
   const edit = () => {
     setActionData({ ...actionData, action: 'edit' });
     actionRef.current = 'edit';
@@ -305,15 +314,22 @@ const EditModel = (props) => {
       <Space>
         <Button type='primary' onClick={onHistory} danger >版本历史</Button>
         {
-          (readOnly!=='true') && <Tooltip title={editTip}>
-            <Button type='primary' onClick={edit} disabled={(stateId==='4')?!permitCheckOut:!editable} danger >
-              编辑
-            </Button>
-          </Tooltip>
+          readOnly!=='true' && <Space>
+              {
+                !modelerData?.final && <Button type='primary' onClick={editInherite} danger >
+                编辑历史存储形式
+              </Button>
+              }
+              <Tooltip title={editTip}>
+                <Button type='primary' onClick={edit} disabled={(stateId==='4')?!permitCheckOut:!editable} danger >
+                  编辑
+                </Button>
+              </Tooltip>
+            </Space>
         }
       </Space>
     );
-  } else if (action === 'edit') {
+  } else if (action === 'edit' || action === 'edit-inherite') {
     actionsBtn = (
       <Space>
         <Button onClick={cancelEdit} >

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

-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 import { Spin } from 'antd';
 import LocalStorage from 'local-storage';
 
 import ImportActionHeader from './ImportActionHeader'; 
+import ImportActionInherited, { inheritanceHistoricalType, inheritanceZipperType } from './ImportActionInherited';
 import { ImportActionTable } from './ImportActionTable';
 import ImportActionIndex from './ImportActionIndex';
 import { getQueryParam } from '../../../../util';
 import { Action } from '../../../../util/constant';
-
+import { EditInheritedModelContext } from './ContextManage';
 import { dispatch } from '../../../../model'; 
 
 const ImportAction = (props) => {
@@ -23,6 +24,8 @@ const ImportAction = (props) => {
   const [ supportedIndextypes, setSupportedIndextypes ] = useState([]);
   const [ validateReports, setValidateReports ] = useState([]);
   const [ loading, setLoading ] = useState(false);
+  const [createHistoryModel, setCreateHistoryModel] = useState(false);
+  const [createZipperModel, setCreateZipperModel] = useState(false);
 
   const mountRef = useRef(true);
   const modelerDataRef = useRef(null);
@@ -44,7 +47,7 @@ const ImportAction = (props) => {
       
     //初始化form状态
     if (action==='add'||action==='edit'||action==='flow') {
-      form.resetFields();
+      form?.resetFields();
     }
 
     if (action === 'detail'|| action ==='flow' || action === 'detail-version') {
@@ -56,35 +59,42 @@ const ImportAction = (props) => {
         modelerDataRef.current = newModelerData;
     }
 
-    setLoading(true);
-
-    dispatch({
-      type: 'datamodel.getAllConstraints',
-      callback: data => {
-        setConstraints(data);
-        if (action === 'add') {
-          // setConstraint(data?.length>0?data[0]:{});
-          // setTemplate({});
-          if ((hints||[]).length>0) {
-            getDraft(data?.length>0?data[0]:{}, {} ,hints);
-          } else if ((ddl||'').length>0) {
-            getDraftUsingDDL(data?.length>0?data[0]:{}, {} ,ddl);
-          } else if ((modelerId||'')!=='') {
+    if (action !== 'edit-inherite') {
+      setLoading(true);
+      dispatch({
+        type: 'datamodel.getAllConstraints',
+        callback: data => {
+          setConstraints(data);
+          if (action === 'add') {
+            // setConstraint(data?.length>0?data[0]:{});
+            // setTemplate({});
+            if ((hints||[]).length>0) {
+              getDraft(data?.length>0?data[0]:{}, {} ,hints);
+            } else if ((ddl||'').length>0) {
+              getDraftUsingDDL(data?.length>0?data[0]:{}, {} ,ddl);
+            } else if ((modelerId||'')!=='') {
+              getCurrentDataModel();
+            } else if (roughModelerData) {
+              setLoading(false);
+              getExtraData(roughModelerData);
+            } else {
+              getDraft(data?.length>0?data[0]:{}, {} ,[]);
+            }
+          } else if(action === 'edit' || action === 'detail' || action ==='flow' || action === 'detail-version') {
             getCurrentDataModel();
-          } else if (roughModelerData) {
+          } else if (action === 'edit-inherite-modal') {
             setLoading(false);
             getExtraData(roughModelerData);
-          } else {
-            getDraft(data?.length>0?data[0]:{}, {} ,[]);
           }
-        } else if(action === 'edit' || action === 'detail' || action ==='flow' || action === 'detail-version') {
-          getCurrentDataModel();
+        },
+        error: () => {
+          setLoading(false);
         }
-      },
-      error: () => {
-        setLoading(false);
-      }
-    })
+      })
+    } else {
+      setCreateHistoryModel((modelerData?.inherited?.historical)?true:false);
+      setCreateZipperModel((modelerData?.inherited?.zipper)?true:false);
+    }
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [action, hints, modelerId, ddl ]);
 
@@ -181,7 +191,6 @@ const ImportAction = (props) => {
   }
 
   const getCurrentDataModel = () => {
-
     if ((modelerId||'') === '') {
       setLoading(false);
       return;
@@ -208,7 +217,8 @@ const ImportAction = (props) => {
     } else if (action==='edit' && permitCheckOut) {
       type = 'datamodel.checkOutDataModel';
     } else if (action==='edit') {
-      const _action = getQueryParam(Action, props.location.search);
+
+      const _action = getQueryParam(Action, props.location?.search);
 
       if (_action === 'flow') {
         params.ignoreNamespace = true;
@@ -530,44 +540,99 @@ const ImportAction = (props) => {
     return { partition: newPartition, easyDataModelerDistributionKey: newDistribution, easyDataModelerPrimaryKey: newPrimary, easyDataModelerIndices: newEasyDataModelerIndices, easyDataModelerSemiPrimaryKey: newSemiPrimary};
   }
 
+  const setInheriteState = (type, value) => {
+    if (type === inheritanceHistoricalType) {
+      setCreateHistoryModel(value);
+      const newModelerData = {...modelerData};
+      if (newModelerData.inherited) {
+        newModelerData.inherited = {...newModelerData.inherited, historical: value?modelerData.inherited?.historical:null}
+        onChange?.(newModelerData);
+      }
+    } else if (type === inheritanceZipperType) {
+      setCreateZipperModel(value);
+      const newModelerData = {...modelerData};
+      if (newModelerData.inherited) {
+        newModelerData.inherited = {...newModelerData.inherited, historical: value?modelerData.inherited?.historical:null}
+        onChange?.(newModelerData);
+      }
+    }
+  }
+
+  const setInheriteData = (type, value) => {
+    if (type === inheritanceHistoricalType) {
+      const newModelerData = {...modelerData};
+      const newRealModelerData = {...modelerData};
+
+      if (newModelerData.inherited) {
+        newModelerData.inherited = {...newModelerData.inherited, historical: value}
+        newRealModelerData.inherited = {...newRealModelerData.inherited, historical: createHistoryModel?value:null}
+
+        setModelerData(newModelerData);
+        modelerDataRef.current = newModelerData;
+
+        onChange?.(newRealModelerData);
+      }
+    } else if (type === inheritanceZipperType) {
+      const newModelerData = {...modelerData};
+      const newRealModelerData = {...modelerData};
+
+      if (newModelerData.inherited) {
+        newModelerData.inherited = {...newModelerData.inherited, zipper: value}
+        newRealModelerData.inherited = {...newRealModelerData.inherited, zipper: createZipperModel?value:null}
+        setModelerData(newModelerData);
+        modelerDataRef.current = newModelerData;
+
+        onChange?.(newRealModelerData);
+      }
+    }
+  }
+
   return (
-    <Spin spinning={loading}>
-      <ImportActionHeader 
-        form={form}
-        editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
-        modelerData={modelerData||{}} 
-        constraints={constraints}
-        templates={templates}
-        validateReports={validateReports}
-        onTemplateChange={onTemplateChange}
-        onConstraintChange={onConstraintChange}
-        onChange={onHeaderChange}
-        terms={terms}
-        supportedPartitionTypes={supportedPartitionTypes} 
-      />   
-      <ImportActionTable 
-        modelerData={modelerData||{}}
-        constraint={constraint} 
-        template={template}
-        validateReports={validateReports}
-        supportedDatatypes={supportedDatatypes} 
-        onChange={onTableChange} 
-        editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'}
-        action={action} 
-        originAction={getQueryParam(Action, props?.location?.search)}
-        terms={terms}
-      /> 
-      <ImportActionIndex 
-        modelerData={modelerData||{}} 
-        constraint={constraint} 
-        template={template}
-        types={supportedIndextypes}
-        validateReports={validateReports}
-        onChange={onIndexChange} 
-        editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'} 
-        terms={terms}
-      />
-    </Spin>
+    <EditInheritedModelContext.Provider value={{
+      createHistoryModel,
+      createZipperModel,
+      setInheriteState,
+      setInheriteData,
+    }}>
+      <Spin spinning={loading}>
+        <ImportActionHeader 
+          form={form}
+          editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherite'} 
+          modelerData={modelerData||{}} 
+          constraints={constraints}
+          templates={templates}
+          validateReports={validateReports}
+          onTemplateChange={onTemplateChange}
+          onConstraintChange={onConstraintChange}
+          onChange={onHeaderChange}
+          terms={terms}
+          supportedPartitionTypes={supportedPartitionTypes} 
+        />   
+        <ImportActionInherited modelerData={modelerData} editable={action==='edit-inherite'} />
+        <ImportActionTable 
+          modelerData={modelerData||{}}
+          constraint={constraint} 
+          template={template}
+          validateReports={validateReports}
+          supportedDatatypes={supportedDatatypes} 
+          onChange={onTableChange} 
+          editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherite'}
+          action={action} 
+          originAction={getQueryParam(Action, props?.location?.search)}
+          terms={terms}
+        /> 
+        <ImportActionIndex 
+          modelerData={modelerData||{}} 
+          constraint={constraint} 
+          template={template}
+          types={supportedIndextypes}
+          validateReports={validateReports}
+          onChange={onIndexChange} 
+          editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherite'} 
+          terms={terms}
+        />
+      </Spin>
+    </EditInheritedModelContext.Provider>
   );
 };
 

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

+import React, { useState, useContext, useEffect } from "react";
+import { Button, Tabs, Checkbox } from "antd";
+import { DownOutlined, UpOutlined } from "@ant-design/icons";
+
+import Preview from './InheritedPreview';
+import { EditInheritedModelContext } from "./ContextManage";
+import { dispatch } from '../../../../model'; 
+import { Action, CatalogId, ModelerId, Hints, ModelerData, PermitCheckOut, Editable, StateId, Holder, DDL, DataModelerRoleReader, ReadOnly } from '../../../../util/constant';
+
+export const inheritanceHistoricalType = 'historical';
+export const inheritanceZipperType = 'zipper';
+
+const FC = (props) => {
+  const { modelerData, editable } = props;
+  const [collapse, setCollapse] = useState(true);
+  const [activeKey, setActiveKey] = useState(inheritanceHistoricalType);
+  const [relationModelerDatas, setRelationModelerDatas] = useState([]);
+  const [historicalModelerData, setHistoricalModelerData] = useState(undefined);
+  const [zipperModelerData, setZipperModelerData] = useState(undefined);
+  const { createHistoryModel, createZipperModel, setInheriteState, setInheriteData  } = useContext(EditInheritedModelContext);
+
+  useEffect(() => {
+    if (!editable) {
+      if (modelerData?.final) {
+        getDataModel();
+      } else {
+        const newRelationModelerDatas = [];
+        if (modelerData?.inherited?.historical) {
+          newRelationModelerDatas.push(modelerData?.inherited?.historical);
+        }
+        if (modelerData?.inherited?.zipper) {
+          newRelationModelerDatas.push(modelerData?.inherited?.zipper);
+        }
+
+        setRelationModelerDatas(newRelationModelerDatas);
+      }
+    } else {
+      if (modelerData) {
+        if (modelerData.inherited?.historical) {
+          setHistoricalModelerData(modelerData.inherited?.historical);
+        } else {
+          getInheriteDataModel(inheritanceHistoricalType);
+        }
+        if (modelerData.inherited?.zipper) {
+          setZipperModelerData(modelerData.inherited?.zipper);
+        } else {
+          getInheriteDataModel(inheritanceZipperType);
+        }
+      }
+    }
+  }, [editable, modelerData])
+
+  const getInheriteDataModel = (type) => {
+    dispatch({
+      type: 'datamodel.inheriteDataModel',
+      payload: {
+        params: {
+          id: modelerData.id,
+          inheritanceTypeName: type
+        }
+      },
+      callback: data => {
+        if (type === inheritanceHistoricalType) {
+          setHistoricalModelerData(data);
+          setInheriteData(inheritanceHistoricalType, data);
+        } else if (type === inheritanceZipperType) {
+          setZipperModelerData(data);
+          setInheriteData(inheritanceZipperType, data);
+        }
+      }
+    }) 
+  }
+
+  const getDataModel = () => {
+    dispatch({
+      type: 'datamodel.getDataModel',
+      payload: {
+        id: modelerData?.inheritedFrom
+      },
+      callback: data => {
+        const newRelationModelerDatas = [];
+        
+        newRelationModelerDatas.push(data);
+        if (modelerData?.inheritedFromType === inheritanceHistoricalType && modelerData?.othersInheritedFromSameOrigin?.zipper) {
+          newRelationModelerDatas.push(modelerData?.othersInheritedFromSameOrigin?.zipper);
+        }
+        setRelationModelerDatas(newRelationModelerDatas);
+      }
+    })
+  }
+
+  return (
+    <div className='model-import-action-inherited'>
+      <div className='mb-3'>
+      {
+        editable ? <Tabs 
+          activeKey={activeKey} 
+          onChange={(key) => { setActiveKey(key); }}
+          tabBarExtraContent={{
+            left: <div className='flex mr-6' style={{ alignItems: 'center' }}>
+              <h2 className='mr-3' style={{ marginBottom: 0 }}>历史存储形式</h2>
+              {
+                collapse ? <Button type='primary' size='small' onClick={() => { setCollapse(!collapse); }}>
+                  展开<DownOutlined />
+                </Button> : <Button type='primary' size='small' onClick={() => { setCollapse(!collapse); }}>
+                  收起<UpOutlined />
+                </Button>
+              }
+            </div>
+          }}
+        >
+          <Tabs.TabPane 
+            tab={
+              <span>
+                <Checkbox 
+                  className='mr-2' 
+                  value={createHistoryModel}
+                  onChange={(e) => { 
+                    setInheriteState(inheritanceHistoricalType, e.target.checked);
+                  }}
+                >
+                </Checkbox>历史表
+              </span>
+            }
+            key={inheritanceHistoricalType}
+          >
+          { !collapse && <Preview modelerData={modelerData} type={inheritanceHistoricalType} /> }
+          </Tabs.TabPane>
+          <Tabs.TabPane 
+            tab={
+              <span>
+                <Checkbox 
+                  className='mr-2' 
+                  value={createZipperModel}
+                  onChange={(e) => { 
+                    setInheriteState(inheritanceZipperType, e.target.checked);
+                  }}
+                ></Checkbox>拉链表
+              </span>
+            } 
+            key={inheritanceZipperType}
+          >
+          { !collapse && <Preview modelerData={modelerData} type={inheritanceZipperType} /> }
+          </Tabs.TabPane>
+        </Tabs> : <div className='flex' style={{ alignItems: 'center' }}>
+          <h2 className='mr-3' style={{ marginBottom: 0 }}>历史存储形式</h2>
+          {
+            relationModelerDatas?.map((item, index) => <a className='mr-3' key={index} onClick={() => {
+              window.open(`/data-govern/data-model-action?${Action}=detail&${ModelerId}=${item.id}&${PermitCheckOut}=${item.permitCheckOut||false}&${Editable}=${item.editable||false}&${StateId}=${item.state?.id||''}&${Holder}=${item.holder||''}&${ReadOnly}=false`);
+            }}>{item.cnName}</a>)
+          }
+        </div>  
+      }
+      </div>
+    </div>
+  )
+}
+
+export default FC;
\ No newline at end of file

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

+import React, { useEffect, useState, useMemo } from "react";
+import { Row, Col, Tooltip, Typography, Space, Button } from "antd";
+import DataGrid from '../../VirtualTable';
+import EditInherited from './EditInherited';
+import { inheritanceHistoricalType, inheritanceZipperType } from "./ImportActionInherited";
+
+const FC = (props) => {
+  const { modelerData, type } = props;
+
+  const [editInheritedParams, setEditInheritedParms] = useState({ visible: false, modelerData: undefined });
+
+  return (
+    <Row>
+      <Col span={12}>
+        <Basic modelerData={modelerData} />
+      </Col>
+      <Col span={12}>
+        <div className='flex'>
+          <div className='mr-3' style={{ flex: 1 }}>
+            <Table data={modelerData?.easyDataModelerDataModelAttributes} />
+          </div>
+          <Button type='primary' size='small' onClick={() => {
+            setEditInheritedParms({ visible: true, modelerData });
+          }}>编辑</Button>
+        </div>
+      </Col>
+
+      <EditInherited 
+        visible={editInheritedParams.visible} 
+        type={type}
+        modelerData={editInheritedParams.modelerData} 
+        onCancel={() => { 
+          setEditInheritedParms({ visible: false, modelerData: undefined });
+        }} 
+      />
+    </Row>
+  )
+}
+
+export default FC;
+
+const Basic = ({ modelerData }) => {
+  const partitionsDescription = useMemo(() => {
+    let newPartitionsDescription = ''
+    if (modelerData?.partition?.keys) {
+      (modelerData?.partition?.keys||[]).forEach((item, index) => {
+        if (index > 0) {
+          newPartitionsDescription += ',';
+        }
+
+        newPartitionsDescription += item.name||'';
+      })
+    }
+    if (modelerData?.partition?.partitionType?.cnName) {
+      newPartitionsDescription += '/' + modelerData?.partition?.partitionType?.cnName||'';
+    }
+    return newPartitionsDescription;
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modelerData])
+
+  const primaryDescription = useMemo(() => {
+    let newPrimaryDescription = ''
+    if (modelerData?.easyDataModelerPrimaryKey) {
+      (modelerData?.easyDataModelerPrimaryKey||[]).forEach((item, index) => {
+        if (index > 0) {
+          newPrimaryDescription += ',';
+        }
+
+        newPrimaryDescription += item.name||'';
+      })
+    }
+    return newPrimaryDescription;
+    //eslint-disable-next-line react-hooks/exhaustive-deps    
+  }, [modelerData])
+
+  return (
+    <Row gutter={10}>
+      <Col className='mb-4' span={12}>
+        <Tooltip title=''>
+          <Typography.Text ellipsis={true}>
+          中文名称:&nbsp;<Typography.Text>{modelerData?.cnName}</Typography.Text>
+          </Typography.Text>
+        </Tooltip>
+      </Col>
+      <Col className='mb-4' span={12}>
+        <Tooltip title=''>
+          <Typography.Text ellipsis={true}>
+          英文名称:&nbsp;<Typography.Text>{modelerData?.name}</Typography.Text>
+          </Typography.Text>
+        </Tooltip>
+      </Col>
+      <Col className='mb-4' span={12}>
+        <Tooltip title=''>
+          <Typography.Text ellipsis={true}>
+          分区键:&nbsp;<Typography.Text>{partitionsDescription}</Typography.Text>
+          </Typography.Text>
+        </Tooltip>
+      </Col>
+      <Col className='mb-4' span={12}>
+        <Tooltip title=''>
+          <Typography.Text ellipsis={true}>
+          技术主键:&nbsp;<Typography.Text>{primaryDescription}</Typography.Text>
+          </Typography.Text>
+        </Tooltip>
+      </Col>
+      <Col className='mb-4' span={12}>
+        <Tooltip title=''>
+          <Typography.Text ellipsis={true}>
+          数据类型:&nbsp;<Typography.Text>{modelerData?.dataType}</Typography.Text>
+          </Typography.Text>
+        </Tooltip>
+      </Col>
+      <Col className='mb-4' span={12}>
+        <Tooltip title=''>
+          <Typography.Text ellipsis={true}>
+          绑定加载范围:&nbsp;<Typography.Text>{modelerData?.bindingLoadRange}</Typography.Text>
+          </Typography.Text>
+        </Tooltip>
+      </Col>
+      <Col className='mb-4' span={12}>
+        <Tooltip title=''>
+          <Typography.Text ellipsis={true}>
+          更新时间:&nbsp;<Typography.Text>{modelerData?.dataUpdatingTiming}</Typography.Text>
+          </Typography.Text>
+        </Tooltip>
+      </Col>
+      <Col className='mb-4' span={12}>
+        <Tooltip title=''>
+          <Typography.Text ellipsis={true}>
+          数据情况:&nbsp;<Typography.Text>{modelerData?.dataCircumstances}</Typography.Text>
+          </Typography.Text>
+        </Tooltip>
+      </Col>
+    </Row>
+  ) 
+}
+
+const Table = ({ data }) => {
+  const cols = [
+    {
+      name: '序号',
+      key: 'index',
+      width: 60,
+      // resizable: true,
+    },
+    {
+      name: '中文名称',
+      key: 'cnName',
+      resizable: true,
+      formatter(props) {
+        return (
+          <Tooltip title={props.row.cnName||''}>
+            <Typography.Text ellipsis={true}>{props.row.cnName}</Typography.Text>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      name: '英文名称',
+      key: 'name',
+      resizable: true,
+      formatter(props) {
+        return (
+          <Tooltip title={props.row.name||''}>
+            <Typography.Text ellipsis={true}>{props.row.name}</Typography.Text>
+          </Tooltip>
+        )
+      }
+    },
+    {
+      name: '类型',
+      key: 'datatype',
+      resizable: true,
+      formatter(props) {
+        if (props.row.datatype) {
+          let datatype = props.row.datatype;
+          if ((datatype.name==='Char'||datatype.name==='Varchar') && datatype.parameterValues?.length>0) {
+
+            return `${datatype.name||''}(${(datatype.parameterValues[0]?datatype.parameterValues[0]:0)})`;
+          
+          } else if ((datatype.name==='Decimal'||datatype.name==='Numeric') && datatype.parameterValues?.length>1) {
+            return `${datatype.name||''}(${(datatype.parameterValues[0]?datatype.parameterValues[0]:0)},${(datatype.parameterValues[1]?datatype.parameterValues[1]:0)})`;
+          }
+
+          return datatype.name||'';
+        }
+
+        return '';
+      }
+    },
+  ];
+  
+  return (
+    <DataGrid 
+      style={{ blockSize: 146 }}
+      columns={cols}
+      rows={data||[]}
+      headerHeight={30}
+      rowHeight={36}
+      rowClassName={(row) => {
+        return ''
+      }}
+    />
+  )
+}
\ No newline at end of file

src/view/Manage/VirtualTable/index.tsx

@@ -43,6 +43,7 @@ interface Props<Row> {
   selectedRows?: Array<any>
   onSelectedRowsChange?: (selectedRows: Array<any>) => void
   rowHeight?: number
+  headerHeight?: number
   rowClassName?: (row: RowData) => string
   scrollRowIndex: number
 }
@@ -112,7 +113,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
     expandable,
     getComparator,
     loadMoreRows,
-    onSelectedRowsChange, columns, rows, checkable, selectedRows, rowHeight = 45, rowClassName, onContextMenu, scrollRowIndex, ...rest } = props
+    onSelectedRowsChange, columns, rows, checkable, selectedRows, rowHeight = 45, headerHeight = 38, rowClassName, onContextMenu, scrollRowIndex, ...rest } = props
   
   const rowKeyGetter = (row: Row): K => {
     return row.id as K;
@@ -268,7 +269,7 @@ function FC<Row extends RowData, SR, K extends React.Key = React.Key>(props: Dat
         }}
         onRowsChange={onRowsChange}
 
-        headerRowHeight={38}
+        headerRowHeight={headerHeight}
         rowHeight={(args) => (args.type === 'ROW' && args.row.__type__ === RowType.Detail ? (expandable?.expandedRowHeight||100) : rowHeight)}
        
         // 排序