Skip to content

Commit f080da7

Browse files
JerryFan626JerryFan626
committed
feat: Result table add pagination
1 parent 25dc4da commit f080da7

10 files changed

Lines changed: 250 additions & 122 deletions

File tree

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

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,7 @@ interface IProps {
7171
dispatch: Function;
7272
// remainingUse: IAIState['remainingUse'];
7373
// onSQLContentChange: (v: string) => void;
74-
onExecuteSQLBefore?: () => void;
75-
onExecuteSQL: (result: any, sql: string, createHistoryParams) => void;
74+
onExecuteSQL: (sql: string) => void;
7675
onConsoleSave: () => void;
7776
tables: any[];
7877
}
@@ -315,25 +314,12 @@ function Console(props: IProps) {
315314
};
316315

317316
const executeSQL = (sql?: string) => {
318-
props.onExecuteSQLBefore && props.onExecuteSQLBefore();
319-
320317
const sqlContent = sql || editorRef?.current?.getCurrentSelectContent() || editorRef?.current?.getAllContent();
321318

322319
if (!sqlContent) {
323320
return;
324321
}
325-
326-
let p: any = {
327-
sql: sqlContent,
328-
...executeParams,
329-
};
330-
sqlServer.executeSql(p).then((res) => {
331-
let createHistoryParams: any = {
332-
...executeParams,
333-
ddl: sqlContent,
334-
};
335-
props.onExecuteSQL?.(res, sqlContent!, createHistoryParams);
336-
});
322+
props.onExecuteSQL && props.onExecuteSQL(sqlContent);
337323
};
338324

339325
const saveConsole = (value?: string) => {

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,29 @@
3434
}
3535

3636
.toolBar {
37+
position: sticky;
38+
top: 0;
39+
z-index: 30;
40+
display: flex;
41+
justify-content: start;
42+
align-items: center;
43+
border-top: 1px solid var(--color-border-secondary);
44+
background-color: var(--color-bg-elevated);
45+
padding: 0 16px;
46+
}
47+
.toolBarItem {
48+
margin: 4px 0;
49+
padding-right: 8px;
50+
display: flex;
51+
justify-content: start;
52+
align-items: center;
53+
&:not(:last-child) {
54+
border-right: 1px solid var(--color-border);
55+
}
56+
}
57+
58+
.table {
59+
flex: 1;
3760
}
3861

3962
.statusBar {
@@ -47,6 +70,10 @@
4770
align-items: center;
4871
border-top: 1px solid var(--color-border-secondary);
4972
background-color: var(--color-bg-elevated);
73+
74+
& > span {
75+
margin-right: 16px;
76+
}
5077
}
5178

5279
.tableItem {
@@ -94,6 +121,24 @@
94121
}
95122
}
96123

124+
.pagination {
125+
:global {
126+
.ant-pagination-prev,
127+
.ant-pagination-next,
128+
.ant-pagination-jump-prev,
129+
.ant-pagination-jump-next {
130+
min-width: 20px;
131+
}
132+
.ant-pagination-simple-pager {
133+
input {
134+
padding: 0px !important;
135+
font-size: 12px;
136+
height: 70% !important;
137+
}
138+
}
139+
}
140+
}
141+
97142
.monacoEditor {
98143
height: 400px;
99144
margin: -15px;

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

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useEffect, useMemo, useState } from 'react';
22
import { TableDataType } from '@/constants/table';
3-
import { IManageResultData, ITableHeaderItem } from '@/typings/database';
3+
import { IManageResultData, IResultConfig, ITableHeaderItem } from '@/typings/database';
44
import { formatDate } from '@/utils/date';
5-
import { Button, message, Modal, Pagination, Table } from 'antd';
5+
import { Button, message, Modal, Pagination, Select, Table } from 'antd';
66
import antd from 'antd';
77
import { BaseTable, ArtColumn, useTablePipeline, features, SortItem, BaseTableProps } from 'ali-react-table';
88
import Iconfont from '../Iconfont';
@@ -19,7 +19,8 @@ import { compareStrings } from '@/utils/sort';
1919
interface ITableProps {
2020
className?: string;
2121
data: IManageResultData;
22-
isLoading?: boolean;
22+
config: IResultConfig;
23+
onConfigChange: (config: IResultConfig) => void;
2324
}
2425

2526
interface IViewTableCellData {
@@ -43,7 +44,7 @@ const DarkSupportBaseTable: any = styled(BaseTable)`
4344
`;
4445

4546
export default function TableBox(props: ITableProps) {
46-
const { className, data, isLoading } = props;
47+
const { className, data, config, onConfigChange } = props;
4748
const { headerList, dataList, duration, description } = data || {};
4849
const [viewTableCellData, setViewTableCellData] = useState<IViewTableCellData | null>(null);
4950
const [appTheme] = useTheme();
@@ -161,20 +162,43 @@ export default function TableBox(props: ITableProps) {
161162
}),
162163
);
163164

165+
const onPageNoChange = (pageNo: number) => {
166+
onConfigChange && onConfigChange({ ...config, pageNo });
167+
};
168+
const onPageSizeChange = (pageSize: number) => {
169+
onConfigChange && onConfigChange({ ...config, pageSize, pageNo: 1 });
170+
};
164171
return (
165172
<div className={classnames(className, styles.tableBox)}>
166173
{columns.length ? (
167174
<>
168-
{/* <div className={styles.toolBar}>
175+
<div className={styles.toolBar}>
169176
<div className={styles.toolBarItem}>
170-
<Pagination className={styles.pagination} simple defaultCurrent={2} total={50} pageSize={1} />
177+
<Pagination
178+
onChange={onPageNoChange}
179+
className={styles.pagination}
180+
simple
181+
current={config.pageNo}
182+
{...config}
183+
/>
184+
<Select
185+
size="small"
186+
defaultValue={10}
187+
onChange={onPageSizeChange}
188+
options={[
189+
{ label: 10, value: 10 },
190+
{ label: 25, value: 25 },
191+
{ label: 50, value: 50 },
192+
{ label: 100, value: 100 },
193+
]}
194+
/>
171195
</div>
172-
</div> */}
196+
</div>
173197
<DarkSupportBaseTable
174198
className={classnames({ dark: isDarkTheme }, props.className, styles.table)}
175199
components={{ EmptyContent: () => <h2>{i18n('common.text.noData')}</h2> }}
176-
// isStickyHead
177-
// stickyTop={24}
200+
isStickyHead
201+
stickyTop={30}
178202
{...pipeline.getProps()}
179203
/>
180204
<div className={styles.statusBar}>

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

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -51,24 +51,6 @@
5151
}
5252
}
5353

54-
.tableStatus {
55-
display: flex;
56-
align-items: center;
57-
58-
.dot {
59-
display: inline-block;
60-
margin-right: 5px;
61-
width: 10px;
62-
height: 10px;
63-
background-color: #ff4d4f;
64-
border-radius: 50%;
65-
}
66-
67-
.successDot {
68-
background-color: #52c41a;
69-
}
70-
}
71-
7254
.cursorTableBox {
7355
// display: block !important;
7456
// height: 100%;
@@ -93,8 +75,10 @@
9375
.noData {
9476
height: 100%;
9577
display: flex;
78+
flex-direction: column;
9679
justify-content: center;
9780
align-items: center;
81+
font-size: 12px;
9882
}
9983

10084
.stateIndicator {

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

Lines changed: 27 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ import Iconfont from '@/components/Iconfont';
55
import StateIndicator from '@/components/StateIndicator';
66
import { Spin, Popover } from 'antd';
77
import { StatusType } from '@/constants';
8-
import { IManageResultData } from '@/typings';
8+
import { IManageResultData, IResultConfig } from '@/typings';
99
import i18n from '@/i18n';
10-
import { v4 as uuidv4 } from 'uuid';
1110
import TableBox from './TableBox';
1211
import EmptyImg from '@/assets/img/empty.svg';
1312
import styles from './index.less';
1413

1514
interface IProps {
1615
className?: string;
1716
manageResultDataList?: IManageResultData[];
17+
resultConfig: IResultConfig[];
18+
onExecute: (sql: string, config: IResultConfig, index: number) => void;
19+
onTabEdit: (type: 'add' | 'remove', value?: number | string) => void;
1820
isLoading?: boolean;
1921
}
2022

@@ -26,7 +28,7 @@ const handleTabs = (result: IManageResultData[]) => {
2628
return (result || []).map((item, index) => {
2729
return {
2830
label: (
29-
<Popover content={item.sql}>
31+
<Popover content={item.originalSql}>
3032
<Iconfont
3133
key={index}
3234
className={classnames(styles[item.success ? 'successIcon' : 'failIcon'], styles.statusIcon)}
@@ -40,56 +42,44 @@ const handleTabs = (result: IManageResultData[]) => {
4042
});
4143
};
4244

43-
export default memo<IProps>(function SearchResult({ className, manageResultDataList = [], isLoading }) {
44-
const [isUnfold, setIsUnfold] = useState(true);
45+
export default memo<IProps>(function SearchResult(props) {
46+
const { className, manageResultDataList = [], isLoading, onExecute } = props;
4547
const [currentTab, setCurrentTab] = useState<string | number | undefined>();
4648
const [resultDataList, setResultDataList] = useState<IManageResultData[]>([]);
49+
const [resultConfig, setResultConfig] = useState<IResultConfig[]>([]);
4750
const [tabs, setTabs] = useState<IOption[]>([]);
4851

52+
useEffect(() => {
53+
setResultConfig(props.resultConfig);
54+
}, [props.resultConfig]);
55+
4956
useEffect(() => {
5057
if (!manageResultDataList.length) {
5158
return;
5259
}
53-
const newManageResultDataList = manageResultDataList.map((t) => {
54-
return {
55-
...t,
56-
uuid: uuidv4(),
57-
};
58-
});
59-
setCurrentTab(newManageResultDataList[0].uuid);
60-
setResultDataList(newManageResultDataList);
61-
setTabs(handleTabs(newManageResultDataList));
60+
61+
// debugger;
62+
if (!currentTab || !manageResultDataList.find((d) => d.uuid === currentTab)) {
63+
setCurrentTab(manageResultDataList[0].uuid);
64+
}
65+
66+
setResultDataList(manageResultDataList);
67+
setTabs(handleTabs(manageResultDataList));
6268
}, [manageResultDataList]);
6369

6470
function onChange(uuid: string | number) {
6571
setCurrentTab(uuid);
6672
}
6773

68-
const renderStatus = (text: string) => {
69-
return (
70-
<div className={styles.tableStatus}>
71-
<i className={classnames(styles.dot, { [styles.successDot]: text == StatusType.SUCCESS })}></i>
72-
{text == StatusType.SUCCESS ? '成功' : '失败'}
73-
</div>
74-
);
75-
};
76-
7774
function onEdit(type: 'add' | 'remove', value?: number | string) {
78-
if (type === 'remove') {
79-
const dataList = resultDataList.filter((t) => t.uuid !== value);
80-
setResultDataList(dataList);
81-
if (currentTab === value) {
82-
setCurrentTab(dataList[0]?.uuid);
83-
}
84-
}
75+
props.onTabEdit && props.onTabEdit(type, value);
8576
}
8677

8778
const renderEmpty = () => {
8879
return (
8980
<div className={styles.noData}>
90-
{/* {i18n('common.text.noData')} */}
91-
{/* <Iconfont style={{ fontSize: '64px' }} code="&#xe642;" /> */}
9281
<img src={EmptyImg} />
82+
<p>{i18n('common.text.noData')}</p>
9383
</div>
9484
);
9585
};
@@ -108,7 +98,10 @@ export default memo<IProps>(function SearchResult({ className, manageResultDataL
10898
<TableBox
10999
className={classnames({ [styles.cursorTableBox]: item.uuid === currentTab })}
110100
data={item}
111-
// isLoading={isLoading}
101+
config={resultConfig?.[index]}
102+
onConfigChange={function (config: IResultConfig) {
103+
onExecute && onExecute(item.originalSql, config, index);
104+
}}
112105
/>
113106
</Fragment>
114107
);
@@ -124,7 +117,7 @@ export default memo<IProps>(function SearchResult({ className, manageResultDataL
124117
);
125118
}
126119
});
127-
}, [currentTab]);
120+
}, [currentTab, resultDataList, resultConfig]);
128121

129122
return (
130123
<div className={classnames(className, styles.box)}>

‎chat2db-client/src/pages/main/dashboard/chart-item/index.tsx‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,28 @@ function ChartItem(props: IChartItemProps) {
319319
};
320320
}, [initDDL]);
321321

322+
const handleExecuteSQL = async (sql: string) => {
323+
setIsLoading(true);
324+
let executeSQLParams: IExecuteSqlParams = {
325+
sql,
326+
...data,
327+
};
328+
329+
// 获取当前SQL的查询结果
330+
let sqlResult = await sqlService.executeSql(executeSQLParams);
331+
332+
let sqlData;
333+
if (sqlResult && sqlResult[0]) {
334+
sqlData = handleSQLResult2ChartData(sqlResult[0]);
335+
}
336+
setChartData({
337+
...chartData,
338+
ddl: sql,
339+
sqlData,
340+
});
341+
setIsLoading(false);
342+
};
343+
322344
const renderEditorBlock = () => {
323345
const { sqlData = {} } = chartData || {};
324346
const options = Object.keys(sqlData).map((i) => ({ label: i, value: i }));
@@ -334,19 +356,7 @@ function ChartItem(props: IChartItemProps) {
334356
hasAi2Lang={false}
335357
hasSaveBtn={false}
336358
value={chartData?.ddl}
337-
onExecuteSQL={(result: any, sql: string) => {
338-
setIsLoading(true);
339-
let sqlData;
340-
if (result && result[0]) {
341-
sqlData = handleSQLResult2ChartData(result[0]);
342-
}
343-
setChartData({
344-
...chartData,
345-
ddl: sql,
346-
sqlData,
347-
});
348-
setIsLoading(false);
349-
}}
359+
onExecuteSQL={handleExecuteSQL}
350360
editorOptions={{
351361
lineNumbers: 'off',
352362
theme:

0 commit comments

Comments
 (0)