模型对比

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

@@ -12,6 +12,7 @@ import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify"
 import PermissionRcItem from '../../../../util/Component/PermissionRcItem';
 import TagCell from './tag-help';
 import BranchModelSync from './branch-model-sync';
+import ModelCompareSelectModel from './model-compare-select-model';
 
 import './ModelTable.less';
 import 'react-contexify/dist/ReactContexify.css';
@@ -157,6 +158,10 @@ const ModelTable = (props) => {
     visible: false,
     item: undefined,
   });
+  const [modelCompareSelectModelParams, setModelCompareSelectModelParams] = useState({
+    visible: false,
+    item: undefined,
+  })
 
   const expandedDataMapRef = useRef(new Map());
   const shouldScrollRef = useRef(false);
@@ -667,6 +672,11 @@ const ModelTable = (props) => {
           detailItem(data)
         }
       })
+    } else if (key === 'model-compare') {
+      setModelCompareSelectModelParams({
+        visible: true,
+        item: currentItem,
+      })
     }
   }
 
@@ -760,6 +770,13 @@ const ModelTable = (props) => {
         >
           复制模型
         </PermissionRcItem>
+        <PermissionRcItem
+          id='model-compare'
+          defaultPermission={true}
+          onClick={handleItemClick}
+        >
+          模型对比
+        </PermissionRcItem>
         {
           view !== 'branch' && <PermissionRcItem
             id='auth-transfer'
@@ -838,6 +855,15 @@ const ModelTable = (props) => {
           }
         }}
       />
+      <ModelCompareSelectModel 
+        {...modelCompareSelectModelParams}
+        onCancel={() => {
+          setModelCompareSelectModelParams({
+            visible: false,
+            item: undefined,
+          })
+        }}
+      />
       { contextHolder }
     </div>
   );

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

@@ -6,14 +6,12 @@ import { formatVersionDate, showMessage } from '../../../../util';
 import VersionCompareHeader from './VersionCompareHeader';
 import VersionCompareTable from './VersionCompareTable';
 import VersionCompareIndex from './VersionCompareIndex';
-import FilterColumnAction from './FilterColumnAction';
 import VersionDdlAlter from './version-ddl-alter';
 
 import './VersionCompare.less';
 
 const { Text, Paragraph } = Typography;
 const { Option } = Select;
-export const defaultColumnTitles = ['序号', '中文名称', '英文名称', '类型', '业务含义'];
 
 const VersionCompare = (props) => {
 
@@ -27,8 +25,6 @@ const VersionCompare = (props) => {
   const [ compareData, setCompareData ] = useState(null);
   const [ loadingCompare, setLoadingCompare ] = useState(false);
   const [ onlyShowChange, setOnlyShowChange ] = useState(true);
-  const [ attrFilterColumns, setAttrFilterColumns ] = useState([]);
-  const [ attrSelectedTitles, setAttrSelectedTitles ] = useState(defaultColumnTitles);
   const [ddlAlterParams, setAlterParams] = useState({
     visible: false,
     id: undefined,
@@ -37,8 +33,6 @@ const VersionCompare = (props) => {
     incVersion: undefined,
   })
 
-  const attrColumnsRef = useRef([]);
-
   useEffect(() => {
     if ((id||'') !== '') {
       getVersions();
@@ -132,51 +126,6 @@ const VersionCompare = (props) => {
       callback: data => {
         setLoadingCompare(false);
         setCompareData(data);
-
-        const newAttrOptionColumns = [];
-        (data?.heads?.columnHead||[]).forEach((item, index) => {
-          newAttrOptionColumns.push({
-            title: item||'',
-            dataIndex: `column${index}`,
-            render: (attrValue, record, index) => {
-    
-              let stateClassName = '';
-              if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
-                stateClassName = 'add';
-              } else if (attrValue?.state === 'DELETE') {
-                stateClassName = 'delete';
-              }
-    
-              return (
-                <Paragraph>
-                  <Tooltip title={attrValue?.value||''}>
-                    <Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Text>
-                  </Tooltip>
-                </Paragraph>
-              );
-            },
-            width: (item==='序号')?60: 150,
-            ellipsis: true,
-            option: true,
-          });
-        })
-
-        const newAttrColumns = [...newAttrOptionColumns, { 
-          title: <FilterColumnAction columns={newAttrOptionColumns} defaultSelectedKeys={defaultColumnTitles} onChange={onFilterChange} />,
-          dataIndex: 'columnFilter',
-          render: (_, record, index) => {
-            return '';
-          },
-          width: 40,
-          ellipsis: true,
-          option: false
-        }];
-
-        attrColumnsRef.current = newAttrColumns;
-
-        const newFilterColumns = newAttrColumns.filter(column => column.option===false || attrSelectedTitles.indexOf(column.title) !== -1);
-
-        setAttrFilterColumns(newFilterColumns);
       },
       error: () => {
         setLoadingCompare(false);
@@ -184,13 +133,6 @@ const VersionCompare = (props) => {
     })
   }
 
-  const onFilterChange = (values) => {
-    const newFilterColumns = attrColumnsRef.current.filter(column => column.option===false || values.indexOf(column.title) !== -1);
-
-    setAttrSelectedTitles(values);
-    setAttrFilterColumns(newFilterColumns);
-  }
-
   const onAlterClick = () => {
     setAlterParams({
       visible: true,
@@ -257,20 +199,7 @@ const VersionCompare = (props) => {
 
       <div className='py-5'>    
         <Spin spinning={loadingCompare} >
-        {
-          compareData && <div className='flex'>
-            <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
-              <VersionCompareHeader data={compareData} />
-              <VersionCompareTable data={compareData} columns={attrFilterColumns} />
-              <VersionCompareIndex data={compareData} />
-            </div>
-            <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
-              <VersionCompareHeader data={compareData} direction='right' />
-              <VersionCompareTable data={compareData} columns={attrFilterColumns} direction='right' />
-              <VersionCompareIndex data={compareData} direction='right'/>
-            </div>
-          </div>
-        }
+          <CompareDetail data={compareData} />
         </Spin>
       </div>
       <VersionDdlAlter 
@@ -290,3 +219,35 @@ const VersionCompare = (props) => {
 }
 
 export default VersionCompare;
+
+export const CompareDetail = ({ data }) => {
+  const [selectedColumnTitles, setSelectedColumnTitles] = React.useState()
+
+  return (
+    <>
+    { 
+      data && <div className='flex'>
+        <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
+          <VersionCompareHeader data={data} />
+          <VersionCompareTable 
+            data={data} 
+            selectedColumnTitles={selectedColumnTitles} 
+            onFilterChange={(val) => setSelectedColumnTitles(val)} 
+          />
+          <VersionCompareIndex data={data} />
+        </div>
+        <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
+          <VersionCompareHeader data={data} direction='right' />
+          <VersionCompareTable 
+            data={data} 
+            selectedColumnTitles={selectedColumnTitles} 
+            onFilterChange={(val) => setSelectedColumnTitles(val)} 
+            direction='right' 
+          />
+          <VersionCompareIndex data={data} direction='right'/>
+        </div>
+      </div> 
+    }
+    </>
+  )
+}
\ No newline at end of file

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

-import { useEffect, useState } from 'react';
-import { Typography, Table } from 'antd';
+import React from 'react';
+import { Typography, Table, Tooltip } from 'antd';
+
+import FilterColumnAction from './FilterColumnAction';
 
 const { Title } = Typography;
 
+export const defaultColumnTitles = ['序号', '中文名称', '英文名称', '类型', '业务含义'];
+
 const VersionCompareTable = (props) => {
+  const { data, direction = 'left', selectedColumnTitles = defaultColumnTitles, onFilterChange } = props;
+  const [columns, setColumns] = React.useState()
 
-  const { data, direction = 'left', columns } = props;
-  const [ tableData, setTableData ] = useState([]);
+  React.useEffect(() => {
+    const newColumns = [];
+    for (const [index, item] of (data?.heads?.columnHead||[]).entries()) {
+      newColumns.push({
+        title: item||'',
+        dataIndex: `column${index}`,
+        render: (attrValue, record, index) => {
 
-  useEffect(() => {
-    const newTableData = [];
-    let columnValue = [];
-    if (direction==='left') {
-      columnValue = data?.left?.columnValue||[];
-    } else if (direction==='right') {
-      columnValue = data?.right?.columnValue||[];
+          let stateClassName = '';
+          if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
+            stateClassName = 'add';
+          } else if (attrValue?.state === 'DELETE') {
+            stateClassName = 'delete';
+          }
+
+          return (
+            <Typography.Paragraph>
+              <Tooltip title={attrValue?.value||''}>
+                <Typography.Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Typography.Text>
+              </Tooltip>
+            </Typography.Paragraph>
+          );
+        },
+        width: (item==='序号')?60: 150,
+        ellipsis: true,
+        option: true,
+      });
     }
 
-    (columnValue||[]).forEach((attrItem) => {
-      let newAttrItem = {};
-      (attrItem||[]).forEach((item, index) => {
-        newAttrItem[`column${index}`] = item;
-      })
-      newTableData.push(newAttrItem);
-    })
+    setColumns([...newColumns, {
+      title: <FilterColumnAction columns={newColumns} defaultSelectedKeys={defaultColumnTitles} onChange={(val) => onFilterChange?.(val)} />,
+      dataIndex: 'columnFilter',
+      render: (_, record, index) => {
+        return '';
+      },
+      width: 40,
+      ellipsis: true,
+      option: false
+    }])
+  }, [data])
+
+  const _columns = React.useMemo(() => {
+    return (columns??[]).filter(column => column.option===false || (selectedColumnTitles??[]).indexOf(column.title) !== -1)
+   }, [selectedColumnTitles, columns])
+
+  const tableData = React.useMemo(() => {
+    const newTableData = [];
+    let columnValue = (direction==='left') ? data?.left?.columnValue : data?.right?.columnValue;
     
-    setTableData(newTableData);
+    for (const item of columnValue??[]) {
+      let newItem = {};
+      for (const [index, _item] of item.entries()) {
+        newItem[`column${index}`] = _item;
+      }
+      newTableData.push(newItem);
+    }
 
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ data ])
+    return newTableData
+  }, [direction, data])
 
   return (
     <div>
@@ -38,7 +79,7 @@ const VersionCompareTable = (props) => {
         </Typography>
       </div>
       <Table
-        columns={columns||[]}
+        columns={_columns||[]}
         dataSource={tableData}
         pagination={false}
       />

src/view/Manage/Model/Component/branch-model-sync.jsx

@@ -2,11 +2,7 @@ import React from 'react'
 import { Modal, Button, Spin, Form, Checkbox, Typography, Tooltip, Row, Col, Tree, } from 'antd'
 
 import { dispatch } from '../../../../model'
-import VersionCompareHeader from './VersionCompareHeader'
-import VersionCompareTable from './VersionCompareTable'
-import VersionCompareIndex from './VersionCompareIndex'
-import { defaultColumnTitles } from './VersionCompare'
-import FilterColumnAction from './FilterColumnAction'
+import { CompareDetail } from './VersionCompare'
 
 import './VersionCompare.less'
 import { formatDate } from '../../../../util'
@@ -73,8 +69,6 @@ const Diff = ({ item }) => {
   const [loading, setLoading] = React.useState(false)
   const [data, setData] = React.useState()
   const [onlyShowChange, setOnlyShowChange] = React.useState(true)
-  const [attrSelectedTitles, setAttrSelectedTitles] = React.useState(defaultColumnTitles)
-  const [attrColumns, setAttrColumns] = React.useState()
 
   React.useEffect(() => {
     if (item) {
@@ -82,59 +76,6 @@ const Diff = ({ item }) => {
     }
   }, [item, onlyShowChange])
 
-  React.useEffect(() => {
-    if (data) {
-      const newAttrOptionColumns = [];
-      (data?.heads?.columnHead||[]).forEach((item, index) => {
-        newAttrOptionColumns.push({
-          title: item||'',
-          dataIndex: `column${index}`,
-          render: (attrValue, record, index) => {
-  
-            let stateClassName = '';
-            if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
-              stateClassName = 'add';
-            } else if (attrValue?.state === 'DELETE') {
-              stateClassName = 'delete';
-            }
-  
-            return (
-              <Typography.Paragraph>
-                <Tooltip title={attrValue?.value||''}>
-                  <Typography.Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Typography.Text>
-                </Tooltip>
-              </Typography.Paragraph>
-            );
-          },
-          width: (item==='序号')?60: 150,
-          ellipsis: true,
-          option: true,
-        });
-      });
-
-      const newAttrColumns = [...newAttrOptionColumns, { 
-        title: <FilterColumnAction columns={newAttrOptionColumns} defaultSelectedKeys={defaultColumnTitles} onChange={onFilterChange} />,
-        dataIndex: 'columnFilter',
-        render: (_, record, index) => {
-          return '';
-        },
-        width: 40,
-        ellipsis: true,
-        option: false
-      }];
-
-      setAttrColumns(newAttrColumns)
-    }
-  }, [data])
-
-  const attrFilterColumns = React.useMemo(() => {
-   return (attrColumns??[]).filter(column => column.option===false || (attrSelectedTitles??[]).indexOf(column.title) !== -1)
-  }, [attrSelectedTitles, attrColumns])
-
-  const onFilterChange = (values) => {
-    setAttrSelectedTitles(values)
-  }
-
   const onOnlyShowChange = (e) => {
     setOnlyShowChange(e.target.checked)
   }
@@ -176,20 +117,7 @@ const Diff = ({ item }) => {
 
       <div className='py-5'>    
         <Spin spinning={loading} >
-        {
-          data && <div className='flex'>
-            <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
-              <VersionCompareHeader data={data} />
-              <VersionCompareTable data={data} columns={attrFilterColumns} />
-              <VersionCompareIndex data={data} />
-            </div>
-            <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
-              <VersionCompareHeader data={data} direction='right' />
-              <VersionCompareTable data={data} columns={attrFilterColumns} direction='right' />
-              <VersionCompareIndex data={data} direction='right'/>
-            </div>
-          </div>
-        }
+          <CompareDetail data={data} />
         </Spin>
       </div>
     </div>

src/view/Manage/Model/Component/branch-select-model.jsx

@@ -203,22 +203,7 @@ const Basic = React.forwardRef(function ({ type, items }, ref) {
         setLoadingTreeData(false)
         setRootNode(data)
 
-        const newTreeData = produce(data?.subCatalogs??[], draft => {
-          const setNode = (g) => {
-            g.key = g.id;
-            g.title = g.name;
-            g.children = [];
-            
-            (g.subCatalogs??[]).forEach((child) => {
-              setNode(child)
-              g.children.push(child)
-            });
-          }
-  
-          draft.forEach((child) => {
-            setNode(child)
-          })
-        })
+        const newTreeData = data?.subCatalogs??[]
         setTreeData(newTreeData)
         if ((newTreeData??[]).length > 0) {
           setNode(newTreeData[0])

src/view/Manage/Model/Component/merge-to-master.jsx

@@ -2,11 +2,7 @@ import React from 'react'
 import { Modal, Button, Spin, Form, Checkbox, Typography, Tooltip, Row, Col, Tree, } from 'antd'
 
 import { dispatch } from '../../../../model'
-import VersionCompareHeader from './VersionCompareHeader'
-import VersionCompareTable from './VersionCompareTable'
-import VersionCompareIndex from './VersionCompareIndex'
-import { defaultColumnTitles } from './VersionCompare'
-import FilterColumnAction from './FilterColumnAction'
+import { CompareDetail } from './VersionCompare'
 
 import './merge-to-master.less'
 import './VersionCompare.less'
@@ -119,8 +115,6 @@ export const Diff = ({ item }) => {
   const [loading, setLoading] = React.useState(false)
   const [data, setData] = React.useState()
   const [onlyShowChange, setOnlyShowChange] = React.useState(true)
-  const [attrSelectedTitles, setAttrSelectedTitles] = React.useState(defaultColumnTitles)
-  const [attrColumns, setAttrColumns] = React.useState()
 
   React.useEffect(() => {
     if (item) {
@@ -128,59 +122,6 @@ export const Diff = ({ item }) => {
     }
   }, [item, onlyShowChange])
 
-  React.useEffect(() => {
-    if (data) {
-      const newAttrOptionColumns = [];
-      (data?.heads?.columnHead||[]).forEach((item, index) => {
-        newAttrOptionColumns.push({
-          title: item||'',
-          dataIndex: `column${index}`,
-          render: (attrValue, record, index) => {
-  
-            let stateClassName = '';
-            if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
-              stateClassName = 'add';
-            } else if (attrValue?.state === 'DELETE') {
-              stateClassName = 'delete';
-            }
-  
-            return (
-              <Typography.Paragraph>
-                <Tooltip title={attrValue?.value||''}>
-                  <Typography.Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Typography.Text>
-                </Tooltip>
-              </Typography.Paragraph>
-            );
-          },
-          width: (item==='序号')?60: 150,
-          ellipsis: true,
-          option: true,
-        });
-      });
-
-      const newAttrColumns = [...newAttrOptionColumns, { 
-        title: <FilterColumnAction columns={newAttrOptionColumns} defaultSelectedKeys={defaultColumnTitles} onChange={onFilterChange} />,
-        dataIndex: 'columnFilter',
-        render: (_, record, index) => {
-          return '';
-        },
-        width: 40,
-        ellipsis: true,
-        option: false
-      }];
-
-      setAttrColumns(newAttrColumns)
-    }
-  }, [data])
-
-  const attrFilterColumns = React.useMemo(() => {
-   return (attrColumns??[]).filter(column => column.option===false || (attrSelectedTitles??[]).indexOf(column.title) !== -1)
-  }, [attrSelectedTitles, attrColumns])
-
-  const onFilterChange = (values) => {
-    setAttrSelectedTitles(values)
-  }
-
   const onOnlyShowChange = (e) => {
     setOnlyShowChange(e.target.checked)
   }
@@ -221,20 +162,7 @@ export const Diff = ({ item }) => {
 
       <div className='py-5'>    
         <Spin spinning={loading} >
-        {
-          data && <div className='flex'>
-            <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
-              <VersionCompareHeader data={data} />
-              <VersionCompareTable data={data} columns={attrFilterColumns} />
-              <VersionCompareIndex data={data} />
-            </div>
-            <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
-              <VersionCompareHeader data={data} direction='right' />
-              <VersionCompareTable data={data} columns={attrFilterColumns} direction='right' />
-              <VersionCompareIndex data={data} direction='right'/>
-            </div>
-          </div>
-        }
+          <CompareDetail data={data} />
         </Spin>
       </div>
     </div>

src/view/Manage/Model/Component/model-compare-select-model.jsx

+import React from 'react'
+import { Modal, Button, Row, Col, Spin, Tree, Input, Pagination, Tooltip, Typography, Space, Select, } from 'antd'
+import { useDebounceEffect } from "ahooks"
+
+import { dispatch } from '../../../../model'
+import Table from '../../ResizeableTable'
+import produce from 'immer'
+import { paginate } from '../../../../util'
+
+import './branch-select-model.less'
+
+const FC = ({ visible, item, onCancel }) => {
+  const [animated, setAnimated] = React.useState(true)
+  const basicRef = React.useRef()
+
+  React.useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        setAnimated(false)
+      }, 300)
+    }
+  }, [visible])
+
+  const close = (val = null) => {
+    setAnimated(true)
+    onCancel?.(val)
+  }
+
+  const save = () => {
+    close(basicRef.current.selectedRows??[])
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key='cancel'
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key='save' type='primary'
+        onClick={() => save()}
+      >确定</Button>
+    ]
+  }, [close, save])
+
+  return (
+    <Modal
+      title='模型对比设置'
+      visible={visible}
+      footer={footer}
+      width='80%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', height: '80vh' }}
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      { !animated && <Basic ref={basicRef} /> }
+    </Modal>
+  )
+}
+
+export default FC
+
+const Basic = React.forwardRef(function ({}, ref) {
+  const [args, setArgs] = React.useState({
+    keyword: undefined,
+  })
+  const [pagination, setPagination] = React.useState({
+    page: 1,
+    size: 20,
+  })
+  const [loadingTreeData, setLoadingTreeData] = React.useState(false)
+  const [treeData, setTreeData] = React.useState()
+  const [node, setNode] = React.useState()
+
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const [selectedRows, setSelectedRows] = React.useState()
+  const [expandedKeys, setExpandedKeys] = React.useState([])
+  const [autoExpandParent, setAutoExpandParent] = React.useState(false)
+
+  React.useImperativeHandle(ref, () => ({
+    selectedRows
+  }), [selectedRows])
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  React.useEffect(() => {
+    setPagination({...pagination, page: 1})
+  }, [node])
+
+  useDebounceEffect(() => {
+    if (node) {
+      getDataModels()
+    }
+  }, [node, args], { wait: 300 })
+
+  const treeData1 = React.useMemo(() => {
+    if (treeData) {
+      const newTreeData = produce(treeData, draft => {
+        const setNode = (g) => {
+          g.key = g.id;
+          g.title = g.name;
+          g.children = [];
+          
+          (g.subCatalogs??[]).forEach((child) => {
+            setNode(child)
+            g.children.push(child)
+          });
+        }
+
+        draft.forEach((child) => {
+          setNode(child)
+        })
+      })
+
+      return newTreeData
+    }
+
+    return undefined
+  }, [treeData])
+
+  const setArgsByParams = React.useCallback((params) => {
+    setArgs((prev) => {
+      return {...prev, ...params}
+    })
+  }, [])
+
+  const [tableData, total] = React.useMemo(() => {
+    const newData= [...data??[]]
+    return [paginate(newData, pagination.page, pagination.size), (newData??[]).length]
+  }, [data, pagination])
+
+  const columns = [
+    {
+      title: '模型名称',
+      dataIndex: 'name',
+      render: (text, record) => {
+        return <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>{text}</Typography.Text>
+        </Tooltip>
+      }
+    },
+    {
+      title: '中文名称',
+      dataIndex: 'cnName',
+      render: (text, record) => {
+        return <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>{text}</Typography.Text>
+        </Tooltip>
+      }
+    },
+    {
+      title: '描述',
+      dataIndex: 'remark',
+      render: (text, record) => {
+        return <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>{text}</Typography.Text>
+        </Tooltip>
+      }
+    },
+    {
+      title: '创建人',
+      dataIndex: 'editor',
+      render: (text, record) => {
+        return <Tooltip title={text}>
+          <Typography.Text ellipsis={true}>{text}</Typography.Text>
+        </Tooltip>
+      }
+    },
+  ]
+
+  const getTreeData = () => {
+    setLoadingTreeData(true)
+    dispatch({
+      type: 'datamodel.refreshDataModelCatalog',
+      callback: (data) => {
+        setLoadingTreeData(false)
+
+        const newTreeData = data?.subCatalogs??[]
+        setTreeData(newTreeData)
+        if ((newTreeData??[]).length > 0) {
+          setNode(newTreeData[0])
+        }
+      },
+      error: () => {
+        setLoadingTreeData(false)
+      }
+    })  
+  }
+
+  const getDataModels = () => {
+    setLoading(true)
+    
+    if (args.keyword) {
+    
+    } else {
+      dispatch({
+        type: 'datamodel.getCurrentDataModelCatalog',
+        payload: {
+          easyDataModelerCatalogId: node?.id,
+        },
+        callback: (data) => {
+          setLoading(false)
+          setData(data?.easyDataModelerDataModels)
+        },
+        error: () => {
+          setLoading(false)
+        }
+      })
+    }
+  }
+
+  const onTreeExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys)
+    setAutoExpandParent(false)
+  }
+
+  const onTreeSelect = (selectedKeys, { selectedNodes }) => {
+    if (selectedKeys.length === 0 || selectedNodes.length === 0) {
+      return
+    }
+
+    setNode(selectedNodes[0])
+  }
+
+  const onChange = (val) => {
+    setSelectedRows(val)
+  }
+
+  return (
+    <div className='branch-select-model'>
+      <Row>
+        <Col span={4}>
+          <Spin spinning={loadingTreeData}>
+            <Tree
+              className='tree'
+              showLine 
+              showIcon={false} 
+              autoExpandParent={autoExpandParent}
+              treeData={treeData1}
+              selectedKeys={node?[node.id]:[]}
+              expandedKeys={expandedKeys}
+              onSelect={onTreeSelect}
+              onExpand={onTreeExpand}
+            />
+          </Spin>
+        </Col>
+        <Col span={20}>
+          <div
+            style={{
+              display: 'flex',
+              padding: '0px 0px 15px',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+            }}>
+              <Input size="middle"
+                placeholder="请输入关键字搜索"
+                value={args.keyword}
+                bordered={true} allowClear
+                onChange={(e) => {
+                  setArgsByParams({ keyword: e.target.value })
+                  setPagination({ ...pagination, page: 1 })
+                }} 
+                style={{ width: 200 }}
+              />
+          </div>
+          <Table
+            size='small'
+            extraColWidth={32}
+            rowKey='id'
+            loading={loading}
+            columns={columns}
+            dataSource={tableData??[]}
+            pagination={false}
+            rowSelection={{
+              type: 'radio',
+              selectedRowKeys: (selectedRows??[]).map(item => item.id),
+              onChange: (selectedRowKeys, selectedRows) => {
+                setSelectedRows(selectedRows)
+              },
+            }}
+            scroll={{ y: 'calc(80vh - 170px)' }}
+          />
+          {
+            total!==0 && <Pagination
+              style={{
+                textAlign: 'center',
+                marginTop: 15,
+              }}
+              showSizeChanger
+              onChange={(page,size) => {
+                setPagination({page, size})
+              }}
+              current={pagination.page}
+              pageSize={pagination.size}
+              defaultCurrent={1}
+              total={total}
+              showTotal={(total) => `共${total??0}项`}
+            />
+          }
+        </Col>
+      </Row>
+    </div>
+  )
+})
\ No newline at end of file