form.vue.vm 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  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. #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 ( $subTables && $subTables.size() > 0 )
  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 * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'
  144. ## 特殊:树表专属逻辑
  145. #if ( $table.templateType == 2 )
  146. import { defaultProps, handleTree } from '@/utils/tree'
  147. #end
  148. ## 特殊:主子表专属逻辑
  149. #foreach ($subSimpleClassName in $subSimpleClassNames)
  150. import ${subSimpleClassName}Form from './components/${subSimpleClassName}Form.vue'
  151. #end
  152. const { t } = useI18n() // 国际化
  153. const message = useMessage() // 消息弹窗
  154. const dialogVisible = ref(false) // 弹窗的是否展示
  155. const dialogTitle = ref('') // 弹窗的标题
  156. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  157. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  158. const formData = ref({
  159. #foreach ($column in $columns)
  160. #if ($column.createOperation || $column.updateOperation)
  161. #if ($column.htmlType == "checkbox")
  162. $column.javaField: [],
  163. #else
  164. $column.javaField: undefined,
  165. #end
  166. #end
  167. #end
  168. })
  169. const formRules = reactive({
  170. #foreach ($column in $columns)
  171. #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
  172. #set($comment=$column.columnComment)
  173. $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
  174. #end
  175. #end
  176. })
  177. const formRef = ref() // 表单 Ref
  178. ## 特殊:树表专属逻辑
  179. #if ( $table.templateType == 2 )
  180. const ${classNameVar}Tree = ref() // 树形结构
  181. #end
  182. ## 特殊:主子表专属逻辑
  183. #if ( $subTables && $subTables.size() > 0 )
  184. /** 子表的表单 */
  185. const subTabsName = ref('$subClassNameVars.get(0)')
  186. #foreach ($subClassNameVar in $subClassNameVars)
  187. const ${subClassNameVar}FormRef = ref()
  188. #end
  189. #end
  190. /** 打开弹窗 */
  191. const open = async (type: string, id?: number) => {
  192. dialogVisible.value = true
  193. dialogTitle.value = t('action.' + type)
  194. formType.value = type
  195. resetForm()
  196. // 修改时,设置数据
  197. if (id) {
  198. formLoading.value = true
  199. try {
  200. formData.value = await ${simpleClassName}Api.get${simpleClassName}(id)
  201. } finally {
  202. formLoading.value = false
  203. }
  204. }
  205. ## 特殊:树表专属逻辑
  206. #if ( $table.templateType == 2 )
  207. await get${simpleClassName}Tree()
  208. #end
  209. }
  210. defineExpose({ open }) // 提供 open 方法,用于打开弹窗
  211. /** 提交表单 */
  212. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  213. const submitForm = async () => {
  214. // 校验表单
  215. await formRef.value.validate()
  216. ## 特殊:主子表专属逻辑
  217. #if ( $subTables && $subTables.size() > 0 )
  218. // 校验子表单
  219. #foreach ($subTable in $subTables)
  220. #set ($index = $foreach.count - 1)
  221. #set ($subClassNameVar = $subClassNameVars.get($index))
  222. try {
  223. await ${subClassNameVar}FormRef.value.validate()
  224. } catch (e) {
  225. subTabsName.value = '${subClassNameVar}'
  226. return
  227. }
  228. #end
  229. #end
  230. // 提交请求
  231. formLoading.value = true
  232. try {
  233. const data = formData.value as unknown as ${simpleClassName}Api.${simpleClassName}VO
  234. ## 特殊:主子表专属逻辑
  235. #if ( $subTables && $subTables.size() > 0 )
  236. // 拼接子表的数据
  237. #foreach ($subTable in $subTables)
  238. #set ($index = $foreach.count - 1)
  239. #set ($subClassNameVar = $subClassNameVars.get($index))
  240. data.${subClassNameVar}#if ( $subTable.subJoinMany)s#end = ${subClassNameVar}FormRef.value.getData()
  241. #end
  242. #end
  243. if (formType.value === 'create') {
  244. await ${simpleClassName}Api.create${simpleClassName}(data)
  245. message.success(t('common.createSuccess'))
  246. } else {
  247. await ${simpleClassName}Api.update${simpleClassName}(data)
  248. message.success(t('common.updateSuccess'))
  249. }
  250. dialogVisible.value = false
  251. // 发送操作成功的事件
  252. emit('success')
  253. } finally {
  254. formLoading.value = false
  255. }
  256. }
  257. /** 重置表单 */
  258. const resetForm = () => {
  259. formData.value = {
  260. #foreach ($column in $columns)
  261. #if ($column.createOperation || $column.updateOperation)
  262. #if ($column.htmlType == "checkbox")
  263. $column.javaField: [],
  264. #else
  265. $column.javaField: undefined,
  266. #end
  267. #end
  268. #end
  269. }
  270. formRef.value?.resetFields()
  271. }
  272. ## 特殊:树表专属逻辑
  273. #if ( $table.templateType == 2 )
  274. /** 获得${table.classComment}树 */
  275. const get${simpleClassName}Tree = async () => {
  276. ${classNameVar}Tree.value = []
  277. const data = await ${simpleClassName}Api.get${simpleClassName}List()
  278. const root: Tree = { id: 0, name: '顶级${table.classComment}', children: [] }
  279. root.children = handleTree(data, 'id', '${treeParentColumn.javaField}')
  280. ${classNameVar}Tree.value.push(root)
  281. }
  282. #end
  283. </script>