form.vue.vm 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <template>
  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. #set ($dictMethods = [])## 使用到的 dict 字典方法
  11. #foreach($column in $columns)
  12. #if ($column.createOperation || $column.updateOperation)
  13. #set ($dictType = $column.dictType)
  14. #set ($javaField = $column.javaField)
  15. #set ($javaType = $column.javaType)
  16. #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
  17. #set ($comment = $column.columnComment)
  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)## 忽略主键,不用在表单里
  27. <el-form-item label="${comment}" prop="${javaField}">
  28. <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
  29. </el-form-item>
  30. #elseif($column.htmlType == "imageUpload")## 图片上传
  31. #set ($hasImageUploadColumn = true)
  32. <el-form-item label="${comment}">
  33. <UploadImg v-model="formData.${javaField}" />
  34. </el-form-item>
  35. #elseif($column.htmlType == "fileUpload")## 文件上传
  36. #set ($hasFileUploadColumn = true)
  37. <el-form-item label="${comment}">
  38. <UploadFile v-model="formData.${javaField}" />
  39. </el-form-item>
  40. #elseif($column.htmlType == "editor")## 文本编辑器
  41. <el-form-item label="${comment}">
  42. <Editor v-model="formData.${javaField}" height="150px" />
  43. </el-form-item>
  44. #elseif($column.htmlType == "select")## 下拉框
  45. <el-form-item label="${comment}" prop="${javaField}">
  46. <el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
  47. #if ("" != $dictType)## 有数据字典
  48. #if (!$dictMethods.contains($dictMethod))## 如果不存在,则添加到 dictMethods 数组中,后续好 import
  49. #set($ignore = $dictMethods.add($dictMethod) )
  50. #end
  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. />
  57. #else##没数据字典
  58. <el-option label="请选择字典生成" value="" />
  59. #end
  60. </el-select>
  61. </el-form-item>
  62. #elseif($column.htmlType == "checkbox")## 多选框
  63. <el-form-item label="${comment}" prop="${javaField}">
  64. <el-checkbox-group v-model="formData.${javaField}">
  65. #if ("" != $dictType)## 有数据字典
  66. #if (!$dictMethods.contains($dictMethod))## 如果不存在,则添加到 dictMethods 数组中,后续好 import
  67. #set($ignore = $dictMethods.add($dictMethod) )
  68. #end
  69. <el-checkbox
  70. v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  71. :key="dict.value"
  72. :label="dict.value"
  73. >
  74. {{ dict.label }}
  75. </el-checkbox>
  76. #else##没数据字典
  77. <el-checkbox>请选择字典生成</el-checkbox>
  78. #end
  79. </el-checkbox-group>
  80. </el-form-item>
  81. #elseif($column.htmlType == "radio")## 单选框
  82. <el-form-item label="${comment}" prop="${javaField}">
  83. <el-radio-group v-model="formData.${javaField}">
  84. #if ("" != $dictType)## 有数据字典
  85. #if (!$dictMethods.contains($dictMethod))## 如果不存在,则添加到 dictMethods 数组中,后续好 import
  86. #set($ignore = $dictMethods.add($dictMethod) )
  87. #end
  88. <el-radio
  89. v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
  90. :key="dict.value"
  91. :label="dict.value"
  92. >
  93. {{ dict.label }}
  94. </el-radio>
  95. #else##没数据字典
  96. <el-radio label="1">请选择字典生成</el-radio>
  97. #end
  98. </el-radio-group>
  99. </el-form-item>
  100. #elseif($column.htmlType == "datetime")## 时间框
  101. <el-form-item label="${comment}" prop="${javaField}">
  102. <el-date-picker
  103. v-model="formData.${javaField}"
  104. type="date"
  105. value-format="x"
  106. placeholder="选择${comment}"
  107. />
  108. </el-form-item>
  109. #elseif($column.htmlType == "textarea")## 文本框
  110. <el-form-item label="${comment}" prop="${javaField}">
  111. <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
  112. </el-form-item>
  113. #end
  114. #end
  115. #end
  116. </el-form>
  117. <template #footer>
  118. <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
  119. <el-button @click="dialogVisible = false">取 消</el-button>
  120. </template>
  121. </Dialog>
  122. </template>
  123. <script setup lang="ts">
  124. #if ($dictMethods.size() > 0)
  125. import { DICT_TYPE#foreach ($dictMethod in $dictMethods), ${dictMethod}#end } from '@/utils/dict'
  126. #end
  127. import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
  128. const { t } = useI18n() // 国际化
  129. const message = useMessage() // 消息弹窗
  130. const dialogVisible = ref(false) // 弹窗的是否展示
  131. const dialogTitle = ref('') // 弹窗的标题
  132. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  133. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  134. const formData = ref({
  135. #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
  136. #foreach ($column in $columns)
  137. #if ($column.createOperation || $column.updateOperation)
  138. #set ($listOperationLastIndex = $foreach.index)
  139. #end
  140. #end
  141. #foreach ($column in $columns)
  142. #if ($column.createOperation || $column.updateOperation)
  143. #if ($column.htmlType == "checkbox")
  144. $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
  145. #else
  146. $column.javaField: undefined#if($foreach.index < $listOperationLastIndex),#end
  147. #end
  148. #end
  149. #end
  150. })
  151. const formRules = reactive({
  152. #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
  153. #foreach ($column in $columns)
  154. #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
  155. #set ($listOperationLastIndex = $foreach.index)
  156. #end
  157. #end
  158. #foreach ($column in $columns)
  159. #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
  160. #set($comment=$column.columnComment)
  161. $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }]#if($foreach.index < $listOperationLastIndex),#end
  162. #end
  163. #end
  164. })
  165. const formRef = ref() // 表单 Ref
  166. /** 打开弹窗 */
  167. const open = async (type: string, id?: number) => {
  168. dialogVisible.value = true
  169. dialogTitle.value = t('action.' + type)
  170. formType.value = type
  171. resetForm()
  172. // 修改时,设置数据
  173. if (id) {
  174. formLoading.value = true
  175. try {
  176. formData.value = await ${simpleClassName}Api.get${simpleClassName}(id)
  177. } finally {
  178. formLoading.value = false
  179. }
  180. }
  181. }
  182. defineExpose({ open }) // 提供 open 方法,用于打开弹窗
  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. dialogVisible.value = false
  202. // 发送操作成功的事件
  203. emit('success')
  204. } finally {
  205. formLoading.value = false
  206. }
  207. }
  208. /** 重置表单 */
  209. const resetForm = () => {
  210. formData.value = {
  211. #set ($listOperationLastIndex = -1)## 求最后一个需要 , 的地方
  212. #foreach ($column in $columns)
  213. #if ($column.createOperation || $column.updateOperation)
  214. #set ($listOperationLastIndex = $foreach.index)
  215. #end
  216. #end
  217. #foreach ($column in $columns)
  218. #if ($column.createOperation || $column.updateOperation)
  219. #if ($column.htmlType == "checkbox")
  220. $column.javaField: []#if($foreach.index < $listOperationLastIndex),#end
  221. #else
  222. $column.javaField: undefined#if($foreach.index < $listOperationLastIndex),#end
  223. #end
  224. #end
  225. #end
  226. }
  227. formRef.value?.resetFields()
  228. }
  229. </script>