Skip to content

Commit 13a58c1

Browse files
shanhexishanhexi
committed
reconstruction console tab
1 parent c2a3337 commit 13a58c1

25 files changed

Lines changed: 880 additions & 452 deletions

File tree

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
}
1010

1111
.columnListHeader {
12-
margin: 0px -10px 10px;
12+
margin: 0px -5px 10px;
1313
button {
14-
margin: 0px 10px;
14+
margin: 0px 5px;
1515
}
1616
}
1717

@@ -22,5 +22,15 @@
2222

2323
.editableCell {
2424
height: 28px;
25-
line-height: 28px;
25+
line-height: 26px;
26+
padding: 0px 7px;
27+
box-sizing: border-box;
28+
border: 1px solid transparent;
29+
border-radius: 4px;
30+
.f-single-line();
31+
width: 100%;
32+
cursor: pointer;
33+
&:hover {
34+
border: 1px solid var(--color-border);
35+
}
2636
}

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

Lines changed: 76 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,8 @@ interface IProps {
2626

2727
}
2828

29-
export type IColumnListInfo = IColumnItem[];
30-
3129
export interface IColumnListRef {
32-
getColumnListInfo: () => IColumnListInfo;
30+
getColumnListInfo: () => IColumnItem[];
3331
}
3432

3533
const Row = ({ children, ...props }: RowProps) => {
@@ -72,9 +70,27 @@ const Row = ({ children, ...props }: RowProps) => {
7270
);
7371
};
7472

73+
const createInitialData = () => {
74+
return {
75+
key: uuidv4(),
76+
name: null,
77+
columnSize: null,
78+
columnType: null,
79+
nullable: null,
80+
comment: null,
81+
primaryKey: null,
82+
defaultValue: null,
83+
dataType: null,
84+
autoIncrement: null,
85+
numericPrecision: null,
86+
numericScale: null,
87+
characterMaximumLength: null,
88+
};
89+
}
90+
7591
const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>) => {
7692
const { dataSourceId, databaseName, tableDetails } = useContext(Context);
77-
const [dataSource, setDataSource] = useState<IColumnListInfo>([]);
93+
const [dataSource, setDataSource] = useState<IColumnItem[]>([createInitialData()]);
7894
const [form] = Form.useForm();
7995
const [editingKey, setEditingKey] = useState('');
8096
const [databaseFieldTypeList, setDatabaseFieldTypeList] = useState<string[]>([])
@@ -90,19 +106,16 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
90106
if (tableDetails) {
91107
const list = tableDetails?.columnList?.map(t => {
92108
return {
109+
...t,
93110
key: uuidv4(),
94-
name: t.name,
95-
columnSize: t.columnSize,
96-
columnType: t.columnType,
97-
nullable: t.nullable ? 1 : 0,
98-
comment: t.comment,
99111
}
100112
}) || []
101113
setDataSource(list)
102114
}
103115
}, [tableDetails])
104116

105117
useEffect(() => {
118+
// 获取数据库字段类型列表
106119
sqlService.getDatabaseFieldTypeList({
107120
dataSourceId,
108121
databaseName,
@@ -120,6 +133,7 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
120133
{
121134
title: 'name',
122135
dataIndex: 'name',
136+
width: '160px',
123137
render: (text: string, record: IColumnItem) => {
124138
const editable = isEditing(record);
125139
return editable ? (
@@ -142,7 +156,7 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
142156
{
143157
title: 'columnSize',
144158
dataIndex: 'columnSize',
145-
editable: true,
159+
width: '120px',
146160
render: (text: string, record: IColumnItem) => {
147161
const editable = isEditing(record);
148162
return editable ? (
@@ -165,41 +179,56 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
165179
{
166180
title: 'columnType',
167181
dataIndex: 'columnType',
168-
width: '140px',
182+
width: '200px',
169183
render: (text: string, record: IColumnItem) => {
184+
const editable = isEditing(record);
185+
return <div>
186+
{
187+
editable ? (
188+
<Form.Item
189+
name="columnType"
190+
style={{ margin: 0, maxWidth: '184px' }}
191+
>
192+
<Select
193+
options={databaseFieldTypeList.map((i) => ({ label: i, value: i }))}
194+
/>
195+
</Form.Item>
196+
) : (
197+
<div
198+
style={{ maxWidth: '184px' }}
199+
className={styles.editableCell}
200+
onClick={() => edit(record)}
201+
>
202+
{text}
203+
</div>
204+
)
205+
}
206+
</div>
207+
}
208+
},
209+
{
210+
title: 'nullable',
211+
dataIndex: 'nullable',
212+
width: '100px',
213+
render: (nullable: number, record: IColumnItem) => {
170214
const editable = isEditing(record);
171215
return editable ? (
172216
<Form.Item
173-
name="columnType"
217+
name='nullable'
174218
style={{ margin: 0 }}
219+
valuePropName='checked'
175220
>
176-
<Select
177-
options={databaseFieldTypeList.map((i) => ({ label: i, value: i }))}
178-
/>
221+
<Checkbox checked={nullable === 1} />
179222
</Form.Item>
180223
) : (
181224
<div
182-
className={styles.editableCell}
183225
onClick={() => edit(record)}
184226
>
185-
{text}
227+
<Checkbox checked={nullable === 1} />
186228
</div>
187229
);
188230
}
189231
},
190-
{
191-
title: 'nullable',
192-
dataIndex: 'nullable',
193-
width: '100px',
194-
render: (text: boolean, record: IColumnItem) => {
195-
return <Form.Item
196-
name="nullable"
197-
style={{ margin: 0 }}
198-
>
199-
<Checkbox checked={text} />
200-
</Form.Item>
201-
}
202-
},
203232
{
204233
title: 'comment',
205234
dataIndex: 'comment',
@@ -234,28 +263,26 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
234263
}
235264
};
236265

237-
const formChange = (value: any) => {
238-
const newData = form.getFieldsValue();
239-
console.log(value)
240-
setDataSource(dataSource.map(i => {
241-
if (i.key === editingKey) {
266+
const handelFieldsChange = (field: any) => {
267+
let { name: nameList, value } = field[0];
268+
const name = nameList[0];
269+
if (name === 'nullable') {
270+
value = value ? 1 : 0
271+
}
272+
const newData = dataSource.map((item) => {
273+
if (item.key === editingKey) {
242274
return {
243-
...i,
244-
...newData
245-
}
275+
...item,
276+
[name]: value,
277+
};
246278
}
247-
return i
248-
}))
279+
return item;
280+
});
281+
setDataSource(newData);
249282
}
250283

251284
const addData = () => {
252-
const newData = {
253-
key: uuidv4(),
254-
name: '',
255-
columnSize: 0,
256-
columnType: null,
257-
nullable: 0,
258-
}
285+
const newData = createInitialData()
259286
setDataSource([...dataSource, newData])
260287
edit(newData)
261288
}
@@ -288,7 +315,7 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
288315
}
289316
}
290317

291-
function getColumnListInfo(): IColumnListInfo {
318+
function getColumnListInfo(): IColumnItem[] {
292319
return dataSource
293320
}
294321

@@ -305,7 +332,7 @@ const ColumnList = forwardRef((props: IProps, ref: ForwardedRef<IColumnListRef>)
305332
<Button onClick={moveData.bind(null, 'down')}>下移</Button>
306333
</div>
307334
<div className={styles.tableBox}>
308-
<Form form={form} onChange={formChange}>
335+
<Form form={form} onFieldsChange={handelFieldsChange}>
309336
<DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
310337
<SortableContext
311338
items={dataSource.map((i) => i.key)}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,15 @@
1919

2020
.editableCell {
2121
height: 28px;
22-
line-height: 28px;
22+
line-height: 26px;
23+
padding: 0px 7px;
24+
box-sizing: border-box;
25+
border: 1px solid transparent;
26+
border-radius: 4px;
27+
.f-single-line();
28+
width: 100%;
29+
cursor: pointer;
30+
&:hover {
31+
border: 1px solid var(--color-border);
32+
}
2333
}

0 commit comments

Comments
 (0)