【功能完善】INFRA：代码生成 vben5 antd 主子表 normal 模版

puhui999
1 parent b0f4a252
Showing 3 changed files with 255 additions and 118 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/form.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/form_sub_normal.vue.vm
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/form_sub_normal.vue.vm
@@ -112,10 +112,11 @@ const [Modal, modalApi] = useVbenModal({
           #if ($subTable.subJoinMany) ## 一对多
             ## TODO 列表值校验？
           #else
-            const ${subClassNameVar}Valid = await ${subClassNameVar}FormRef.value?.validate();
-            if (!${subClassNameVar}Valid) {
-              subTabsName.value = '${subClassNameVar}';
-              return;
+            try {
+              await ${subClassNameVar}FormRef.value?.validate()
+            } catch (e) {
+              subTabsName.value = '${subClassNameVar}'
+              return
             }
           #end
         #end
@@ -134,7 +135,7 @@ const [Modal, modalApi] = useVbenModal({
           #if ($subTable.subJoinMany)
             data.${subClassNameVar}s = ${subClassNameVar}FormRef.value?.getData();
           #else
-            data.${subClassNameVar} = await ${subClassNameVar}FormRef.value?.getValues();
+            data.${subClassNameVar} = ${subClassNameVar}FormRef.value?.getValues();
           #end
         #end
       #end
@@ -7,19 +7,19 @@
 <script lang="ts" setup>
   import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
  
+  import { message, Tabs, Form, Input, Textarea,Button, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue';
   import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
   import { $t } from '#/locales';
+  import { DICT_TYPE, getDictOptions } from '#/utils/dict';
  
 #if ($subTable.subJoinMany) ## 一对多
+import type { VxeTableInstance } from 'vxe-table';
 import { Plus } from "@vben/icons";
-import { Button, Tabs, Checkbox, Input, Textarea, Select,RadioGroup,CheckboxGroup, DatePicker } from 'ant-design-vue';
-import type { OnActionClickParams } from '#/adapter/vxe-table';
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { use${subSimpleClassName}GridEditColumns } from '../data';
+import { VxeColumn, VxeTable } from 'vxe-table';
 import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
 #else
-import { useVbenForm } from '#/adapter/form';
-import { use${subSimpleClassName}FormSchema } from '../data';
+import type { Rule } from 'ant-design-vue/es/form';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
 import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
 #end
  
@@ -28,57 +28,27 @@ const props = defineProps&lt;{
 }>()
  
 #if ($subTable.subJoinMany) ## 一对多
-/** 表格操作按钮的回调函数 */
-function onActionClick({
- code,
- row,
-}: OnActionClickParams<${simpleClassName}Api.${subSimpleClassName}>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-  }
-}
-
-const [Grid, gridApi] = useVbenVxeGrid({
-gridOptions: {
-  columns: use${subSimpleClassName}GridEditColumns(onActionClick),
-  border: true,
-  showOverflow: true,
-  autoResize: true,
-  keepSource: true,
-  rowConfig: {
-    keyField: 'id',
-  },
-  pagerConfig: {
-    enabled: false,
-  },
-  toolbarConfig: {
-    enabled: false,
-  },
-},
-});
-
+const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
+const tableRef = ref<VxeTableInstance>();
 /** 添加${subTable.classComment} */
 const onAdd = async () => {
-  await gridApi.grid.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1);
+  await tableRef.value?.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1);
 }
  
 /** 删除${subTable.classComment} */
 const onDelete =  async (row: ${simpleClassName}Api.${subSimpleClassName}) => {
-  await gridApi.grid.remove(row);
+  await tableRef.value?.remove(row);
 }
  
 /** 提供获取表格数据的方法供父组件调用 */
 defineExpose({
   getData: (): ${simpleClassName}Api.${subSimpleClassName}[] => {
-    const data = gridApi.grid.getData() as ${simpleClassName}Api.${subSimpleClassName}[];
-    const removeRecords = gridApi.grid.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
-    const insertRecords = gridApi.grid.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
+    const data = list.value as ${simpleClassName}Api.${subSimpleClassName}[];
+    const removeRecords = tableRef.value?.getRemoveRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
+    const insertRecords = tableRef.value?.getInsertRecords() as ${simpleClassName}Api.${subSimpleClassName}[];
     return data
         .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
-        .concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+        ?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
   },
 });
  
@@ -89,32 +59,35 @@ watch(
       if (!val) {
         return;
       }
-      await nextTick();
-      await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
+      list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
     },
     { immediate: true },
 );
 #else
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 80,
-  },
-  layout: 'horizontal',
-  schema: use${subSimpleClassName}FormSchema(),
-  showDefaultActions: false
+const formRef = ref();
+const formData = ref<Partial<${simpleClassName}Api.${subSimpleClassName}>>({
+    #foreach ($column in $subColumns)
+        #if ($column.createOperation || $column.updateOperation)
+            #if ($column.htmlType == "checkbox")
+                    $column.javaField: [],
+            #else
+                    $column.javaField: undefined,
+            #end
+        #end
+    #end
 });
-
+const rules: Record<string, Rule[]> = {
+    #foreach ($column in $subColumns)
+        #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
+            #set($comment=$column.columnComment)
+                $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
+        #end
+    #end
+};
 /** 暴露出表单校验方法和表单值获取方法 */
 defineExpose({
-  validate: async () => {
-    const { valid } = await formApi.validate();
-    return valid;
-  },
-  getValues: formApi.getValues,
+  validate: async () => await formRef.value?.validate(),
+  getValues: ()=> formData.value,
 });
  
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
@@ -125,7 +98,7 @@ watch(
         return;
       }
       await nextTick();
-      await formApi.setValues(await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
+      formData.value = await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
     },
     { immediate: true },
 );
@@ -134,66 +107,232 @@ watch(
  
 <template>
 #if ($subTable.subJoinMany) ## 一对多
-  <Grid class="mx-4">
+  <vxe-table ref="tableRef" :data="list" show-overflow class="mx-4">
       #foreach($column in $subColumns)
           #if ($column.createOperation || $column.updateOperation)
+              #set ($comment = $column.columnComment)
               #set ($javaField = $column.javaField)
+              #set ($javaType = $column.javaType)
+              #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
               #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
               #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
-                <template #${javaField}="{ row }">
-                  <Input v-model:value="row.${javaField}" />
-                </template>
+                <vxe-column field="${javaField}" title="${comment}" align="center">
+                  <template #default="{row}">
+                    <Input v-model:value="row.${javaField}" />
+                  </template>
+                </vxe-column>
+              #elseif($column.htmlType == "imageUpload")## 图片上传
+                <vxe-column field="${javaField}" title="${comment}" align="center">
+                  <template #default="{row}">
+                    <ImageUpload v-model:value="row.${javaField}" />
+                  </template>
+                </vxe-column>
+              #elseif($column.htmlType == "fileUpload")## 文件上传
+                <vxe-column field="${javaField}" title="${comment}" align="center">
+                  <template #default="{row}">
+                    <FileUpload v-model:value="row.${javaField}" />
+                  </template>
+                </vxe-column>
+              #elseif($column.htmlType == "select")## 下拉框
+                <vxe-column field="${javaField}" title="${comment}" align="center">
+                  <template #default="{row}">
+                    <Select v-model:value="row.${javaField}" placeholder="请选择${comment}">
+                        #if ("" != $dictType)## 有数据字典
+                          <Select.Option
+                              v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                              :key="dict.value"
+                              :value="dict.value"
+                          >
+                            {{ dict.label }}
+                          </Select.Option>
+                        #else##没数据字典
+                          <Select.Option label="请选择字典生成" value="" />
+                        #end
+                    </Select>
+                  </template>
+                </vxe-column>
+              #elseif($column.htmlType == "checkbox")## 多选框
+                <vxe-column field="${javaField}" title="${comment}" align="center">
+                  <template #default="{row}">
+                    <CheckboxGroup v-model:value="row.${javaField}">
+                        #if ("" != $dictType)## 有数据字典
+                          <Checkbox
+                              v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                              :key="dict.value"
+                              :value="dict.value"
+                          >
+                            {{ dict.label }}
+                          </Checkbox>
+                        #else##没数据字典
+                          <Checkbox label="请选择字典生成" />
+                        #end
+                    </CheckboxGroup>
+                  </template>
+                </vxe-column>
+              #elseif($column.htmlType == "radio")## 单选框
+                <vxe-column field="${javaField}" title="${comment}" align="center">
+                  <template #default="{row}">
+                    <RadioGroup v-model:value="row.${javaField}">
+                        #if ("" != $dictType)## 有数据字典
+                          <Radio
+                              v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                              :key="dict.value"
+                              :value="dict.value"
+                          >
+                            {{ dict.label }}
+                          </Radio>
+                        #else##没数据字典
+                          <Radio value="1">请选择字典生成</Radio>
+                        #end
+                    </RadioGroup>
+                  </template>
+                </vxe-column>
+              #elseif($column.htmlType == "datetime")## 时间框
+                <vxe-column field="${javaField}" title="${comment}" align="center">
+                  <template #default="{row}">
+                    <DatePicker
+                        v-model:value="row.${javaField}"
+                        :showTime="true"
+                        format="YYYY-MM-DD HH:mm:ss"
+                        valueFormat='x'
+                    />
+                  </template>
+                </vxe-column>
+              #elseif($column.htmlType == "textarea" || $column.htmlType == "editor")## 文本框
+                <vxe-column field="${javaField}" title="${comment}" align="center">
+                  <template #default="{row}">
+                    <Textarea v-model:value="row.${javaField}" />
+                  </template>
+                </vxe-column>
+              #end
+          #end
+      #end
+    <vxe-column field="operation" title="操作" align="center">
+      <template #default="{row}">
+        <Button
+            size="small"
+            type="link"
+            danger
+            @click="onDelete(row as any)"
+            v-access:code="['${permissionPrefix}:delete']"
+        >
+          {{ $t('ui.actionTitle.delete') }}
+        </Button>
+      </template>
+    </vxe-column>
+  </vxe-table>
+  <div class="flex justify-center mt-4">
+    <Button :icon="h(Plus)" type="primary" ghost @click="onAdd" v-access:code="['${permissionPrefix}:create']">
+      {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
+    </Button>
+  </div>
+#else
+  <Form
+      ref="formRef"
+      class="mx-4"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+  >
+      #foreach($column in $subColumns)
+          #if ($column.createOperation || $column.updateOperation)
+              #set ($dictType = $column.dictType)
+              #set ($javaField = $column.javaField)
+              #set ($javaType = $column.javaType)
+              #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
+              #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
+                <Form.Item label="${comment}" name="${javaField}">
+                  <Input v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
+                </Form.Item>
               #elseif($column.htmlType == "imageUpload")## 图片上传
-                <template #${javaField}="{ row }">
-                  <UploadImg v-model:value="row.${javaField}" />
-                </template>
+                <Form.Item label="${comment}" name="${javaField}">
+                  <ImageUpload v-model:value="formData.${javaField}" />
+                </Form.Item>
               #elseif($column.htmlType == "fileUpload")## 文件上传
-                <template #${javaField}="{ row }">
-                  <UploadFile v-model:value="row.${javaField}" />
-                </template>
+                <Form.Item label="${comment}" name="${javaField}">
+                  <FileUpload v-model:value="formData.${javaField}" />
+                </Form.Item>
               #elseif($column.htmlType == "editor")## 文本编辑器
-                <template #${javaField}="{ row }">
-                  <Textarea v-model:value="row.${javaField}" />
-                </template>
+                <Form.Item label="${comment}" name="${javaField}">
+                  <RichTextarea v-model="formData.${javaField}" height="500px" />
+                </Form.Item>
               #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>
+                <Form.Item label="${comment}" name="${javaField}">
+                  <Select v-model:value="formData.${javaField}" placeholder="请选择${comment}">
+                      #if ("" != $dictType)## 有数据字典
+                        <Select.Option
+                            v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                            :key="dict.value"
+                            :value="dict.value"
+                        >
+                          {{ dict.label }}
+                        </Select.Option>
+                      #else##没数据字典
+                        <Select.Option label="请选择字典生成" value="" />
+                      #end
                   </Select>
-                </template>
+                </Form.Item>
               #elseif($column.htmlType == "checkbox")## 多选框
-                <template #${javaField}="{ row, column }">
-                  <CheckboxGroup v-model:value="row.${javaField}" :options="column.params.options" />
-                </template>
+                <Form.Item label="${comment}" name="${javaField}">
+                  <CheckboxGroup v-model:value="formData.${javaField}">
+                      #if ("" != $dictType)## 有数据字典
+                        <Checkbox
+                            v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                            :key="dict.value"
+                            :value="dict.value"
+                        >
+                          {{ dict.label }}
+                        </Checkbox>
+                      #else##没数据字典
+                        <Checkbox label="请选择字典生成" />
+                      #end
+                  </CheckboxGroup>
+                </Form.Item>
               #elseif($column.htmlType == "radio")## 单选框
-                <template #${javaField}="{ row, column }">
-                  <RadioGroup v-model:value="row.${javaField}" :options="column.params.options" />
-                </template>
+                <Form.Item label="${comment}" name="${javaField}">
+                  <RadioGroup v-model:value="formData.${javaField}">
+                      #if ("" != $dictType)## 有数据字典
+                        <Radio
+                            v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                            :key="dict.value"
+                            :value="dict.value"
+                        >
+                          {{ dict.label }}
+                        </Radio>
+                      #else##没数据字典
+                        <Radio value="1">请选择字典生成</Radio>
+                      #end
+                  </RadioGroup>
+                </Form.Item>
               #elseif($column.htmlType == "datetime")## 时间框
-                <template #${javaField}="{ row }">
+                <Form.Item label="${comment}" name="${javaField}">
                   <DatePicker
-                      v-model:value="row.${javaField}"
-                      :showTime="true"
-                      format="YYYY-MM-DD HH:mm:ss"
-                      valueFormat='x'
+                      v-model:value="formData.${javaField}"
+                      valueFormat="x"
+                      placeholder="选择${comment}"
                   />
-                </template>
+                </Form.Item>
               #elseif($column.htmlType == "textarea")## 文本框
-                <template #${javaField}="{ row }">
-                  <Textarea v-model:value="row.${javaField}" />
-                </template>
+                <Form.Item label="${comment}" name="${javaField}">
+                  <Textarea v-model:value="formData.${javaField}" placeholder="请输入${comment}" />
+                </Form.Item>
               #end
           #end
       #end
-  </Grid>
-  <div class="flex justify-center -mt-4">
-    <Button :icon="h(Plus)" type="primary" ghost @click="onAdd" v-access:code="['${subTable.moduleName}:${simpleClassName_strikeCase}:create']">
-      {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
-    </Button>
-  </div>
-#else
-  <Form class="mx-4" />
+  </Form>
 #end
 </template>
@@ -13,6 +13,7 @@
 #if ($subTable.subJoinMany) ## 一对多
 import { Plus } from "@vben/icons";
 import { Button, Tabs, Checkbox, Input, Textarea, Select,RadioGroup,CheckboxGroup, DatePicker } from 'ant-design-vue';
+import { ImageUpload, FileUpload } from "#/components/upload";
 import type { OnActionClickParams } from '#/adapter/vxe-table';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { use${subSimpleClassName}GridEditColumns } from '../data';
@@ -145,15 +146,11 @@ watch(
                 </template>
               #elseif($column.htmlType == "imageUpload")## 图片上传
                 <template #${javaField}="{ row }">
-                  <UploadImg v-model:value="row.${javaField}" />
+                  <ImageUpload 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}" />
+                  <FileUpload v-model:value="row.${javaField}" />
                 </template>
               #elseif($column.htmlType == "select")## 下拉框
                 <template #${javaField}="{ row, column }">
@@ -180,7 +177,7 @@ watch(
                       valueFormat='x'
                   />
                 </template>
-              #elseif($column.htmlType == "textarea")## 文本框
+              #elseif($column.htmlType == "textarea" || $column.htmlType == "editor")## 文本框
                 <template #${javaField}="{ row }">
                   <Textarea v-model:value="row.${javaField}" />
                 </template>