Skip to content

Commit 69ed034

Browse files
shanhexishanhexi
committed
fix:FileUploadModal
1 parent 3adb4fe commit 69ed034

5 files changed

Lines changed: 70 additions & 53 deletions

File tree

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

Lines changed: 67 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { IConnectionDetails, IDatabase } from '@/typings';
55
import ConnectionEdit from '@/components/ConnectionEdit';
66
import { databaseTypeList } from '@/constants';
77
import Iconfont from '@/components/Iconfont';
8+
import i18n from '@/i18n';
9+
import FileUploadModal from '@/components/ImportConnection';
10+
import {getConnectionList} from '@/pages/main/store/connection';
811

912
// IConnectionDetails 全部信息代表修改
1013
// null 展示因增列表
@@ -23,6 +26,8 @@ export default memo<IProps>((props) => {
2326
const [connectionDetail, setConnectionDetail] = useState<IEditConnectionDetail | null | undefined>(
2427
externalConnectionDetail,
2528
);
29+
const [isFileUploadModalOpen, setIsFileUploadModalOpen] = useState(false);
30+
2631

2732
useEffect(() => {
2833
setConnectionDetail(externalConnectionDetail);
@@ -39,49 +44,74 @@ export default memo<IProps>((props) => {
3944
// }
4045

4146
return (
42-
<div className={classnames(styles.box, className)}>
43-
{connectionDetail && (
44-
<div
45-
className={classnames(styles.createConnections, {
46-
[styles.showCreateConnections]: connectionDetail,
47-
})}
48-
>
49-
<ConnectionEdit
50-
closeCreateConnection={() => {
51-
setConnectionDetail(null);
52-
}}
53-
connectionData={connectionDetail as any}
54-
submit={onSubmit}
55-
/>
56-
</div>
57-
)}
58-
{connectionDetail === null && (
59-
<div className={styles.dataBaseListBox}>
60-
<div className={styles.dataBaseList}>
61-
{databaseTypeList.map((t) => {
62-
return (
63-
<div key={t.code} className={styles.databaseItem} onClick={handleCreateConnections.bind(null, t)}>
64-
<div className={styles.databaseItemMain}>
65-
<div className={styles.databaseItemLeft}>
66-
<div className={styles.logoBox}>
67-
<Iconfont code={t.icon} />
47+
<>
48+
<div className={classnames(styles.box, className)}>
49+
{connectionDetail && (
50+
<div
51+
className={classnames(styles.createConnections, {
52+
[styles.showCreateConnections]: connectionDetail,
53+
})}
54+
>
55+
<ConnectionEdit
56+
closeCreateConnection={() => {
57+
setConnectionDetail(null);
58+
}}
59+
connectionData={connectionDetail as any}
60+
submit={onSubmit}
61+
/>
62+
</div>
63+
)}
64+
{connectionDetail === null && (
65+
<div className={styles.dataBaseListBox}>
66+
<div className={styles.dataBaseList}>
67+
{databaseTypeList.map((t) => {
68+
return (
69+
<div key={t.code} className={styles.databaseItem} onClick={handleCreateConnections.bind(null, t)}>
70+
<div className={styles.databaseItemMain}>
71+
<div className={styles.databaseItemLeft}>
72+
<div className={styles.logoBox}>
73+
<Iconfont code={t.icon} />
74+
</div>
75+
{t.name}
76+
</div>
77+
<div className={styles.databaseItemRight}>
78+
<Iconfont code="&#xe631;" />
6879
</div>
69-
{t.name}
7080
</div>
71-
<div className={styles.databaseItemRight}>
72-
<Iconfont code="&#xe631;" />
81+
</div>
82+
);
83+
})}
84+
<div className={styles.databaseItem} onClick={() => {setIsFileUploadModalOpen(true)}}>
85+
<div className={styles.databaseItemMain}>
86+
<div className={styles.databaseItemLeft}>
87+
<div className={styles.logoBox}>
88+
<Iconfont code="&#xe66c;" />
7389
</div>
90+
{i18n('connection.title.importConnection')}
91+
</div>
92+
<div className={styles.databaseItemRight}>
93+
<Iconfont code="&#xe631;" />
7494
</div>
7595
</div>
76-
);
77-
})}
78-
{Array.from({ length: 20 }).map((t, index) => {
79-
return <div key={index} className={styles.databaseItemSpacer} />;
80-
})}
96+
</div>
97+
{Array.from({ length: 20 }).map((t, index) => {
98+
return <div key={index} className={styles.databaseItemSpacer} />;
99+
})}
100+
</div>
81101
</div>
82-
</div>
83-
)}
84-
</div>
102+
)}
103+
</div>
104+
<FileUploadModal
105+
open={isFileUploadModalOpen}
106+
onClose={() => {
107+
setIsFileUploadModalOpen(false);
108+
}}
109+
onConfirm={() => {
110+
setIsFileUploadModalOpen(false);
111+
getConnectionList()
112+
}}
113+
/>
114+
</>
85115
);
86116
});
87117

‎chat2db-client/src/components/ImportConnection/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const ImportConnection: React.FC<IImportConnectionProps> = ({ open, onClose, onC
6767

6868
return (
6969
<Modal
70-
title="导入文件, .ncx(navicat) 或 .dbp(dbever)"
70+
title={i18n('connection.title.importTitle')}
7171
open={open}
7272
onCancel={onClose}
7373
onOk={handleConfirmUpload}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,5 @@ export default {
3333
'connection.button.createConnection': 'Create connection',
3434
'connection.tips.noConnection': 'You have not created any connections yet',
3535
'connection.tips.noConnectionTips': 'You do not have permission to view the connection details, but you can connect to the connection directly',
36+
'connection.title.importTitle': 'Import file,.ncx(navicat) or.dbp(dbever)',
3637
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,5 @@ export default {
3333
'connection.button.createConnection': '创建连接',
3434
'connection.tips.noConnection': '您当前还没有创建任何连接',
3535
'connection.tips.noConnectionTips': '无权限查看该连接详情，但你可以直接连接该连接',
36+
'connection.title.importTitle': '导入文件, .ncx(navicat) 或 .dbp(dbever)',
3637
};

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { IConnectionDetails, IConnectionListItem } from '@/typings';
1414
// ----- components -----
1515
import CreateConnection from '@/blocks/CreateConnection';
1616
import Iconfont from '@/components/Iconfont';
17-
import FileUploadModal from '@/components/ImportConnection';
1817
import LoadingContent from '@/components/Loading/LoadingContent';
1918
import MenuLabel from '@/components/MenuLabel';
2019

@@ -36,7 +35,6 @@ const ConnectionsPage = () => {
3635
});
3736
const volatileRef = useRef<any>();
3837
const [connectionActiveId, setConnectionActiveId] = useState<IConnectionListItem['id'] | null>(null);
39-
const [isFileUploadModalOpen, setIsFileUploadModalOpen] = useState(false);
4038
const [connectionDetail, setConnectionDetail] = useState<IConnectionDetails | null | undefined>(null);
4139

4240
// 处理列表单击事件
@@ -174,20 +172,7 @@ const ConnectionsPage = () => {
174172
>
175173
<CreateConnection connectionDetail={connectionDetail} onSubmit={onSubmit} />
176174
</LoadingContent>
177-
{/* <div className={styles.layoutRight}>
178-
<CreateConnection connectionDetail={connectionDetail} onSubmit={onSubmit} />
179-
</div> */}
180175
</div>
181-
182-
<FileUploadModal
183-
open={isFileUploadModalOpen}
184-
onClose={() => {
185-
setIsFileUploadModalOpen(false);
186-
}}
187-
onConfirm={() => {
188-
setIsFileUploadModalOpen(false);
189-
}}
190-
/>
191176
</>
192177
);
193178
};

0 commit comments

Comments
 (0)