模型列表排序

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/pro-table": "^2.45.0",
     "@antv/g2": "^4.1.12",
     "@antv/g6": "^4.2.1",
     "@craco/craco": "^6.1.2",

src/index.less

@@ -93,6 +93,16 @@ div[id^='__qiankun_microapp_wrapper_'] {
 //   border-color: #333333 !important;
 // }
 
+.yy-pro-table-column-setting-list {
+  .yy-tree .yy-tree-treenode {
+    align-items: center !important;
+  }
+
+  .yy-tree .yy-tree-node-content-wrapper:hover {
+    background: transparent !important;
+  }
+}
+
 .yy-table-cell{
   word-break: break-all; 
 }

src/service/datamodeler.js

-import { PostFile, GetJSON, PostJSON, Get } from "../util/axios"
+import { PostFile, GetJSON, PostJSON } from "../util/axios"
 
 export function loadDataModelCatalog() {
   return GetJSON("/datamodeler/easyDataModelerCURD/loadDataModelCatalog");

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

@@ -289,7 +289,7 @@ const ImportAction = (props) => {
     return newEasyDataModelerIndices.filter(item => (item.indexedEasyDataModelAttributes||[]).length > 0);
   }
 
-  const container = (<>
+  const container = (<React.Fragment>
     <ImportActionHeader 
       form={form}
       editable={action!=='detail'} 
@@ -321,7 +321,7 @@ const ImportAction = (props) => {
       editable={action!=='detail'} 
       terms={terms}
     />
-  </>);
+  </React.Fragment>);
  
   return (
     <Spin spinning={loading}>

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

 import React, { useState, useEffect, useRef } from "react";
-import { Table, Space, Button, Tooltip, Modal } from 'antd';
+import { Space, Button, Tooltip, Modal } from 'antd';
 import { EditOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-design/icons';
 import SmoothScroll from 'smooth-scroll';
+import ProTable from "@ant-design/pro-table";
 
 import { dispatchLatest } from '../../../../model'; 
 import { showMessage, getQueryParam } from '../../../../util';
@@ -11,7 +12,7 @@ import './ModelTable.less';
 
 const ModelTable = (props) => {
 
-  const { data, onChange, loading, onItemAction, onSelect, catalogId } = props;
+  const { data, onChange, onItemAction, onSelect, catalogId } = props;
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
 
   const [modal, contextHolder] = Modal.useModal();
@@ -56,7 +57,6 @@ const ModelTable = (props) => {
     {
       title: '序号',
       dataIndex: 'key',
-      editable: false,
       render: (text, record, index) => {
         return (index+1).toString();
       },
@@ -83,7 +83,6 @@ const ModelTable = (props) => {
       title: '操作',
       key: 'action',
       width: 120,
-
       render: (text,record) => {
         return (
           <Space size='small'>
@@ -164,8 +163,7 @@ const ModelTable = (props) => {
 
   return (
     <div className='model-table'>
-      <Table
-        loading={loading}
+      <ProTable
         components={{
           body: {
             row: AnchorRow
@@ -176,6 +174,13 @@ const ModelTable = (props) => {
         rowKey={'id'}
         dataSource={data}
         pagination={false} 
+        options={{
+          density: true,
+          setting: true,
+          reload: false,
+        }}
+        search={false}
+        tableAlertRender={false}
         sticky
       />
       { contextHolder }

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

 @import '../../../../variables.less';
 .model-table {
   .yy-table {
-    height: calc(100vh - @header-height - @pm-4 - @pm-3 - @pm-3 - 37px - 37px - @pm-3) !important;
+    height: calc(100vh - @header-height - @pm-4 - @pm-3 - @pm-3 - 37px - 37px - 48px - @pm-3) !important;
     overflow: auto !important;
   }
 }
\ No newline at end of file