Skip to content

Commit fc25c13

Browse files
JerryFan626JerryFan626
committed
fix: fix Cascader
1 parent 4f57986 commit fc25c13

8 files changed

Lines changed: 121 additions & 83 deletions

File tree

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const { keywords: SQLKeys } = language;
77
const { keywords } = language;
88
import { editorDefaultOptions, EditorThemeType, ThemeType } from '@/constants';
99
import styles from './index.less';
10-
import { useUpdateEffect } from '@/hooks'
10+
import { useUpdateEffect } from '@/hooks';
1111
export type IEditorIns = monaco.editor.IStandaloneCodeEditor;
1212
export type IEditorOptions = monaco.editor.IStandaloneEditorConstructionOptions;
1313
export type IEditorContentChangeEvent = monaco.editor.IModelContentChangedEvent;
@@ -30,7 +30,7 @@ interface IProps {
3030
onSave?: (value: string) => void; // 快捷键保存的回调
3131
defaultValue?: string;
3232
onExecute?: (value: string) => void; // 快捷键执行的回调
33-
tables: any[]
33+
tables?: any[];
3434
}
3535

3636
export interface IExportRefFunction {
@@ -45,7 +45,18 @@ export interface IHintData {
4545
}
4646

4747
function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
48-
const { id, className, language = 'sql', didMount, options, isActive, onSave, onExecute, defaultValue, appendValue } = props;
48+
const {
49+
id,
50+
className,
51+
language = 'sql',
52+
didMount,
53+
options,
54+
isActive,
55+
onSave,
56+
onExecute,
57+
defaultValue,
58+
appendValue,
59+
} = props;
4960
const editorRef = useRef<IEditorIns>();
5061
const [appTheme] = useTheme();
5162

@@ -152,7 +163,7 @@ function MonacoEditor(props: IProps, ref: ForwardedRef<IExportRefFunction>) {
152163
if (appendValue) {
153164
appendMonacoValue(editorRef.current, appendValue?.text, appendValue?.range);
154165
}
155-
}, [appendValue])
166+
}, [appendValue]);
156167

157168
const setValue = (text: any, range?: IRangeType) => {
158169
appendMonacoValue(editorRef.current, text, range);
@@ -291,8 +302,8 @@ export const appendMonacoValue = (editor: any, text: any, range: IRangeType = 'e
291302
// 创建编辑操作，将当前文档内容替换为新内容
292303
let newRange: IRangeType = range;
293304
if (range === 'reset') {
294-
editor.setValue(text)
295-
return
305+
editor.setValue(text);
306+
return;
296307
}
297308
switch (range) {
298309
case 'cover':

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

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,11 @@ import { v4 as uuidv4 } from 'uuid';
1212
import { DatabaseTypeCode, ConsoleStatus } from '@/constants';
1313
import Iconfont from '../Iconfont';
1414
import { ITreeNode } from '@/typings';
15-
import styles from './index.less';
1615
import i18n from '@/i18n';
17-
import { IRemainingUse } from '@/typings/ai';
1816
import { IAIState } from '@/models/ai';
19-
import { WECHAT_MP_URL } from '@/constants/social';
2017
import Popularize from '@/components/Popularize';
21-
import { handelLocalStorageSavedConsole, readLocalStorageSavedConsoleText } from '@/utils'
18+
import { handleLocalStorageSavedConsole, readLocalStorageSavedConsoleText } from '@/utils';
19+
import styles from './index.less';
2220

2321
enum IPromptType {
2422
NL_2_SQL = 'NL_2_SQL',
@@ -43,7 +41,7 @@ export type IAppendValue = {
4341

4442
interface IProps {
4543
/** 是谁在调用我 */
46-
source: 'workspace',
44+
source: 'workspace';
4745
/** 是否是活跃的console，用于快捷键 */
4846
isActive?: boolean;
4947
/** 添加或修改的内容 */
@@ -76,7 +74,18 @@ interface IProps {
7674
}
7775

7876
function Console(props: IProps) {
79-
const { hasAiChat = true, executeParams, appendValue, isActive, hasSaveBtn = true, value, aiModel, dispatch, source, defaultValue } = props;
77+
const {
78+
hasAiChat = true,
79+
executeParams,
80+
appendValue,
81+
isActive,
82+
hasSaveBtn = true,
83+
value,
84+
aiModel,
85+
dispatch,
86+
source,
87+
defaultValue,
88+
} = props;
8089
const uid = useMemo(() => uuidv4(), []);
8190
const chatResult = useRef('');
8291
const editorRef = useRef<IExportRefFunction>();
@@ -107,40 +116,40 @@ function Console(props: IProps) {
107116

108117
useEffect(() => {
109118
if (source !== 'workspace') {
110-
return
119+
return;
111120
}
112121
// 离开时保存
113122
if (!isActive) {
114123
// 离开时清除定时器
115124
if (timerRef.current) {
116-
clearInterval(timerRef.current)
117-
handelLocalStorageSavedConsole(executeParams.consoleId!, 'save', editorRef?.current?.getAllContent());
125+
clearInterval(timerRef.current);
126+
handleLocalStorageSavedConsole(executeParams.consoleId!, 'save', editorRef?.current?.getAllContent());
118127
}
119128
} else {
120129
// 活跃时自动保存
121130
timingAutoSave();
122131
}
123132
return () => {
124133
if (timerRef.current) {
125-
clearInterval(timerRef.current)
134+
clearInterval(timerRef.current);
126135
}
127-
}
128-
}, [isActive])
136+
};
137+
}, [isActive]);
129138

130139
useEffect(() => {
131140
if (source !== 'workspace') {
132-
return
141+
return;
133142
}
134-
const value = readLocalStorageSavedConsoleText(executeParams.consoleId!)
143+
const value = readLocalStorageSavedConsoleText(executeParams.consoleId!);
135144
if (value) {
136145
editorRef?.current?.setValue(value, 'reset');
137146
}
138-
}, [])
147+
}, []);
139148

140149
function timingAutoSave() {
141150
timerRef.current = setInterval(() => {
142-
handelLocalStorageSavedConsole(executeParams.consoleId!, 'save', editorRef?.current?.getAllContent());
143-
}, 5000)
151+
handleLocalStorageSavedConsole(executeParams.consoleId!, 'save', editorRef?.current?.getAllContent());
152+
}, 5000);
144153
}
145154

146155
const tableListName = useMemo(() => {
@@ -257,7 +266,7 @@ function Console(props: IProps) {
257266
};
258267

259268
historyServer.updateSavedConsole(p).then((res) => {
260-
handelLocalStorageSavedConsole(executeParams.consoleId!, 'delete');
269+
handleLocalStorageSavedConsole(executeParams.consoleId!, 'delete');
261270
message.success(i18n('common.tips.saveSuccessfully'));
262271
props.onConsoleSave && props.onConsoleSave();
263272
});
@@ -285,7 +294,7 @@ function Console(props: IProps) {
285294
);
286295

287296
const popUpPrompts = () => {
288-
setPopularizeModal(true)
297+
setPopularizeModal(true);
289298
};
290299
return (
291300
<div className={styles.console}>
@@ -317,7 +326,7 @@ function Console(props: IProps) {
317326
onExecute={executeSQL}
318327
options={props.editorOptions}
319328
tables={props.tables}
320-
// onChange={}
329+
// onChange={}
321330
/>
322331
{/* <Modal open={modelConfig.open}>{modelConfig.content}</Modal> */}
323332
<Drawer open={isAiDrawerOpen} getContainer={false} mask={false} onClose={() => setIsAiDrawerOpen(false)}>
@@ -334,7 +343,11 @@ function Console(props: IProps) {
334343
{i18n('common.button.execute')}
335344
</Button>
336345
{hasSaveBtn && (
337-
<Button type="default" className={styles.saveButton} onClick={() => saveConsole(editorRef?.current?.getAllContent())}>
346+
<Button
347+
type="default"
348+
className={styles.saveButton}
349+
onClick={() => saveConsole(editorRef?.current?.getAllContent())}
350+
>
338351
{i18n('common.button.save')}
339352
</Button>
340353
)}
@@ -349,14 +362,9 @@ function Console(props: IProps) {
349362
{i18n('common.button.format')}
350363
</Button>
351364
</div>
352-
<Modal
353-
open={popularizeModal}
354-
footer={false}
355-
onCancel={() => setPopularizeModal(false)}
356-
>
365+
<Modal open={popularizeModal} footer={false} onCancel={() => setPopularizeModal(false)}>
357366
<Popularize></Popularize>
358367
</Modal>
359-
360368
</div>
361369
);
362370
}

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -158,13 +158,12 @@ export default function TableBox(props: ITableProps) {
158158
// <Table pagination={false} columns={columns} dataSource={tableData} scroll={{ y: '100vh' }} size="small" />
159159
<>
160160
<DarkSupportBaseTable
161-
style={{
162-
'--border-color': 'transparent',
163-
}}
164161
className={classnames({ dark: isDarkTheme }, props.className, styles.table)}
165162
{...pipeline.getProps()}
166163
/>
167-
<div className={styles.statusBar}>{`${i18n('common.text.result')}：${description}. ${i18n('common.text.timeConsuming')}：${duration}ms`}</div>
164+
<div className={styles.statusBar}>{`${i18n('common.text.result')}：${description}. ${i18n(
165+
'common.text.timeConsuming',
166+
)}：${duration}ms`}</div>
168167
</>
169168
) : (
170169
<StateIndicator state="success" text={i18n('common.text.successfulExecution')} />
@@ -188,12 +187,10 @@ export default function TableBox(props: ITableProps) {
188187
<div className={styles.monacoEditor}>
189188
<MonacoEditor
190189
id="view_table-Cell_data"
191-
appendValue={
192-
{
193-
text: viewTableCellData?.value,
194-
range: 'reset',
195-
}
196-
}
190+
appendValue={{
191+
text: viewTableCellData?.value,
192+
range: 'reset',
193+
}}
197194
options={{
198195
readOnly: true,
199196
}}

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

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import Line from '../chart/line';
77
import Pie from '../chart/pie';
88
import Bar from '../chart/bar';
99
import { MoreOutlined } from '@ant-design/icons';
10-
import { Button, Cascader, Dropdown, Form, MenuProps, message, notification, Select } from 'antd';
10+
import { Button, Cascader, Dropdown, Form, MenuProps, message, notification, Select, Spin } from 'antd';
1111
import { deleteChart, getChartById, updateChart } from '@/service/dashboard';
1212
import { data } from '../../../../../mock/sqlResult.json';
1313
import Console from '@/components/Console';
@@ -72,6 +72,7 @@ function ChartItem(props: IChartItemProps) {
7272
const [chartMetaData, setChartMetaData] = useState<any>();
7373
const [cascaderValue, setCascaderValue] = useState<(string | number)[]>([]);
7474
const [isEditing, setIsEditing] = useState<boolean>(props.isEditing ?? false);
75+
const [isLoading, setIsLoading] = useState(false);
7576
const [initDDL, setInitDDL] = useState('');
7677
const [form] = Form.useForm(); // 创建一个表单实例
7778
const chartRef = useRef<any>();
@@ -116,6 +117,13 @@ function ChartItem(props: IChartItemProps) {
116117
handleChartConfigChange();
117118
}, [chartData.sqlData]);
118119

120+
const loadData = (selectedOptions: any) => {
121+
// 只选择了dataSource
122+
const dataSourceId = selectedOptions[0].value;
123+
const dataSource = connectionList.find((c) => c.id === dataSourceId);
124+
setCurConnection(dataSource);
125+
};
126+
119127
const queryDatabaseAndSchemaList = async (dataSourceId: number) => {
120128
const res = await sqlService.getDatabaseSchemaList({ dataSourceId });
121129
const dataSource = (cascaderOption || []).find((c) => c.value === dataSourceId);
@@ -126,6 +134,8 @@ function ChartItem(props: IChartItemProps) {
126134
};
127135
/** 根据id请求Chart数据 */
128136
const queryChartData = async () => {
137+
setIsLoading(true);
138+
129139
const { id } = props;
130140
let res = await getChartById({ id });
131141
const { dataSourceId, databaseName, ddl } = res;
@@ -160,6 +170,7 @@ function ChartItem(props: IChartItemProps) {
160170
});
161171
});
162172
}
173+
setIsLoading(false);
163174
};
164175

165176
const onExport2Image = () => {
@@ -324,6 +335,7 @@ function ChartItem(props: IChartItemProps) {
324335
hasSaveBtn={false}
325336
value={chartData?.ddl}
326337
onExecuteSQL={(result: any, sql: string) => {
338+
setIsLoading(true);
327339
let sqlData;
328340
if (result && result[0]) {
329341
sqlData = handleSQLResult2ChartData(result[0]);
@@ -333,6 +345,7 @@ function ChartItem(props: IChartItemProps) {
333345
ddl: sql,
334346
sqlData,
335347
});
348+
setIsLoading(false);
336349
}}
337350
editorOptions={{
338351
lineNumbers: 'off',
@@ -348,6 +361,7 @@ function ChartItem(props: IChartItemProps) {
348361
<Cascader
349362
options={cascaderOption}
350363
value={cascaderValue}
364+
loadData={loadData}
351365
onChange={(value, selectedOptions) => {
352366
console.log('onChange', value, selectedOptions);
353367
let p: any = {}; //包含了dataSourceId、databaseName、schemaName
@@ -415,42 +429,44 @@ function ChartItem(props: IChartItemProps) {
415429
};
416430

417431
return (
418-
<div className={styles.container}>
419-
{renderPlusIcon()}
420-
<div className={styles.titleBar}>
421-
<div className={styles.title}>{chartData?.name}</div>
422-
<div>
423-
<Dropdown
424-
menu={{
425-
items: [
426-
{
427-
key: 'Edit',
428-
label: i18n('dashboard.edit'),
429-
onClick: () => {
430-
setIsEditing(true);
432+
<Spin spinning={isLoading}>
433+
<div className={styles.container}>
434+
{renderPlusIcon()}
435+
<div className={styles.titleBar}>
436+
<div className={styles.title}>{chartData?.name}</div>
437+
<div>
438+
<Dropdown
439+
menu={{
440+
items: [
441+
{
442+
key: 'Edit',
443+
label: i18n('dashboard.edit'),
444+
onClick: () => {
445+
setIsEditing(true);
446+
},
431447
},
432-
},
433-
{
434-
key: 'Export',
435-
label: i18n('dashboard.export2image'),
436-
onClick: onExport2Image,
437-
},
438-
{
439-
key: 'delete',
440-
label: i18n('dashboard.delete'),
441-
onClick: onDeleteChart,
442-
},
443-
],
444-
}}
445-
placement="bottomLeft"
446-
>
447-
<MoreOutlined className={styles.edit} />
448-
</Dropdown>
448+
{
449+
key: 'Export',
450+
label: i18n('dashboard.export2image'),
451+
onClick: onExport2Image,
452+
},
453+
{
454+
key: 'delete',
455+
label: i18n('dashboard.delete'),
456+
onClick: onDeleteChart,
457+
},
458+
],
459+
}}
460+
placement="bottomLeft"
461+
>
462+
<MoreOutlined className={styles.edit} />
463+
</Dropdown>
464+
</div>
449465
</div>
466+
{chartData?.sqlData || isEditing ? renderChart() : renderEmptyBlock()}
467+
{isEditing && renderEditorBlock()}
450468
</div>
451-
{chartData?.sqlData || isEditing ? renderChart() : renderEmptyBlock()}
452-
{isEditing && renderEditorBlock()}
453-
</div>
469+
</Spin>
454470
);
455471
}
456472

0 commit comments

Comments
 (0)