Skip to content

Commit 0b42bfc

Browse files
shanhexishanhexi
committed
Open edit table
1 parent 90788c1 commit 0b42bfc

15 files changed

Lines changed: 194 additions & 59 deletions

File tree

chat2db-client/src/pages/main/workspace/components/WorkspaceRightItem/index.less renamed to chat2db-client/src/blocks/SQLExecute/index.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../../../../styles/var.less';
1+
@import '../../styles/var.less';
22

33
.box {
44
height: 100%;

chat2db-client/src/pages/main/workspace/components/WorkspaceRightItem/index.tsx renamed to chat2db-client/src/blocks/SQLExecute/index.tsx

File renamed without changes.

‎chat2db-client/src/constants/common.ts‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,33 +33,41 @@ export enum OSType {
3333
RESTS = 'rests',
3434
}
3535

36-
export enum OperationType {
36+
export enum TabType {
3737
CONSOLE = 'console',
3838
FUNCTION = 'function',
3939
PROCEDURE = 'procedure',
4040
VIEW = 'view',
4141
TRIGGER = 'trigger',
42+
EditTable = 'editTable',
43+
OpenTable = 'openTable',
4244
}
4345

44-
export const operationTypeConfig: {
45-
[key in OperationType]: {
46+
export const tabTypeConfig: {
47+
[key in TabType]: {
4648
icon: string
4749
};
4850
} = {
49-
[OperationType.CONSOLE]: {
51+
[TabType.CONSOLE]: {
5052
icon: '\uec83'
5153
},
52-
[OperationType.VIEW]: {
54+
[TabType.VIEW]: {
5355
icon: '\ue70c'
5456
},
55-
[OperationType.FUNCTION]: {
57+
[TabType.FUNCTION]: {
5658
icon: '\ue76a'
5759
},
58-
[OperationType.PROCEDURE]: {
60+
[TabType.PROCEDURE]: {
5961
icon: '\ue73c'
6062
},
61-
62-
[OperationType.TRIGGER]: {
63+
[TabType.TRIGGER]: {
6364
icon: '\ue64a'
65+
},
66+
[TabType.EditTable]: {
67+
icon: '\ue6b6'
68+
},
69+
[TabType.OpenTable]: {
70+
icon: '\ue618'
6471
}
65-
}
72+
}
73+

‎chat2db-client/src/constants/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ export * from './monacoEditor';
66
export * from './table';
77
export * from './theme';
88
export * from './tree';
9+
export * from './workspace';
910

‎chat2db-client/src/constants/workspace.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum CreateTabIntroType {
2+
EditorTable = 'EditorTable',
3+
OpenTable = 'openTable',
4+
}
5+

‎chat2db-client/src/models/workspace.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import sqlService, { MetaSchemaVO } from '@/service/sql';
33
import historyService from '@/service/history';
44
import { DatabaseTypeCode, ConsoleStatus, TreeNodeType } from '@/constants';
55
import { Effect, Reducer } from 'umi';
6-
import { ITreeNode, IConsole, IPageResponse } from '@/typings';
6+
import { ITreeNode, IConsole, IPageResponse, ICreateTabIntro } from '@/typings';
77
import { treeConfig } from '@/pages/main/workspace/components/Tree/treeConfig';
88

99
export type ICurWorkspaceParams = {
@@ -26,6 +26,8 @@ export interface IWorkspaceModelState {
2626
openConsoleList: IConsole[];
2727
curTableList: ITreeNode[];
2828
curViewList: ITreeNode[];
29+
// 触发tab编辑表或打开表
30+
createTabIntro: ICreateTabIntro | undefined;
2931
}
3032

3133
export interface IWorkspaceModelType {
@@ -41,6 +43,7 @@ export interface IWorkspaceModelType {
4143
setCurConsoleId: Reducer<IWorkspaceModelState>;
4244
setCurTableList: Reducer<IWorkspaceModelState>;
4345
setCurViewList: Reducer<IWorkspaceModelState>;
46+
setCreateTabIntro: Reducer<IWorkspaceModelState>;
4447
};
4548
effects: {
4649
fetchDatabaseAndSchema: Effect;
@@ -62,7 +65,8 @@ const WorkspaceModel: IWorkspaceModelType = {
6265
openConsoleList: [],
6366
curTableList: [],
6467
curViewList: [],
65-
curConsoleId: null
68+
curConsoleId: null,
69+
createTabIntro: undefined,
6670
},
6771

6872
reducers: {
@@ -125,6 +129,14 @@ const WorkspaceModel: IWorkspaceModelType = {
125129
curViewList: payload,
126130
};
127131
},
132+
// 创建tab的引子
133+
setCreateTabIntro(state, { payload }) {
134+
return {
135+
...state,
136+
createTabIntro: payload,
137+
};
138+
},
139+
128140
},
129141

130142
effects: {

‎chat2db-client/src/pages/main/workspace/components/Tree/TreeNodeRightClick/index.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,16 @@ import classnames from 'classnames';
44
import styles from './index.less';
55
import Iconfont from '@/components/Iconfont';
66
import { MenuProps, message, Modal, Input, Dropdown, notification } from 'antd';
7-
import { TreeNodeType, DatabaseTypeCode } from '@/constants';
7+
import { TreeNodeType, CreateTabIntroType, TabType } from '@/constants';
88
import { ITreeConfigItem, ITreeConfig, treeConfig } from '@/pages/main/workspace/components/Tree/treeConfig';
99
import { ITreeNode } from '@/typings';
1010
import connectionServer from '@/service/connection';
11-
import historyService from '@/service/history';
1211
import mysqlServer from '@/service/sql';
1312
import { OperationColumn } from '../treeConfig';
1413
import { dataSourceFormConfigs } from '@/components/CreateConnection/config/dataSource';
1514
import { IConnectionConfig } from '@/components/CreateConnection/config/types';
1615
import { IWorkspaceModelType } from '@/models/workspace';
17-
import EditDialog from '@/components/EditDialog';
18-
import { ConsoleStatus, ConsoleOpenedStatus } from '@/constants';
19-
import MonacoEditor, { IExportRefFunction, IRangeType } from '@/components/Console/MonacoEditor';
20-
21-
type MenuItem = Required<MenuProps>['items'][number];
16+
import MonacoEditor from '@/components/Console/MonacoEditor';
2217

2318
export type IProps = {
2419
className?: string;
@@ -121,7 +116,14 @@ function TreeNodeRightClick(props: IProps) {
121116
text: i18n('workspace.menu.editTable'),
122117
icon: '\ue602',
123118
handle: () => {
124-
setVerifyDialog(true);
119+
dispatch({
120+
type: 'workspace/setCreateTabIntro',
121+
payload: {
122+
type: CreateTabIntroType.EditorTable,
123+
tabType: TabType.EditTable,
124+
treeNodeData: data,
125+
},
126+
})
125127
}
126128
}
127129
},

‎chat2db-client/src/pages/main/workspace/components/WorkspaceLeft/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IConnectionModelType } from '@/models/connection';
99
import { IWorkspaceModelType } from '@/models/workspace';
1010
import historyServer from '@/service/history';
1111
import Tree from '../Tree';
12-
import { TreeNodeType, ConsoleStatus, ConsoleOpenedStatus, OperationType } from '@/constants';
12+
import { TreeNodeType, ConsoleStatus, ConsoleOpenedStatus, TabType } from '@/constants';
1313
import { IConsole, ITreeNode, ICreateConsole } from '@/typings';
1414
import styles from './index.less';
1515
import { approximateTreeNode, approximateList } from '@/utils';
@@ -70,7 +70,7 @@ const WorkspaceLeft = memo<IProps>(function (props) {
7070
type: databaseType,
7171
status: ConsoleStatus.DRAFT,
7272
tabOpened: ConsoleOpenedStatus.IS_OPEN,
73-
operationType: OperationType.CONSOLE
73+
operationType: TabType.CONSOLE
7474
}
7575
historyService.saveConsole(params || p).then(res => {
7676
dispatch({

‎chat2db-client/src/pages/main/workspace/components/WorkspaceRight/index.less‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@
1414
}
1515
}
1616

17-
.tabs {
18-
}
19-
2017
.consoleBox {
2118
position: absolute;
2219
top: 32px;
@@ -48,7 +45,7 @@
4845
overflow: hidden;
4946
}
5047

51-
.tab-item{
48+
.tab-item {
5249
display: flex;
5350
align-items: center;
5451
}

‎chat2db-client/src/pages/main/workspace/components/WorkspaceRight/index.tsx‎

Lines changed: 71 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,20 @@ import React, { memo, useRef, useEffect, useState } from 'react';
22
import { connect } from 'umi';
33
import styles from './index.less';
44
import classnames from 'classnames';
5-
import { ConsoleOpenedStatus, ConsoleStatus, DatabaseTypeCode, TreeNodeType, operationTypeConfig, OperationType } from '@/constants';
5+
import { ConsoleOpenedStatus, ConsoleStatus, DatabaseTypeCode, TreeNodeType, tabTypeConfig, TabType } from '@/constants';
66
import { IConsole, ICreateConsole } from '@/typings';
77
import historyService from '@/service/history';
88
import sqlService from '@/service/sql';
99
import Tabs, { IOption } from '@/components/Tabs';
1010
import LoadingContent from '@/components/Loading/LoadingContent';
1111
import ShortcutKey from '@/components/ShortcutKey';
12-
import WorkspaceRightItem from '../WorkspaceRightItem';
1312
import DatabaseTableEditor from '@/blocks/DatabaseTableEditor';
13+
import SQLExecute from '@/blocks/SQLExecute';
1414
import { IWorkspaceModelState, IWorkspaceModelType } from '@/models/workspace';
1515
import { IAIState } from '@/models/ai';
1616
import { handleLocalStorageSavedConsole } from '@/utils';
1717
import { useUpdateEffect } from '@/hooks/useUpdateEffect';
18-
import Tree from 'antd/es/tree/Tree';
19-
import Iconfont from '@/components/Iconfont';
18+
import { v4 as uuidV4 } from 'uuid';
2019

2120
interface IProps {
2221
className?: string;
@@ -25,12 +24,52 @@ interface IProps {
2524
dispatch: any;
2625
}
2726

27+
export interface ITab {
28+
id: number;
29+
tabType: TabType;
30+
icon: string;
31+
[key: string]: any;
32+
}
33+
2834
const WorkspaceRight = memo<IProps>(function (props) {
2935
const [activeConsoleId, setActiveConsoleId] = useState<number>();
3036
const { className, aiModel, workspaceModel, dispatch } = props;
31-
const { curWorkspaceParams, doubleClickTreeNodeData, openConsoleList, curConsoleId } = workspaceModel;
37+
const { curWorkspaceParams, doubleClickTreeNodeData, createTabIntro, openConsoleList, curConsoleId } = workspaceModel;
3238
const openConsoleListRef = useRef(openConsoleList);
39+
const [tabList, setTabList] = useState<ITab[]>([]);
40+
41+
useEffect(() => {
42+
const newTabList = openConsoleList?.map(t => {
43+
return {
44+
...t,
45+
tabType: TabType.CONSOLE,
46+
icon: tabTypeConfig[t.operationType]?.icon || tabTypeConfig.console.icon,
47+
}
48+
})
49+
setTabList(newTabList || [])
50+
}, [openConsoleList])
51+
52+
// 监听编辑表事件
53+
useEffect(() => {
54+
if (createTabIntro) {
55+
const id: any = uuidV4();
56+
setTabList([...tabList, {
57+
id,
58+
tabType: createTabIntro.tabType,
59+
icon: tabTypeConfig[createTabIntro.tabType as TabType]?.icon,
60+
name: `edit-${createTabIntro.treeNodeData.name}`,
61+
}])
62+
setActiveConsoleId(id);
63+
64+
// 用完之后就清掉createTabIntro
65+
dispatch({
66+
type: 'workspace/setCreateTabIntro',
67+
payload: null,
68+
})
69+
}
70+
}, [createTabIntro])
3371

72+
// 监听双击树节点事件 生成console
3473
useEffect(() => {
3574
if (!doubleClickTreeNodeData) {
3675
return;
@@ -239,7 +278,6 @@ const WorkspaceRight = memo<IProps>(function (props) {
239278
}
240279
}, [openConsoleList]);
241280

242-
243281
function createConsole(params: {
244282
doubleClickTreeNodeData: any,
245283
name: string,
@@ -288,8 +326,8 @@ const WorkspaceRight = memo<IProps>(function (props) {
288326
});
289327
}
290328

291-
function onChange(key: number | string) {
292-
setActiveConsoleId(+key);
329+
function onChange(key: any) {
330+
setActiveConsoleId(key);
293331
}
294332

295333
const onEdit = (action: 'add' | 'remove', key?: number) => {
@@ -315,7 +353,7 @@ const WorkspaceRight = memo<IProps>(function (props) {
315353
type: databaseType,
316354
status: ConsoleStatus.DRAFT,
317355
tabOpened: ConsoleOpenedStatus.IS_OPEN,
318-
operationType: OperationType.CONSOLE,
356+
operationType: TabType.CONSOLE,
319357
};
320358
historyService.saveConsole(params?.newConsole || p).then((res) => {
321359
params?.callback?.(res);
@@ -403,7 +441,7 @@ const WorkspaceRight = memo<IProps>(function (props) {
403441

404442
return (
405443
<div className={classnames(styles.box, className)}>
406-
<LoadingContent data={openConsoleList} handleEmpty empty={renderEmpty()}>
444+
<LoadingContent data={tabList} handleEmpty empty={renderEmpty()}>
407445
<div className={styles.tabBox}>
408446
<Tabs
409447
className={styles.tabs}
@@ -412,37 +450,41 @@ const WorkspaceRight = memo<IProps>(function (props) {
412450
editableName={true}
413451
editableNameOnBlur={editableNameOnBlur}
414452
activeTab={activeConsoleId}
415-
tabs={(openConsoleList || [])?.map((t, i) => {
453+
tabs={(tabList || [])?.map((t, i) => {
416454
return {
417-
prefixIcon: operationTypeConfig[t.operationType]?.icon || operationTypeConfig.console.icon,
455+
prefixIcon: t.icon,
418456
label: t.name,
419457
value: t.id,
420458
};
421459
})}
422460
/>
423461
</div>
424-
{openConsoleList?.map((t, index) => {
462+
{tabList?.map((t, index) => {
425463
return (
426464
<div
427465
key={t.id}
428466
className={classnames(styles.consoleBox, { [styles.activeConsoleBox]: activeConsoleId === t.id })}
429467
>
430-
<DatabaseTableEditor />
431-
{/* <WorkspaceRightItem
432-
isActive={activeConsoleId === t.id}
433-
data={{
434-
initDDL: t.ddl,
435-
databaseName: curWorkspaceParams.databaseName!,
436-
dataSourceId: curWorkspaceParams.dataSourceId!,
437-
type: curWorkspaceParams.databaseType!,
438-
schemaName: curWorkspaceParams?.schemaName!,
439-
consoleId: t.id,
440-
consoleName: t.name,
441-
}}
442-
workspaceModel={workspaceModel}
443-
aiModel={aiModel}
444-
dispatch={dispatch}
445-
/> */}
468+
{
469+
[TabType.CONSOLE, TabType.FUNCTION, TabType.PROCEDURE, TabType.TRIGGER, TabType.VIEW].includes(t.tabType) && <SQLExecute
470+
isActive={activeConsoleId === t.id}
471+
data={{
472+
initDDL: t.ddl,
473+
databaseName: curWorkspaceParams.databaseName!,
474+
dataSourceId: curWorkspaceParams.dataSourceId!,
475+
type: curWorkspaceParams.databaseType!,
476+
schemaName: curWorkspaceParams?.schemaName!,
477+
consoleId: t.id,
478+
consoleName: t.name,
479+
}}
480+
workspaceModel={workspaceModel}
481+
aiModel={aiModel}
482+
dispatch={dispatch}
483+
/>
484+
}
485+
{
486+
t.tabType === TabType.EditTable && <DatabaseTableEditor />
487+
}
446488
</div>
447489
);
448490
})}

0 commit comments

Comments
 (0)