Skip to content

Commit fee8245

Browse files
dlarmordlarmor
committed
重构：基础设施 -> 文件管理 文件配置
1 parent f1313b1 commit fee8245

File tree

3 files changed

+365
-340
lines changed

3 files changed

+365
-340
lines changed

‎src/views/infra/fileConfig/fileConfig.data.ts

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎src/views/infra/fileConfig/form.vue

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
<template>
2+
<Dialog :title="modelTitle" v-model="modelVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="120px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="配置名" prop="name">
11+
<el-input v-model="formData.name" placeholder="请输入配置名" />
12+
</el-form-item>
13+
<el-form-item label="备注" prop="remark">
14+
<el-input v-model="formData.remark" placeholder="请输入备注" />
15+
</el-form-item>
16+
<el-form-item label="存储器" prop="storage">
17+
<el-select
18+
v-model="formData.storage"
19+
placeholder="请选择存储器"
20+
:disabled="formData.id !== undefined"
21+
>
22+
<el-option
23+
v-for="dict in getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE)"
24+
:key="dict.value"
25+
:label="dict.label"
26+
:value="parseInt(dict.value)"
27+
/>
28+
</el-select>
29+
</el-form-item>
30+
<!-- DB -->
31+
<!-- Local / FTP / SFTP -->
32+
<el-form-item
33+
v-if="formData.storage >= 10 && formData.storage <= 12"
34+
label="基础路径"
35+
prop="config.basePath"
36+
>
37+
<el-input v-model="formData.config.basePath" placeholder="请输入基础路径" />
38+
</el-form-item>
39+
<el-form-item
40+
v-if="formData.storage >= 11 && formData.storage <= 12"
41+
label="主机地址"
42+
prop="config.host"
43+
>
44+
<el-input v-model="formData.config.host" placeholder="请输入主机地址" />
45+
</el-form-item>
46+
<el-form-item
47+
v-if="formData.storage >= 11 && formData.storage <= 12"
48+
label="主机端口"
49+
prop="config.port"
50+
>
51+
<el-input-number :min="0" v-model="formData.config.port" placeholder="请输入主机端口" />
52+
</el-form-item>
53+
<el-form-item
54+
v-if="formData.storage >= 11 && formData.storage <= 12"
55+
label="用户名"
56+
prop="config.username"
57+
>
58+
<el-input v-model="formData.config.username" placeholder="请输入密码" />
59+
</el-form-item>
60+
<el-form-item
61+
v-if="formData.storage >= 11 && formData.storage <= 12"
62+
label="密码"
63+
prop="config.password"
64+
>
65+
<el-input v-model="formData.config.password" placeholder="请输入密码" />
66+
</el-form-item>
67+
<el-form-item v-if="formData.storage === 11" label="连接模式" prop="config.mode">
68+
<el-radio-group v-model="formData.config.mode">
69+
<el-radio key="Active" label="Active">主动模式</el-radio>
70+
<el-radio key="Passive" label="Passive">主动模式</el-radio>
71+
</el-radio-group>
72+
</el-form-item>
73+
<!-- S3 -->
74+
<el-form-item v-if="formData.storage === 20" label="节点地址" prop="config.endpoint">
75+
<el-input v-model="formData.config.endpoint" placeholder="请输入节点地址" />
76+
</el-form-item>
77+
<el-form-item v-if="formData.storage === 20" label="存储 bucket" prop="config.bucket">
78+
<el-input v-model="formData.config.bucket" placeholder="请输入 bucket" />
79+
</el-form-item>
80+
<el-form-item v-if="formData.storage === 20" label="accessKey" prop="config.accessKey">
81+
<el-input v-model="formData.config.accessKey" placeholder="请输入 accessKey" />
82+
</el-form-item>
83+
<el-form-item v-if="formData.storage === 20" label="accessSecret" prop="config.accessSecret">
84+
<el-input v-model="formData.config.accessSecret" placeholder="请输入 accessSecret" />
85+
</el-form-item>
86+
<!-- 通用 -->
87+
<el-form-item v-if="formData.storage === 20" label="自定义域名">
88+
<!-- 无需参数校验，所以去掉 prop -->
89+
<el-input v-model="formData.config.domain" placeholder="请输入自定义域名" />
90+
</el-form-item>
91+
<el-form-item v-else-if="formData.storage" label="自定义域名" prop="config.domain">
92+
<el-input v-model="formData.config.domain" placeholder="请输入自定义域名" />
93+
</el-form-item>
94+
</el-form>
95+
<template #footer>
96+
<div class="dialog-footer">
97+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
98+
<el-button @click="modelVisible = false">取 消</el-button>
99+
</div>
100+
</template>
101+
</Dialog>
102+
</template>
103+
<script setup lang="ts">
104+
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
105+
import * as FileConfigApi from '@/api/infra/fileConfig'
106+
107+
const { t } = useI18n() // 国际化
108+
const message = useMessage() // 消息弹窗
109+
110+
const modelVisible = ref(false) // 弹窗的是否展示
111+
const modelTitle = ref('') // 弹窗的标题
112+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
113+
const formType = ref('') // 表单的类型：create - 新增；update - 修改
114+
const formData = ref({
115+
id: undefined,
116+
name: '',
117+
storage: '',
118+
remark: '',
119+
config: {}
120+
})
121+
const formRules = reactive({
122+
name: [{ required: true, message: '配置名不能为空', trigger: 'blur' }],
123+
storage: [{ required: true, message: '存储器不能为空', trigger: 'change' }],
124+
config: {
125+
basePath: [{ required: true, message: '基础路径不能为空', trigger: 'blur' }],
126+
host: [{ required: true, message: '主机地址不能为空', trigger: 'blur' }],
127+
port: [{ required: true, message: '主机端口不能为空', trigger: 'blur' }],
128+
username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
129+
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
130+
mode: [{ required: true, message: '连接模式不能为空', trigger: 'change' }],
131+
endpoint: [{ required: true, message: '节点地址不能为空', trigger: 'blur' }],
132+
bucket: [{ required: true, message: '存储 bucket 不能为空', trigger: 'blur' }],
133+
accessKey: [{ required: true, message: 'accessKey 不能为空', trigger: 'blur' }],
134+
accessSecret: [{ required: true, message: 'accessSecret 不能为空', trigger: 'blur' }],
135+
domain: [{ required: true, message: '自定义域名不能为空', trigger: 'blur' }]
136+
}
137+
})
138+
const formRef = ref() // 表单 Ref
139+
140+
/** 打开弹窗 */
141+
const openModal = async (type: string, id?: number) => {
142+
modelVisible.value = true
143+
modelTitle.value = t('action.' + type)
144+
formType.value = type
145+
resetForm()
146+
// 修改时，设置数据
147+
if (id) {
148+
formLoading.value = true
149+
try {
150+
formData.value = await FileConfigApi.getFileConfigApi(id)
151+
} finally {
152+
formLoading.value = false
153+
}
154+
}
155+
}
156+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
157+
158+
/** 提交表单 */
159+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
160+
const submitForm = async () => {
161+
// 校验表单
162+
if (!formRef) return
163+
const valid = await formRef.value.validate()
164+
if (!valid) return
165+
// 提交请求
166+
formLoading.value = true
167+
try {
168+
const data = formData.value as unknown as FileConfigApi.FileConfigVO
169+
if (formType.value === 'create') {
170+
await FileConfigApi.createFileConfigApi(data)
171+
message.success(t('common.createSuccess'))
172+
} else {
173+
await FileConfigApi.updateFileConfigApi(data)
174+
message.success(t('common.updateSuccess'))
175+
}
176+
modelVisible.value = false
177+
// 发送操作成功的事件
178+
emit('success')
179+
} finally {
180+
formLoading.value = false
181+
}
182+
}
183+
184+
/** 重置表单 */
185+
const resetForm = () => {
186+
formData.value = {
187+
id: undefined,
188+
name: '',
189+
storage: '',
190+
remark: '',
191+
config: {}
192+
}
193+
formRef.value?.resetFields()
194+
}
195+
</script>

0 commit comments

Comments
 (0)