Skip to content

Commit 11ae6fc

Browse files
shanhexishanhexi
committed
modal
1 parent 3c356c6 commit 11ae6fc

17 files changed

Lines changed: 281 additions & 107 deletions

File tree

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

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import sqlService, { IModifyTableSqlParams } from '@/service/sql';
1111
import ExecuteSQL from '@/components/ExecuteSQL';
1212
import { IEditTableInfo, IWorkspaceTab, IColumnTypes } from '@/typings';
1313
import { DatabaseTypeCode, WorkspaceTabType } from '@/constants';
14-
import LoadingContent from '@/components/Loading/LoadingContent';
14+
import LoadingContent from '@/components/Loading/LoadingContent';
1515
interface IProps {
1616
dataSourceId: number;
1717
databaseName: string;
@@ -20,6 +20,7 @@ interface IProps {
2020
databaseType: DatabaseTypeCode;
2121
changeTabDetails: (data: IWorkspaceTab) => void;
2222
tabDetails: IWorkspaceTab;
23+
submitCallback: () => void;
2324
}
2425

2526
interface ITabItem {
@@ -58,7 +59,16 @@ export interface IDatabaseSupportField {
5859
}
5960

6061
export default memo((props: IProps) => {
61-
const { databaseName, dataSourceId, tableName, schemaName, changeTabDetails, tabDetails, databaseType } = props;
62+
const {
63+
databaseName,
64+
dataSourceId,
65+
tableName,
66+
schemaName,
67+
changeTabDetails,
68+
tabDetails,
69+
databaseType,
70+
submitCallback,
71+
} = props;
6272
const [tableDetails, setTableDetails] = useState<IEditTableInfo>({} as any);
6373
const [oldTableDetails, setOldTableDetails] = useState<IEditTableInfo>({} as any);
6474
const [viewSqlModal, setViewSqlModal] = useState<boolean>(false);
@@ -107,7 +117,7 @@ export default memo((props: IProps) => {
107117
getTableDetails();
108118
}
109119
getDatabaseFieldTypeList();
110-
}, [])
120+
}, []);
111121

112122
// 获取数据库字段类型列表
113123
const getDatabaseFieldTypeList = () => {
@@ -151,12 +161,12 @@ export default memo((props: IProps) => {
151161
}) || [];
152162

153163
const defaultValues =
154-
res?.defaultValues?.map((i) => {
155-
return {
156-
value: i.defaultValue,
157-
label: i.defaultValue,
158-
};
159-
}) || [];
164+
res?.defaultValues?.map((i) => {
165+
return {
166+
value: i.defaultValue,
167+
label: i.defaultValue,
168+
};
169+
}) || [];
160170

161171
setDatabaseSupportField({
162172
columnTypes,
@@ -166,7 +176,7 @@ export default memo((props: IProps) => {
166176
defaultValues,
167177
});
168178
});
169-
}
179+
};
170180

171181
const getTableDetails = (myParams?: { tableNameProps?: string }) => {
172182
const { tableNameProps } = myParams || {};
@@ -180,16 +190,18 @@ export default memo((props: IProps) => {
180190
refresh: true,
181191
};
182192
setIsLoading(true);
183-
sqlService.getTableDetails(params).then((res) => {
184-
const newTableDetails = lodash.cloneDeep(res);
185-
setTableDetails(newTableDetails || {});
186-
setOldTableDetails(res);
187-
})
188-
.finally(()=>{
189-
setIsLoading(false);
190-
})
193+
sqlService
194+
.getTableDetails(params)
195+
.then((res) => {
196+
const newTableDetails = lodash.cloneDeep(res);
197+
setTableDetails(newTableDetails || {});
198+
setOldTableDetails(res);
199+
})
200+
.finally(() => {
201+
setIsLoading(false);
202+
});
191203
}
192-
}
204+
};
193205

194206
function submit() {
195207
if (baseInfoRef.current && columnListRef.current && indexListRef.current) {
@@ -235,7 +247,9 @@ export default memo((props: IProps) => {
235247
},
236248
});
237249
}
238-
}
250+
// 保存成功后，刷新左侧树
251+
submitCallback();
252+
};
239253

240254
return (
241255
<Context.Provider

‎chat2db-client/src/blocks/Tree/functions/pinTable.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// 置顶表格
2+
import mysqlService from '@/service/sql';
3+
export const handelPinTable = ({ treeNodeData,loadData }) => {
4+
const api = treeNodeData.pinned ? 'deleteTablePin' : 'addTablePin';
5+
mysqlService[api]({
6+
dataSourceId: treeNodeData.extraParams.dataSourceId,
7+
databaseName: treeNodeData.extraParams.databaseName,
8+
schemaName: treeNodeData.extraParams.schemaName,
9+
tableName: treeNodeData.name,
10+
}).then(()=>{
11+
loadData({
12+
refresh: true,
13+
})
14+
})
15+
};

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// 置顶表格
2+
import React from 'react';
3+
import mysqlService from '@/service/sql';
4+
5+
import { openModal } from '@/store/common/components';
6+
7+
import MonacoEditor from '@/components/MonacoEditor';
8+
9+
export const viewDDL = (treeNodeData) => {
10+
openModal({
11+
title: '查看DDL',
12+
width: '60%',
13+
footer: false,
14+
content: <MonacoEditor id="edit-dialog" />,
15+
});
16+
};

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

Lines changed: 62 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ITreeNode } from '@/typings';
2-
import { OperationColumn, WorkspaceTabType } from '@/constants';
2+
import { OperationColumn, WorkspaceTabType, TreeNodeType } from '@/constants';
33
import i18n from '@/i18n';
44
import { v4 as uuid } from 'uuid';
55

@@ -17,6 +17,8 @@ import { useWorkspaceStore } from '@/store/workspace';
1717

1818
// ---- functions -----
1919
import { openView, openFunction, openProcedure, openTrigger } from '../functions/openAsyncSql';
20+
import { handelPinTable } from '../functions/pinTable';
21+
import { viewDDL } from '../functions/viewDDL';
2022

2123
// ----- utils -----
2224
import { compatibleDataBaseName } from '@/utils/database';
@@ -30,31 +32,49 @@ interface IOperationColumnConfigItem {
3032
text: string;
3133
icon: string;
3234
doubleClickTrigger?: boolean;
33-
handle: () => void;
35+
handle: (treeNodeData: ITreeNode) => void;
36+
discard?: boolean;
37+
}
38+
39+
interface IRightClickMenu {
40+
key: number;
41+
onClick: (treeNodeData: ITreeNode) => void;
42+
type: OperationColumn;
43+
doubleClickTrigger?: boolean;
44+
labelProps: {
45+
icon: string;
46+
label: string;
47+
};
3448
}
3549

3650
export const useGetRightClickMenu = (props: IProps) => {
3751
const { treeNodeData, loadData } = props;
3852

39-
const { openCreateDatabaseModal } = useWorkspaceStore((state) => {
53+
const { openCreateDatabaseModal, currentConnectionDetails } = useWorkspaceStore((state) => {
4054
return {
4155
openCreateDatabaseModal: state.openCreateDatabaseModal,
56+
currentConnectionDetails: state.currentConnectionDetails,
4257
};
4358
});
4459

45-
const handelOpenCreateDatabaseModal = (type: 'database' |'schema') => {
60+
const handelOpenCreateDatabaseModal = (type: 'database' | 'schema') => {
61+
62+
const relyOnParams = {
63+
databaseType: treeNodeData.extraParams!.databaseType,
64+
dataSourceId: treeNodeData.extraParams!.dataSourceId!,
65+
databaseName: treeNodeData.name,
66+
}
67+
4668
openCreateDatabaseModal?.({
4769
type,
48-
relyOnParams: {
49-
databaseType: treeNodeData.extraParams!.databaseType,
50-
dataSourceId: treeNodeData.extraParams!.dataSourceId!,
51-
databaseName: treeNodeData?.name,
52-
},
70+
relyOnParams,
5371
executedCallback: () => {
54-
loadData(true);
55-
}
72+
loadData({
73+
refresh: true,
74+
});
75+
},
5676
});
57-
}
77+
};
5878

5979
const rightClickMenu = useMemo(() => {
6080
// 拿出当前节点的配置
@@ -89,7 +109,7 @@ export const useGetRightClickMenu = (props: IProps) => {
89109
text: i18n('common.button.refresh'),
90110
icon: '\uec08',
91111
handle: () => {
92-
loadData({
112+
treeNodeData.loadData?.({
93113
refresh: true,
94114
});
95115
},
@@ -124,17 +144,19 @@ export const useGetRightClickMenu = (props: IProps) => {
124144
databaseType: treeNodeData.extraParams!.databaseType!,
125145
databaseName: treeNodeData.extraParams?.databaseName,
126146
schemaName: treeNodeData.extraParams?.schemaName,
147+
submitCallback: () => {treeNodeData.loadData?.({refresh: true})},
127148
},
128149
});
129150
},
151+
discard: (treeNodeData.treeNodeType === TreeNodeType.DATABASE && currentConnectionDetails?.supportSchema),
130152
},
131153

132154
// 删除表
133155
[OperationColumn.DeleteTable]: {
134156
text: i18n('workspace.menu.deleteTable'),
135157
icon: '\ue6a7',
136158
handle: () => {
137-
// setVerifyDialog(true);
159+
138160
},
139161
},
140162

@@ -143,15 +165,17 @@ export const useGetRightClickMenu = (props: IProps) => {
143165
text: i18n('workspace.menu.ViewDDL'),
144166
icon: '\ue665',
145167
handle: () => {
146-
//
168+
viewDDL(treeNodeData)
147169
},
148170
},
149171

150172
// 置顶
151-
[OperationColumn.Top]: {
173+
[OperationColumn.Pin]: {
152174
text: treeNodeData.pinned ? i18n('workspace.menu.unPin') : i18n('workspace.menu.pin'),
153175
icon: treeNodeData.pinned ? '\ue61d' : '\ue627',
154-
handle: () => {},
176+
handle: () => {
177+
handelPinTable({treeNodeData, loadData: treeNodeData.parentNode!.loadData!});
178+
},
155179
},
156180

157181
// 编辑表
@@ -161,14 +185,15 @@ export const useGetRightClickMenu = (props: IProps) => {
161185
handle: () => {
162186
addWorkspaceTab({
163187
id: `${OperationColumn.EditTable}-${treeNodeData.uuid}`,
164-
title: i18n('editTable.button.createTable'),
188+
title: treeNodeData?.name,
165189
type: WorkspaceTabType.EditTable,
166190
uniqueData: {
167191
dataSourceId: treeNodeData.extraParams!.dataSourceId!,
168192
databaseType: treeNodeData.extraParams!.databaseType!,
169193
databaseName: treeNodeData.extraParams?.databaseName,
170194
schemaName: treeNodeData.extraParams?.schemaName,
171195
tableName: treeNodeData?.name,
196+
submitCallback: () => {treeNodeData.parentNode?.loadData?.({refresh: true})},
172197
},
173198
});
174199
},
@@ -189,10 +214,7 @@ export const useGetRightClickMenu = (props: IProps) => {
189214
icon: '\ue618',
190215
doubleClickTrigger: true,
191216
handle: () => {
192-
const databaseName = compatibleDataBaseName(
193-
treeNodeData.name!,
194-
treeNodeData.extraParams!.databaseType,
195-
);
217+
const databaseName = compatibleDataBaseName(treeNodeData.name!, treeNodeData.extraParams!.databaseType);
196218
addWorkspaceTab({
197219
id: `${OperationColumn.OpenTable}-${treeNodeData.uuid}`,
198220
title: treeNodeData.name,
@@ -202,7 +224,7 @@ export const useGetRightClickMenu = (props: IProps) => {
202224
databaseType: treeNodeData.extraParams!.databaseType!,
203225
databaseName: treeNodeData.extraParams?.databaseName,
204226
schemaName: treeNodeData.extraParams?.schemaName,
205-
sql: "select * from " + databaseName,
227+
sql: 'select * from ' + databaseName,
206228
},
207229
});
208230
},
@@ -276,23 +298,28 @@ export const useGetRightClickMenu = (props: IProps) => {
276298
handle: () => {
277299
handelOpenCreateDatabaseModal('schema');
278300
},
279-
}
301+
discard: !currentConnectionDetails?.supportSchema,
302+
},
280303
};
281304

282305
// 根据配置生成右键菜单
283-
return excludeSomeOperation().map((t, i) => {
306+
const finalList: IRightClickMenu[] = [];
307+
excludeSomeOperation().forEach((t, i) => {
284308
const concrete = operationColumnConfig[t];
285-
return {
286-
key: i,
287-
onClick: concrete?.handle,
288-
type: t,
289-
doubleClickTrigger: concrete.doubleClickTrigger,
290-
labelProps: {
291-
icon: concrete?.icon,
292-
label: concrete?.text,
293-
},
294-
};
309+
if (!concrete.discard) {
310+
finalList.push({
311+
key: i,
312+
onClick: concrete?.handle,
313+
type: t,
314+
doubleClickTrigger: concrete.doubleClickTrigger,
315+
labelProps: {
316+
icon: concrete?.icon,
317+
label: concrete?.text,
318+
},
319+
});
320+
}
295321
});
322+
return finalList;
296323
}, [treeNodeData]);
297324

298325
return rightClickMenu;

0 commit comments

Comments
 (0)