工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
2024-10-28 e370f07f4b785f50e3820eecb0a440520562fe94
提交 | 用户 | 时间
9ec4bd 1 <template>
潘 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="80px"
9     >
10       <el-row :gutter="8">
11         <el-col :span="12">
12           <el-form-item label="key" prop="settingKey">
13             <el-input v-model="formData.settingKey" placeholder=""/>
14           </el-form-item>
15         </el-col>
16         <el-col :span="12">
17           <el-form-item label="参数名称" prop="name">
18             <el-input v-model="formData.name" placeholder=""/>
19           </el-form-item>
20         </el-col>
21       </el-row>
22       <el-row :gutter="8">
23         <el-col :span="12">
24           <el-form-item label="输入类型" prop="type">
25             <el-select v-model="formData.type" @change="typeChange">
26               <el-option
27                 v-for="item in getDictOptions(DICT_TYPE.MODEL_METHOD_SETTING_TYPE)"
28                 :key="item.value"
29                 :label="item.label"
30                 :value="item.value"
31               />
32             </el-select>
33           </el-form-item>
34         </el-col>
35         <el-col :span="12">
36           <el-form-item label="参数类型" prop="valueType">
37             <el-select v-model="formData.valueType">
38               <el-option
39                 v-for="item in getDictOptions(DICT_TYPE.MODEL_METHOD_SETTING_VALUE_TYPE)"
40                 :key="item.value"
41                 :label="item.label"
42                 :value="item.value"
43                 :disabled="valueTypeSelectDisabled(item.value)"
44               />
45             </el-select>
46           </el-form-item>
47         </el-col>
48       </el-row>
49       <div v-if="formData.type === 'input'">
50         <el-row :gutter="8">
51           <el-col :span="8">
52             <el-form-item label="默认值" prop="value">
53               <el-input v-model="formData.value" placeholder=""/>
54             </el-form-item>
55           </el-col>
56           <el-col :span="8">
57             <el-form-item label="最大值" prop="max">
58               <el-input-number v-model="formData.max" placeholder=""/>
59             </el-form-item>
60           </el-col>
61           <el-col :span="8">
62             <el-form-item label="最小值" prop="min">
63               <el-input-number v-model="formData.min" placeholder=""/>
64             </el-form-item>
65           </el-col>
66         </el-row>
67       </div>
68       <div v-if="formData.type === 'select'">
69         <el-divider content-position="left">选项信息</el-divider>
70         <el-row :gutter="8">
71           <el-col :span="4">
72             <el-button type="primary" size="small" @click="addRow()">新增</el-button>
73           </el-col>
74         </el-row>
75         <el-table :data="formData.settingSelects" border>
76           <el-table-column
77             prop=""
78             label="key"
79             align="center">
80             <template #default="scope">
81               <el-input size="small" v-model="scope.row.selectKey" maxlength="50" clearable />
82             </template>
83           </el-table-column>
84           <el-table-column
85             prop=""
86             label="name"
87             align="center">
88             <template #default="scope">
89               <el-input size="small" v-model="scope.row.name" maxlength="50" clearable />
90             </template>
91           </el-table-column>
92           <el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
93             <template #default="scope">
94               <el-button
95                 @click="deleteRow(scope.$index)"
96                 key="danger"
97                 type="danger"
98                 link
99               >删除</el-button>
100             </template>
101           </el-table-column>
102         </el-table>
103       </div>
104     </el-form>
105     <template #footer>
106       <el-button type="primary" @click="submitForm">确 定</el-button>
107       <el-button @click="dialogVisible = false">取 消</el-button>
108     </template>
109   </Dialog>
110 </template>
111 <script lang="ts" setup>
112   import {DICT_TYPE,getDictOptions} from '@/utils/dict';
aff5c9 113   import * as ProjectApi from '@/api/model/mpk/project'
潘 114   import * as MpkApi from '@/api/model/mpk/mpk'
9ec4bd 115   import {FormRules} from 'element-plus'
潘 116   import {generateUUID} from "@/utils";
117   import {func} from "vue-types";
118
119
120   const {t} = useI18n() // 国际化
121   const message = useMessage() // 消息弹窗
122
123   const dialogVisible = ref(false) // 弹窗的是否展示
124   const dialogTitle = ref('参数设置') // 弹窗的标题
125   const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
126   const formData = ref({
127     settingKey: undefined,
128     name: undefined,
129     type: undefined,
130     valueType: undefined,
131     value: undefined,
132     max: undefined,
133     min: undefined,
134     settingSelects: []
135   })
136
137
138   const formRules = reactive<FormRules>({
139     settingKey: [
140       {required: true, message: 'key不能为空', trigger: 'blur'},
141     ],
142     name: [
143       {required: true, message: '参数名称不能为空', trigger: 'blur'},
144     ],
145     type: [
146       {required: true, message: '输入类型不能为空', trigger: 'blur'},
147     ],
148     valueType: [
149       {required: true, message: '参数类型不能为空', trigger: 'blur'},
150     ]
151   })
152
153   const formRef = ref() // 表单 Ref
154
155   let methodSettingsRef = undefined
156   let infoRef = undefined
157   /** 打开弹窗 */
158   const open = async (info,methodSettings) => {
159     dialogVisible.value = true
160     resetForm()
161     // 修改时，设置数据
162     if (info) {
163       infoRef = info
164       formLoading.value = true
165       try {
166         formData.value = {...info}
167       } finally {
168         formLoading.value = false
169       }
170     }else {
171       methodSettingsRef = methodSettings
172     }
173   }
174   defineExpose({open}) // 提供 open 方法，用于打开弹窗
175
176
177   // 数据回调
178   const emit = defineEmits(['addSettingCallback'])
179   /** 提交表单 */
180   const submitForm = async () => {
181     // 校验表单
182     if (!formRef) return
183     const valid = await formRef.value.validate()
184     if (!valid) return
185
186     //校验select
187     if (formData.value.type === 'select') {
188       if (formData.value.settingSelects?.length === 0) {
189         message.error('选项为空');
190         return
191       }
192     }
193
194     // 提交请求
195     formLoading.value = true
196     try {
197       if (infoRef) {
198         // 修改
199         for (let key in formData.value) {
200           infoRef[key] = formData.value[key];
201         }
631da1 202         infoRef = undefined;
9ec4bd 203       }else {
潘 204         // 新增
205         methodSettingsRef.push({...formData.value})
206       }
207       dialogVisible.value = false
208     } finally {
209       formLoading.value = false
210     }
211   }
212
213   /** 重置表单 */
214   const resetForm = () => {
215     formData.value = {
216       settingKey: undefined,
217       name: undefined,
218       type: undefined,
219       valueType: undefined,
220       value: undefined,
221       max: undefined,
222       min: undefined,
223       settingSelects: []
224     }
225     formRef.value?.resetFields()
226   }
227
228   const valueTypeSelectDisabled = (value) => {
229     const type = formData.value.type;
230     switch (type) {
231       case "input":
232         if (['int','decimal','decimalArray','string'].includes(value)) {
233           return false
234         }else {
235           return true
236         }
237       case "file":
238         if (['file'].includes(value)) {
239           return false
240         }else {
241           return true
242         }
243       case "select":
244         if (['int','string'].includes(value)) {
245           return false
246         }else {
247           return true
248         }
249       default :
250         return true
251     }
252   }
253
254   const typeChange = () => {
255     formData.value.valueType = undefined
256     formData.value.value = undefined
257     formData.value.max = undefined
258     formData.value.min = undefined
259     formData.value.settingSelects = []
260   }
261
262   const addRow = function () {
263     formData.value.settingSelects.push({
264       selectKey: '',
265       name: ''
266     })
267   }
268   const deleteRow = function (index) {
269     formData.value.settingSelects.splice(index, 1)
270   }
271 </script>