Skip to content

Commit 7cbc0f9

Browse files
shanhexishanhexi
committed
feat: get baseInfo
1 parent 0b42bfc commit 7cbc0f9

14 files changed

Lines changed: 325 additions & 211 deletions

File tree

‎chat2db-client/src/blocks/DatabaseTableEditor/BaseInfo/index.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@import '../../../styles/var.less';
22

33
.box {
4+
padding: 10px;
45
}
56

6-
.formBox{
7+
.formBox {
78
width: 50%;
8-
}
9+
}

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

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,56 @@
1-
import React, { memo, useState } from 'react';
1+
import React, { memo, useState, useContext, useEffect, useImperativeHandle, ForwardedRef, forwardRef } from 'react';
22
import styles from './index.less';
33
import classnames from 'classnames';
4-
import {
5-
Form,
6-
Input,
7-
} from 'antd';
4+
import { Form, Input } from 'antd';
5+
import { Context } from '../index';
6+
7+
export interface IBaseInfoRef {
8+
getBaseInfo: () => IBaseInfo;
9+
}
810

911
interface IProps {
1012
className?: string;
1113
}
1214

13-
export const basicInfo = {
14-
data: {}
15+
export interface IBaseInfo {
16+
name: string;
17+
comment: string;
1518
}
1619

17-
export default memo<IProps>(function BaseInfo({ className }) {
20+
const BaseInfo = forwardRef((props: IProps, ref: ForwardedRef<IBaseInfoRef>) => {
21+
const { className } = props;
22+
const { tableDetails } = useContext(Context);
1823
const [form] = Form.useForm();
1924

20-
function onChangeForm(type: string) {
21-
basicInfo.data = {
22-
...form.getFieldsValue()
23-
}
24-
console.log(basicInfo)
25+
useEffect(() => {
26+
form.setFieldsValue({
27+
name: tableDetails.name,
28+
comment: tableDetails.comment,
29+
});
30+
}, [tableDetails]);
31+
32+
function getBaseInfo(): IBaseInfo {
33+
return form.getFieldsValue();
2534
}
2635

27-
return <div className={classnames(className, styles.box)}>
28-
<div className={styles.formBox}>
29-
<Form
30-
form={form}
31-
initialValues={{ remember: true }}
32-
autoComplete="off"
33-
className={styles.form}
34-
>
35-
<Form.Item
36-
label="表名"
37-
name="name"
38-
>
39-
<Input onChange={() => { onChangeForm('name') }} />
40-
</Form.Item>
41-
<Form.Item
42-
label="注释"
43-
name="comment"
44-
>
45-
<Input onChange={() => { onChangeForm('comment') }} />
46-
</Form.Item>
47-
</Form>
36+
useImperativeHandle(ref, () => ({
37+
getBaseInfo,
38+
}));
39+
40+
return (
41+
<div className={classnames(className, styles.box)}>
42+
<div className={styles.formBox}>
43+
<Form form={form} initialValues={{ remember: true }} autoComplete="off" className={styles.form}>
44+
<Form.Item label="表名" name="name">
45+
<Input />
46+
</Form.Item>
47+
<Form.Item label="注释" name="comment">
48+
<Input />
49+
</Form.Item>
50+
</Form>
51+
</div>
4852
</div>
49-
</div>
50-
})
53+
);
54+
});
55+
56+
export default BaseInfo

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
@import '../../../styles/var.less';
22

33
.box {
4-
height: 500px;
4+
height: 100%;
5+
padding: 10px;
6+
box-sizing: border-box;
7+
display: flex;
8+
flex-direction: column;
59
}
610

711
.columnListHeader {
8-
margin: 0px -10px 20px;
12+
margin: 0px -10px 10px;
913
button {
1014
margin: 0px 10px;
1115
}
1216
}
1317

18+
.tableBox {
19+
flex: 1;
20+
overflow: auto;
21+
}
22+
1423
.editableCell {
1524
height: 28px;
1625
line-height: 28px;

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

Lines changed: 70 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,30 @@
1-
import React, { memo, useState } from 'react';
1+
import React, { memo, useContext, useEffect, useState } from 'react';
22
import styles from './index.less';
33
import classnames from 'classnames';
44
import { MenuOutlined } from '@ant-design/icons';
55
import type { DragEndEvent } from '@dnd-kit/core';
66
import { DndContext } from '@dnd-kit/core';
77
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
8+
import { Table, InputNumber, Input, Form, Select, Checkbox, Button } from 'antd';
9+
import { v4 as uuidv4 } from 'uuid';
810
import {
911
arrayMove,
1012
SortableContext,
1113
useSortable,
1214
verticalListSortingStrategy,
1315
} from '@dnd-kit/sortable';
1416
import { CSS } from '@dnd-kit/utilities';
15-
import { Table, InputNumber, Input, Form, Select, Checkbox, Button } from 'antd';
16-
import { v4 as uuidv4 } from 'uuid'
17-
18-
interface IProps {
19-
className?: string;
20-
}
21-
22-
// 数据库字段类型 枚举
23-
enum DatabaseFieldType {
24-
// 数字
25-
Number = 'number',
26-
// 字符串
27-
String = 'string',
28-
// 日期
29-
Date = 'date',
30-
// 布尔
31-
Boolean = 'boolean',
32-
// 二进制
33-
Binary = 'binary',
34-
// 对象
35-
Object = 'object',
36-
}
37-
38-
const databaseFieldTypeList = [DatabaseFieldType['Number'], DatabaseFieldType['String'], DatabaseFieldType['Date'], DatabaseFieldType['Boolean'], DatabaseFieldType['Binary'], DatabaseFieldType['Object']]
17+
import sqlService from '@/service/sql';
18+
import { Context } from '../index'
3919

4020
interface Item {
4121
key: string;
4222
columnName: string;
4323
length: number | null;
44-
fieldType: DatabaseFieldType;
24+
fieldType: string | null;
25+
nullable: boolean;
4526
}
4627

47-
const mockData: Item[] = [
48-
{
49-
key: uuidv4(),
50-
columnName: 'John Brown',
51-
length: 32,
52-
fieldType: DatabaseFieldType.Binary,
53-
},
54-
{
55-
key: uuidv4(),
56-
columnName: 'Jim Green',
57-
length: 42,
58-
fieldType: DatabaseFieldType.Number,
59-
},
60-
{
61-
key: uuidv4(),
62-
columnName: 'Joe Black',
63-
length: 32,
64-
fieldType: DatabaseFieldType.String,
65-
},
66-
]
67-
6828
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
6929
'data-row-key': string;
7030
}
@@ -109,10 +69,12 @@ const Row = ({ children, ...props }: RowProps) => {
10969
);
11070
};
11171

112-
const ColumnList: React.FC = () => {
113-
const [dataSource, setDataSource] = useState<Item[]>(mockData);
72+
const ColumnList = memo(() => {
73+
const { dataSourceId, databaseName, tableDetails } = useContext(Context);
74+
const [dataSource, setDataSource] = useState<Item[]>([]);
11475
const [form] = Form.useForm();
11576
const [editingKey, setEditingKey] = useState('');
77+
const [databaseFieldTypeList, setDatabaseFieldTypeList] = useState<string[]>([])
11678

11779
const isEditing = (record: Item) => record.key === editingKey;
11880

@@ -121,6 +83,31 @@ const ColumnList: React.FC = () => {
12183
setEditingKey(record.key);
12284
};
12385

86+
useEffect(() => {
87+
if (tableDetails) {
88+
const list = tableDetails?.columnList?.map(t => {
89+
return {
90+
key: uuidv4(),
91+
columnName: t.name,
92+
length: t.dataType,
93+
fieldType: t.columnType,
94+
nullable: t.nullable === 0,
95+
comment: t.comment,
96+
}
97+
}) || []
98+
setDataSource(list)
99+
}
100+
}, [tableDetails])
101+
102+
useEffect(() => {
103+
sqlService.getDatabaseFieldTypeList({
104+
dataSourceId,
105+
databaseName,
106+
}).then(res => {
107+
setDatabaseFieldTypeList(res.map(i => i.typeName))
108+
})
109+
}, [])
110+
124111
const columns = [
125112
{
126113
key: 'sort',
@@ -200,23 +187,24 @@ const ColumnList: React.FC = () => {
200187
{
201188
title: 'nullable',
202189
dataIndex: 'nullable',
203-
render: (text: string, record: Item) => {
190+
width: '100px',
191+
render: (text: boolean, record: Item) => {
204192
return <Form.Item
205-
name="fieldType"
193+
name="nullable"
206194
style={{ margin: 0 }}
207195
>
208-
<Checkbox />
196+
<Checkbox checked={text} />
209197
</Form.Item>
210198
}
211199
},
212200
{
213-
title: 'annotation',
214-
dataIndex: 'annotation',
201+
title: 'comment',
202+
dataIndex: 'comment',
215203
render: (text: string, record: Item) => {
216204
const editable = isEditing(record);
217205
return editable ? (
218206
<Form.Item
219-
name="annotation"
207+
name="comment"
220208
style={{ margin: 0 }}
221209
>
222210
<Input />
@@ -261,7 +249,8 @@ const ColumnList: React.FC = () => {
261249
key: uuidv4(),
262250
columnName: '',
263251
length: null,
264-
fieldType: DatabaseFieldType.String,
252+
fieldType: null,
253+
nullable: false,
265254
}
266255
setDataSource([...dataSource, newData])
267256
edit(newData)
@@ -296,35 +285,38 @@ const ColumnList: React.FC = () => {
296285
}
297286

298287
return (
299-
<div className='box'>
288+
<div className={styles.box}>
300289
<div className={styles.columnListHeader}>
301290
<Button onClick={addData}>新增</Button>
302291
<Button onClick={deleteData}>删除</Button>
303292
<Button onClick={moveData.bind(null, 'up')}>上移</Button>
304293
<Button onClick={moveData.bind(null, 'down')}>下移</Button>
305294
</div>
306-
<Form form={form} onChange={formChange}>
307-
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
308-
<SortableContext
309-
items={dataSource.map((i) => i.key)}
310-
strategy={verticalListSortingStrategy}
311-
>
312-
<Table
313-
components={{
314-
body: {
315-
row: Row,
316-
},
317-
}}
318-
pagination={false}
319-
rowKey="key"
320-
columns={columns}
321-
dataSource={dataSource}
322-
/>
323-
</SortableContext>
324-
</DndContext>
325-
</Form>
295+
<div className={styles.tableBox}>
296+
<Form form={form} onChange={formChange}>
297+
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
298+
<SortableContext
299+
items={dataSource.map((i) => i.key)}
300+
strategy={verticalListSortingStrategy}
301+
>
302+
<Table
303+
components={{
304+
body: {
305+
row: Row,
306+
},
307+
}}
308+
pagination={false}
309+
rowKey="key"
310+
columns={columns as any}
311+
dataSource={dataSource}
312+
/>
313+
</SortableContext>
314+
</DndContext>
315+
</Form>
316+
</div>
326317
</div>
327318
);
328-
};
319+
})
320+
329321

330322
export default ColumnList;

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

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

33
.box {
4+
padding: 10px;
45
}
56

67
.indexListHeader {
7-
margin: 0px -10px 20px;
8+
margin: 0px -10px 10px;
89
button {
910
margin: 0px 10px;
1011
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import { CSS } from '@dnd-kit/utilities';
1515
import { Table, InputNumber, Input, Form, Select, Checkbox, Button, Modal } from 'antd';
1616
import { v4 as uuidv4 } from 'uuid';
17-
import IncludeCol from '../IncludeCol'
17+
import IncludeCol from '../IncludeCol';
1818

1919
interface IProps {
2020
className?: string;

0 commit comments

Comments
 (0)