Skip to content

Commit 161c69d

Browse files
shanhexishanhexi
committed
feat: table paging
1 parent 6d02149 commit 161c69d

18 files changed

Lines changed: 246 additions & 93 deletions

File tree

‎chat2db-client/src/components/SearchResult/TableBox/index.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@
106106
}
107107

108108
.statusBar {
109+
height: 26px;
110+
box-sizing: border-box;
109111
position: sticky;
110112
bottom: 0;
111113
z-index: 30;

‎chat2db-client/src/components/SearchResult/index.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,8 @@
6060
.outputPrefixIcon{
6161
margin-right: 4px;
6262
}
63+
64+
.stateIndicator{
65+
width: 70%;
66+
margin: 0 auto;
67+
}

‎chat2db-client/src/components/SearchResult/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default memo<IProps>((props) => {
4040
/>
4141
);
4242
} else {
43-
return <StateIndicator key={queryResultData.uuid} state="error" text={queryResultData.message} />;
43+
return <StateIndicator className={styles.stateIndicator} key={queryResultData.uuid} state="error" text={queryResultData.message} />;
4444
}
4545
};
4646

@@ -78,7 +78,8 @@ export default memo<IProps>((props) => {
7878
prefixIcon: <Iconfont key="output" className={styles.outputPrefixIcon} code="&#xe6bb;" />,
7979
label: 'Output',
8080
key: 'output',
81-
children: <Output />,
81+
// children: <Output />,
82+
children: '1',
8283
styles: { width: '80px' },
8384
canClosed: false,
8485
},

‎chat2db-client/src/components/StateIndicator/index.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535

3636
.errorText {
3737
font-size: 14px;
38-
color: var(--error-color);
38+
color: var(--color-error);
3939
text-align: center;
4040
transform: translateY(-20px);
4141
white-space: pre-wrap;

‎chat2db-client/src/models/workspace.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { getCurrentWorkspaceDatabase, setCurrentWorkspaceDatabase } from '@/utils/localStorage';
22
import sqlService, { MetaSchemaVO } from '@/service/sql';
33
import historyService from '@/service/history';
4-
import { DatabaseTypeCode, ConsoleStatus, TreeNodeType } from '@/constants';
4+
import { DatabaseTypeCode, TreeNodeType } from '@/constants';
55
import { Effect, Reducer } from 'umi';
66
import { ITreeNode, IConsole, IPageResponse, ICreateTabIntro, IWorkspaceTab } from '@/typings';
77
import { treeConfig } from '@/pages/main/workspace/components/Tree/treeConfig';

‎chat2db-client/src/pages/main/workspace/components/SaveList/index.less‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66

77
.leftModuleTitle {
88
flex-shrink: 0;
9-
margin-bottom: 10px;
9+
margin-bottom: 4px;
10+
padding: 0px 10px;
1011
.leftModuleTitleText {
1112
display: flex;
1213
justify-content: space-between;
@@ -36,7 +37,7 @@
3637
}
3738

3839
.saveBoxList {
39-
margin: 0px -10px;
40+
padding: 0px 10px;
4041
height: calc(26px * 3 + 6px);
4142
overflow-y: auto;
4243
}
@@ -51,7 +52,7 @@
5152
border-radius: 2px;
5253
user-select: none;
5354
cursor: pointer;
54-
.saveItemText{
55+
.saveItemText {
5556
width: 0px;
5657
flex: 1;
5758
.f-single-line();

‎chat2db-client/src/pages/main/workspace/components/TableList/index.less‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99

1010
.leftModuleTitle {
1111
flex-shrink: 0;
12-
margin-bottom: 10px;
12+
margin-bottom: 4px;
13+
padding: 0px 10px;
1314
.leftModuleTitleText {
15+
// 下阴影
1416
display: flex;
1517
justify-content: space-between;
1618
align-items: center;
@@ -52,7 +54,14 @@
5254
flex: 1;
5355
height: 0;
5456
overflow-y: auto;
55-
margin: 0px -10px;
57+
}
58+
59+
.paging {
60+
flex-shrink: 0;
61+
height: 25px;
62+
display: flex;
63+
align-items: center;
64+
justify-content: center;
5665
}
5766

5867
.refreshIconBox {

‎chat2db-client/src/pages/main/workspace/components/TableList/index.tsx‎

Lines changed: 115 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,21 @@ import React, { useState, useEffect, useRef, useMemo } from 'react';
22
import classnames from 'classnames';
33
import i18n from '@/i18n';
44
import { connect } from 'umi';
5-
import { Input, Cascader, Dropdown, MenuProps } from 'antd';
5+
import { Input, Cascader, Dropdown, MenuProps, Pagination } from 'antd';
66
import Iconfont from '@/components/Iconfont';
77
import LoadingContent from '@/components/Loading/LoadingContent';
88
import { IConnectionModelType } from '@/models/connection';
99
import { IWorkspaceModelType } from '@/models/workspace';
1010
import Tree from '../Tree';
1111
import { treeConfig } from '../Tree/treeConfig';
12-
import { TreeNodeType, WorkspaceTabType } from '@/constants';
12+
import { TreeNodeType, WorkspaceTabType, ConsoleStatus, ConsoleOpenedStatus } from '@/constants';
1313
import { approximateTreeNode } from '@/utils';
1414
import { useUpdateEffect } from '@/hooks/useUpdateEffect';
1515
import { v4 as uuidV4 } from 'uuid';
16-
import { ITreeNode } from '@/typings';
16+
import { IPagingData, ITreeNode } from '@/typings';
1717
import styles from './index.less';
1818
import { ExportTypeEnum } from '@/typings/resultTable';
19+
import historyService from '@/service/history';
1920

2021
interface IOption {
2122
value: TreeNodeType;
@@ -33,6 +34,12 @@ const optionsList: IOption[] = [
3334
{ value: TreeNodeType.TRIGGERS, label: i18n('workspace.tree.trigger') },
3435
];
3536

37+
const defaultPaddingData = {
38+
total: 0,
39+
pageSize: 200,
40+
pageNo: 1,
41+
};
42+
3643
const dvaModel = connect(
3744
({ connection, workspace }: { connection: IConnectionModelType; workspace: IWorkspaceModelType }) => ({
3845
connectionModel: connection,
@@ -54,6 +61,7 @@ const TableList = dvaModel((props: any) => {
5461
const [curType, setCurType] = useState<IOption>(optionsList[0]);
5562
const [curList, setCurList] = useState<ITreeNode[]>([]);
5663
const [tableLoading, setTableLoading] = useState<boolean>(false);
64+
const [pagingData, setPagingData] = useState<IPagingData>(defaultPaddingData);
5765

5866
// 导出表结构
5967
const handleExport = (exportType: ExportTypeEnum) => {
@@ -62,6 +70,18 @@ const TableList = dvaModel((props: any) => {
6270

6371
const items: MenuProps['items'] = useMemo(
6472
() => [
73+
{
74+
label: (
75+
<div className={styles.operationItem}>
76+
<Iconfont className={styles.operationIcon} code="&#xe63a;" />
77+
<div className={styles.operationTitle}>{i18n('common.button.createConsole')}</div>
78+
</div>
79+
),
80+
key: 'createConsole',
81+
onClick: () => {
82+
addConsole();
83+
},
84+
},
6585
{
6686
label: (
6787
<div className={styles.operationItem}>
@@ -177,26 +197,65 @@ const TableList = dvaModel((props: any) => {
177197
}
178198
}, [searching]);
179199

180-
function getList(refresh: boolean = false) {
200+
const addConsole = () => {
201+
const { dataSourceId, databaseName, schemaName, databaseType } = curWorkspaceParams;
202+
const params = {
203+
name: `new console`,
204+
ddl: '',
205+
dataSourceId: dataSourceId!,
206+
databaseName: databaseName!,
207+
schemaName: schemaName!,
208+
type: databaseType,
209+
status: ConsoleStatus.DRAFT,
210+
tabOpened: ConsoleOpenedStatus.IS_OPEN,
211+
operationType: WorkspaceTabType.CONSOLE,
212+
tabType: WorkspaceTabType.CONSOLE,
213+
};
214+
215+
historyService.saveConsole(params).then((res) => {
216+
dispatch({
217+
type: 'workspace/setCreateConsoleIntro',
218+
payload: {
219+
id: res,
220+
type: WorkspaceTabType.CONSOLE,
221+
title: params.name,
222+
uniqueData: params,
223+
},
224+
});
225+
});
226+
};
227+
228+
function getList(params?: { pageNo?: number; refresh?: boolean; searchKey?: string }) {
229+
const { refresh = false, searchKey, pageNo = 1 } = params || {};
181230
setTableLoading(true);
182-
treeConfig[curType.value].getChildren!({
183-
refresh,
184-
...curWorkspaceParams,
185-
extraParams: curWorkspaceParams,
186-
})
187-
.then((res) => {
188-
setCurList(res);
189-
setTableLoading(false);
190-
if (curType.value === TreeNodeType.TABLES) {
191-
dispatch({
192-
type: 'workspace/setCurTableList',
193-
payload: res,
194-
});
195-
}
231+
return new Promise((resolve) => {
232+
treeConfig[curType.value].getChildren!({
233+
refresh,
234+
...curWorkspaceParams,
235+
extraParams: curWorkspaceParams,
236+
searchKey,
237+
pageNo,
196238
})
197-
.catch(() => {
198-
setTableLoading(false);
199-
});
239+
.then((res: any) => {
240+
setCurList(res.data);
241+
resolve(res);
242+
setPagingData({
243+
total: res.total,
244+
pageSize: res.pageSize,
245+
pageNo: res.pageNo,
246+
});
247+
if (curType.value === TreeNodeType.TABLES) {
248+
dispatch({
249+
type: 'workspace/setCurTableList',
250+
payload: res.data,
251+
});
252+
}
253+
setTableLoading(false);
254+
})
255+
.catch(() => {
256+
setTableLoading(false);
257+
});
258+
});
200259
}
201260

202261
function openSearch() {
@@ -211,20 +270,41 @@ const TableList = dvaModel((props: any) => {
211270
}
212271

213272
function onChange(value: string) {
214-
setSearchedTableList(approximateTreeNode(curList, value));
273+
if (curType.value === TreeNodeType.TABLES) {
274+
getList({
275+
searchKey: value,
276+
refresh: false,
277+
}).then((res: any) => {
278+
setSearchedTableList(approximateTreeNode(res.data, value));
279+
});
280+
} else {
281+
setSearchedTableList(approximateTreeNode(curList, value));
282+
}
215283
}
216284

217285
function refreshTableList() {
218286
if (isReady) {
219287
setCurList([]);
220-
getList(true);
288+
getList({
289+
refresh: true,
290+
});
221291
}
222292
}
223293

224294
function cascaderChange(value: string[], selectedOptions: IOption[]) {
225295
setCurType(selectedOptions[0]);
226296
}
227297

298+
const handelChangePagination = (pageNo: number) => {
299+
getList({
300+
pageNo,
301+
refresh: false,
302+
searchKey: inputRef.current?.input.value,
303+
}).then((res: any) => {
304+
setSearchedTableList(approximateTreeNode(res.data, inputRef.current?.input.value));
305+
});
306+
};
307+
228308
return (
229309
<div className={styles.tableModule}>
230310
<div className={styles.leftModuleTitle}>
@@ -274,6 +354,18 @@ const TableList = dvaModel((props: any) => {
274354
<LoadingContent className={styles.treeBox} isLoading={tableLoading}>
275355
<Tree className={styles.tree} initialData={searchedTableList || curList} />
276356
</LoadingContent>
357+
{pagingData?.total > 200 && (
358+
<div className={styles.paging}>
359+
<Pagination
360+
onChange={handelChangePagination}
361+
current={pagingData?.pageNo}
362+
defaultPageSize={pagingData?.pageSize}
363+
simple
364+
size="small"
365+
total={pagingData?.total}
366+
/>
367+
</div>
368+
)}
277369
</div>
278370
);
279371
});

‎chat2db-client/src/pages/main/workspace/components/Tree/TreeNodeRightClick/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ import connectionServer from '@/service/connection';
1010
import mysqlServer from '@/service/sql';
1111
import { dataSourceFormConfigs } from '@/components/ConnectionEdit/config/dataSource';
1212
import { IConnectionConfig } from '@/components/ConnectionEdit/config/types';
13-
import { IWorkspaceModelType } from '@/models/workspace';
13+
import { ICurWorkspaceParams } from '@/models/workspace';
1414
import MonacoEditor from '@/components/Console/MonacoEditor';
1515

1616
export type IProps = {
1717
className?: string;
1818
setIsLoading: (value: boolean) => void;
1919
data: ITreeNode;
2020
dispatch: any;
21-
workspaceModel: IWorkspaceModelType['state'];
21+
curWorkspaceParams: ICurWorkspaceParams;
2222
};
2323

2424
export interface IOperationColumnConfigItem {
@@ -28,14 +28,13 @@ export interface IOperationColumnConfigItem {
2828
}
2929

3030
function TreeNodeRightClick(props: IProps) {
31-
const { className, data, setIsLoading, dispatch, workspaceModel } = props;
31+
const { className, data, setIsLoading, dispatch, curWorkspaceParams } = props;
3232
const [verifyDialog, setVerifyDialog] = useState<boolean>();
3333
const [verifyTableName, setVerifyTableName] = useState<string>('');
3434
const [modalApi, modelDom] = Modal.useModal();
3535
const [notificationApi, notificationDom] = notification.useNotification();
3636
const treeNodeConfig: ITreeConfigItem = treeConfig[data.treeNodeType];
3737
const { getChildren, operationColumn } = treeNodeConfig;
38-
const { curWorkspaceParams } = workspaceModel;
3938
const [monacoVerifyDialog, setMonacoVerifyDialog] = useState(false);
4039
const [monacoDefaultValue, setMonacoDefaultValue] = useState('');
4140
const dataSourceFormConfig = dataSourceFormConfigs.find((t: IConnectionConfig) => {

‎chat2db-client/src/pages/main/workspace/components/Tree/index.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import '../../../../../styles/var.less';
22

3-
.box {
4-
padding: 0px 0px 20px 0px;
3+
.treeBox {
4+
padding: 0px 6px;
55
}
66

77
.treeNode {
@@ -117,7 +117,7 @@
117117
opacity: 0.8;
118118
}
119119

120-
.describe{
120+
.describe {
121121
flex: 1;
122122
font-size: 10px;
123123
margin-left: 20px;

0 commit comments

Comments
 (0)