工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-08-08 820397e43a0b64d35c6d31d2a55475061438593b
提交 | 用户 | 时间
820397 1 <template>
H 2   <Dialog v-model="dialogVisible" :title="dialogTitle">
3     <el-form
4       ref="formRef"
5       v-loading="formLoading"
6       :model="formData"
7       :rules="formRules"
8       label-width="120px"
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           :disabled="formData.id !== undefined"
20           placeholder="请选择存储器"
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 v-model="formData.config.port" :min="0" 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       <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
97       <el-button @click="dialogVisible = false">取 消</el-button>
98     </template>
99   </Dialog>
100 </template>
101 <script lang="ts" setup>
102 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
103 import * as FileConfigApi from '@/api/infra/fileConfig'
104 import { FormRules } from 'element-plus'
105
106 defineOptions({ name: 'InfraFileConfigForm' })
107
108 const { t } = useI18n() // 国际化
109 const message = useMessage() // 消息弹窗
110
111 const dialogVisible = ref(false) // 弹窗的是否展示
112 const dialogTitle = ref('') // 弹窗的标题
113 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
114 const formType = ref('') // 表单的类型：create - 新增；update - 修改
115 const formData = ref({
116   id: undefined,
117   name: '',
118   storage: 0,
119   remark: '',
120   config: {} as FileConfigApi.FileClientConfig
121 })
122 const formRules = reactive<FormRules>({
123   name: [{ required: true, message: '配置名不能为空', trigger: 'blur' }],
124   storage: [{ required: true, message: '存储器不能为空', trigger: 'change' }],
125   config: {
126     basePath: [{ required: true, message: '基础路径不能为空', trigger: 'blur' }],
127     host: [{ required: true, message: '主机地址不能为空', trigger: 'blur' }],
128     port: [{ required: true, message: '主机端口不能为空', trigger: 'blur' }],
129     username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
130     password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
131     mode: [{ required: true, message: '连接模式不能为空', trigger: 'change' }],
132     endpoint: [{ required: true, message: '节点地址不能为空', trigger: 'blur' }],
133     bucket: [{ required: true, message: '存储 bucket 不能为空', trigger: 'blur' }],
134     accessKey: [{ required: true, message: 'accessKey 不能为空', trigger: 'blur' }],
135     accessSecret: [{ required: true, message: 'accessSecret 不能为空', trigger: 'blur' }],
136     domain: [{ required: true, message: '自定义域名不能为空', trigger: 'blur' }]
137   } as FormRules
138 })
139 const formRef = ref() // 表单 Ref
140
141 /** 打开弹窗 */
142 const open = async (type: string, id?: number) => {
143   dialogVisible.value = true
144   dialogTitle.value = t('action.' + type)
145   formType.value = type
146   resetForm()
147   // 修改时，设置数据
148   if (id) {
149     formLoading.value = true
150     try {
151       formData.value = await FileConfigApi.getFileConfig(id)
152     } finally {
153       formLoading.value = false
154     }
155   }
156 }
157 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
158
159 /** 提交表单 */
160 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
161 const submitForm = async () => {
162   // 校验表单
163   if (!formRef) return
164   const valid = await formRef.value.validate()
165   if (!valid) return
166   // 提交请求
167   formLoading.value = true
168   try {
169     const data = formData.value as unknown as FileConfigApi.FileConfigVO
170     if (formType.value === 'create') {
171       await FileConfigApi.createFileConfig(data)
172       message.success(t('common.createSuccess'))
173     } else {
174       await FileConfigApi.updateFileConfig(data)
175       message.success(t('common.updateSuccess'))
176     }
177     dialogVisible.value = false
178     // 发送操作成功的事件
179     emit('success')
180   } finally {
181     formLoading.value = false
182   }
183 }
184
185 /** 重置表单 */
186 const resetForm = () => {
187   formData.value = {
188     id: undefined,
189     name: '',
190     storage: undefined!,
191     remark: '',
192     config: {} as FileConfigApi.FileClientConfig
193   }
194   formRef.value?.resetFields()
195 }
196 </script>