【代码优化】代码生成: vue3_vben5_antd schema 主子表模板优化（标准和内嵌模式）

puhui999
1 parent 1f7f0654
Showing 2 changed files with 130 additions and 16 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/data.ts.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/form.vue.vm
@@ -478,11 +478,29 @@ export function use${subSimpleClassName}GridColumns(
                     #set ($dictType = $column.dictType)
                     #set ($javaField = $column.javaField)
                     #set ($comment = $column.columnComment)
+                    #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
+                        #set ($dictMethod = "number")
+                    #elseif ($javaType == "String")
+                        #set ($dictMethod = "string")
+                    #elseif ($javaType == "Boolean")
+                        #set ($dictMethod = "boolean")
+                    #end
                     {
                         field: '${javaField}',
                         title: '${comment}',
                         minWidth: 120,
                         slots: { default: '${javaField}' },
+                    #if ($column.htmlType == "select" || $column.htmlType == "checkbox" || $column.htmlType == "radio")
+                    #if ("" != $dictType)## 有数据字典
+                        params: {
+                            options: getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod'),
+                        },
+                    #else
+                        params: {
+                            options: [],
+                        },
+                    #end
+                    #end
                     },
                 #end
             #end
@@ -2,13 +2,7 @@
 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
 import { useVbenModal } from '@vben/common-ui';
-import { message, Tabs } from 'ant-design-vue';
-## 特殊：主子表专属逻辑
-#if ( $table.templateType == 10 || $table.templateType == 12 )
-  #foreach ($subSimpleClassName in $subSimpleClassNames)
-  import ${subSimpleClassName}Form from './${subSimpleClassName}Form.vue'
-  #end
-#end
+import { message, Tabs, Checkbox, Input, Textarea, Select,RadioGroup,CheckboxGroup, DatePicker } from 'ant-design-vue';
 import { computed, ref } from 'vue';
 import { $t } from '#/locales';
@@ -16,6 +10,20 @@ import { useVbenForm } from &#39;#/adapter/form&#39;;
 import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
 import { useFormSchema } from '../data';
+#if ( $table.templateType == 10 || $table.templateType == 12 )
+#if ( $subTables && $subTables.size() > 0 )
+#foreach ($subTable in $subTables)
+  #set ($index = $foreach.count - 1)
+  #set ($subSimpleClassName = $subSimpleClassNames.get($index))
+  #if ($subTable.subJoinMany) ## 一对多
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { use${subSimpleClassName}GridColumns } from '../data';
+  #else
+import { use${subSimpleClassName}FormSchema } from '../data';
+  #end
+#end
+#end
+#end
 const emit = defineEmits(['success']);
 const formData = ref<${simpleClassName}Api.${simpleClassName}>();
@@ -40,15 +48,44 @@ const getTitle = computed(() =&gt; {
 ## 特殊：主子表专属逻辑
 #if ( $table.templateType == 10 || $table.templateType == 12 )
-  #if ( $subTables && $subTables.size() > 0 )
-
-  /** 子表的表单 */
-  const subTabsName = ref('$subClassNameVars.get(0)')
-    #foreach ($subClassNameVar in $subClassNameVars)
-    const ${subClassNameVar}FormRef = ref()
-    #end
+#if ( $subTables && $subTables.size() > 0 )
+/** 子表的表单 */
+const subTabsName = ref('$subClassNameVars.get(0)')
+## 特殊：主子表专属逻辑
+#foreach ($subTable in $subTables)
+  #set ($index = $foreach.count - 1)
+  #set ($subSimpleClassName = $subSimpleClassNames.get($index))
+  #set ($subClassNameVar = $subClassNameVars.get($index))
+  #if ($subTable.subJoinMany) ## 一对多
+/** {$subTable.classComment}表格配置 */
+const [${subSimpleClassName}Grid, {$subClassNameVar}GridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: use${subSimpleClassName}GridColumns(),
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+  #else
+const [${subSimpleClassName}Form, {$subClassNameVar}FormApi] = useVbenForm({
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false
+});
   #end
 #end
+#end
+#end
 const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
@@ -56,6 +93,7 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false
 });
+// TODO @puhui999: 处理完成主子表标准模式和内嵌模式下的表单提交
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -143,9 +181,67 @@ const [Modal, modalApi] = useVbenModal({
           #set ($index = $foreach.count - 1)
           #set ($subClassNameVar = $subClassNameVars.get($index))
           #set ($subSimpleClassName = $subSimpleClassNames.get($index))
-          #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
+          #set ($subColumns = $subColumnsList.get($index))##当前字段数组
+          #set ($subJoinColumn = $subJoinColumns.get($index))##当前 join 字段
           <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}">
-            <${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData.id" />
+            #if ($subTable.subJoinMany) ## 一对多
+              <${subSimpleClassName}Grid class="mx-4">
+                #foreach($column in $subColumns)
+                  #if ($column.createOperation || $column.updateOperation)
+                    #set ($javaField = $column.javaField)
+                    #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
+                    #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
+                      <template #${javaField}="{ row }">
+                        <Input v-model:value="row.${javaField}" />
+                      </template>
+                    #elseif($column.htmlType == "imageUpload")## 图片上传
+                      <template #${javaField}="{ row }">
+                        <UploadImg v-model:value="row.${javaField}" />
+                      </template>
+                    #elseif($column.htmlType == "fileUpload")## 文件上传
+                      <template #${javaField}="{ row }">
+                        <UploadFile v-model:value="row.${javaField}" />
+                      </template>
+                    #elseif($column.htmlType == "editor")## 文本编辑器
+                      <template #${javaField}="{ row }">
+                        <Textarea v-model:value="row.${javaField}" />
+                      </template>
+                    #elseif($column.htmlType == "select")## 下拉框
+                      <template #${javaField}="{ row, column }">
+                        <Select v-model:value="row.${javaField}" class="w-full">
+                          <Select.Option v-for="option in column.params.options" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                          </Select.Option>
+                        </Select>
+                      </template>
+                    #elseif($column.htmlType == "checkbox")## 多选框
+                      <template #${javaField}="{ row, column }">
+                        <CheckboxGroup v-model:value="row.${javaField}" :options="column.params.options" />
+                      </template>
+                    #elseif($column.htmlType == "radio")## 单选框
+                      <template #${javaField}="{ row, column }">
+                        <RadioGroup v-model:value="row.${javaField}" :options="column.params.options" />
+                      </template>
+                    #elseif($column.htmlType == "datetime")## 时间框
+                      <template #${javaField}="{ row }">
+                        <DatePicker
+                          v-model:value="row.${javaField}"
+                          :showTime="true"
+                          format="YYYY-MM-DD HH:mm:ss"
+                          valueFormat='x'
+                        />
+                      </template>
+                    #elseif($column.htmlType == "textarea")## 文本框
+                      <template #${javaField}="{ row }">
+                        <Textarea v-model:value="row.${javaField}" />
+                      </template>
+                    #end
+                  #end
+                #end
+              </Grid>
+            #else
+              <${subSimpleClassName}Form class="mx-4" />
+            #end
           </Tabs.TabPane>
         #end
       </Tabs>