Skip to content

Commit 2fc6d8e

Browse files
shanhexishanhexi
committed
feat:delete table
1 parent 2abfe7d commit 2fc6d8e

8 files changed

Lines changed: 139 additions & 7 deletions

File tree

‎chat2db-client/src/blocks/Tree/functions/deleteTable.less‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.deleteTableFooter{
2+
display: flex;
3+
justify-content: center;
4+
button{
5+
margin: 0px 15px;
6+
}
7+
8+
}
9+
10+
.checkContainer{
11+
margin: 15px 0px 25px;
12+
}
13+
14+
.deleteModalContent{
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: center;
18+
font-size: 16px;
19+
font-weight: 500;
20+
text-align: center;
21+
}

‎chat2db-client/src/blocks/Tree/functions/deleteTable.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
// 置顶表格
2+
import React, { useState } from 'react';
3+
import mysqlService from '@/service/sql';
4+
import { Button, Checkbox } from 'antd';
5+
import { openModal } from '@/store/common/components';
6+
import styles from './deleteTable.less';
7+
import i18n from '@/i18n';
8+
9+
export const deleteTable = (treeNodeData) => {
10+
openModal({
11+
width: '450px',
12+
content: <DeleteModalContent treeNodeData={treeNodeData} openModal={openModal} />,
13+
});
14+
};
15+
16+
export const DeleteModalContent = (params: { treeNodeData: any; openModal: any }) => {
17+
const { treeNodeData } = params;
18+
// 禁用确定按钮
19+
const [userChecked, setUserChecked] = useState<boolean>(false);
20+
21+
const onOk = () => {
22+
const p: any = {
23+
dataSourceId: treeNodeData.extraParams.dataSourceId,
24+
databaseName: treeNodeData.extraParams.databaseName,
25+
schemaName: treeNodeData.extraParams.schemaName,
26+
tableName: treeNodeData.name,
27+
};
28+
mysqlService.deleteTable(p).then(() => {
29+
treeNodeData.parentNode.loadData({
30+
refresh: true,
31+
});
32+
openModal(false);
33+
});
34+
};
35+
36+
return (
37+
<div className={styles.deleteModalContent}>
38+
<div className={styles.title}>{i18n('workspace.tree.delete.table.tip', `"${treeNodeData.name}"`)}</div>
39+
<div className={styles.checkContainer}>
40+
<Checkbox
41+
value={userChecked}
42+
onChange={(e) => {
43+
setUserChecked(e.target.checked);
44+
}}
45+
>
46+
{i18n('workspace.tree.delete.tip')}
47+
</Checkbox>
48+
</div>
49+
<div className={styles.deleteTableFooter}>
50+
<Button
51+
type="primary"
52+
onClick={() => {
53+
openModal(false);
54+
}}
55+
>
56+
{i18n('common.button.cancel')}
57+
</Button>
58+
<Button disabled={!userChecked} onClick={onOk}>
59+
{i18n('common.button.affirm')}
60+
</Button>
61+
</div>
62+
</div>
63+
);
64+
};

‎chat2db-client/src/blocks/Tree/functions/viewDDL.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.monacoEditorBox{
2+
border: 1px solid var(--color-border);
3+
border-radius: 4px;
4+
height: 60vh;
5+
overflow: hidden;
6+
}

‎chat2db-client/src/blocks/Tree/functions/viewDDL.tsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,47 @@
11
// 置顶表格
22
import React from 'react';
33
import mysqlService from '@/service/sql';
4+
import { v4 as uuid } from 'uuid';
5+
import styles from './viewDDL.less';
46

57
import { openModal } from '@/store/common/components';
68

79
import MonacoEditor from '@/components/MonacoEditor';
810

911
export const viewDDL = (treeNodeData) => {
12+
const getSql = () => {
13+
return new Promise((resolve) => {
14+
mysqlService
15+
.exportCreateTableSql({
16+
dataSourceId: treeNodeData.extraParams.dataSourceId,
17+
databaseName: treeNodeData.extraParams.databaseName,
18+
schemaName: treeNodeData.extraParams.schemaName,
19+
tableName: treeNodeData.name,
20+
})
21+
.then((res) => {
22+
resolve(res);
23+
});
24+
});
25+
};
26+
1027
openModal({
11-
title: '查看DDL',
28+
title: `DDL-${treeNodeData.name}`,
1229
width: '60%',
30+
height: '60%',
1331
footer: false,
14-
content: <MonacoEditor id="edit-dialog" />,
32+
content: (
33+
<div className={styles.monacoEditorBox}>
34+
<MonacoEditorAsync getSql={getSql} />
35+
</div>
36+
),
37+
});
38+
};
39+
40+
export const MonacoEditorAsync = (params: { getSql: any }) => {
41+
const { getSql } = params;
42+
const monacoEditorRef = React.useRef<any>();
43+
getSql().then((sql) => {
44+
monacoEditorRef.current.setValue(sql);
1545
});
46+
return <MonacoEditor id={uuid()} ref={monacoEditorRef} />;
1647
};

‎chat2db-client/src/blocks/Tree/hooks/useGetRightClickMenu.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { useWorkspaceStore } from '@/store/workspace';
1919
import { openView, openFunction, openProcedure, openTrigger } from '../functions/openAsyncSql';
2020
import { handelPinTable } from '../functions/pinTable';
2121
import { viewDDL } from '../functions/viewDDL';
22+
import { deleteTable } from '../functions/deleteTable';
2223

2324
// ----- utils -----
2425
import { compatibleDataBaseName } from '@/utils/database';
@@ -156,7 +157,7 @@ export const useGetRightClickMenu = (props: IProps) => {
156157
text: i18n('workspace.menu.deleteTable'),
157158
icon: '\ue6a7',
158159
handle: () => {
159-
160+
deleteTable(treeNodeData);
160161
},
161162
},
162163

‎chat2db-client/src/components/Modal/BaseModal/index.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,23 @@ import { Modal as AntdModal } from 'antd';
33
import { injectOpenModal } from '@/store/common/components';
44

55
export type IModalData = {
6-
title: string;
6+
title?: string;
77
width?: string;
88
footer?: React.ReactNode | false;
99
content: React.ReactNode | false
10-
} | null
10+
} | null | false
1111

1212
const Modal = memo(() => {
1313
const [open, setOpen] = useState(false);
1414
const [modalData, setModalData] = useState<IModalData>(null);
1515

1616
const openModal = (params:IModalData)=>{
17-
setOpen(true)
18-
setModalData(params)
17+
if(params === false){
18+
setOpen(false)
19+
}else{
20+
setOpen(true)
21+
setModalData(params)
22+
}
1923
}
2024

2125
useEffect(() => {

‎chat2db-client/src/i18n/en-us/workspace.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,6 @@ export default {
2828
'workspace.tree.function': 'Function',
2929
'workspace.tree.procedure': 'Procedure',
3030
'workspace.tree.search.placeholder': 'Search in the expand node',
31+
'workspace.tree.delete.tip': 'I understand that this operation is permanently deleted',
32+
'workspace.tree.delete.table.tip': 'Are you sure you want to delete the table {1}?',
3133
};

‎chat2db-client/src/i18n/zh-cn/workspace.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,7 @@ export default {
2727
'workspace.tree.function': '函数',
2828
'workspace.tree.procedure': '存储过程',
2929
'workspace.tree.search.placeholder': '在展开节点中搜索',
30+
'workspace.tree.delete.tip': '我了解该操作是永久性删除',
31+
'workspace.tree.delete.table.tip': '确定要删除表{1}吗？',
32+
3033
};

0 commit comments

Comments
 (0)