Skip to content

Commit 93aa8d1

Browse files
JerryFan626JerryFan626
committed
feat: Build backend management page
1 parent b15f1ac commit 93aa8d1

9 files changed

Lines changed: 898 additions & 185 deletions

File tree

‎chat2db-client/src/pages/main/team/datasource-management/index.tsx‎

Lines changed: 110 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,35 @@
1-
import React, { useEffect, useMemo, useState } from 'react';
2-
import { Button, Input, Table, Popconfirm, message } from 'antd';
3-
import { IDataSourcePageQueryVO } from '@/typings/team';
1+
import React, { useEffect, useMemo, useRef, useState } from 'react';
2+
import { Button, Input, Table, Popconfirm, message, Drawer } from 'antd';
43
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
4+
import ConnectionServer from '@/service/connection'
5+
import { createDataSource, deleteDataSource, getDataSourceList, updateDataSource } from '@/service/team';
6+
import { IConnectionDetails } from '@/typings';
7+
import { AffiliationType, IDataSourceVO } from '@/typings/team';
8+
import i18n from '@/i18n';
9+
import { isValid } from '@/utils/check';
10+
import CreateConnection from '@/blocks/CreateConnection';
11+
import UniversalDrawer from '../universal-drawer';
512
import styles from './index.less';
6-
import { getDataSourceList } from '@/service/team';
13+
import { isNumber } from 'lodash';
714

815
function DataSourceManagement() {
9-
const [dataSource, setDataSource] = useState<IDataSourcePageQueryVO[]>([]);
16+
const [dataSource, setDataSource] = useState<IDataSourceVO[]>([]);
1017
const [pagination, setPagination] = useState({
1118
searchKey: '',
1219
current: 1,
1320
pageSize: 10,
1421
total: 0,
1522
showSizeChanger: true,
1623
showQuickJumper: true,
17-
pageSizeOptions: ['10', '20', '30', '40'],
24+
// pageSizeOptions: ['10', '20', '30', '40'],
1825
});
19-
const [isModalVisible, setIsModalVisible] = useState(false);
26+
const [showCreateConnection, setShowCreateConnection] = useState(false)
27+
const connectionInfo = useRef<IConnectionDetails>();
28+
29+
const [drawerInfo, setDrawerInfo] = useState<{ open: boolean; type: AffiliationType; id?: number }>({
30+
open: false,
31+
type: AffiliationType['DATASOURCE_USER/TEAM']
32+
})
2033

2134
const columns = useMemo(
2235
() => [
@@ -33,17 +46,34 @@ function DataSourceManagement() {
3346
{
3447
title: '操作',
3548
key: 'action',
36-
render: (_, record: any) => (
37-
<Popconfirm
38-
title="确定要删除这条记录吗？"
39-
onConfirm={() => handleDelete(record.id)}
40-
okText="确认"
41-
cancelText="取消"
42-
>
43-
<a href="#" onClick={(e) => e.preventDefault()}>
44-
删除
45-
</a>
46-
</Popconfirm>
49+
width: 180,
50+
render: (_: any, record: IDataSourceVO) => (
51+
<>
52+
<Button type='link' onClick={() => {
53+
handleEdit(record)
54+
}}>
55+
{i18n('common.button.edit')}
56+
</Button>
57+
<Button type='link' onClick={() => {
58+
setDrawerInfo({
59+
...drawerInfo,
60+
open: true,
61+
id: record.id,
62+
})
63+
}}>
64+
权限管理
65+
</Button>
66+
<Popconfirm
67+
title={i18n('common.tips.delete.confirm')}
68+
onConfirm={() => handleDelete(record.id)}
69+
okText={i18n('common.button.affirm')}
70+
cancelText={i18n('common.button.cancel')}
71+
>
72+
<a href="#" onClick={(e) => e.preventDefault()}>
73+
{i18n('common.button.delete')}
74+
</a>
75+
</Popconfirm>
76+
</>
4777
),
4878
},
4979
],
@@ -70,24 +100,58 @@ function DataSourceManagement() {
70100
};
71101

72102
const handleTableChange = (p: any) => {
73-
console.log('handleTableChange', p);
103+
74104
setPagination({
75105
...pagination,
76106
...p,
77107
});
78108
};
79109

80-
const handleDelete = async (recordId: number) => {
81-
const success = true; // Replace with actual API response
110+
const handleAddDataSource = () => {
111+
connectionInfo.current = undefined;
112+
setShowCreateConnection(true);
113+
}
114+
115+
const handleEdit = async (record: IDataSourceVO) => {
116+
const { id } = record;
117+
if (!id) {
118+
return;
119+
}
82120

83-
if (success) {
121+
let detail = await ConnectionServer.getDetails({ id })
122+
connectionInfo.current = detail;
123+
setShowCreateConnection(true)
124+
}
125+
126+
const handleDelete = async (id?: number) => {
127+
if (isNumber(id)) {
128+
await deleteDataSource({ id })
84129
message.success('删除成功');
85130
queryDataSourceList();
86-
} else {
87-
message.error('删除失败');
88131
}
89132
};
90133

134+
const handleConfirmConnection = async (data: IConnectionDetails) => {
135+
if (JSON.stringify(connectionInfo.current) === '{}') {
136+
return;
137+
}
138+
connectionInfo.current = {
139+
...data,
140+
environmentId: 2,
141+
}
142+
143+
const isUpdate = isValid(connectionInfo?.current?.id);
144+
const requestApi = isUpdate ? updateDataSource : createDataSource;
145+
try {
146+
await requestApi({ ...connectionInfo.current })
147+
message.success(isUpdate ? '更新成功' : '创建成功')
148+
setShowCreateConnection(false)
149+
queryDataSourceList()
150+
} catch {
151+
152+
}
153+
}
154+
91155
return (
92156
<div>
93157
<div className={styles.tableTop}>
@@ -97,8 +161,8 @@ function DataSourceManagement() {
97161
onSearch={handleSearch}
98162
enterButton={<SearchOutlined />}
99163
/>
100-
<Button type="primary" icon={<PlusOutlined />} onClick={() => setIsModalVisible(true)}>
101-
添加
164+
<Button type="primary" icon={<PlusOutlined />} onClick={handleAddDataSource}>
165+
添加链接
102166
</Button>
103167
</div>
104168
<Table
@@ -108,6 +172,26 @@ function DataSourceManagement() {
108172
pagination={pagination}
109173
onChange={handleTableChange}
110174
/>
175+
176+
<Drawer
177+
title={connectionInfo?.current?.id ? '编辑链接' : '添加链接'}
178+
width={1000}
179+
open={showCreateConnection}
180+
onClose={() => setShowCreateConnection(false)}
181+
>
182+
<CreateConnection connectionDetail={connectionInfo.current} onSubmit={handleConfirmConnection} />
183+
</Drawer>
184+
185+
<UniversalDrawer
186+
{...drawerInfo}
187+
byId={drawerInfo.id}
188+
onClose={() => {
189+
setDrawerInfo({
190+
...drawerInfo,
191+
open: false
192+
})
193+
}}
194+
/>
111195
</div>
112196
);
113197
}

‎chat2db-client/src/pages/main/team/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import UserManagement from './user-management';
77
import TeamManagement from './team-management';
88

99
const Team = () => {
10-
const [activeKey, setActiveKey] = useState<string>('2');
10+
const [activeKey, setActiveKey] = useState<string>('0');
1111
const tabList = useMemo(
1212
() => [
1313
{

‎chat2db-client/src/pages/main/team/team-management/index.tsx‎

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
import React, { useEffect, useMemo, useState } from 'react';
22
import { createTeam, deleteTeam, getTeamManagementList, updateTeam } from '@/service/team';
3-
import { ITeamPageQueryVO, ITeamVO, ManagementType, StatusType } from '@/typings/team';
43
import { Button, Form, Input, Modal, Popconfirm, Radio, Table, Tag, message } from 'antd';
54
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
65
import styles from './index.less';
76
import UniversalDrawer from '../universal-drawer';
7+
import i18n from '@/i18n';
8+
import { AffiliationType, ITeamVO, StatusType } from '@/typings/team';
89

910
const formItemLayout = {
1011
labelCol: { span: 6 },
1112
wrapperCol: { span: 16 },
1213
colon: false,
1314
};
1415

15-
const requireRule = { required: true, message: 'Require field empty!' };
16+
const requireRule = { required: true, message: i18n('common.form.error.required') };
1617

1718
function TeamManagement() {
1819
const [form] = Form.useForm();
19-
const [dataSource, setDataSource] = useState<ITeamPageQueryVO[]>([]);
20+
const [loadding, setLoading] = useState(false)
21+
const [dataSource, setDataSource] = useState<ITeamVO[]>([]);
2022
const [pagination, setPagination] = useState({
2123
searchKey: '',
2224
current: 1,
@@ -27,9 +29,8 @@ function TeamManagement() {
2729
// pageSizeOptions: ['10', '20', '30', '40'],
2830
});
2931
const [isModalVisible, setIsModalVisible] = useState(false);
30-
const [drawerInfo, setDrawerInfo] = useState<{ open: boolean; type: ManagementType; teamId?: number }>({
32+
const [drawerInfo, setDrawerInfo] = useState<{ open: boolean; type?: AffiliationType; teamId?: number }>({
3133
open: false,
32-
type: ManagementType.USER,
3334
});
3435
const columns = useMemo(
3536
() => [
@@ -56,7 +57,7 @@ function TeamManagement() {
5657
render: (_: any, record: ITeamVO) => (
5758
<>
5859
<Button type="link" onClick={() => handleEdit(record)}>
59-
编辑
60+
{i18n('common.button.edit')}
6061
</Button>
6162
<Button
6263
type="link"
@@ -65,17 +66,32 @@ function TeamManagement() {
6566
...drawerInfo,
6667
open: true,
6768
teamId: record.id,
69+
type: AffiliationType.TEAM_USER
6870
});
6971
}}
7072
>
7173
包含用户
7274
</Button>
73-
<Button type="link" onClick={() => handleEdit(record)}>
75+
<Button
76+
type="link"
77+
onClick={() => {
78+
setDrawerInfo({
79+
...drawerInfo,
80+
open: true,
81+
teamId: record.id,
82+
type: AffiliationType.TEAM_DATASOURCE
83+
});
84+
}}>
7485
归属链接
7586
</Button>
76-
<Popconfirm title="确定删除" onConfirm={() => handleDelete(record.id)} okText="确认" cancelText="取消">
87+
<Popconfirm
88+
title={i18n('common.tips.delete.confirm')}
89+
onConfirm={() => handleDelete(record.id)}
90+
okText={i18n('common.button.affirm')}
91+
cancelText={i18n('common.button.cancel')}
92+
>
7793
<a href="#" onClick={(e) => e.preventDefault()}>
78-
删除
94+
{i18n('common.button.delete')}
7995
</a>
8096
</Popconfirm>
8197
</>
@@ -90,15 +106,21 @@ function TeamManagement() {
90106
}, [pagination.current, pagination.pageSize, pagination.searchKey]);
91107

92108
const queryTeamList = async () => {
93-
const { searchKey, current: pageNo, pageSize } = pagination;
94-
let res = await getTeamManagementList({ searchKey, pageNo, pageSize });
95-
if (res) {
96-
setDataSource(res?.data ?? []);
109+
setLoading(true);
110+
try {
111+
const { searchKey, current: pageNo, pageSize } = pagination;
112+
let res = await getTeamManagementList({ searchKey, pageNo, pageSize });
113+
if (res) {
114+
setDataSource(res?.data ?? []);
115+
}
116+
} catch (error) {
117+
118+
} finally {
119+
setLoading(false)
97120
}
98121
};
99122

100123
const handleTableChange = (p: any) => {
101-
console.log('handleTableChange', p);
102124
setPagination({
103125
...pagination,
104126
...p,
@@ -148,11 +170,13 @@ function TeamManagement() {
148170
</div>
149171
<Table
150172
rowKey={'id'}
173+
loading={loadding}
151174
dataSource={dataSource}
152175
columns={columns}
153176
pagination={pagination}
154177
onChange={handleTableChange}
155178
/>
179+
156180
<Modal
157181
title={form.getFieldValue('id') !== undefined ? '编辑团队' : '添加团队'}
158182
open={isModalVisible}
@@ -166,13 +190,9 @@ function TeamManagement() {
166190
form.resetFields();
167191
})
168192
.catch((errorInfo) => {
169-
console.log('Validation failed:', errorInfo);
170193
form.scrollToField(errorInfo.errorFields[0].name);
171194
form.setFields(errorInfo.errorFields);
172195
})
173-
.finally(() => {
174-
form.resetFields();
175-
});
176196
}}
177197
onCancel={() => {
178198
form.resetFields();
@@ -184,7 +204,6 @@ function TeamManagement() {
184204
form={form}
185205
autoComplete={'off'}
186206
initialValues={{
187-
// roleCode: RoleStatusType.USER,
188207
status: StatusType.VALID,
189208
}}
190209
>
@@ -194,12 +213,6 @@ function TeamManagement() {
194213
<Form.Item label="团队名" name="name">
195214
<Input />
196215
</Form.Item>
197-
{/* <Form.Item label="角色" name="roleCode" rules={[requireRule]}>
198-
<Radio.Group>
199-
<Radio value={RoleStatusType.ADMIN}>管理员</Radio>
200-
<Radio value={RoleStatusType.USER}>用户</Radio>
201-
</Radio.Group>
202-
</Form.Item> */}
203216
<Form.Item label="状态" name="status" rules={[requireRule]}>
204217
<Radio.Group>
205218
<Radio value={StatusType.VALID}>有效</Radio>

0 commit comments

Comments
 (0)