Skip to content

D
dlink
Unverified Commit b617a4df authored by zhu-mingye's avatar zhu-mingye Committed by GitHub
Browse files
Options

元数据中心优化 (#1059) 

1.当未选择数据源时 下方的tag禁用
2.优化目录树的高度会溢出的问题
3.优化数据查询时的布局
parent 022044ab
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 124 deletions
dlink-web/src/pages/DataCenter/MetaData/TableData/index.tsx
View file @ b617a4df
...@@ -19,11 +19,12 @@ ...@@ -19,11 +19,12 @@
import {useEffect, useState} from "react"; 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 {showTableData} from "@/components/Studio/StudioEvent/DDL";
import styles from './index.less'; import styles from './index.less';
import {SearchOutlined} from "@ant-design/icons"; import {SearchOutlined} from "@ant-design/icons";
import Divider from "antd/es/divider"; import Divider from "antd/es/divider";
import {ProTable} from "@ant-design/pro-table";
const TableData = (props: any) => { const TableData = (props: any) => {
...@@ -36,11 +37,7 @@ const TableData = (props: any) => { ...@@ -36,11 +37,7 @@ const TableData = (props: any) => {
// 列名和列信息数据 // 列名和列信息数据
const [columns, setColumns] = useState<string[]>([]); const [columns, setColumns] = useState<string[]>([]);
const [errMsg, setErrMsg] = useState<{ isErr: boolean, msg: string }>({isErr: false, msg: ""}); 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: []}); const [options, setOptions] = useState<{ whereOption: {}[], orderOption: {}[] }>({whereOption: [], orderOption: []});
// where输入框内容 // where输入框内容
...@@ -102,26 +99,6 @@ const TableData = (props: any) => { ...@@ -102,26 +99,6 @@ const TableData = (props: any) => {
}, [dbId, table, schema]); }, [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) => { const handleRecommend = (value: string) => {
...@@ -173,7 +150,7 @@ const TableData = (props: any) => { ...@@ -173,7 +150,7 @@ const TableData = (props: any) => {
/> />
) : <></>} ) : <></>}
<Row> <Row>
<Col span={12}> <Col span={6}>
<AutoComplete <AutoComplete
value={optionInput.whereInput} value={optionInput.whereInput}
options={options.whereOption} options={options.whereOption}
...@@ -195,9 +172,9 @@ const TableData = (props: any) => { ...@@ -195,9 +172,9 @@ const TableData = (props: any) => {
}} }}
/> />
</AutoComplete> </AutoComplete>
</Col> </Col>
<Col span={12}>
<Col span={6}>
<AutoComplete <AutoComplete
value={optionInput.orderInput} value={optionInput.orderInput}
options={options.orderOption} options={options.orderOption}
...@@ -218,35 +195,7 @@ const TableData = (props: any) => { ...@@ -218,35 +195,7 @@ const TableData = (props: any) => {
}}/> }}/>
</AutoComplete> </AutoComplete>
</Col> </Col>
</Row> <Col span={2}>
{/*//使用多选框进行自由列选择，屏蔽不需要看见的列，目前实现有些问题，暂时屏蔽*/}
{/*{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}>
<Tooltip title="查询"> <Tooltip title="查询">
<Button type="primary" shape="circle" icon={<SearchOutlined/>} size="middle" onClick={(event) => { <Button type="primary" shape="circle" icon={<SearchOutlined/>} size="middle" onClick={(event) => {
fetchData(optionInput.whereInput, optionInput.orderInput) fetchData(optionInput.whereInput, optionInput.orderInput)
...@@ -254,22 +203,23 @@ const TableData = (props: any) => { ...@@ -254,22 +203,23 @@ const TableData = (props: any) => {
</Tooltip> </Tooltip>
</Col> </Col>
</Row> </Row>
</div> </div>
<Divider orientation="left" plain>数据</Divider> <Divider orientation="left" plain>数据</Divider>
<div> <div>
<Table style={{height: '95vh'}} <ProTable
columns={tableData.columns} style={{height: '95vh'}}
dataSource={tableData.rowData} columns={tableData.columns}
pagination={{ dataSource={tableData.rowData}
pageSize: page.pageSize, pagination={{
onChange: (pageNum, pageSize) => { pageSize: 10,
setPage({page: pageNum, pageSize: pageSize}); }}
} scroll={{y: "80vh", x: true}}
}} dateFormatter="string"
scroll={{y: "80vh", x: true}} search={false}
/> />
</div> </div>
</Spin> </Spin>
......
dlink-web/src/pages/DataCenter/MetaData/index.tsx
View file @ b617a4df
...@@ -18,22 +18,23 @@ ...@@ -18,22 +18,23 @@
*/ */
import {PageContainer} from '@ant-design/pro-layout'; // import {PageContainer} from '@ant-design/pro-layout'; //
import styles from './index.less'; 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 React, {Key, useEffect, useState} from 'react';
import {clearMetaDataTable, showMetaDataTable} from '@/components/Studio/StudioEvent/DDL'; import {clearMetaDataTable, showMetaDataTable} from '@/components/Studio/StudioEvent/DDL';
import {getData} from '@/components/Common/crud'; import {getData} from '@/components/Common/crud';
import { import {
BarsOutlined, CheckCircleOutlined, BarsOutlined,
CheckCircleOutlined,
ConsoleSqlOutlined, ConsoleSqlOutlined,
DatabaseOutlined, DatabaseOutlined,
DownOutlined, ExclamationCircleOutlined, DownOutlined,
ExclamationCircleOutlined,
ReadOutlined, ReadOutlined,
TableOutlined, TableOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import {Scrollbars} from 'react-custom-scrollbars';
import {TreeDataNode} from '@/components/Studio/StudioTree/Function'; import {TreeDataNode} from '@/components/Studio/StudioTree/Function';
import Tables from '@/pages/DataBase/Tables'; import Tables from '@/pages/DataBase/Tables';
import Columns from '@/pages/DataBase/Columns'; import Columns from '@/pages/DataBase/Columns';
...@@ -46,7 +47,7 @@ import Meta from "antd/lib/card/Meta"; ...@@ -46,7 +47,7 @@ import Meta from "antd/lib/card/Meta";
const {DirectoryTree} = Tree; const {DirectoryTree} = Tree;
const {TabPane} = Tabs; const {TabPane} = Tabs;
const Container: React.FC<{}> = (props: any) => { const MetaDataContainer: React.FC<{}> = (props: any) => {
let [database, setDatabase] = useState<[{ let [database, setDatabase] = useState<[{
...@@ -66,13 +67,14 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -66,13 +67,14 @@ const Container: React.FC<{}> = (props: any) => {
enabled: '', enabled: '',
groupName: '', groupName: '',
status: '', status: '',
time:'' time: ''
}]); }]);
const [databaseId, setDatabaseId] = useState<number>(); 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 [row, setRow] = useState<TreeDataNode>();
const [loadingDatabase, setloadingDatabase] = useState(false); const [loadingDatabase, setloadingDatabase] = useState(false);
const [tableChecked, setTableChecked] = useState(true);
const [dataBaseChecked, setDatabaseChecked] = useState(false);
const fetchDatabaseList = async () => { const fetchDatabaseList = async () => {
const res = getData('api/database/listEnabledAll'); const res = getData('api/database/listEnabledAll');
...@@ -106,9 +108,9 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -106,9 +108,9 @@ const Container: React.FC<{}> = (props: any) => {
} }
} }
setTreeData({tables:tables,updateTime:result.time}); setTreeData({tables: tables, updateTime: result.time});
} else { } else {
setTreeData({tables:[],updateTime:"none"}); setTreeData({tables: [], updateTime: "none"});
} }
}); });
setloadingDatabase(false); setloadingDatabase(false);
...@@ -118,14 +120,14 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -118,14 +120,14 @@ const Container: React.FC<{}> = (props: any) => {
fetchDatabaseList(); fetchDatabaseList();
}, []); }, []);
const onChangeDataBase = (value: string|number) => { const onChangeDataBase = (value: string | number) => {
onRefreshTreeData(Number(value)); onRefreshTreeData(Number(value));
setRow(null); setRow(null);
}; };
const refeshDataBase = (value: string | number) => { const refeshDataBase = (value: string | number) => {
setloadingDatabase(true); setloadingDatabase(true);
clearMetaDataTable(Number(databaseId)).then(result=>{ clearMetaDataTable(Number(databaseId)).then(result => {
onChangeDataBase(Number(value)); onChangeDataBase(Number(value));
}) })
}; };
...@@ -189,7 +191,10 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -189,7 +191,10 @@ const Container: React.FC<{}> = (props: any) => {
<div style={{position: "absolute", right: "10px"}}> <div style={{position: "absolute", right: "10px"}}>
<Button type="link" size="small" <Button type="link" size="small"
loading={loadingDatabase} loading={loadingDatabase}
onClick={()=>refeshDataBase(databaseId)} onClick={() => {
refeshDataBase(databaseId)
setTableChecked(true)
}}
>刷新</Button> >刷新</Button>
</div> </div>
<div>{item.alias}</div> <div>{item.alias}</div>
...@@ -201,11 +206,8 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -201,11 +206,8 @@ const Container: React.FC<{}> = (props: any) => {
} }
return ( return (
<div> <PageContainer title={false}>
<div className={styles.headerBarContent}> <div className={styles.headerBarContent}>
<Segmented className={styles.headerBar} <Segmented className={styles.headerBar}
options={buildDatabaseBar()} options={buildDatabaseBar()}
...@@ -222,22 +224,23 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -222,22 +224,23 @@ const Container: React.FC<{}> = (props: any) => {
> >
<Meta title={buildListTitle()} <Meta title={buildListTitle()}
className={styles.tableListHead} className={styles.tableListHead}
description={"上次更新："+treeData.updateTime} description={"上次更新：" + treeData.updateTime}
/> />
{treeData.tables.length > 0 ? ( {treeData.tables.length > 0 ? (
<DirectoryTree <Scrollbars style={{height: 800}}>
height={850} <DirectoryTree
showIcon showIcon
switcherIcon={<DownOutlined/>} switcherIcon={<DownOutlined/>}
treeData={treeData.tables} treeData={treeData.tables}
onSelect={( onSelect={(
selectedKeys: Key[], selectedKeys: Key[],
{event, selected, node, selectedNodes, nativeEvent} {event, selected, node, selectedNodes, nativeEvent}
) => { ) => {
showTableInfo(selected, node); showTableInfo(selected, node);
}} setTableChecked(false)
/> }}
/>
</Scrollbars>
) : ( ) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
)} )}
...@@ -249,14 +252,14 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -249,14 +252,14 @@ const Container: React.FC<{}> = (props: any) => {
<div> <div>
<div> <div>
<Tabs defaultActiveKey="describe"> <Tabs defaultActiveKey="describe">
<TabPane <TabPane disabled={tableChecked}
tab={ tab={
<span> <span>
<ReadOutlined/> <ReadOutlined/>
描述 描述
</span> </span>
} }
key="describe" key="describe"
> >
<Divider orientation="left" plain> <Divider orientation="left" plain>
表信息 表信息
...@@ -276,30 +279,30 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -276,30 +279,30 @@ const Container: React.FC<{}> = (props: any) => {
)} )}
</TabPane> </TabPane>
<TabPane <TabPane disabled={tableChecked}
tab={ tab={
<span> <span>
<BarsOutlined/> <BarsOutlined/>
数据查询 数据查询
</span> </span>
} }
key="exampleData" key="exampleData"
> >
{row ? ( {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}/> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
)} )}
</TabPane> </TabPane>
<TabPane <TabPane disabled={tableChecked}
tab={ tab={
<span> <span>
<ConsoleSqlOutlined/> <ConsoleSqlOutlined/>
SQL 生成 SQL 生成
</span> </span>
} }
key="sqlGeneration" key="sqlGeneration"
> >
{row ? ( {row ? (
<Generation dbId={databaseId} schema={row.schema} table={row.table}/> <Generation dbId={databaseId} schema={row.schema} table={row.table}/>
...@@ -314,14 +317,8 @@ const Container: React.FC<{}> = (props: any) => { ...@@ -314,14 +317,8 @@ const Container: React.FC<{}> = (props: any) => {
</Col> </Col>
</Row> </Row>
</div> </div>
</div>
);
};
export default () => {
return (
<PageContainer>
<Container/>
</PageContainer> </PageContainer>
); );
}; };
export default MetaDataContainer;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment