Commit 3923189887da1cf4bb8a44b7d95bee00544c818f
1 parent
e704f4c7
【功能新增】代码生成: vue3_vben5_antd schema 主子表
Showing
9 changed files
with
1021 additions
and
10 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/java/cn/iocoder/yudao/module/infra/service/codegen/inner/CodegenEngine.java
| ... | ... | @@ -154,15 +154,16 @@ public class CodegenEngine { |
| 154 | 154 | vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/form.vue")) |
| 155 | 155 | .put(CodegenFrontTypeEnum.VUE3_VBEN5_ANTD_SCHEMA.getType(), vue3Vben5AntdSchemaTemplatePath("api/api.ts"), |
| 156 | 156 | vue3FilePath("api/${table.moduleName}/${table.businessName}/index.ts")) |
| 157 | - // 主子表模板配置 - Vue3 vben5 schema 模版 | |
| 158 | - //.put(CodegenFrontTypeEnum.VUE3_VBEN_NEXT_SCHEMA.getType(), vue3VbenNextSchemaTemplatePath("views/master_slave_data.ts"), | |
| 159 | - // vue3FilePath("views/${table.moduleName}/${table.businessName}/data.ts")) | |
| 160 | - //.put(CodegenFrontTypeEnum.VUE3_VBEN_NEXT_SCHEMA.getType(), vue3VbenNextSchemaTemplatePath("views/master_slave_index.vue"), | |
| 161 | - // vue3FilePath("views/${table.moduleName}/${table.businessName}/index.vue")) | |
| 162 | - //.put(CodegenFrontTypeEnum.VUE3_VBEN_NEXT_SCHEMA.getType(), vue3VbenNextSchemaTemplatePath("views/modules/master_slave_form.vue"), | |
| 163 | - // vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/form.vue")) | |
| 164 | - //.put(CodegenFrontTypeEnum.VUE3_VBEN_NEXT_SCHEMA.getType(), vue3VbenNextSchemaTemplatePath("views/modules/sub_table.vue"), | |
| 165 | - // vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/sub_table.vue")) | |
| 157 | + .put(CodegenFrontTypeEnum.VUE3_VBEN5_ANTD_SCHEMA.getType(), vue3Vben5AntdSchemaTemplatePath("views/modules/form_sub_normal.vue"), // 特殊:主子表专属逻辑 | |
| 158 | + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName}Form.vue")) | |
| 159 | + .put(CodegenFrontTypeEnum.VUE3_VBEN5_ANTD_SCHEMA.getType(), vue3Vben5AntdSchemaTemplatePath("views/modules/form_sub_inner.vue"), // 特殊:主子表专属逻辑 | |
| 160 | + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName}Form.vue")) | |
| 161 | + .put(CodegenFrontTypeEnum.VUE3_VBEN5_ANTD_SCHEMA.getType(), vue3Vben5AntdSchemaTemplatePath("views/modules/form_sub_erp.vue"), // 特殊:主子表专属逻辑 | |
| 162 | + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName}Form.vue")) | |
| 163 | + .put(CodegenFrontTypeEnum.VUE3_VBEN5_ANTD_SCHEMA.getType(), vue3Vben5AntdSchemaTemplatePath("views/modules/list_sub_inner.vue"), // 特殊:主子表专属逻辑 | |
| 164 | + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName}List.vue")) | |
| 165 | + .put(CodegenFrontTypeEnum.VUE3_VBEN5_ANTD_SCHEMA.getType(), vue3Vben5AntdSchemaTemplatePath("views/modules/list_sub_erp.vue"), // 特殊:主子表专属逻辑 | |
| 166 | + vue3FilePath("views/${table.moduleName}/${table.businessName}/modules/${subSimpleClassName}List.vue")) | |
| 166 | 167 | .build(); |
| 167 | 168 | |
| 168 | 169 | @Resource | ... | ... |
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/api/api.ts.vm
| ... | ... | @@ -20,7 +20,39 @@ export namespace ${simpleClassName}Api { |
| 20 | 20 | #if ( $table.templateType == 2 ) |
| 21 | 21 | children?: ${simpleClassName}[]; |
| 22 | 22 | #end |
| 23 | +## 特殊:主子表专属逻辑 | |
| 24 | +#if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 25 | + #foreach ($subTable in $subTables) | |
| 26 | + #set ($index = $foreach.count - 1) | |
| 27 | + #set ($subSimpleClassName = $subSimpleClassNames.get($index)) | |
| 28 | + #if ( $subTable.subJoinMany ) | |
| 29 | + ${subSimpleClassName.toLowerCase()}s?: ${subSimpleClassName}[] | |
| 30 | + #else | |
| 31 | + ${subSimpleClassName.toLowerCase()}?: ${subSimpleClassName} | |
| 32 | + #end | |
| 33 | + #end | |
| 34 | +#end | |
| 23 | 35 | } |
| 36 | +## 特殊:主子表专属逻辑 | |
| 37 | +#foreach ($subTable in $subTables) | |
| 38 | + #set ($index = $foreach.count - 1) | |
| 39 | + #set ($subSimpleClassName = $subSimpleClassNames.get($index)) | |
| 40 | + #set ($subColumns = $subColumnsList.get($index))##当前字段数组 | |
| 41 | + /** ${subTable.classComment}信息 */ | |
| 42 | + export interface ${subSimpleClassName} { | |
| 43 | + #foreach ($column in $subColumns) | |
| 44 | + #if ($column.createOperation || $column.updateOperation) | |
| 45 | + #if(${column.javaType.toLowerCase()} == "long" || ${column.javaType.toLowerCase()} == "integer" || ${column.javaType.toLowerCase()} == "short" || ${column.javaType.toLowerCase()} == "double" || ${column.javaType.toLowerCase()} == "bigdecimal") | |
| 46 | + ${column.javaField}#if($column.updateOperation && !$column.primaryKey && !$column.nullable)?#end: number; // ${column.columnComment} | |
| 47 | + #elseif(${column.javaType.toLowerCase()} == "date" || ${column.javaType.toLowerCase()} == "localdate" || ${column.javaType.toLowerCase()} == "localdatetime") | |
| 48 | + ${column.javaField}#if($column.updateOperation && !$column.primaryKey && !$column.nullable)?#end: Date; // ${column.columnComment} | |
| 49 | + #else | |
| 50 | + ${column.javaField}#if($column.updateOperation && !$column.primaryKey && !$column.nullable)?#end: ${column.javaType.toLowerCase()}; // ${column.columnComment} | |
| 51 | + #end | |
| 52 | + #end | |
| 53 | + #end | |
| 54 | + } | |
| 55 | +#end | |
| 24 | 56 | } |
| 25 | 57 | |
| 26 | 58 | #if ( $table.templateType != 2 ) | ... | ... |
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/data.ts.vm
| ... | ... | @@ -276,3 +276,167 @@ export function useGridColumns( |
| 276 | 276 | }, |
| 277 | 277 | ]; |
| 278 | 278 | } |
| 279 | + | |
| 280 | +// TODO @puhui999: 标准模式和内嵌模式时,主子关系一对一则生成表单schema,一对多则生成列表schema(内嵌模式时表单schema也要生成)。erp 模式时都生成 | |
| 281 | +## 特殊:主子表专属逻辑 | |
| 282 | +#foreach ($subTable in $subTables) | |
| 283 | + #set ($index = $foreach.count - 1) | |
| 284 | + #set ($subColumns = $subColumnsList.get($index))##当前字段数组 | |
| 285 | + #set ($subSimpleClassName = $subSimpleClassNames.get($index)) | |
| 286 | + #set ($subJoinColumn = $subJoinColumns.get($index))##当前 join 字段 | |
| 287 | +// ==================== 子表($subTable.classComment) ==================== | |
| 288 | +/** 新增/修改的表单 */ | |
| 289 | +export function use${subSimpleClassName}FormSchema(): VbenFormSchema[] { | |
| 290 | + return [ | |
| 291 | + { | |
| 292 | + fieldName: 'id', | |
| 293 | + component: 'Input', | |
| 294 | + dependencies: { | |
| 295 | + triggerFields: [''], | |
| 296 | + show: () => false, | |
| 297 | + }, | |
| 298 | + }, | |
| 299 | + #foreach($column in $subColumns) | |
| 300 | + #if ($column.createOperation || $column.updateOperation) | |
| 301 | + #if (!$column.primaryKey && ($table.templateType != 2 || ($table.templateType == 2 && $column.id != $treeParentColumn.id)))## 树表中已经添加了父ID字段,这里排除 | |
| 302 | + #set ($dictType = $column.dictType) | |
| 303 | + #set ($javaType = $column.javaType) | |
| 304 | + #set ($javaField = $column.javaField) | |
| 305 | + #set ($comment = $column.columnComment) | |
| 306 | + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short") | |
| 307 | + #set ($dictMethod = "number") | |
| 308 | + #elseif ($javaType == "String") | |
| 309 | + #set ($dictMethod = "string") | |
| 310 | + #elseif ($javaType == "Boolean") | |
| 311 | + #set ($dictMethod = "boolean") | |
| 312 | + #end | |
| 313 | + #if ( $column.id == $subJoinColumn.id) ## 特殊:忽略主子表的 join 字段,不用填写 | |
| 314 | + #else | |
| 315 | + { | |
| 316 | + fieldName: '${javaField}', | |
| 317 | + label: '${comment}', | |
| 318 | + #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 | |
| 319 | + rules: 'required', | |
| 320 | + #end | |
| 321 | + #if ($column.htmlType == "input") | |
| 322 | + component: 'Input', | |
| 323 | + componentProps: { | |
| 324 | + placeholder: '请输入${comment}', | |
| 325 | + }, | |
| 326 | + #elseif($column.htmlType == "imageUpload")## 图片上传 | |
| 327 | + component: 'FileUpload', | |
| 328 | + componentProps: { | |
| 329 | + fileType: 'image', | |
| 330 | + maxCount: 1, | |
| 331 | + }, | |
| 332 | + #elseif($column.htmlType == "fileUpload")## 文件上传 | |
| 333 | + component: 'FileUpload', | |
| 334 | + componentProps: { | |
| 335 | + fileType: 'file', | |
| 336 | + maxCount: 1, | |
| 337 | + }, | |
| 338 | + #elseif($column.htmlType == "editor")## 文本编辑器 | |
| 339 | + component: 'Editor', | |
| 340 | + #elseif($column.htmlType == "select")## 下拉框 | |
| 341 | + component: 'Select', | |
| 342 | + componentProps: { | |
| 343 | + #if ("" != $dictType)## 有数据字典 | |
| 344 | + options: getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod'), | |
| 345 | + #else##没数据字典 | |
| 346 | + options: [], | |
| 347 | + #end | |
| 348 | + placeholder: '请选择${comment}', | |
| 349 | + class: 'w-full', | |
| 350 | + }, | |
| 351 | + #elseif($column.htmlType == "checkbox")## 多选框 | |
| 352 | + component: 'Checkbox', | |
| 353 | + componentProps: { | |
| 354 | + #if ("" != $dictType)## 有数据字典 | |
| 355 | + options: getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod'), | |
| 356 | + #else##没数据字典 | |
| 357 | + options: [], | |
| 358 | + #end | |
| 359 | + }, | |
| 360 | + #elseif($column.htmlType == "radio")## 单选框 | |
| 361 | + component: 'RadioGroup', | |
| 362 | + componentProps: { | |
| 363 | + #if ("" != $dictType)## 有数据字典 | |
| 364 | + options: getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod'), | |
| 365 | + #else##没数据字典 | |
| 366 | + options: [], | |
| 367 | + #end | |
| 368 | + buttonStyle: 'solid', | |
| 369 | + optionType: 'button', | |
| 370 | + }, | |
| 371 | + #elseif($column.htmlType == "datetime")## 时间框 | |
| 372 | + component: 'DatePicker', | |
| 373 | + componentProps: { | |
| 374 | + showTime: true, | |
| 375 | + format: 'YYYY-MM-DD HH:mm:ss', | |
| 376 | + valueFormat: 'x', | |
| 377 | + }, | |
| 378 | + #elseif($column.htmlType == "textarea")## 文本域 | |
| 379 | + component: 'Textarea', | |
| 380 | + componentProps: { | |
| 381 | + placeholder: '请输入${comment}', | |
| 382 | + }, | |
| 383 | + #elseif($column.htmlType == "inputNumber")## 数字输入框 | |
| 384 | + component: 'InputNumber', | |
| 385 | + componentProps: { | |
| 386 | + min: 0, | |
| 387 | + class: 'w-full', | |
| 388 | + controlsPosition: 'right', | |
| 389 | + placeholder: '请输入${comment}', | |
| 390 | + }, | |
| 391 | + #end | |
| 392 | + }, | |
| 393 | + #end | |
| 394 | + #end | |
| 395 | + #end | |
| 396 | + #end | |
| 397 | + ]; | |
| 398 | +} | |
| 399 | +/** 列表的字段 */ | |
| 400 | +export function use${subSimpleClassName}GridColumns( | |
| 401 | + onActionClick?: OnActionClickFn<${simpleClassName}Api.${subSimpleClassName}>, | |
| 402 | +): VxeTableGridOptions<${subSimpleClassName}Api.${subSimpleClassName}>['columns'] { | |
| 403 | + return [ | |
| 404 | + #foreach($column in $subColumns) | |
| 405 | + #if (!$column.primaryKey && $column.listOperationResult && $column.id != $subJoinColumn.id) ## 特殊:忽略主子表的 join 字段,不用填写 | |
| 406 | + #set ($dictType = $column.dictType) | |
| 407 | + #set ($javaField = $column.javaField) | |
| 408 | + #set ($comment = $column.columnComment) | |
| 409 | + { | |
| 410 | + field: '${javaField}', | |
| 411 | + title: '${comment}', | |
| 412 | + minWidth: 120, | |
| 413 | + slots: { default: '${javaField}' }, | |
| 414 | + }, | |
| 415 | + #end | |
| 416 | + #end | |
| 417 | + { | |
| 418 | + field: 'operation', | |
| 419 | + title: '操作', | |
| 420 | + minWidth: 60, | |
| 421 | + align: 'center', | |
| 422 | + fixed: 'right', | |
| 423 | + headerAlign: 'center', | |
| 424 | + showOverflow: false, | |
| 425 | + cellRender: { | |
| 426 | + attrs: { | |
| 427 | + nameField: '${columns[0].javaField}', | |
| 428 | + nameTitle: '${table.classComment}', | |
| 429 | + onClick: onActionClick, | |
| 430 | + }, | |
| 431 | + name: 'CellOperation', | |
| 432 | + options: [ | |
| 433 | + { | |
| 434 | + code: 'delete', | |
| 435 | + show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:delete']), | |
| 436 | + }, | |
| 437 | + ], | |
| 438 | + }, | |
| 439 | + }, | |
| 440 | + ]; | |
| 441 | +} | |
| 442 | +#end | |
| 279 | 443 | \ No newline at end of file | ... | ... |
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/form.vue.vm
| ... | ... | @@ -2,7 +2,13 @@ |
| 2 | 2 | import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; |
| 3 | 3 | |
| 4 | 4 | import { useVbenModal } from '@vben/common-ui'; |
| 5 | -import { message } from 'ant-design-vue'; | |
| 5 | +import { message, Tabs } from 'ant-design-vue'; | |
| 6 | +## 特殊:主子表专属逻辑 | |
| 7 | +#if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 8 | + #foreach ($subSimpleClassName in $subSimpleClassNames) | |
| 9 | + import ${subSimpleClassName}Form from './${subSimpleClassName}Form.vue' | |
| 10 | + #end | |
| 11 | +#end | |
| 6 | 12 | |
| 7 | 13 | import { computed, ref } from 'vue'; |
| 8 | 14 | import { $t } from '#/locales'; |
| ... | ... | @@ -32,6 +38,18 @@ const getTitle = computed(() => { |
| 32 | 38 | }); |
| 33 | 39 | #end |
| 34 | 40 | |
| 41 | +## 特殊:主子表专属逻辑 | |
| 42 | +#if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 43 | + #if ( $subTables && $subTables.size() > 0 ) | |
| 44 | + | |
| 45 | + /** 子表的表单 */ | |
| 46 | + const subTabsName = ref('$subClassNameVars.get(0)') | |
| 47 | + #foreach ($subClassNameVar in $subClassNameVars) | |
| 48 | + const ${subClassNameVar}FormRef = ref() | |
| 49 | + #end | |
| 50 | + #end | |
| 51 | +#end | |
| 52 | + | |
| 35 | 53 | const [Form, formApi] = useVbenForm({ |
| 36 | 54 | layout: 'horizontal', |
| 37 | 55 | schema: useFormSchema(), |
| ... | ... | @@ -44,9 +62,36 @@ const [Modal, modalApi] = useVbenModal({ |
| 44 | 62 | if (!valid) { |
| 45 | 63 | return; |
| 46 | 64 | } |
| 65 | + ## 特殊:主子表专属逻辑 | |
| 66 | + #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 67 | + #if ( $subTables && $subTables.size() > 0 ) | |
| 68 | + // 校验子表单 | |
| 69 | + #foreach ($subTable in $subTables) | |
| 70 | + #set ($index = $foreach.count - 1) | |
| 71 | + #set ($subClassNameVar = $subClassNameVars.get($index)) | |
| 72 | + try { | |
| 73 | + await ${subClassNameVar}FormRef.value.validate() | |
| 74 | + } catch (e) { | |
| 75 | + subTabsName.value = '${subClassNameVar}' | |
| 76 | + return | |
| 77 | + } | |
| 78 | + #end | |
| 79 | + #end | |
| 80 | + #end | |
| 47 | 81 | modalApi.lock(); |
| 48 | 82 | // 提交表单 |
| 49 | 83 | const data = (await formApi.getValues()) as ${simpleClassName}Api.${simpleClassName}; |
| 84 | + ## 特殊:主子表专属逻辑 | |
| 85 | + #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 86 | + #if ( $subTables && $subTables.size() > 0 ) | |
| 87 | + // 拼接子表的数据 | |
| 88 | + #foreach ($subTable in $subTables) | |
| 89 | + #set ($index = $foreach.count - 1) | |
| 90 | + #set ($subClassNameVar = $subClassNameVars.get($index)) | |
| 91 | + data.${subClassNameVar}#if ( $subTable.subJoinMany)s#end = ${subClassNameVar}FormRef.value.getData() | |
| 92 | + #end | |
| 93 | + #end | |
| 94 | + #end | |
| 50 | 95 | try { |
| 51 | 96 | await (formData.value?.id ? update${simpleClassName}(data) : create${simpleClassName}(data)); |
| 52 | 97 | // 关闭并提示 |
| ... | ... | @@ -90,5 +135,20 @@ const [Modal, modalApi] = useVbenModal({ |
| 90 | 135 | <template> |
| 91 | 136 | <Modal :title="getTitle"> |
| 92 | 137 | <Form class="mx-4" /> |
| 138 | + ## 特殊:主子表专属逻辑 | |
| 139 | + #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 140 | + <!-- 子表的表单 --> | |
| 141 | + <Tabs v-model:active-key="subTabsName"> | |
| 142 | + #foreach ($subTable in $subTables) | |
| 143 | + #set ($index = $foreach.count - 1) | |
| 144 | + #set ($subClassNameVar = $subClassNameVars.get($index)) | |
| 145 | + #set ($subSimpleClassName = $subSimpleClassNames.get($index)) | |
| 146 | + #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index)) | |
| 147 | + <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}"> | |
| 148 | + <${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData.id" /> | |
| 149 | + </Tabs.TabPane> | |
| 150 | + #end | |
| 151 | + </Tabs> | |
| 152 | + #end | |
| 93 | 153 | </Modal> |
| 94 | 154 | </template> | ... | ... |
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/form_sub_erp.vue.vm
0 → 100644
| 1 | +#set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组 | |
| 2 | +#set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) | |
| 3 | +#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 | |
| 4 | +<template> | |
| 5 | + <Dialog :title="dialogTitle" v-model="dialogVisible"> | |
| 6 | + <el-form | |
| 7 | + ref="formRef" | |
| 8 | + :model="formData" | |
| 9 | + :rules="formRules" | |
| 10 | + label-width="100px" | |
| 11 | + v-loading="formLoading" | |
| 12 | + > | |
| 13 | +#foreach($column in $subColumns) | |
| 14 | + #if ($column.createOperation || $column.updateOperation) | |
| 15 | + #set ($dictType = $column.dictType) | |
| 16 | + #set ($javaField = $column.javaField) | |
| 17 | + #set ($javaType = $column.javaType) | |
| 18 | + #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) | |
| 19 | + #set ($comment = $column.columnComment) | |
| 20 | + #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法 | |
| 21 | + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short") | |
| 22 | + #set ($dictMethod = "getIntDictOptions") | |
| 23 | + #elseif ($javaType == "String") | |
| 24 | + #set ($dictMethod = "getStrDictOptions") | |
| 25 | + #elseif ($javaType == "Boolean") | |
| 26 | + #set ($dictMethod = "getBoolDictOptions") | |
| 27 | + #end | |
| 28 | + #if ( $column.id == $subJoinColumn.id) ## 特殊:忽略主子表的 join 字段,不用填写 | |
| 29 | + #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键,不用在表单里 | |
| 30 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 31 | + <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" /> | |
| 32 | + </el-form-item> | |
| 33 | + #elseif($column.htmlType == "imageUpload")## 图片上传 | |
| 34 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 35 | + <UploadImg v-model="formData.${javaField}" /> | |
| 36 | + </el-form-item> | |
| 37 | + #elseif($column.htmlType == "fileUpload")## 文件上传 | |
| 38 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 39 | + <UploadFile v-model="formData.${javaField}" /> | |
| 40 | + </el-form-item> | |
| 41 | + #elseif($column.htmlType == "editor")## 文本编辑器 | |
| 42 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 43 | + <Editor v-model="formData.${javaField}" height="150px" /> | |
| 44 | + </el-form-item> | |
| 45 | + #elseif($column.htmlType == "select")## 下拉框 | |
| 46 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 47 | + <el-select v-model="formData.${javaField}" placeholder="请选择${comment}"> | |
| 48 | + #if ("" != $dictType)## 有数据字典 | |
| 49 | + <el-option | |
| 50 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 51 | + :key="dict.value" | |
| 52 | + :label="dict.label" | |
| 53 | + :value="dict.value" | |
| 54 | + /> | |
| 55 | + #else##没数据字典 | |
| 56 | + <el-option label="请选择字典生成" value="" /> | |
| 57 | + #end | |
| 58 | + </el-select> | |
| 59 | + </el-form-item> | |
| 60 | + #elseif($column.htmlType == "checkbox")## 多选框 | |
| 61 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 62 | + <el-checkbox-group v-model="formData.${javaField}"> | |
| 63 | + #if ("" != $dictType)## 有数据字典 | |
| 64 | + <el-checkbox | |
| 65 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 66 | + :key="dict.value" | |
| 67 | + :label="dict.label" | |
| 68 | + :value="dict.value" | |
| 69 | + /> | |
| 70 | + #else##没数据字典 | |
| 71 | + <el-checkbox label="请选择字典生成" /> | |
| 72 | + #end | |
| 73 | + </el-checkbox-group> | |
| 74 | + </el-form-item> | |
| 75 | + #elseif($column.htmlType == "radio")## 单选框 | |
| 76 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 77 | + <el-radio-group v-model="formData.${javaField}"> | |
| 78 | + #if ("" != $dictType)## 有数据字典 | |
| 79 | + <el-radio | |
| 80 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 81 | + :key="dict.value" | |
| 82 | + :label="dict.value" | |
| 83 | + > | |
| 84 | + {{ dict.label }} | |
| 85 | + </el-radio> | |
| 86 | + #else##没数据字典 | |
| 87 | + <el-radio value="1">请选择字典生成</el-radio> | |
| 88 | + #end | |
| 89 | + </el-radio-group> | |
| 90 | + </el-form-item> | |
| 91 | + #elseif($column.htmlType == "datetime")## 时间框 | |
| 92 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 93 | + <el-date-picker | |
| 94 | + v-model="formData.${javaField}" | |
| 95 | + type="date" | |
| 96 | + value-format="x" | |
| 97 | + placeholder="选择${comment}" | |
| 98 | + /> | |
| 99 | + </el-form-item> | |
| 100 | + #elseif($column.htmlType == "textarea")## 文本框 | |
| 101 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 102 | + <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" /> | |
| 103 | + </el-form-item> | |
| 104 | + #end | |
| 105 | + #end | |
| 106 | +#end | |
| 107 | + </el-form> | |
| 108 | + <template #footer> | |
| 109 | + <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> | |
| 110 | + <el-button @click="dialogVisible = false">取 消</el-button> | |
| 111 | + </template> | |
| 112 | + </Dialog> | |
| 113 | +</template> | |
| 114 | +<script setup lang="ts"> | |
| 115 | +import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict' | |
| 116 | +import { ${simpleClassName}Api } from '@/api/${table.moduleName}/${table.businessName}' | |
| 117 | + | |
| 118 | +const { t } = useI18n() // 国际化 | |
| 119 | +const message = useMessage() // 消息弹窗 | |
| 120 | + | |
| 121 | +const dialogVisible = ref(false) // 弹窗的是否展示 | |
| 122 | +const dialogTitle = ref('') // 弹窗的标题 | |
| 123 | +const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 | |
| 124 | +const formType = ref('') // 表单的类型:create - 新增;update - 修改 | |
| 125 | +const formData = ref({ | |
| 126 | +#foreach ($column in $subColumns) | |
| 127 | + #if ($column.createOperation || $column.updateOperation) | |
| 128 | + #if ($column.htmlType == "checkbox") | |
| 129 | + $column.javaField: [], | |
| 130 | + #else | |
| 131 | + $column.javaField: undefined, | |
| 132 | + #end | |
| 133 | + #end | |
| 134 | +#end | |
| 135 | +}) | |
| 136 | +const formRules = reactive({ | |
| 137 | +#foreach ($column in $subColumns) | |
| 138 | + #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 | |
| 139 | + #set($comment=$column.columnComment) | |
| 140 | + $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }], | |
| 141 | + #end | |
| 142 | +#end | |
| 143 | +}) | |
| 144 | +const formRef = ref() // 表单 Ref | |
| 145 | + | |
| 146 | +/** 打开弹窗 */ | |
| 147 | +const open = async (type: string, id?: number, ${subJoinColumn.javaField}: number) => { | |
| 148 | + dialogVisible.value = true | |
| 149 | + dialogTitle.value = t('action.' + type) | |
| 150 | + formType.value = type | |
| 151 | + resetForm() | |
| 152 | + formData.value.${subJoinColumn.javaField} = ${subJoinColumn.javaField} | |
| 153 | + // 修改时,设置数据 | |
| 154 | + if (id) { | |
| 155 | + formLoading.value = true | |
| 156 | + try { | |
| 157 | + formData.value = await ${simpleClassName}Api.get${subSimpleClassName}(id) | |
| 158 | + } finally { | |
| 159 | + formLoading.value = false | |
| 160 | + } | |
| 161 | + } | |
| 162 | +} | |
| 163 | +defineExpose({ open }) // 提供 open 方法,用于打开弹窗 | |
| 164 | + | |
| 165 | +/** 提交表单 */ | |
| 166 | +const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 | |
| 167 | +const submitForm = async () => { | |
| 168 | + // 校验表单 | |
| 169 | + await formRef.value.validate() | |
| 170 | + // 提交请求 | |
| 171 | + formLoading.value = true | |
| 172 | + try { | |
| 173 | + const data = formData.value | |
| 174 | + if (formType.value === 'create') { | |
| 175 | + await ${simpleClassName}Api.create${subSimpleClassName}(data) | |
| 176 | + message.success(t('common.createSuccess')) | |
| 177 | + } else { | |
| 178 | + await ${simpleClassName}Api.update${subSimpleClassName}(data) | |
| 179 | + message.success(t('common.updateSuccess')) | |
| 180 | + } | |
| 181 | + dialogVisible.value = false | |
| 182 | + // 发送操作成功的事件 | |
| 183 | + emit('success') | |
| 184 | + } finally { | |
| 185 | + formLoading.value = false | |
| 186 | + } | |
| 187 | +} | |
| 188 | + | |
| 189 | +/** 重置表单 */ | |
| 190 | +const resetForm = () => { | |
| 191 | + formData.value = { | |
| 192 | +#foreach ($column in $subColumns) | |
| 193 | + #if ($column.createOperation || $column.updateOperation) | |
| 194 | + #if ($column.htmlType == "checkbox") | |
| 195 | + $column.javaField: [], | |
| 196 | + #else | |
| 197 | + $column.javaField: undefined, | |
| 198 | + #end | |
| 199 | + #end | |
| 200 | +#end | |
| 201 | + } | |
| 202 | + formRef.value?.resetFields() | |
| 203 | +} | |
| 204 | +</script> | |
| 0 | 205 | \ No newline at end of file | ... | ... |
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/form_sub_inner.vue.vm
0 → 100644
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/form_sub_normal.vue.vm
0 → 100644
| 1 | +#set ($subTable = $subTables.get($subIndex))##当前表 | |
| 2 | +#set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组 | |
| 3 | +#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 | |
| 4 | +#set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) | |
| 5 | +#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 | |
| 6 | +#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 | |
| 7 | +<template> | |
| 8 | +#if ( $subTable.subJoinMany )## 情况一:一对多,table + form | |
| 9 | + <el-form | |
| 10 | + ref="formRef" | |
| 11 | + :model="formData" | |
| 12 | + :rules="formRules" | |
| 13 | + v-loading="formLoading" | |
| 14 | + label-width="0px" | |
| 15 | + :inline-message="true" | |
| 16 | + > | |
| 17 | + <el-table :data="formData" class="-mt-10px"> | |
| 18 | + <el-table-column label="序号" type="index" width="100" /> | |
| 19 | +#foreach($column in $subColumns) | |
| 20 | + #if ($column.createOperation || $column.updateOperation) | |
| 21 | + #set ($dictType = $column.dictType) | |
| 22 | + #set ($javaField = $column.javaField) | |
| 23 | + #set ($javaType = $column.javaType) | |
| 24 | + #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) | |
| 25 | + #set ($comment = $column.columnComment) | |
| 26 | + #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法 | |
| 27 | + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short") | |
| 28 | + #set ($dictMethod = "getIntDictOptions") | |
| 29 | + #elseif ($javaType == "String") | |
| 30 | + #set ($dictMethod = "getStrDictOptions") | |
| 31 | + #elseif ($javaType == "Boolean") | |
| 32 | + #set ($dictMethod = "getBoolDictOptions") | |
| 33 | + #end | |
| 34 | + #if ( $column.id == $subJoinColumn.id) ## 特殊:忽略主子表的 join 字段,不用填写 | |
| 35 | + #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键,不用在表单里 | |
| 36 | + <el-table-column label="${comment}" min-width="150"> | |
| 37 | + <template #default="{ row, $index }"> | |
| 38 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 39 | + <el-input v-model="row.${javaField}" placeholder="请输入${comment}" /> | |
| 40 | + </el-form-item> | |
| 41 | + </template> | |
| 42 | + </el-table-column> | |
| 43 | + #elseif($column.htmlType == "imageUpload")## 图片上传 | |
| 44 | + <el-table-column label="${comment}" min-width="200"> | |
| 45 | + <template #default="{ row, $index }"> | |
| 46 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 47 | + <UploadImg v-model="row.${javaField}" /> | |
| 48 | + </el-form-item> | |
| 49 | + </template> | |
| 50 | + </el-table-column> | |
| 51 | + #elseif($column.htmlType == "fileUpload")## 文件上传 | |
| 52 | + <el-table-column label="${comment}" min-width="200"> | |
| 53 | + <template #default="{ row, $index }"> | |
| 54 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 55 | + <UploadFile v-model="row.${javaField}" /> | |
| 56 | + </el-form-item> | |
| 57 | + </template> | |
| 58 | + </el-table-column> | |
| 59 | + #elseif($column.htmlType == "editor")## 文本编辑器 | |
| 60 | + <el-table-column label="${comment}" min-width="400"> | |
| 61 | + <template #default="{ row, $index }"> | |
| 62 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 63 | + <Editor v-model="row.${javaField}" height="150px" /> | |
| 64 | + </el-form-item> | |
| 65 | + </template> | |
| 66 | + </el-table-column> | |
| 67 | + #elseif($column.htmlType == "select")## 下拉框 | |
| 68 | + <el-table-column label="${comment}" min-width="150"> | |
| 69 | + <template #default="{ row, $index }"> | |
| 70 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 71 | + <el-select v-model="row.${javaField}" placeholder="请选择${comment}"> | |
| 72 | + #if ("" != $dictType)## 有数据字典 | |
| 73 | + <el-option | |
| 74 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 75 | + :key="dict.value" | |
| 76 | + :label="dict.label" | |
| 77 | + :value="dict.value" | |
| 78 | + /> | |
| 79 | + #else##没数据字典 | |
| 80 | + <el-option label="请选择字典生成" value="" /> | |
| 81 | + #end | |
| 82 | + </el-select> | |
| 83 | + </el-form-item> | |
| 84 | + </template> | |
| 85 | + </el-table-column> | |
| 86 | + #elseif($column.htmlType == "checkbox")## 多选框 | |
| 87 | + <el-table-column label="${comment}" min-width="150"> | |
| 88 | + <template #default="{ row, $index }"> | |
| 89 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 90 | + <el-checkbox-group v-model="row.${javaField}"> | |
| 91 | + #if ("" != $dictType)## 有数据字典 | |
| 92 | + <el-checkbox | |
| 93 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 94 | + :key="dict.value" | |
| 95 | + :label="dict.label" | |
| 96 | + :value="dict.value" | |
| 97 | + /> | |
| 98 | + #else##没数据字典 | |
| 99 | + <el-checkbox label="请选择字典生成" /> | |
| 100 | + #end | |
| 101 | + </el-checkbox-group> | |
| 102 | + </el-form-item> | |
| 103 | + </template> | |
| 104 | + </el-table-column> | |
| 105 | + #elseif($column.htmlType == "radio")## 单选框 | |
| 106 | + <el-table-column label="${comment}" min-width="150"> | |
| 107 | + <template #default="{ row, $index }"> | |
| 108 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 109 | + <el-radio-group v-model="row.${javaField}"> | |
| 110 | + #if ("" != $dictType)## 有数据字典 | |
| 111 | + <el-radio | |
| 112 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 113 | + :key="dict.value" | |
| 114 | + :label="dict.value" | |
| 115 | + > | |
| 116 | + {{ dict.label }} | |
| 117 | + </el-radio> | |
| 118 | + #else##没数据字典 | |
| 119 | + <el-radio value="1">请选择字典生成</el-radio> | |
| 120 | + #end | |
| 121 | + </el-radio-group> | |
| 122 | + </el-form-item> | |
| 123 | + </template> | |
| 124 | + </el-table-column> | |
| 125 | + #elseif($column.htmlType == "datetime")## 时间框 | |
| 126 | + <el-table-column label="${comment}" min-width="150"> | |
| 127 | + <template #default="{ row, $index }"> | |
| 128 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 129 | + <el-date-picker | |
| 130 | + v-model="row.${javaField}" | |
| 131 | + type="date" | |
| 132 | + value-format="x" | |
| 133 | + placeholder="选择${comment}" | |
| 134 | + /> | |
| 135 | + </el-form-item> | |
| 136 | + </template> | |
| 137 | + </el-table-column> | |
| 138 | + #elseif($column.htmlType == "textarea")## 文本框 | |
| 139 | + <el-table-column label="${comment}" min-width="200"> | |
| 140 | + <template #default="{ row, $index }"> | |
| 141 | + <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> | |
| 142 | + <el-input v-model="row.${javaField}" type="textarea" placeholder="请输入${comment}" /> | |
| 143 | + </el-form-item> | |
| 144 | + </template> | |
| 145 | + </el-table-column> | |
| 146 | + #end | |
| 147 | + #end | |
| 148 | +#end | |
| 149 | + <el-table-column align="center" fixed="right" label="操作" width="60"> | |
| 150 | + <template #default="{ $index }"> | |
| 151 | + <el-button @click="handleDelete($index)" link>—</el-button> | |
| 152 | + </template> | |
| 153 | + </el-table-column> | |
| 154 | + </el-table> | |
| 155 | + </el-form> | |
| 156 | + <el-row justify="center" class="mt-3"> | |
| 157 | + <el-button @click="handleAdd" round>+ 添加${subTable.classComment}</el-button> | |
| 158 | + </el-row> | |
| 159 | +#else## 情况二:一对一,form | |
| 160 | + <el-form | |
| 161 | + ref="formRef" | |
| 162 | + :model="formData" | |
| 163 | + :rules="formRules" | |
| 164 | + label-width="100px" | |
| 165 | + v-loading="formLoading" | |
| 166 | + > | |
| 167 | +#foreach($column in $subColumns) | |
| 168 | + #if ($column.createOperation || $column.updateOperation) | |
| 169 | + #set ($dictType = $column.dictType) | |
| 170 | + #set ($javaField = $column.javaField) | |
| 171 | + #set ($javaType = $column.javaType) | |
| 172 | + #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) | |
| 173 | + #set ($comment = $column.columnComment) | |
| 174 | + #set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法 | |
| 175 | + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short") | |
| 176 | + #set ($dictMethod = "getIntDictOptions") | |
| 177 | + #elseif ($javaType == "String") | |
| 178 | + #set ($dictMethod = "getStrDictOptions") | |
| 179 | + #elseif ($javaType == "Boolean") | |
| 180 | + #set ($dictMethod = "getBoolDictOptions") | |
| 181 | + #end | |
| 182 | + #if ( $column.id == $subJoinColumn.id) ## 特殊:忽略主子表的 join 字段,不用填写 | |
| 183 | + #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键,不用在表单里 | |
| 184 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 185 | + <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" /> | |
| 186 | + </el-form-item> | |
| 187 | + #elseif($column.htmlType == "imageUpload")## 图片上传 | |
| 188 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 189 | + <UploadImg v-model="formData.${javaField}" /> | |
| 190 | + </el-form-item> | |
| 191 | + #elseif($column.htmlType == "fileUpload")## 文件上传 | |
| 192 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 193 | + <UploadFile v-model="formData.${javaField}" /> | |
| 194 | + </el-form-item> | |
| 195 | + #elseif($column.htmlType == "editor")## 文本编辑器 | |
| 196 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 197 | + <Editor v-model="formData.${javaField}" height="150px" /> | |
| 198 | + </el-form-item> | |
| 199 | + #elseif($column.htmlType == "select")## 下拉框 | |
| 200 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 201 | + <el-select v-model="formData.${javaField}" placeholder="请选择${comment}"> | |
| 202 | + #if ("" != $dictType)## 有数据字典 | |
| 203 | + <el-option | |
| 204 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 205 | + :key="dict.value" | |
| 206 | + :label="dict.label" | |
| 207 | + :value="dict.value" | |
| 208 | + /> | |
| 209 | + #else##没数据字典 | |
| 210 | + <el-option label="请选择字典生成" value="" /> | |
| 211 | + #end | |
| 212 | + </el-select> | |
| 213 | + </el-form-item> | |
| 214 | + #elseif($column.htmlType == "checkbox")## 多选框 | |
| 215 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 216 | + <el-checkbox-group v-model="formData.${javaField}"> | |
| 217 | + #if ("" != $dictType)## 有数据字典 | |
| 218 | + <el-checkbox | |
| 219 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 220 | + :key="dict.value" | |
| 221 | + :label="dict.label" | |
| 222 | + :value="dict.value" | |
| 223 | + /> | |
| 224 | + #else##没数据字典 | |
| 225 | + <el-checkbox label="请选择字典生成" /> | |
| 226 | + #end | |
| 227 | + </el-checkbox-group> | |
| 228 | + </el-form-item> | |
| 229 | + #elseif($column.htmlType == "radio")## 单选框 | |
| 230 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 231 | + <el-radio-group v-model="formData.${javaField}"> | |
| 232 | + #if ("" != $dictType)## 有数据字典 | |
| 233 | + <el-radio | |
| 234 | + v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" | |
| 235 | + :key="dict.value" | |
| 236 | + :label="dict.value" | |
| 237 | + > | |
| 238 | + {{ dict.label }} | |
| 239 | + </el-radio> | |
| 240 | + #else##没数据字典 | |
| 241 | + <el-radio value="1">请选择字典生成</el-radio> | |
| 242 | + #end | |
| 243 | + </el-radio-group> | |
| 244 | + </el-form-item> | |
| 245 | + #elseif($column.htmlType == "datetime")## 时间框 | |
| 246 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 247 | + <el-date-picker | |
| 248 | + v-model="formData.${javaField}" | |
| 249 | + type="date" | |
| 250 | + value-format="x" | |
| 251 | + placeholder="选择${comment}" | |
| 252 | + /> | |
| 253 | + </el-form-item> | |
| 254 | + #elseif($column.htmlType == "textarea")## 文本框 | |
| 255 | + <el-form-item label="${comment}" prop="${javaField}"> | |
| 256 | + <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" /> | |
| 257 | + </el-form-item> | |
| 258 | + #end | |
| 259 | + #end | |
| 260 | +#end | |
| 261 | + </el-form> | |
| 262 | +#end | |
| 263 | +</template> | |
| 264 | +<script setup lang="ts"> | |
| 265 | +import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict' | |
| 266 | +import { ${simpleClassName}Api } from '@/api/${table.moduleName}/${table.businessName}' | |
| 267 | + | |
| 268 | +const props = defineProps<{ | |
| 269 | + ${subJoinColumn.javaField}: undefined // ${subJoinColumn.columnComment}(主表的关联字段) | |
| 270 | +}>() | |
| 271 | +const formLoading = ref(false) // 表单的加载中 | |
| 272 | +const formData = ref([]) | |
| 273 | +const formRules = reactive({ | |
| 274 | +#foreach ($column in $subColumns) | |
| 275 | + #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 | |
| 276 | + #set($comment=$column.columnComment) | |
| 277 | + $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }], | |
| 278 | + #end | |
| 279 | +#end | |
| 280 | +}) | |
| 281 | +const formRef = ref() // 表单 Ref | |
| 282 | + | |
| 283 | +/** 监听主表的关联字段的变化,加载对应的子表数据 */ | |
| 284 | +watch( | |
| 285 | + () => props.${subJoinColumn.javaField}, | |
| 286 | + async (val) => { | |
| 287 | + // 1. 重置表单 | |
| 288 | +#if ( $subTable.subJoinMany ) | |
| 289 | + formData.value = [] | |
| 290 | +#else | |
| 291 | + formData.value = { | |
| 292 | + #foreach ($column in $subColumns) | |
| 293 | + #if ($column.createOperation || $column.updateOperation) | |
| 294 | + #if ($column.htmlType == "checkbox") | |
| 295 | + $column.javaField: [], | |
| 296 | + #else | |
| 297 | + $column.javaField: undefined, | |
| 298 | + #end | |
| 299 | + #end | |
| 300 | + #end | |
| 301 | + } | |
| 302 | +#end | |
| 303 | + // 2. val 非空,则加载数据 | |
| 304 | + if (!val) { | |
| 305 | + return; | |
| 306 | + } | |
| 307 | + try { | |
| 308 | + formLoading.value = true | |
| 309 | +#if ( $subTable.subJoinMany ) | |
| 310 | + formData.value = await ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(val) | |
| 311 | +#else | |
| 312 | + const data = await ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(val) | |
| 313 | + if (!data) { | |
| 314 | + return | |
| 315 | + } | |
| 316 | + formData.value = data | |
| 317 | +#end | |
| 318 | + } finally { | |
| 319 | + formLoading.value = false | |
| 320 | + } | |
| 321 | + }, | |
| 322 | + { immediate: true } | |
| 323 | +) | |
| 324 | +#if ( $subTable.subJoinMany ) | |
| 325 | + | |
| 326 | +/** 新增按钮操作 */ | |
| 327 | +const handleAdd = () => { | |
| 328 | + const row = { | |
| 329 | +#foreach ($column in $subColumns) | |
| 330 | + #if ($column.createOperation || $column.updateOperation) | |
| 331 | + #if ($column.htmlType == "checkbox") | |
| 332 | + $column.javaField: [], | |
| 333 | + #else | |
| 334 | + $column.javaField: undefined, | |
| 335 | + #end | |
| 336 | + #end | |
| 337 | +#end | |
| 338 | + } | |
| 339 | + row.${subJoinColumn.javaField} = props.${subJoinColumn.javaField} | |
| 340 | + formData.value.push(row) | |
| 341 | +} | |
| 342 | + | |
| 343 | +/** 删除按钮操作 */ | |
| 344 | +const handleDelete = (index) => { | |
| 345 | + formData.value.splice(index, 1) | |
| 346 | +} | |
| 347 | +#end | |
| 348 | + | |
| 349 | +/** 表单校验 */ | |
| 350 | +const validate = () => { | |
| 351 | + return formRef.value.validate() | |
| 352 | +} | |
| 353 | + | |
| 354 | +/** 表单值 */ | |
| 355 | +const getData = () => { | |
| 356 | + return formData.value | |
| 357 | +} | |
| 358 | + | |
| 359 | +defineExpose({ validate, getData }) | |
| 360 | +</script> | |
| 0 | 361 | \ No newline at end of file | ... | ... |
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/list_sub_erp.vue.vm
0 → 100644
| 1 | +#set ($subTable = $subTables.get($subIndex))##当前表 | |
| 2 | +#set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组 | |
| 3 | +#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 | |
| 4 | +#set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) | |
| 5 | +#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 | |
| 6 | +#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 | |
| 7 | +<template> | |
| 8 | + <!-- 列表 --> | |
| 9 | + <ContentWrap> | |
| 10 | +#if ($table.templateType == 11) | |
| 11 | + <el-button | |
| 12 | + type="primary" | |
| 13 | + plain | |
| 14 | + @click="openForm('create')" | |
| 15 | + v-hasPermi="['${permissionPrefix}:create']" | |
| 16 | + > | |
| 17 | + <Icon icon="ep:plus" class="mr-5px" /> 新增 | |
| 18 | + </el-button> | |
| 19 | +#end | |
| 20 | + <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"> | |
| 21 | + #foreach($column in $subColumns) | |
| 22 | + #if ($column.listOperationResult) | |
| 23 | + #set ($dictType=$column.dictType) | |
| 24 | + #set ($javaField = $column.javaField) | |
| 25 | + #set ($AttrName=$column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) | |
| 26 | + #set ($comment=$column.columnComment) | |
| 27 | + #if ( $column.id == $subJoinColumn.id) ## 特殊:忽略主子表的 join 字段,不用填写 | |
| 28 | + #elseif ($column.javaType == "LocalDateTime")## 时间类型 | |
| 29 | + <el-table-column | |
| 30 | + label="${comment}" | |
| 31 | + align="center" | |
| 32 | + prop="${javaField}" | |
| 33 | + :formatter="dateFormatter" | |
| 34 | + width="180px" | |
| 35 | + /> | |
| 36 | + #elseif($column.dictType && "" != $column.dictType)## 数据字典 | |
| 37 | + <el-table-column label="${comment}" align="center" prop="${javaField}"> | |
| 38 | + <template #default="scope"> | |
| 39 | + <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.${column.javaField}" /> | |
| 40 | + </template> | |
| 41 | + </el-table-column> | |
| 42 | + #else | |
| 43 | + <el-table-column label="${comment}" align="center" prop="${javaField}" /> | |
| 44 | + #end | |
| 45 | + #end | |
| 46 | + #end | |
| 47 | + #if ($table.templateType == 11) | |
| 48 | + <el-table-column label="操作" align="center"> | |
| 49 | + <template #default="scope"> | |
| 50 | + <el-button | |
| 51 | + link | |
| 52 | + type="primary" | |
| 53 | + @click="openForm('update', scope.row.id)" | |
| 54 | + v-hasPermi="['${permissionPrefix}:update']" | |
| 55 | + > | |
| 56 | + 编辑 | |
| 57 | + </el-button> | |
| 58 | + <el-button | |
| 59 | + link | |
| 60 | + type="danger" | |
| 61 | + @click="handleDelete(scope.row.id)" | |
| 62 | + v-hasPermi="['${permissionPrefix}:delete']" | |
| 63 | + > | |
| 64 | + 删除 | |
| 65 | + </el-button> | |
| 66 | + </template> | |
| 67 | + </el-table-column> | |
| 68 | + #end | |
| 69 | + </el-table> | |
| 70 | + #if ($table.templateType == 11) | |
| 71 | + <!-- 分页 --> | |
| 72 | + <Pagination | |
| 73 | + :total="total" | |
| 74 | + v-model:page="queryParams.pageNo" | |
| 75 | + v-model:limit="queryParams.pageSize" | |
| 76 | + @pagination="getList" | |
| 77 | + /> | |
| 78 | + #end | |
| 79 | + </ContentWrap> | |
| 80 | +#if ($table.templateType == 11) | |
| 81 | + <!-- 表单弹窗:添加/修改 --> | |
| 82 | + <${subSimpleClassName}Form ref="formRef" @success="getList" /> | |
| 83 | +#end | |
| 84 | +</template> | |
| 85 | +<script setup lang="ts"> | |
| 86 | +import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict' | |
| 87 | +import { dateFormatter } from '@/utils/formatTime' | |
| 88 | +import { ${simpleClassName}Api } from '@/api/${table.moduleName}/${table.businessName}' | |
| 89 | +#if ($table.templateType == 11) | |
| 90 | +import ${subSimpleClassName}Form from './${subSimpleClassName}Form.vue' | |
| 91 | +#end | |
| 92 | + | |
| 93 | +const { t } = useI18n() // 国际化 | |
| 94 | +const message = useMessage() // 消息弹窗 | |
| 95 | + | |
| 96 | +const props = defineProps<{ | |
| 97 | + ${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}(主表的关联字段) | |
| 98 | +}>() | |
| 99 | +const loading = ref(false) // 列表的加载中 | |
| 100 | +const list = ref([]) // 列表的数据 | |
| 101 | +#if ($table.templateType == 11) | |
| 102 | +const total = ref(0) // 列表的总页数 | |
| 103 | +const queryParams = reactive({ | |
| 104 | + pageNo: 1, | |
| 105 | + pageSize: 10, | |
| 106 | + ${subJoinColumn.javaField}: undefined as unknown | |
| 107 | +}) | |
| 108 | + | |
| 109 | +/** 监听主表的关联字段的变化,加载对应的子表数据 */ | |
| 110 | +watch( | |
| 111 | + () => props.${subJoinColumn.javaField}, | |
| 112 | + (val: number) => { | |
| 113 | + if (!val) { | |
| 114 | + return | |
| 115 | + } | |
| 116 | + queryParams.${subJoinColumn.javaField} = val | |
| 117 | + handleQuery() | |
| 118 | + }, | |
| 119 | + { immediate: true, deep: true } | |
| 120 | +) | |
| 121 | +#end | |
| 122 | + | |
| 123 | +/** 查询列表 */ | |
| 124 | +const getList = async () => { | |
| 125 | + loading.value = true | |
| 126 | + try { | |
| 127 | +#if ($table.templateType == 11) | |
| 128 | + const data = await ${simpleClassName}Api.get${subSimpleClassName}Page(queryParams) | |
| 129 | + list.value = data.list | |
| 130 | + total.value = data.total | |
| 131 | +#else | |
| 132 | + #if ( $subTable.subJoinMany ) | |
| 133 | + list.value = await ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}) | |
| 134 | + #else | |
| 135 | + const data = await ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}) | |
| 136 | + if (!data) { | |
| 137 | + return | |
| 138 | + } | |
| 139 | + list.value.push(data) | |
| 140 | + #end | |
| 141 | +#end | |
| 142 | + } finally { | |
| 143 | + loading.value = false | |
| 144 | + } | |
| 145 | +} | |
| 146 | + | |
| 147 | +/** 搜索按钮操作 */ | |
| 148 | +const handleQuery = () => { | |
| 149 | + queryParams.pageNo = 1 | |
| 150 | + getList() | |
| 151 | +} | |
| 152 | +#if ($table.templateType == 11) | |
| 153 | + | |
| 154 | +/** 添加/修改操作 */ | |
| 155 | +const formRef = ref() | |
| 156 | +const openForm = (type: string, id?: number) => { | |
| 157 | + if (!props.${subJoinColumn.javaField}) { | |
| 158 | + message.error('请选择一个${table.classComment}') | |
| 159 | + return | |
| 160 | + } | |
| 161 | + formRef.value.open(type, id, props.${subJoinColumn.javaField}) | |
| 162 | +} | |
| 163 | + | |
| 164 | +/** 删除按钮操作 */ | |
| 165 | +const handleDelete = async (id: number) => { | |
| 166 | + try { | |
| 167 | + // 删除的二次确认 | |
| 168 | + await message.delConfirm() | |
| 169 | + // 发起删除 | |
| 170 | + await ${simpleClassName}Api.delete${subSimpleClassName}(id) | |
| 171 | + message.success(t('common.delSuccess')) | |
| 172 | + // 刷新列表 | |
| 173 | + await getList() | |
| 174 | + } catch {} | |
| 175 | +} | |
| 176 | +#end | |
| 177 | +#if ($table.templateType != 11) | |
| 178 | + | |
| 179 | +/** 初始化 **/ | |
| 180 | +onMounted(() => { | |
| 181 | + getList() | |
| 182 | +}) | |
| 183 | +#end | |
| 184 | +</script> | |
| 0 | 185 | \ No newline at end of file | ... | ... |
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/list_sub_inner.vue.vm
0 → 100644