Skip to content

Commit 6f70edc

Browse files
shanhexishanhexi
committed
feat: edit table index add order
1 parent ec42570 commit 6f70edc

8 files changed

Lines changed: 113 additions & 79 deletions

File tree

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

Lines changed: 1 addition & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { Table, InputNumber, Input, Form, Select, Checkbox } from 'antd';
77
import { v4 as uuidv4 } from 'uuid';
88
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
99
import { CSS } from '@dnd-kit/utilities';
10-
import sqlService from '@/service/sql';
1110
import { Context } from '../index';
1211
import { IColumnItemNew, IColumnTypes } from '@/typings';
1312
import i18n from '@/i18n';
@@ -21,22 +20,11 @@ interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
2120

2221
interface IProps {}
2322

24-
interface IOption {
25-
label: string;
26-
value: string | number | null;
27-
}
28-
2923
// 编辑配置
3024
interface IEditingConfig extends IColumnTypes {
3125
editKey: string;
3226
}
3327

34-
// 列字段类型，select组件的options需要的数据结构
35-
interface IColumnTypesOption extends IColumnTypes {
36-
label: string;
37-
value: string | number | null;
38-
}
39-
4028
// 本组件暴露给父组件的方法
4129
export interface IColumnListRef {
4230
getColumnListInfo: () => IColumnItemNew[];
@@ -105,21 +93,12 @@ const createInitialData = () => {
10593
};
10694

10795
const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>) => {
108-
const { dataSourceId, databaseName, schemaName, tableDetails } = useContext(Context);
96+
const { databaseSupportField, databaseName, schemaName, tableDetails } = useContext(Context);
10997
const [dataSource, setDataSource] = useState<IColumnItemNew[]>([createInitialData()]);
11098
const [form] = Form.useForm();
11199
const [editingData, setEditingData] = useState<IColumnItemNew | null>(null);
112100
const [editingConfig, setEditingConfig] = useState<IEditingConfig | null>(null);
113101
const tableRef = useRef<HTMLDivElement>(null);
114-
const [databaseSupportField, setDatabaseSupportField] = useState<{
115-
columnTypes: IColumnTypesOption[];
116-
charsets: IOption[];
117-
collations: IOption[];
118-
}>({
119-
columnTypes: [],
120-
charsets: [],
121-
collations: [],
122-
});
123102

124103
const isEditing = (record: IColumnItemNew) => record.key === editingData?.key;
125104

@@ -159,47 +138,6 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
159138
}
160139
}, [tableDetails]);
161140

162-
useEffect(() => {
163-
// 获取数据库字段类型列表
164-
sqlService
165-
.getDatabaseFieldTypeList({
166-
dataSourceId,
167-
databaseName,
168-
})
169-
.then((res) => {
170-
const columnTypes =
171-
res?.columnTypes?.map((i) => {
172-
return {
173-
...i,
174-
value: i.typeName,
175-
label: i.typeName,
176-
};
177-
}) || [];
178-
179-
const charsets =
180-
res?.charsets?.map((i) => {
181-
return {
182-
value: i.charsetName,
183-
label: i.charsetName,
184-
};
185-
}) || [];
186-
187-
const collations =
188-
res?.collations?.map((i) => {
189-
return {
190-
value: i.collationName,
191-
label: i.collationName,
192-
};
193-
}) || [];
194-
195-
setDatabaseSupportField({
196-
columnTypes,
197-
charsets,
198-
collations,
199-
});
200-
});
201-
}, []);
202-
203141
const columns = [
204142
{
205143
key: 'sort',

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,27 @@ const IncludeCol = forwardRef((props: IProps, ref: ForwardedRef<IIncludeColRef>)
124124
);
125125
},
126126
},
127+
{
128+
title: i18n('editTable.label.order'),
129+
dataIndex: 'ascOrDesc',
130+
render: (text: string, record: IIndexIncludeColumnItem) => {
131+
const editable = isEditing(record);
132+
return editable ? (
133+
<Form.Item name="ascOrDesc" style={{ margin: 0 }}>
134+
<Select
135+
options={[
136+
{ label: 'ASC', value: 'A' },
137+
{ label: 'DESC', value: 'D' },
138+
]}
139+
/>
140+
</Form.Item>
141+
) : (
142+
<div className={styles.editableCell} onClick={() => edit(record)}>
143+
{text === 'A' ? 'ASC' : text === 'D' ? 'DESC' : null}
144+
</div>
145+
);
146+
},
147+
},
127148
{
128149
width: '40px',
129150
render: (text: string, record: IIndexIncludeColumnItem) => {
@@ -141,6 +162,7 @@ const IncludeCol = forwardRef((props: IProps, ref: ForwardedRef<IIncludeColRef>)
141162
);
142163
},
143164
},
165+
144166
// {
145167
// title: i18n('editTable.label.prefixLength'),
146168
// dataIndex: 'prefixLength',

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,12 @@ import { Table, Input, Form, Select, Modal } from 'antd';
1919
import { v4 as uuidv4 } from 'uuid';
2020
import IncludeCol, { IIncludeColRef } from '../IncludeCol';
2121
import { IIndexItem, IIndexIncludeColumnItem } from '@/typings';
22-
import { IndexesType, EditColumnOperationType } from '@/constants';
22+
import { EditColumnOperationType } from '@/constants';
2323
import Iconfont from '@/components/Iconfont';
2424
import { Context } from '../index';
2525
import i18n from '@/i18n';
2626
import lodash from 'lodash';
2727

28-
const indexesTypeList = Object.values(IndexesType);
29-
3028
interface IProps {}
3129

3230
export type IIndexListInfo = IIndexItem[];
@@ -79,7 +77,7 @@ const Row = ({ children, ...props }: RowProps) => {
7977
};
8078

8179
const IndexList = forwardRef((props: IProps, ref: ForwardedRef<IIndexListRef>) => {
82-
const { tableDetails } = useContext(Context);
80+
const { databaseSupportField, tableDetails } = useContext(Context);
8381
const [dataSource, setDataSource] = useState<IIndexItem[]>([createInitialData()]);
8482
const [form] = Form.useForm();
8583
const [editingData, setEditingData] = useState<IIndexItem | null>(null);
@@ -214,9 +212,9 @@ const IndexList = forwardRef((props: IProps, ref: ForwardedRef<IIndexListRef>) =
214212
return editable ? (
215213
<Form.Item name="type" style={{ margin: 0 }}>
216214
<Select style={{ width: '100%' }}>
217-
{indexesTypeList.map((i) => (
218-
<Select.Option key={i} value={i}>
219-
{i}
215+
{databaseSupportField?.indexTypes?.map((i) => (
216+
<Select.Option key={i.value} value={i.value}>
217+
{i.label}
220218
</Select.Option>
221219
))}
222220
</Select>

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

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ColumnList, { IColumnListRef } from './ColumnList';
77
import BaseInfo, { IBaseInfoRef } from './BaseInfo';
88
import sqlService, { IModifyTableSqlParams } from '@/service/sql';
99
import ExecuteSQL from '@/components/ExecuteSQL';
10-
import { IEditTableInfo, IWorkspaceTab } from '@/typings';
10+
import { IEditTableInfo, IWorkspaceTab, IColumnTypes } from '@/typings';
1111
import { DatabaseTypeCode, WorkspaceTabType } from '@/constants';
1212
import i18n from '@/i18n';
1313
import lodash from 'lodash';
@@ -33,10 +33,28 @@ interface IContext extends IProps {
3333
baseInfoRef: React.RefObject<IBaseInfoRef>;
3434
columnListRef: React.RefObject<IColumnListRef>;
3535
indexListRef: React.RefObject<IIndexListRef>;
36+
databaseSupportField: IDatabaseSupportField;
3637
}
3738

3839
export const Context = createContext<IContext>({} as any);
3940

41+
interface IOption {
42+
label: string;
43+
value: string | number | null;
44+
}
45+
46+
// 列字段类型，select组件的options需要的数据结构
47+
interface IColumnTypesOption extends IColumnTypes {
48+
label: string;
49+
value: string | number | null;
50+
}
51+
export interface IDatabaseSupportField {
52+
columnTypes: IColumnTypesOption[];
53+
charsets: IOption[];
54+
collations: IOption[];
55+
indexTypes: IOption[];
56+
}
57+
4058
export default memo((props: IProps) => {
4159
const { databaseName, dataSourceId, tableName, schemaName, changeTabDetails, tabDetails, databaseType } = props;
4260
const [tableDetails, setTableDetails] = useState<IEditTableInfo>({} as any);
@@ -69,6 +87,12 @@ export default memo((props: IProps) => {
6987
];
7088
}, []);
7189
const [currentTab, setCurrentTab] = useState<ITabItem>(tabList[0]);
90+
const [databaseSupportField, setDatabaseSupportField] = useState<IDatabaseSupportField>({
91+
columnTypes: [],
92+
charsets: [],
93+
collations: [],
94+
indexTypes: [],
95+
});
7296

7397
function changeTab(item: ITabItem) {
7498
setCurrentTab(item);
@@ -78,8 +102,59 @@ export default memo((props: IProps) => {
78102
if (tableName) {
79103
getTableDetails({});
80104
}
105+
getDatabaseFieldTypeList();
81106
}, []);
82107

108+
// 获取数据库字段类型列表
109+
const getDatabaseFieldTypeList = () => {
110+
sqlService
111+
.getDatabaseFieldTypeList({
112+
dataSourceId,
113+
databaseName,
114+
})
115+
.then((res) => {
116+
const columnTypes =
117+
res?.columnTypes?.map((i) => {
118+
return {
119+
...i,
120+
value: i.typeName,
121+
label: i.typeName,
122+
};
123+
}) || [];
124+
125+
const charsets =
126+
res?.charsets?.map((i) => {
127+
return {
128+
value: i.charsetName,
129+
label: i.charsetName,
130+
};
131+
}) || [];
132+
133+
const collations =
134+
res?.collations?.map((i) => {
135+
return {
136+
value: i.collationName,
137+
label: i.collationName,
138+
};
139+
}) || [];
140+
141+
const indexTypes =
142+
res?.indexTypes?.map((i) => {
143+
return {
144+
value: i.typeName,
145+
label: i.typeName,
146+
};
147+
}) || [];
148+
149+
setDatabaseSupportField({
150+
columnTypes,
151+
charsets,
152+
collations,
153+
indexTypes,
154+
});
155+
});
156+
};
157+
83158
const getTableDetails = ({ tableNameProps }: { tableNameProps?: string }) => {
84159
if (!tableName) return;
85160
const params = {
@@ -150,6 +225,7 @@ export default memo((props: IProps) => {
150225
baseInfoRef,
151226
columnListRef,
152227
indexListRef,
228+
databaseSupportField,
153229
}}
154230
>
155231
<div className={classnames(styles.box)}>

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
// 索引类型
2-
export enum IndexesType {
3-
Primary = 'Primary',
4-
Normal = 'Normal',
5-
Unique = 'Unique',
6-
Fulltext = 'Fulltext',
7-
Spatial = 'Spatial',
8-
}
91
export enum EditColumnOperationType {
102
// 新增
113
Add = 'ADD',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default {
2626
'editTable.label.autoIncrement': 'Auto increment',
2727
'editTable.label.engine': 'Engine',
2828
'editTable.label.incrementValue': 'Increment value',
29+
'editTable.label.order': 'Order',
2930
'editTable.title.sqlPreview': 'SQL preview',
3031
'editTable.button.addColumn': 'Add column',
3132
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export default {
2727
'editTable.label.autoIncrement': '是否自增',
2828
'editTable.label.engine': '引擎',
2929
'editTable.label.incrementValue': '自增值',
30+
'editTable.label.order': '排序',
3031
'editTable.title.sqlPreview': 'sql预览',
3132
'editTable.button.addColumn': '添加列',
3233
};

‎chat2db-client/src/typings/database.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export interface IDatabaseSupportField {
4242
columnTypes: IColumnTypes[];
4343
charsets: ICharset[];
4444
collations: ICollation[];
45+
indexTypes: IIndexTypes[];
4546
}
4647

4748
/** 字段所对应的 字符集*/
@@ -55,6 +56,11 @@ export interface ICollation {
5556
collationName: string;
5657
}
5758

59+
/** 索引的类型*/
60+
export interface IIndexTypes {
61+
typeName: string;
62+
}
63+
5864
/** 不同数据库支持的列字段类型 以及支持调整的选项*/
5965
export interface IColumnTypes {
6066
typeName: string;

0 commit comments

Comments
 (0)