工业互联网平台
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-08-02 d141aee7ec84d3578a19be8c26f10759c1e557b4
提交 | 用户 | 时间
e7c126 1 <template>
H 2   <Dialog :title="dialogTitle" v-model="dialogVisible">
3     <el-form
4       ref="formRef"
5       :model="formData"
6       :rules="formRules"
7       label-width="100px"
8       v-loading="formLoading"
9     >
10 #foreach($column in $columns)
11     #if ($column.createOperation || $column.updateOperation)
12         #set ($dictType = $column.dictType)
13         #set ($javaField = $column.javaField)
14         #set ($javaType = $column.javaType)
15         #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
16         #set ($comment = $column.columnComment)
17         #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
18         #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
19             #set ($dictMethod = "getIntDictOptions")
20         #elseif ($javaType == "String")
21             #set ($dictMethod = "getStrDictOptions")
22         #elseif ($javaType == "Boolean")
23             #set ($dictMethod = "getBoolDictOptions")
24         #end
25         #if ( $table.templateType == 2 && $column.id == $treeParentColumn.id )
26       <el-form-item label="${comment}" prop="${javaField}">
27         <el-tree-select
28           v-model="formData.${javaField}"
29           :data="${classNameVar}Tree"
30           #if ($treeNameColumn.javaField == "name")
31           :props="defaultProps"
32           #else
33           :props="{...defaultProps, label: '$treeNameColumn.javaField'}"
34           #end
35           check-strictly
36           default-expand-all
37           placeholder="请选择${comment}"
38         />
39       </el-form-item>
40         #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
41       <el-form-item label="${comment}" prop="${javaField}">
42         <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
43       </el-form-item>
44         #elseif($column.htmlType == "imageUpload")## 图片上传
45       <el-form-item label="${comment}" prop="${javaField}">
46         <UploadImg v-model="formData.${javaField}" />
47       </el-form-item>
48         #elseif($column.htmlType == "fileUpload")## 文件上传
49       <el-form-item label="${comment}" prop="${javaField}">
50         <UploadFile v-model="formData.${javaField}" />
51       </el-form-item>
52         #elseif($column.htmlType == "editor")## 文本编辑器
53       <el-form-item label="${comment}" prop="${javaField}">
54         <Editor v-model="formData.${javaField}" height="150px" />
55       </el-form-item>
56         #elseif($column.htmlType == "select")## 下拉框
57       <el-form-item label="${comment}" prop="${javaField}">
58         <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
59                 #if ("" != $dictType)## 有数据字典
60           <el-option
61             v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
62             :key="dict.value"
63             :label="dict.label"
64             :value="dict.value"
65           />
66                 #else##没数据字典
67           <el-option label="请选择字典生成" value="" />
68                 #end
69         </el-select>
70       </el-form-item>
71         #elseif($column.htmlType == "checkbox")## 多选框
72       <el-form-item label="${comment}" prop="${javaField}">
73         <el-checkbox-group v-model="formData.${javaField}">
74                 #if ("" != $dictType)## 有数据字典
75           <el-checkbox
76             v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
77             :key="dict.value"
78             :label="dict.value"
79           >
80             {{ dict.label }}
81           </el-checkbox>
82                 #else##没数据字典
83           <el-checkbox>请选择字典生成</el-checkbox>
84                 #end
85         </el-checkbox-group>
86       </el-form-item>
87         #elseif($column.htmlType == "radio")## 单选框
88       <el-form-item label="${comment}" prop="${javaField}">
89         <el-radio-group v-model="formData.${javaField}">
90                 #if ("" != $dictType)## 有数据字典
91           <el-radio
92             v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
93             :key="dict.value"
94             :label="dict.value"
95           >
96             {{ dict.label }}
97           </el-radio>
98                 #else##没数据字典
99           <el-radio label="1">请选择字典生成</el-radio>
100                 #end
101         </el-radio-group>
102       </el-form-item>
103         #elseif($column.htmlType == "datetime")## 时间框
104       <el-form-item label="${comment}" prop="${javaField}">
105         <el-date-picker
106           v-model="formData.${javaField}"
107           type="date"
108           value-format="x"
109           placeholder="选择${comment}"
110         />
111       </el-form-item>
112         #elseif($column.htmlType == "textarea")## 文本框
113       <el-form-item label="${comment}" prop="${javaField}">
114         <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
115       </el-form-item>
116         #end
117     #end
118 #end
119     </el-form>
120 ## 特殊：主子表专属逻辑
121 #if ( $table.templateType == 10 || $table.templateType == 12 )
122     <!-- 子表的表单 -->
123     <el-tabs v-model="subTabsName">
124     #foreach ($subTable in $subTables)
125       #set ($index = $foreach.count - 1)
126       #set ($subClassNameVar = $subClassNameVars.get($index))
127       #set ($subSimpleClassName = $subSimpleClassNames.get($index))
128       #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
129       <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar">
130         <${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData.id" />
131       </el-tab-pane>
132     #end
133     </el-tabs>
134 #end
135     <template #footer>
136       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
137       <el-button @click="dialogVisible = false">取 消</el-button>
138     </template>
139   </Dialog>
140 </template>
141 <script setup lang="ts">
142 import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
143 import { ${simpleClassName}Api, ${simpleClassName}VO } from '@/api/${table.moduleName}/${table.businessName}'
144 ## 特殊：树表专属逻辑
145 #if ( $table.templateType == 2 )
146 import { defaultProps, handleTree } from '@/utils/tree'
147 #end
148 ## 特殊：主子表专属逻辑
149 #if ( $table.templateType == 10 || $table.templateType == 12 )
150 #foreach ($subSimpleClassName in $subSimpleClassNames)
151 import ${subSimpleClassName}Form from './components/${subSimpleClassName}Form.vue'
152 #end
153 #end
154
155 /** ${table.classComment} 表单 */
156 defineOptions({ name: '${simpleClassName}Form' })
157
158 const { t } = useI18n() // 国际化
159 const message = useMessage() // 消息弹窗
160
161 const dialogVisible = ref(false) // 弹窗的是否展示
162 const dialogTitle = ref('') // 弹窗的标题
163 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
164 const formType = ref('') // 表单的类型：create - 新增；update - 修改
165 const formData = ref({
166 #foreach ($column in $columns)
167     #if ($column.createOperation || $column.updateOperation)
168       #if ($column.htmlType == "checkbox")
169   $column.javaField: [],
170       #else
171   $column.javaField: undefined,
172       #end
173     #end
174 #end
175 })
176 const formRules = reactive({
177 #foreach ($column in $columns)
178     #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
179         #set($comment=$column.columnComment)
180   $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
181     #end
182 #end
183 })
184 const formRef = ref() // 表单 Ref
185 ## 特殊：树表专属逻辑
186 #if ( $table.templateType == 2 )
187 const ${classNameVar}Tree = ref() // 树形结构
188 #end
189 ## 特殊：主子表专属逻辑
190 #if ( $table.templateType == 10 || $table.templateType == 12 )
191 #if ( $subTables && $subTables.size() > 0 )
192
193 /** 子表的表单 */
194 const subTabsName = ref('$subClassNameVars.get(0)')
195 #foreach ($subClassNameVar in $subClassNameVars)
196 const ${subClassNameVar}FormRef = ref()
197 #end
198 #end
199 #end
200
201 /** 打开弹窗 */
202 const open = async (type: string, id?: number) => {
203   dialogVisible.value = true
204   dialogTitle.value = t('action.' + type)
205   formType.value = type
206   resetForm()
207   // 修改时，设置数据
208   if (id) {
209     formLoading.value = true
210     try {
211       formData.value = await ${simpleClassName}Api.get${simpleClassName}(id)
212     } finally {
213       formLoading.value = false
214     }
215   }
216 ## 特殊：树表专属逻辑
217 #if ( $table.templateType == 2 )
218   await get${simpleClassName}Tree()
219 #end
220 }
221 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
222
223 /** 提交表单 */
224 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
225 const submitForm = async () => {
226   // 校验表单
227   await formRef.value.validate()
228 ## 特殊：主子表专属逻辑
229 #if ( $table.templateType == 10 || $table.templateType == 12 )
230 #if ( $subTables && $subTables.size() > 0 )
231   // 校验子表单
232   #foreach ($subTable in $subTables)
233   #set ($index = $foreach.count - 1)
234   #set ($subClassNameVar = $subClassNameVars.get($index))
235   try {
236     await ${subClassNameVar}FormRef.value.validate()
237   } catch (e) {
238     subTabsName.value = '${subClassNameVar}'
239     return
240   }
241   #end
242 #end
243 #end
244   // 提交请求
245   formLoading.value = true
246   try {
247     const data = formData.value as unknown as ${simpleClassName}VO
248 ## 特殊：主子表专属逻辑
249 #if ( $table.templateType == 10 || $table.templateType == 12 )
250 #if ( $subTables && $subTables.size() > 0 )
251     // 拼接子表的数据
252   #foreach ($subTable in $subTables)
253   #set ($index = $foreach.count - 1)
254   #set ($subClassNameVar = $subClassNameVars.get($index))
255     data.${subClassNameVar}#if ( $subTable.subJoinMany)s#end = ${subClassNameVar}FormRef.value.getData()
256   #end
257 #end
258 #end
259     if (formType.value === 'create') {
260       await ${simpleClassName}Api.create${simpleClassName}(data)
261       message.success(t('common.createSuccess'))
262     } else {
263       await ${simpleClassName}Api.update${simpleClassName}(data)
264       message.success(t('common.updateSuccess'))
265     }
266     dialogVisible.value = false
267     // 发送操作成功的事件
268     emit('success')
269   } finally {
270     formLoading.value = false
271   }
272 }
273
274 /** 重置表单 */
275 const resetForm = () => {
276   formData.value = {
277 #foreach ($column in $columns)
278   #if ($column.createOperation || $column.updateOperation)
279       #if ($column.htmlType == "checkbox")
280     $column.javaField: [],
281       #else
282     $column.javaField: undefined,
283       #end
284   #end
285 #end
286   }
287   formRef.value?.resetFields()
288 }
289 ## 特殊：树表专属逻辑
290 #if ( $table.templateType == 2 )
291
292 /** 获得${table.classComment}树 */
293 const get${simpleClassName}Tree = async () => {
294   ${classNameVar}Tree.value = []
295   const data = await ${simpleClassName}Api.get${simpleClassName}List()
296   const root: Tree = { id: 0, name: '顶级${table.classComment}', children: [] }
297   root.children = handleTree(data, 'id', '${treeParentColumn.javaField}')
298   ${classNameVar}Tree.value.push(root)
299 }
300 #end
301 </script>