Skip to content

Commit 1bbd948

Browse files
shanhexishanhexi
committed
feat:下载loading
1 parent a8900f1 commit 1bbd948

13 files changed

Lines changed: 565 additions & 1428 deletions

File tree

‎chat2db-client/src/components/CreateConnection/components/Driver/index.less‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@import '../../../../styles/var.less';
2+
3+
.box {
4+
:global {
5+
.ant-form-item-row{
6+
display: flex;
7+
}
8+
.ant-form-item-control{
9+
flex: 1;
10+
}
11+
.ant-form-item-label {
12+
width: 54px;
13+
}
14+
}
15+
}
16+
17+
.downloadDriveFooter{
18+
display: flex;
19+
align-items: center;
20+
justify-content: space-between;
21+
22+
.downloadDrive{
23+
display: flex;
24+
.downloadText{
25+
margin-right: 4px;
26+
color: var(--color-primary);
27+
}
28+
.downloadTextDownload{
29+
cursor: pointer;
30+
}
31+
.downloadTextError{
32+
color: var(--color-error-text);
33+
}
34+
.downloadTextLoading{
35+
display: flex;
36+
align-items: center;
37+
.text{
38+
margin-left: 4px;
39+
}
40+
}
41+
.downloadTextSuccess{
42+
color: var(--color-success-text);
43+
}
44+
}
45+
46+
.uploadCustomDrive{
47+
cursor: pointer;
48+
&:hover{
49+
color: var(--color-primary);
50+
}
51+
}
52+
}

‎chat2db-client/src/components/CreateConnection/components/Driver/index.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import React, { memo, useState, useEffect } from 'react';
2+
import styles from './index.less';
3+
import classnames from 'classnames';
4+
import { i18n, isEn } from '@/i18n';
5+
import { Form, Modal, Input, Select, Spin } from 'antd';
6+
import connectionService, { IDriverResponse } from '@/service/connection';
7+
import { DatabaseTypeCode, ConnectionEnvType, databaseMap } from '@/constants';
8+
import UploadDriver from '@/components/UploadDriver';
9+
import LoadingGracile from '@/components/Loading/LoadingGracile';
10+
const { Option } = Select;
11+
12+
interface IProps {
13+
className?: string;
14+
onChange: (data: any) => void;
15+
backfillData: any;
16+
}
17+
18+
enum DownloadStatus {
19+
Default,
20+
Loading,
21+
Error,
22+
Success
23+
}
24+
25+
export default memo<IProps>(function Driver(props) {
26+
const { className, backfillData, onChange } = props;
27+
const [downloadStatus, setDownloadStatus] = useState<DownloadStatus>();
28+
const [driveForm] = Form.useForm();
29+
const [driverObj, setDriverObj] = useState<IDriverResponse>();
30+
const [uploadDriverModal, setUploadDriverModal] = useState(false);
31+
const [driverSaved, setDriverSaved] = useState<any>({});
32+
33+
useEffect(() => {
34+
if (backfillData) {
35+
getDriverList();
36+
}
37+
}, [backfillData?.type])
38+
39+
useEffect(() => {
40+
if (backfillData) {
41+
driveForm.setFieldsValue({
42+
jdbcDriverClass: backfillData?.driverConfig?.jdbcDriverClass,
43+
jdbcDriver: backfillData?.driverConfig?.jdbcDriver
44+
})
45+
}
46+
}, [backfillData?.driverConfig, backfillData?.id])
47+
48+
function getDriverList() {
49+
connectionService.getDriverList({ dbType: backfillData.type }).then(res => {
50+
setDriverObj(res)
51+
})
52+
}
53+
54+
function formChange(data: any) {
55+
setDriverSaved(data);
56+
}
57+
58+
function saveDriver() {
59+
connectionService.saveDriver(driverSaved).then(res => {
60+
setUploadDriverModal(false);
61+
getDriverList();
62+
})
63+
}
64+
65+
function downloadDrive() {
66+
setDownloadStatus(DownloadStatus.Loading)
67+
connectionService.downloadDriver({ dbType: backfillData.type }).then(res => {
68+
// setDownloadStatus(DownloadStatus.Success)
69+
getDriverList();
70+
}).catch(() => {
71+
setDownloadStatus(DownloadStatus.Error)
72+
})
73+
}
74+
75+
function onValuesChange(data: any) {
76+
const selected = driverObj?.driverConfigList.find(t => t.jdbcDriver === data.jdbcDriver);
77+
driveForm.setFieldsValue({
78+
jdbcDriverClass: selected?.jdbcDriverClass
79+
});
80+
onChange({
81+
jdbcDriverClass: selected?.jdbcDriverClass,
82+
jdbcDriver: data.jdbcDriver
83+
})
84+
}
85+
86+
return <div className={classnames(styles.box, className)}>
87+
<Form
88+
form={driveForm}
89+
onValuesChange={onValuesChange}
90+
colon={false}
91+
>
92+
<Form.Item labelAlign="left" name="jdbcDriver" label={i18n('connection.title.driver')}>
93+
<Select>
94+
{driverObj?.driverConfigList?.map((t) => (
95+
<Option key={t.jdbcDriver} value={t.jdbcDriver}>
96+
{t.jdbcDriver}
97+
</Option>
98+
))}
99+
</Select>
100+
</Form.Item>
101+
<Form.Item labelAlign="left" name="jdbcDriverClass" label="Class">
102+
<Input disabled />
103+
</Form.Item>
104+
</Form>
105+
<div className={styles.downloadDriveFooter}>
106+
{
107+
(!driverObj?.driverConfigList?.length || downloadStatus === DownloadStatus.Success) ? <div onClick={downloadDrive} className={styles.downloadDrive}>
108+
{
109+
(downloadStatus === DownloadStatus.Default) && <div className={classnames(styles.downloadText, styles.downloadTextDownload)}>{i18n('connection.text.downloadDriver')}</div>
110+
}
111+
{
112+
(downloadStatus === DownloadStatus.Loading) &&
113+
<div className={classnames(styles.downloadText, styles.downloadTextLoading)}>
114+
<LoadingGracile></LoadingGracile>
115+
<div className={styles.text}>
116+
{i18n('connection.text.downloading')}
117+
</div>
118+
</div>
119+
}
120+
{
121+
(downloadStatus === DownloadStatus.Error) && <div className={classnames(styles.downloadText, styles.downloadTextError)}>{i18n('connection.text.tryAgainDownload')}</div>
122+
}
123+
{
124+
(downloadStatus === DownloadStatus.Success) && <div className={classnames(styles.downloadText, styles.downloadTextSuccess)}>{i18n('connection.text.downloadSuccess')}</div>
125+
}
126+
127+
</div> : <div></div>
128+
}
129+
130+
<div
131+
className={styles.uploadCustomDrive}
132+
onClick={() => { setUploadDriverModal(true) }}
133+
>
134+
{i18n('connection.tips.customUpload')}
135+
</div>
136+
</div>
137+
<Modal
138+
destroyOnClose={true}
139+
title={i18n('connection.title.uploadDriver')}
140+
open={uploadDriverModal}
141+
onOk={() => { saveDriver() }}
142+
onCancel={() => { setUploadDriverModal(false) }}
143+
>
144+
<UploadDriver
145+
jdbcDriverClass={driverObj?.defaultDriverConfig?.jdbcDriverClass}
146+
formChange={formChange}
147+
databaseType={backfillData.type}
148+
></UploadDriver>
149+
</Modal>
150+
</div>
151+
})

‎chat2db-client/src/components/CreateConnection/components/XXXX_FN/index.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import '../../styles/var.less';
2+
3+
.box {
4+
}

‎chat2db-client/src/components/CreateConnection/components/XXXX_FN/index.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React, { memo } from 'react';
2+
import styles from './index.less';
3+
import classnames from 'classnames';
4+
5+
interface IProps {
6+
className?: string;
7+
}
8+
9+
export default memo<IProps>(function XXXX_FN(props) {
10+
const { className } = props
11+
return <div className={classnames(styles.box, className)}>
12+
13+
</div>
14+
})

0 commit comments

Comments
 (0)