元数据中心优化 (#1059)

1.当未选择数据源时 下方的tag禁用
2.优化目录树的高度会溢出的问题
3.优化数据查询时的布局

dlink-web/src/pages/DataCenter/MetaData/TableData/index.tsx

@@ -19,11 +19,12 @@
 
 
 import {useEffect, useState} from "react";
-import {Alert, AutoComplete, Button, Col, Input, Row, Spin, Table, Tooltip} from "antd";
+import {Alert, AutoComplete, Button, Col, Input, Row, Spin, Tooltip} from "antd";
 import {showTableData} from "@/components/Studio/StudioEvent/DDL";
 import styles from './index.less';
 import {SearchOutlined} from "@ant-design/icons";
 import Divider from "antd/es/divider";
+import {ProTable} from "@ant-design/pro-table";
 
 const TableData = (props: any) => {
 
@@ -36,11 +37,7 @@ const TableData = (props: any) => {
   // 列名和列信息数据
   const [columns, setColumns] = useState<string[]>([]);
   const [errMsg, setErrMsg] = useState<{ isErr: boolean, msg: string }>({isErr: false, msg: ""});
-  //使用多选框进行自由列选择，屏蔽不需要看见的列，目前实现有些问题，暂时屏蔽
-  // 是否展开字段选择
-  // const [showFilter, setShowFilter] = useState(false);
-  // 是否全选，全选状态相关
-  // const [state, setState] = useState<{ checkedList: [], indeterminate: boolean, checkAll: boolean }>({checkedList: [], indeterminate: true, checkAll: false});
+
   // 条件查询时联想输入使用
   const [options, setOptions] = useState<{ whereOption: {}[], orderOption: {}[] }>({whereOption: [], orderOption: []});
 // where输入框内容
@@ -102,26 +99,6 @@ const TableData = (props: any) => {
 
   }, [dbId, table, schema]);
 
-//使用多选框进行自由列选择，屏蔽不需要看见的列，目前实现有些问题，暂时屏蔽
-// // 单项选择监听
-// const onChange = checkedList => {
-//   setState({
-//     checkedList,
-//     indeterminate:
-//       !!checkedList.length && checkedList.length < columns.length,
-//     checkAll: checkedList.length === columns.length
-//   });
-// };
-//
-// //全选按钮监听
-// const onCheckAllChange = e => {
-//   setState({
-//     checkedList: e.target.checked ? columns : [],
-//     indeterminate: false,
-//     checkAll: e.target.checked
-//   });
-// };
-
 
 // 条件查询时反馈联想信息
   const handleRecommend = (value: string) => {
@@ -173,7 +150,7 @@ const TableData = (props: any) => {
             />
           ) : <></>}
           <Row>
-            <Col span={12}>
+            <Col span={6}>
               <AutoComplete
                 value={optionInput.whereInput}
                 options={options.whereOption}
@@ -195,9 +172,9 @@ const TableData = (props: any) => {
                        }}
                 />
               </AutoComplete>
-
             </Col>
-            <Col span={12}>
+
+            <Col span={6}>
               <AutoComplete
                 value={optionInput.orderInput}
                 options={options.orderOption}
@@ -218,35 +195,7 @@ const TableData = (props: any) => {
                 }}/>
               </AutoComplete>
             </Col>
-          </Row>
-          {/*//使用多选框进行自由列选择，屏蔽不需要看见的列，目前实现有些问题，暂时屏蔽*/}
-          {/*{showFilter ? (*/}
-          {/*  <div>*/}
-          {/*    <Checkbox*/}
-          {/*      indeterminate={state.indeterminate}*/}
-          {/*      onChange={onCheckAllChange}*/}
-          {/*      checked={state.checkAll}*/}
-          {/*    >*/}
-          {/*      全选*/}
-          {/*    </Checkbox>*/}
-          {/*    <br/>*/}
-          {/*    <CheckboxGroup*/}
-          {/*      options={columns}*/}
-          {/*      value={state.checkedList}*/}
-          {/*      onChange={onChange}*/}
-          {/*    />*/}
-          {/*  </div>*/}
-          {/*) : (<></>)}*/}
-          <Row className={styles.margin_10}>
-            <Col span={23}/>
-            {/*<Col span={1}>*/}
-            {/*  <Tooltip title="字段过滤">*/}
-            {/*    <Button type="primary" shape="circle" icon={<FilterOutlined/>} size="middle" onClick={(event) => {*/}
-            {/*      setShowFilter(!showFilter)*/}
-            {/*    }}/>*/}
-            {/*  </Tooltip>*/}
-            {/*</Col>*/}
-            <Col span={1}>
+            <Col span={2}>
               <Tooltip title="查询">
                 <Button type="primary" shape="circle" icon={<SearchOutlined/>} size="middle" onClick={(event) => {
                   fetchData(optionInput.whereInput, optionInput.orderInput)
@@ -254,22 +203,23 @@ const TableData = (props: any) => {
               </Tooltip>
             </Col>
           </Row>
+
         </div>
 
 
         <Divider orientation="left" plain>数据</Divider>
 
         <div>
-          <Table style={{height: '95vh'}}
+          <ProTable
+            style={{height: '95vh'}}
             columns={tableData.columns}
             dataSource={tableData.rowData}
             pagination={{
-                   pageSize: page.pageSize,
-                   onChange: (pageNum, pageSize) => {
-                     setPage({page: pageNum, pageSize: pageSize});
-                   }
+              pageSize: 10,
             }}
             scroll={{y: "80vh", x: true}}
+            dateFormatter="string"
+            search={false}
           />
         </div>
       </Spin>

dlink-web/src/pages/DataCenter/MetaData/index.tsx

@@ -18,22 +18,23 @@
  */
 
 
-
 import {PageContainer} from '@ant-design/pro-layout'; //
-
 import styles from './index.less';
-import {Row, Col, Tabs, Tag, Empty, Tree, Segmented, Card, Image, Spin, Button} from 'antd';
+import {Button, Card, Col, Empty, Image, Row, Segmented, Spin, Tabs, Tag, Tree} from 'antd';
 import React, {Key, useEffect, useState} from 'react';
 import {clearMetaDataTable, showMetaDataTable} from '@/components/Studio/StudioEvent/DDL';
 import {getData} from '@/components/Common/crud';
 import {
-  BarsOutlined, CheckCircleOutlined,
+  BarsOutlined,
+  CheckCircleOutlined,
   ConsoleSqlOutlined,
   DatabaseOutlined,
-  DownOutlined, ExclamationCircleOutlined,
+  DownOutlined,
+  ExclamationCircleOutlined,
   ReadOutlined,
   TableOutlined,
 } from '@ant-design/icons';
+import {Scrollbars} from 'react-custom-scrollbars';
 import {TreeDataNode} from '@/components/Studio/StudioTree/Function';
 import Tables from '@/pages/DataBase/Tables';
 import Columns from '@/pages/DataBase/Columns';
@@ -46,7 +47,7 @@ import Meta from "antd/lib/card/Meta";
 const {DirectoryTree} = Tree;
 const {TabPane} = Tabs;
 
-const Container: React.FC<{}> = (props: any) => {
+const MetaDataContainer: React.FC<{}> = (props: any) => {
 
 
   let [database, setDatabase] = useState<[{
@@ -66,13 +67,14 @@ const Container: React.FC<{}> = (props: any) => {
     enabled: '',
     groupName: '',
     status: '',
-    time:''
+    time: ''
   }]);
-
   const [databaseId, setDatabaseId] = useState<number>();
-  const [treeData, setTreeData] = useState<{tables:[],updateTime:string}>({tables:[],updateTime:"none"});
+  const [treeData, setTreeData] = useState<{ tables: [], updateTime: string }>({tables: [], updateTime: "none"});
   const [row, setRow] = useState<TreeDataNode>();
   const [loadingDatabase, setloadingDatabase] = useState(false);
+  const [tableChecked, setTableChecked] = useState(true);
+  const [dataBaseChecked, setDatabaseChecked] = useState(false);
 
   const fetchDatabaseList = async () => {
     const res = getData('api/database/listEnabledAll');
@@ -106,9 +108,9 @@ const Container: React.FC<{}> = (props: any) => {
           }
         }
 
-        setTreeData({tables:tables,updateTime:result.time});
+        setTreeData({tables: tables, updateTime: result.time});
       } else {
-        setTreeData({tables:[],updateTime:"none"});
+        setTreeData({tables: [], updateTime: "none"});
       }
     });
     setloadingDatabase(false);
@@ -118,14 +120,14 @@ const Container: React.FC<{}> = (props: any) => {
     fetchDatabaseList();
   }, []);
 
-  const onChangeDataBase = (value: string|number) => {
+  const onChangeDataBase = (value: string | number) => {
     onRefreshTreeData(Number(value));
     setRow(null);
   };
 
   const refeshDataBase = (value: string | number) => {
     setloadingDatabase(true);
-    clearMetaDataTable(Number(databaseId)).then(result=>{
+    clearMetaDataTable(Number(databaseId)).then(result => {
       onChangeDataBase(Number(value));
     })
   };
@@ -189,7 +191,10 @@ const Container: React.FC<{}> = (props: any) => {
             <div style={{position: "absolute", right: "10px"}}>
               <Button type="link" size="small"
                       loading={loadingDatabase}
-                      onClick={()=>refeshDataBase(databaseId)}
+                      onClick={() => {
+                        refeshDataBase(databaseId)
+                        setTableChecked(true)
+                      }}
               >刷新</Button>
             </div>
             <div>{item.alias}</div>
@@ -201,11 +206,8 @@ const Container: React.FC<{}> = (props: any) => {
   }
 
 
-
-
-
   return (
-    <div>
+    <PageContainer title={false}>
       <div className={styles.headerBarContent}>
         <Segmented className={styles.headerBar}
                    options={buildDatabaseBar()}
@@ -222,12 +224,11 @@ const Container: React.FC<{}> = (props: any) => {
               >
                 <Meta title={buildListTitle()}
                       className={styles.tableListHead}
-                      description={"上次更新："+treeData.updateTime}
+                      description={"上次更新：" + treeData.updateTime}
                 />
-
                 {treeData.tables.length > 0 ? (
+                  <Scrollbars style={{height: 800}}>
                     <DirectoryTree
-                    height={850}
                       showIcon
                       switcherIcon={<DownOutlined/>}
                       treeData={treeData.tables}
@@ -236,8 +237,10 @@ const Container: React.FC<{}> = (props: any) => {
                         {event, selected, node, selectedNodes, nativeEvent}
                       ) => {
                         showTableInfo(selected, node);
+                        setTableChecked(false)
                       }}
                     />
+                  </Scrollbars>
                 ) : (
                   <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                 )}
@@ -249,7 +252,7 @@ const Container: React.FC<{}> = (props: any) => {
             <div>
               <div>
                 <Tabs defaultActiveKey="describe">
-                  <TabPane
+                  <TabPane disabled={tableChecked}
                            tab={
                              <span>
                           <ReadOutlined/>
@@ -276,7 +279,7 @@ const Container: React.FC<{}> = (props: any) => {
                     )}
                   </TabPane>
 
-                  <TabPane
+                  <TabPane disabled={tableChecked}
                            tab={
                              <span>
                           <BarsOutlined/>
@@ -286,13 +289,13 @@ const Container: React.FC<{}> = (props: any) => {
                            key="exampleData"
                   >
                     {row ? (
-                      <TableData dbId={databaseId} schema={row.schema} table={row.table} />
+                      <TableData dbId={databaseId} schema={row.schema} table={row.table}/>
                     ) : (
                       <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                     )}
                   </TabPane>
 
-                  <TabPane
+                  <TabPane disabled={tableChecked}
                            tab={
                              <span>
                           <ConsoleSqlOutlined/>
@@ -314,14 +317,8 @@ const Container: React.FC<{}> = (props: any) => {
           </Col>
         </Row>
       </div>
-    </div>
-  );
-};
-
-export default () => {
-  return (
-    <PageContainer>
-      <Container/>
     </PageContainer>
   );
 };
+
+export default MetaDataContainer;