Skip to content

Commit d695115

Browse files
shanhexishanhexi
committed
edit data
1 parent 94e1981 commit d695115

5 files changed

Lines changed: 344 additions & 130 deletions

File tree

‎chat2db-client/src/blocks/DatabaseTableEditor/index.tsx‎

Lines changed: 27 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,12 @@ import classnames from 'classnames';
55
import IndexList, { IIndexListRef } from './IndexList';
66
import ColumnList, { IColumnListRef } from './ColumnList';
77
import BaseInfo, { IBaseInfoRef } from './BaseInfo';
8-
import sqlService, { IModifyTableSqlParams, IExecuteSqlParams } from '@/service/sql';
9-
import MonacoEditor, { IExportRefFunction } from '@/components/Console/MonacoEditor';
8+
import sqlService, { IModifyTableSqlParams } from '@/service/sql';
9+
import ExecuteSQL from '@/components/ExecuteSQL';
1010
import { IEditTableInfo, IWorkspaceTab } from '@/typings';
1111
import { DatabaseTypeCode, WorkspaceTabType } from '@/constants';
1212
import i18n from '@/i18n';
1313
import lodash from 'lodash';
14-
import Iconfont from '@/components/Iconfont';
15-
import { formatSql } from '@/utils';
16-
1714
interface IProps {
1815
dataSourceId: number;
1916
databaseName: string;
@@ -48,9 +45,6 @@ export default memo((props: IProps) => {
4845
const baseInfoRef = useRef<IBaseInfoRef>(null);
4946
const columnListRef = useRef<IColumnListRef>(null);
5047
const indexListRef = useRef<IIndexListRef>(null);
51-
const monacoEditorRef = useRef<IExportRefFunction>(null);
52-
const [executeSqlResult, setExecuteSqlResult] = useState<string | null>(null);
53-
const [executeLoading, setExecuteLoading] = useState<boolean>(false);
5448
const [appendValue, setAppendValue] = useState<string>('');
5549
const tabList = useMemo(() => {
5650
return [
@@ -80,12 +74,6 @@ export default memo((props: IProps) => {
8074
setCurrentTab(item);
8175
}
8276

83-
useEffect(() => {
84-
if (!viewSqlModal) {
85-
setExecuteSqlResult(null);
86-
}
87-
}, [viewSqlModal]);
88-
8977
useEffect(() => {
9078
if (tableName) {
9179
getTableDetails({});
@@ -136,62 +124,22 @@ export default memo((props: IProps) => {
136124
}
137125
}
138126

139-
const executeSql = () => {
140-
const executeSQLParams: IExecuteSqlParams = {
141-
sql: monacoEditorRef.current?.getAllContent() || '',
142-
dataSourceId,
143-
databaseName,
144-
schemaName,
145-
};
146-
setExecuteLoading(true);
147-
sqlService
148-
.executeDDL(executeSQLParams)
149-
.then((res) => {
150-
if (res.success) {
151-
setViewSqlModal(false);
152-
message.success(i18n('common.text.successfulExecution'));
153-
const newTableName = baseInfoRef.current?.getBaseInfo().name;
154-
getTableDetails({ tableNameProps: newTableName });
155-
if (!tableName) {
156-
changeTabDetails({
157-
...tabDetails,
158-
title: `${newTableName}`,
159-
type: WorkspaceTabType.EditTable,
160-
uniqueData: {
161-
...(tabDetails.uniqueData || {}),
162-
tableName: newTableName,
163-
},
164-
});
165-
}
166-
} else {
167-
setExecuteSqlResult(res.message);
168-
}
169-
})
170-
.finally(() => {
171-
setExecuteLoading(false);
127+
const executeSuccessCallBack = () => {
128+
setViewSqlModal(false);
129+
message.success(i18n('common.text.successfulExecution'));
130+
const newTableName = baseInfoRef.current?.getBaseInfo().name;
131+
getTableDetails({ tableNameProps: newTableName });
132+
if (!tableName) {
133+
changeTabDetails({
134+
...tabDetails,
135+
title: `${newTableName}`,
136+
type: WorkspaceTabType.EditTable,
137+
uniqueData: {
138+
...(tabDetails.uniqueData || {}),
139+
tableName: newTableName,
140+
},
172141
});
173-
};
174-
175-
//
176-
const renderMonacoEditor = useMemo(() => {
177-
return (
178-
<MonacoEditor
179-
className={styles.monacoEditor}
180-
id="view_sql"
181-
ref={monacoEditorRef}
182-
appendValue={{
183-
text: appendValue,
184-
range: 'reset',
185-
}}
186-
/>
187-
);
188-
}, [appendValue]);
189-
190-
const handleFormatSql = () => {
191-
const sql = monacoEditorRef.current?.getAllContent() || '';
192-
formatSql(sql, databaseType).then((res) => {
193-
setAppendValue(res);
194-
});
142+
}
195143
};
196144

197145
return (
@@ -244,30 +192,17 @@ export default memo((props: IProps) => {
244192
width="60vw"
245193
maskClosable={false}
246194
footer={false}
195+
destroyOnClose={true}
247196
>
248-
<div className={styles.monacoEditorModal}>
249-
<div className={styles.monacoEditorContent}>
250-
<div className={styles.monacoEditorHeader}>
251-
<div className={styles.formatButton} onClick={handleFormatSql}>
252-
<Iconfont code="&#xe64f;" />
253-
{i18n('common.button.format')}
254-
</div>
255-
<Button className={styles.executeButton} type="primary" onClick={executeSql} loading={executeLoading}>
256-
<Iconfont code="&#xe656;" />
257-
{i18n('common.button.execute')}
258-
</Button>
259-
</div>
260-
{renderMonacoEditor}
261-
</div>
262-
{executeSqlResult && (
263-
<div className={styles.result}>
264-
<div className={styles.resultHeader}>{i18n('common.text.errorMessage')}</div>
265-
<div className={styles.resultContent}>
266-
<div className={styles.errorMessage}>{executeSqlResult}</div>
267-
</div>
268-
</div>
269-
)}
270-
</div>
197+
<ExecuteSQL
198+
initSql={appendValue}
199+
databaseName={databaseName}
200+
dataSourceId={dataSourceId}
201+
tableName={tableName}
202+
schemaName={schemaName}
203+
databaseType={databaseType}
204+
executeSuccessCallBack={executeSuccessCallBack}
205+
/>
271206
</Modal>
272207
</Context.Provider>
273208
);

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import '../../styles/var.less';
2+
3+
.executeSQL {
4+
.monacoEditorModal {
5+
display: flex;
6+
height: 400px;
7+
border: 1px solid var(--color-border);
8+
border-radius: 4px;
9+
10+
.monacoEditorHeader {
11+
height: 38px;
12+
padding: 0px 10px;
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
border-bottom: 1px solid var(--color-border);
17+
.formatButton {
18+
border-radius: 3px;
19+
background-color: var(--color-fill-quaternary);
20+
height: 24px;
21+
padding: 0px 7px;
22+
cursor: pointer;
23+
i {
24+
margin-right: 6px;
25+
}
26+
&:hover {
27+
color: var(--color-primary);
28+
}
29+
}
30+
.executeButton {
31+
height: 24px;
32+
line-height: 24px;
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
i {
37+
margin-right: 4px;
38+
}
39+
}
40+
}
41+
.monacoEditorContent {
42+
width: 0px;
43+
flex: 1;
44+
display: flex;
45+
flex-direction: column;
46+
padding: 0px -6px;
47+
border-right: 1px solid var(--color-border);
48+
.monacoEditor {
49+
flex: 1;
50+
margin: 0px 6px;
51+
}
52+
}
53+
.result {
54+
width: 0px;
55+
flex: 1;
56+
display: flex;
57+
flex-direction: column;
58+
align-items: center;
59+
justify-content: center;
60+
.resultHeader {
61+
width: 100%;
62+
line-height: 38px;
63+
text-align: center;
64+
border-bottom: 1px solid var(--color-border);
65+
}
66+
.resultContent {
67+
flex: 1;
68+
padding: 0px 10px;
69+
overflow-y: auto;
70+
.errorTitle {
71+
display: flex;
72+
align-items: center;
73+
padding: 4px 10px;
74+
// background-color: var(--color-bg-subtle);
75+
border-radius: 8px;
76+
margin-top: 10px;
77+
i {
78+
color: var(--color-error);
79+
margin-right: 4px;
80+
}
81+
}
82+
83+
.errorMessage {
84+
margin: 10px 0px;
85+
padding: 4px 10px;
86+
background-color: var(--color-bg-subtle);
87+
border-radius: 8px;
88+
}
89+
}
90+
}
91+
}
92+
}

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import React, { memo, useRef, useState, useMemo, useEffect } from 'react';
2+
import styles from './index.less';
3+
import classnames from 'classnames';
4+
import Iconfont from '@/components/Iconfont';
5+
import MonacoEditor, { IExportRefFunction } from '@/components/Console/MonacoEditor';
6+
import i18n from '@/i18n';
7+
import { Button } from 'antd';
8+
import { formatSql } from '@/utils';
9+
import sqlService, { IExecuteSqlParams } from '@/service/sql';
10+
import { DatabaseTypeCode } from '@/constants';
11+
12+
interface IProps {
13+
className?: string;
14+
initSql: string;
15+
databaseType: DatabaseTypeCode;
16+
databaseName: string;
17+
dataSourceId: number;
18+
schemaName: string | undefined;
19+
tableName?: string;
20+
executeSuccessCallBack: () => void;
21+
}
22+
23+
export default memo<IProps>((props) => {
24+
const {
25+
className,
26+
initSql,
27+
databaseType,
28+
databaseName,
29+
dataSourceId,
30+
schemaName,
31+
tableName,
32+
executeSuccessCallBack,
33+
} = props;
34+
const monacoEditorRef = useRef<IExportRefFunction>(null);
35+
const [executeLoading, setExecuteLoading] = useState<boolean>(false);
36+
const [appendValue, setAppendValue] = useState<string>('');
37+
const [executeSqlResult, setExecuteSqlResult] = useState<string | null>(null);
38+
39+
useEffect(() => {
40+
setAppendValue(initSql);
41+
}, []);
42+
43+
const handleFormatSql = () => {
44+
const sql = monacoEditorRef.current?.getAllContent() || '';
45+
formatSql(sql, databaseType).then((res) => {
46+
setAppendValue(res);
47+
});
48+
};
49+
50+
const executeSql = () => {
51+
const executeSQLParams: IExecuteSqlParams = {
52+
sql: monacoEditorRef.current?.getAllContent() || '',
53+
dataSourceId,
54+
databaseName,
55+
schemaName,
56+
tableName,
57+
};
58+
setExecuteLoading(true);
59+
sqlService
60+
.executeDDL(executeSQLParams)
61+
.then((res) => {
62+
if (res.success) {
63+
executeSuccessCallBack?.();
64+
} else {
65+
setExecuteSqlResult(res.message);
66+
}
67+
})
68+
.finally(() => {
69+
setExecuteLoading(false);
70+
});
71+
};
72+
73+
const renderMonacoEditor = useMemo(() => {
74+
return (
75+
<MonacoEditor
76+
className={styles.monacoEditor}
77+
id="view_sql"
78+
ref={monacoEditorRef}
79+
appendValue={{
80+
text: appendValue,
81+
range: 'reset',
82+
}}
83+
/>
84+
);
85+
}, [appendValue]);
86+
87+
return (
88+
<div className={classnames(styles.executeSQL, className)}>
89+
<div className={styles.monacoEditorModal}>
90+
<div className={styles.monacoEditorContent}>
91+
<div className={styles.monacoEditorHeader}>
92+
<div className={styles.formatButton} onClick={handleFormatSql}>
93+
<Iconfont code="&#xe64f;" />
94+
{i18n('common.button.format')}
95+
</div>
96+
<Button className={styles.executeButton} type="primary" onClick={executeSql} loading={executeLoading}>
97+
<Iconfont code="&#xe656;" />
98+
{i18n('common.button.execute')}
99+
</Button>
100+
</div>
101+
{renderMonacoEditor}
102+
</div>
103+
{executeSqlResult && (
104+
<div className={styles.result}>
105+
<div className={styles.resultHeader}>{i18n('common.text.errorMessage')}</div>
106+
<div className={styles.resultContent}>
107+
<div className={styles.errorMessage}>{executeSqlResult}</div>
108+
</div>
109+
</div>
110+
)}
111+
</div>
112+
</div>
113+
);
114+
});

0 commit comments

Comments
 (0)