BJ_ZTEITS-Developers / parking-cloud-yudao

Commit e96f052a06cbaa59362a3de491115900be57f8f2

Authored by YunaiV
Committed by &wxr
1 parent d6227f77

代码生成：完善 Vue3 标准模版的表单

Inline Side-by-side
Showing 2 changed files with 166 additions and 52 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/form.vue.vm
  View file @e96f052
... ... @@ -7,63 +7,64 @@
7 7 label-width="100px"
8 8 v-loading="formLoading"
9 9 >
  10 +#set ($dictMethods = [])## 使用到的 dict 字典方法
10 11 #foreach($column in $columns)
11 12 #if ($column.createOperation || $column.updateOperation)
12 13 #set ($dictType = $column.dictType)
13 14 #set ($javaField = $column.javaField)
  15 + #set ($javaType = $column.javaType)
14 16 #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
15 17 #set ($comment = $column.columnComment)
16   - #set ($dictMethod = "getDictOptions") ## 计算使用哪个 dict 字典方法
17   - #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
18   - #set ($dictMethod = "getIntDictOptions")
19   - #elseif ($javaType == "String")
20   - #set ($dictMethod = "getStrDictOptions")
21   - #elseif ($javaType == "Boolean")
22   - #set ($dictMethod = "getBoolDictOptions")
23   - #end
24   - #if ($column.htmlType == "input" && !$column.primaryKey) ## 忽略主键，不用在表单里
  18 + #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
  19 + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
  20 + #set ($dictMethod = "getIntDictOptions")
  21 + #elseif ($javaType == "String")
  22 + #set ($dictMethod = "getStrDictOptions")
  23 + #elseif ($javaType == "Boolean")
  24 + #set ($dictMethod = "getBoolDictOptions")
  25 + #end
  26 + #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
25 27 <el-form-item label="${comment}" prop="${javaField}">
26   - <el-input v-model="form.${javaField}" placeholder="请输入${comment}" />
  28 + <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
27 29 </el-form-item>
28 30 #elseif($column.htmlType == "imageUpload")## 图片上传 TODO 芋艿：待测试
29 31 #set ($hasImageUploadColumn = true)
30 32 <el-form-item label="${comment}">
31   - <imageUpload v-model="form.${javaField}"/>
  33 + <imageUpload v-model="formData.${javaField}"/>
32 34 </el-form-item>
33 35 #elseif($column.htmlType == "fileUpload")## 文件上传 TODO 芋艿：待测试
34 36 #set ($hasFileUploadColumn = true)
35 37 <el-form-item label="${comment}">
36   - <fileUpload v-model="form.${javaField}"/>
  38 + <fileUpload v-model="formData.${javaField}"/>
37 39 </el-form-item>
38 40 #elseif($column.htmlType == "editor")## 文本编辑器 TODO 芋艿：待测试
39   - #set ($hasEditorColumn = true)
40   - <el-form-item label="${comment}">
41   - <editor v-model="form.${javaField}" :min-height="192"/>
42   - </el-form-item>
  41 + <el-form-item label="${comment}">
  42 + <Editor :model-value="formData.${javaField}" height="150px" />
  43 + </el-form-item>
43 44 #elseif($column.htmlType == "select")## 下拉框
44   - <el-form-item label="${comment}" prop="${javaField}">
45   - <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
  45 + <el-form-item label="${comment}" prop="${javaField}">
  46 + <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
46 47 #if ("" != $dictType)## 有数据字典
47   - #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
48   - #( $dictMethods.add($dictMethod) )
  48 + #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
  49 + #set($ignore = $dictMethods.add($dictMethod) )
49 50 #end
50   - <el-option
51   - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
52   - :key="dict.value"
53   - :label="dict.label"
54   - :value="dict.value"
55   - />
  51 + <el-option
  52 + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  53 + :key="dict.value"
  54 + :label="dict.label"
  55 + :value="dict.value"
  56 + />
56 57 #else##没数据字典
57   - <el-option label="请选择字典生成" value="" />
  58 + <el-option label="请选择字典生成" value="" />
58 59 #end
59   - </el-select>
60   - </el-form-item>
  60 + </el-select>
  61 + </el-form-item>
61 62 #elseif($column.htmlType == "checkbox")## 多选框 TODO 芋艿：待测试
62   - <el-form-item label="${comment}" prop="${javaField}">
63   - <el-checkbox-group v-model="form.${javaField}">
  63 + <el-form-item label="${comment}" prop="${javaField}">
  64 + <el-checkbox-group v-model="formData.${javaField}">
64 65 #if ("" != $dictType)## 有数据字典
65   - #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
66   - #( $dictMethods.add($dictMethod) )
  66 + #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
  67 + #set($ignore = $dictMethods.add($dictMethod) )
67 68 #end
68 69 <el-checkbox
69 70 v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
... ... @@ -72,35 +73,36 @@
72 73 {{dict.label}}
73 74 </el-checkbox>
74 75 #else##没数据字典
75   - <el-checkbox>请选择字典生成</el-checkbox>
  76 + <el-checkbox>请选择字典生成</el-checkbox>
76 77 #end
77   - </el-checkbox-group>
78   - </el-form-item>
  78 + </el-checkbox-group>
  79 + </el-form-item>
79 80 #elseif($column.htmlType == "radio")## 单选框
80   - <el-form-item label="${comment}" prop="${javaField}">
81   - <el-radio-group v-model="form.${javaField}">
  81 + <el-form-item label="${comment}" prop="${javaField}">
  82 + <el-radio-group v-model="formData.${javaField}">
82 83 #if ("" != $dictType)## 有数据字典
83   - #if (!$dictMethods.contains($dictMethod)) ## 如果不存在，则添加到 dictMethods 数组中，后续好 import
84   - #( $dictMethods.add($dictMethod) )
  84 + #if (!$dictMethods.contains($dictMethod))## 如果不存在，则添加到 dictMethods 数组中，后续好 import
  85 + #set($ignore = $dictMethods.add($dictMethod) )
85 86 #end
86   - <el-radio
87   - v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
88   - :key="dict.value"
89   - :label="dict.value">
90   - {{dict.label}}
91   - </el-radio>
  87 + <el-radio
  88 + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  89 + :key="dict.value"
  90 + :label="dict.value"
  91 + >
  92 + {{ dict.label }}
  93 + </el-radio>
92 94 #else##没数据字典
93   - <el-radio label="1">请选择字典生成</el-radio>
  95 + <el-radio label="1">请选择字典生成</el-radio>
94 96 #end
95   - </el-radio-group>
96   - </el-form-item>
  97 + </el-radio-group>
  98 + </el-form-item>
97 99 #elseif($column.htmlType == "datetime")## 时间框 TODO 芋艿：待测试
98 100 <el-form-item label="${comment}" prop="${javaField}">
99   - <el-date-picker clearable v-model="form.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
  101 + <el-date-picker clearable v-model="formData.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
100 102 </el-form-item>
101 103 #elseif($column.htmlType == "textarea")## 文本框 TODO 芋艿：待测试
102 104 <el-form-item label="${comment}" prop="${javaField}">
103   - <el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />
  105 + <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
104 106 </el-form-item>
105 107 #end
106 108 #end
... ... @@ -114,3 +116,115 @@
114 116 </template>
115 117 </Dialog>
116 118 </template>
  119 +<script setup lang="ts">
  120 +#if ($dictMethods.size() > 0)
  121 +import { DICT_TYPE#foreach ($dictMethod in $dictMethods), ${dictMethod}#end } from '@/utils/dict'
  122 +#end
  123 +import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
  124 +
  125 +const { t } = useI18n() // 国际化
  126 +const message = useMessage() // 消息弹窗
  127 +
  128 +const modelVisible = ref(false) // 弹窗的是否展示
  129 +const modelTitle = ref('') // 弹窗的标题
  130 +const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
  131 +const formType = ref('') // 表单的类型：create - 新增；update - 修改
  132 +const formData = ref({
  133 +#set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
  134 +#foreach ($column in $columns)
  135 + #if ($column.createOperation || $column.updateOperation)
  136 + #set ($listOperationLastIndex = $foreach.index)
  137 + #end
  138 +#end
  139 +#foreach ($column in $columns)
  140 + #if ($column.createOperation || $column.updateOperation)
  141 + #if ($column.htmlType == "checkbox")
  142 + $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
  143 + #else
  144 + $column.javaField: undefined#if($foreach.index < $listOperationLastIndex),#end
  145 + #end
  146 + #end
  147 +#end
  148 +})
  149 +const formRules = reactive({
  150 +#set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
  151 +#foreach ($column in $columns)
  152 + #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
  153 + #set ($listOperationLastIndex = $foreach.index)
  154 + #end
  155 +#end
  156 +#foreach ($column in $columns)
  157 + #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
  158 + #set($comment=$column.columnComment)
  159 + $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }]#if($foreach.index < $listOperationLastIndex),#end
  160 + #end
  161 +#end
  162 +})
  163 +const formRef = ref() // 表单 Ref
  164 +
  165 +/** 打开弹窗 */
  166 +const openModal = async (type: string, id?: number) => {
  167 + modelVisible.value = true
  168 + modelTitle.value = t('action.' + type)
  169 + formType.value = type
  170 + resetForm()
  171 + // 修改时，设置数据
  172 + if (id) {
  173 + formLoading.value = true
  174 + try {
  175 + formData.value = await ${simpleClassName}Api.get${simpleClassName}(id)
  176 + } finally {
  177 + formLoading.value = false
  178 + }
  179 + }
  180 +}
  181 +defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
  182 +
  183 +/** 提交表单 */
  184 +const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
  185 +const submitForm = async () => {
  186 + // 校验表单
  187 + if (!formRef) return
  188 + const valid = await formRef.value.validate()
  189 + if (!valid) return
  190 + // 提交请求
  191 + formLoading.value = true
  192 + try {
  193 + const data = formData.value as unknown as ${simpleClassName}Api.${simpleClassName}VO
  194 + if (formType.value === 'create') {
  195 + await ${simpleClassName}Api.create${simpleClassName}(data)
  196 + message.success(t('common.createSuccess'))
  197 + } else {
  198 + await ${simpleClassName}Api.update${simpleClassName}(data)
  199 + message.success(t('common.updateSuccess'))
  200 + }
  201 + modelVisible.value = false
  202 + // 发送操作成功的事件
  203 + emit('success')
  204 + } finally {
  205 + formLoading.value = false
  206 + }
  207 +}
  208 +
  209 +/** 重置表单 */
  210 +const resetForm = () => {
  211 + formData.value = {
  212 +#set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
  213 +#foreach ($column in $columns)
  214 + #if ($column.createOperation || $column.updateOperation)
  215 + #set ($listOperationLastIndex = $foreach.index)
  216 + #end
  217 +#end
  218 +#foreach ($column in $columns)
  219 + #if ($column.createOperation || $column.updateOperation)
  220 + #if ($column.htmlType == "checkbox")
  221 + $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
  222 + #else
  223 + $column.javaField: undefined#if($foreach.index < $listOperationLastIndex),#end
  224 + #end
  225 + #end
  226 +#end
  227 + }
  228 + formRef.value?.resetFields()
  229 +}
  230 +</script>
... ...
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3/views/index.vue.vm
  View file @e96f052
... ... @@ -92,7 +92,7 @@
92 92 <el-form-item>
93 93 <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
94 94 <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
95   - #if ($permissionPrefix <= 14)
  95 + #if ($permissionPrefix.length() < 15)
96 96 <el-button type="primary" @click="openModal('create')" v-hasPermi="['${permissionPrefix}:create']">
97 97 #else
98 98 <el-button
... ...