BJ_ZTEITS-Developers / parking-cloud-yudao

Commit dfcbcf09d49d56de771647c25f8c5e4d8ede6efe

Authored by puhui999
1 parent f3aa501e

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

Inline Side-by-side
Showing 2 changed files with 196 additions and 456 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/form.vue.vm
  View file @dfcbcf0
@@ -3,6 +3,12 @@ import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleCl @@ -3,6 +3,12 @@ import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleCl
3 3
4 import { useVbenModal } from '@vben/common-ui'; 4 import { useVbenModal } from '@vben/common-ui';
5 import { message, Tabs, Checkbox, Input, Textarea, Select,RadioGroup,CheckboxGroup, DatePicker } from 'ant-design-vue'; 5 import { message, Tabs, Checkbox, Input, Textarea, Select,RadioGroup,CheckboxGroup, DatePicker } 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 import { computed, ref } from 'vue'; 13 import { computed, ref } from 'vue';
8 import { $t } from '#/locales'; 14 import { $t } from '#/locales';
@@ -10,20 +16,6 @@ import { useVbenForm } from '#/adapter/form'; @@ -10,20 +16,6 @@ import { useVbenForm } from '#/adapter/form';
10 import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; 16 import { get${simpleClassName}, create${simpleClassName}, update${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
11 17
12 import { useFormSchema } from '../data'; 18 import { useFormSchema } from '../data';
13 -#if ( $table.templateType == 10 || $table.templateType == 12 )  
14 -#if ( $subTables && $subTables.size() > 0 )  
15 -#foreach ($subTable in $subTables)  
16 - #set ($index = $foreach.count - 1)  
17 - #set ($subSimpleClassName = $subSimpleClassNames.get($index))  
18 - #if ($subTable.subJoinMany) ## 一对多  
19 -import { useVbenVxeGrid } from '#/adapter/vxe-table';  
20 -import { use${subSimpleClassName}GridColumns } from '../data';  
21 - #else  
22 -import { use${subSimpleClassName}FormSchema } from '../data';  
23 - #end  
24 -#end  
25 -#end  
26 -#end  
27 19
28 const emit = defineEmits(['success']); 20 const emit = defineEmits(['success']);
29 const formData = ref<${simpleClassName}Api.${simpleClassName}>(); 21 const formData = ref<${simpleClassName}Api.${simpleClassName}>();
@@ -48,43 +40,17 @@ const getTitle = computed(() =&gt; { @@ -48,43 +40,17 @@ const getTitle = computed(() =&gt; {
48 40
49 ## 特殊：主子表专属逻辑 41 ## 特殊：主子表专属逻辑
50 #if ( $table.templateType == 10 || $table.templateType == 12 ) 42 #if ( $table.templateType == 10 || $table.templateType == 12 )
51 -#if ( $subTables && $subTables.size() > 0 )  
52 -/** 子表的表单 */  
53 -const subTabsName = ref('$subClassNameVars.get(0)')  
54 -## 特殊：主子表专属逻辑  
55 -#foreach ($subTable in $subTables)  
56 - #set ($index = $foreach.count - 1)  
57 - #set ($subSimpleClassName = $subSimpleClassNames.get($index))  
58 - #set ($subClassNameVar = $subClassNameVars.get($index))  
59 - #if ($subTable.subJoinMany) ## 一对多  
60 -const [${subSimpleClassName}Grid, ${subClassNameVar}GridApi] = useVbenVxeGrid({  
61 - gridOptions: {  
62 - columns: use${subSimpleClassName}GridColumns(),  
63 - border: true,  
64 - showOverflow: true,  
65 - autoResize: true,  
66 - keepSource: true,  
67 - rowConfig: {  
68 - keyField: 'id',  
69 - },  
70 - pagerConfig: {  
71 - enabled: false,  
72 - },  
73 - toolbarConfig: {  
74 - enabled: false,  
75 - },  
76 - },  
77 -});  
78 - #else  
79 -const [${subSimpleClassName}Form, ${subClassNameVar}FormApi] = useVbenForm({  
80 - layout: 'horizontal',  
81 - schema: use${subSimpleClassName}FormSchema(),  
82 - showDefaultActions: false  
83 -}); 43 + #if ( $subTables && $subTables.size() > 0 )
  44 +
  45 + /** 子表的表单 */
  46 + const subTabsName = ref('$subClassNameVars.get(0)')
  47 + #foreach ($subClassNameVar in $subClassNameVars)
  48 + #set ($index = $foreach.count - 1)
  49 + #set ($subSimpleClassName = $subSimpleClassNames.get($index))
  50 + const ${subClassNameVar}FormRef = ref<InstanceType<typeof ${subSimpleClassName}Form>>()
  51 + #end
84 #end 52 #end
85 #end 53 #end
86 -#end  
87 -#end  
88 54
89 const [Form, formApi] = useVbenForm({ 55 const [Form, formApi] = useVbenForm({
90 layout: 'horizontal', 56 layout: 'horizontal',
@@ -92,7 +58,6 @@ const [Form, formApi] = useVbenForm({ @@ -92,7 +58,6 @@ const [Form, formApi] = useVbenForm({
92 showDefaultActions: false 58 showDefaultActions: false
93 }); 59 });
94 60
95 -// TODO @puhui999: 处理完成主子表标准模式和内嵌模式下的表单提交  
96 const [Modal, modalApi] = useVbenModal({ 61 const [Modal, modalApi] = useVbenModal({
97 async onConfirm() { 62 async onConfirm() {
98 const { valid } = await formApi.validate(); 63 const { valid } = await formApi.validate();
@@ -107,9 +72,9 @@ const [Modal, modalApi] = useVbenModal({ @@ -107,9 +72,9 @@ const [Modal, modalApi] = useVbenModal({
107 #set ($index = $foreach.count - 1) 72 #set ($index = $foreach.count - 1)
108 #set ($subClassNameVar = $subClassNameVars.get($index)) 73 #set ($subClassNameVar = $subClassNameVars.get($index))
109 #if ($subTable.subJoinMany) ## 一对多 74 #if ($subTable.subJoinMany) ## 一对多
110 - 75 + ## TODO 列表值校验？
111 #else 76 #else
112 - const { valid: ${subClassNameVar}Valid } = await ${subClassNameVar}FormApi.validate(); 77 + const ${subClassNameVar}Valid = await ${subClassNameVar}FormRef.value?.validate();
113 if (!${subClassNameVar}Valid) { 78 if (!${subClassNameVar}Valid) {
114 subTabsName.value = '${subClassNameVar}'; 79 subTabsName.value = '${subClassNameVar}';
115 return; 80 return;
@@ -129,9 +94,9 @@ const [Modal, modalApi] = useVbenModal({ @@ -129,9 +94,9 @@ const [Modal, modalApi] = useVbenModal({
129 #set ($index = $foreach.count - 1) 94 #set ($index = $foreach.count - 1)
130 #set ($subClassNameVar = $subClassNameVars.get($index)) 95 #set ($subClassNameVar = $subClassNameVars.get($index))
131 #if ($subTable.subJoinMany) 96 #if ($subTable.subJoinMany)
132 - data.${subClassNameVar}s = ${subClassNameVar}GridApi.grid.getData(); 97 + data.${subClassNameVar}s = ${subClassNameVar}FormRef.value?.getData();
133 #else 98 #else
134 - data.${subClassNameVar} = await ${subClassNameVar}FormApi.getValues(); 99 + data.${subClassNameVar} = await ${subClassNameVar}FormRef.value?.getValues();
135 #end 100 #end
136 #end 101 #end
137 #end 102 #end
@@ -187,67 +152,9 @@ const [Modal, modalApi] = useVbenModal({ @@ -187,67 +152,9 @@ const [Modal, modalApi] = useVbenModal({
187 #set ($index = $foreach.count - 1) 152 #set ($index = $foreach.count - 1)
188 #set ($subClassNameVar = $subClassNameVars.get($index)) 153 #set ($subClassNameVar = $subClassNameVars.get($index))
189 #set ($subSimpleClassName = $subSimpleClassNames.get($index)) 154 #set ($subSimpleClassName = $subSimpleClassNames.get($index))
190 - #set ($subColumns = $subColumnsList.get($index))##当前字段数组  
191 - #set ($subJoinColumn = $subJoinColumns.get($index))##当前 join 字段  
192 - <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}">  
193 - #if ($subTable.subJoinMany) ## 一对多  
194 - <${subSimpleClassName}Grid class="mx-4">  
195 - #foreach($column in $subColumns)  
196 - #if ($column.createOperation || $column.updateOperation)  
197 - #set ($javaField = $column.javaField)  
198 - #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写  
199 - #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里  
200 - <template #${javaField}="{ row }">  
201 - <Input v-model:value="row.${javaField}" />  
202 - </template>  
203 - #elseif($column.htmlType == "imageUpload")## 图片上传  
204 - <template #${javaField}="{ row }">  
205 - <UploadImg v-model:value="row.${javaField}" />  
206 - </template>  
207 - #elseif($column.htmlType == "fileUpload")## 文件上传  
208 - <template #${javaField}="{ row }">  
209 - <UploadFile v-model:value="row.${javaField}" />  
210 - </template>  
211 - #elseif($column.htmlType == "editor")## 文本编辑器  
212 - <template #${javaField}="{ row }">  
213 - <Textarea v-model:value="row.${javaField}" />  
214 - </template>  
215 - #elseif($column.htmlType == "select")## 下拉框  
216 - <template #${javaField}="{ row, column }">  
217 - <Select v-model:value="row.${javaField}" class="w-full">  
218 - <Select.Option v-for="option in column.params.options" :key="option.value" :value="option.value">  
219 - {{ option.label }}  
220 - </Select.Option>  
221 - </Select>  
222 - </template>  
223 - #elseif($column.htmlType == "checkbox")## 多选框  
224 - <template #${javaField}="{ row, column }">  
225 - <CheckboxGroup v-model:value="row.${javaField}" :options="column.params.options" />  
226 - </template>  
227 - #elseif($column.htmlType == "radio")## 单选框  
228 - <template #${javaField}="{ row, column }">  
229 - <RadioGroup v-model:value="row.${javaField}" :options="column.params.options" />  
230 - </template>  
231 - #elseif($column.htmlType == "datetime")## 时间框  
232 - <template #${javaField}="{ row }">  
233 - <DatePicker  
234 - v-model:value="row.${javaField}"  
235 - :showTime="true"  
236 - format="YYYY-MM-DD HH:mm:ss"  
237 - valueFormat='x'  
238 - />  
239 - </template>  
240 - #elseif($column.htmlType == "textarea")## 文本框  
241 - <template #${javaField}="{ row }">  
242 - <Textarea v-model:value="row.${javaField}" />  
243 - </template>  
244 - #end  
245 - #end  
246 - #end  
247 - </${subSimpleClassName}Grid>  
248 - #else  
249 - <${subSimpleClassName}Form class="mx-4" />  
250 - #end 155 + #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index))
  156 + <Tabs.TabPane key="$subClassNameVar" tab="${subTable.classComment}" force-render>
  157 + <${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData?.id" />
251 </Tabs.TabPane> 158 </Tabs.TabPane>
252 #end 159 #end
253 </Tabs> 160 </Tabs>
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/form_sub_normal.vue.vm
  View file @dfcbcf0
@@ -2,359 +2,192 @@ @@ -2,359 +2,192 @@
2 #set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组 2 #set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组
3 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 3 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
4 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) 4 #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
5 -#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 5 +#set ($subClassNameVar = $subClassNameVars.get($subIndex))
6 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 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> 7 +<script lang="ts" setup>
  8 + import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
  9 +
  10 + import { computed, ref, h, onMounted,watch,nextTick } from 'vue';
  11 + import { $t } from '#/locales';
  12 +
  13 +#if ($subTable.subJoinMany) ## 一对多
  14 +import { Plus } from "@vben/icons";
  15 +import { Button, Tabs, Checkbox, Input, Textarea, Select,RadioGroup,CheckboxGroup, DatePicker } from 'ant-design-vue';
  16 +import type { OnActionClickParams } from '#/adapter/vxe-table';
  17 +import { useVbenVxeGrid } from '#/adapter/vxe-table';
  18 +import { use${subSimpleClassName}GridColumns } from '../data';
  19 +import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
  20 +#else
  21 +import { useVbenForm } from '#/adapter/form';
  22 +import { use${subSimpleClassName}FormSchema } from '../data';
  23 +import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
262 #end 24 #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 25
268 const props = defineProps<{ 26 const props = defineProps<{
269 - ${subJoinColumn.javaField}: undefined // ${subJoinColumn.columnComment}（主表的关联字段） 27 + ${subJoinColumn.javaField}?: any // ${subJoinColumn.columnComment}（主表的关联字段）
270 }>() 28 }>()
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 29
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; 30 +#if ($subTable.subJoinMany) ## 一对多
  31 +/** 表格操作按钮的回调函数 */
  32 +function onActionClick({
  33 + code,
  34 + row,
  35 +}: OnActionClickParams<${simpleClassName}Api.${subSimpleClassName}>) {
  36 + switch (code) {
  37 + case 'delete': {
  38 + onDelete(row);
  39 + break;
306 } 40 }
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 } 41 }
339 - row.${subJoinColumn.javaField} = props.${subJoinColumn.javaField}  
340 - formData.value.push(row)  
341 } 42 }
342 43
343 -/** 删除按钮操作 */  
344 -const handleDelete = (index) => {  
345 - formData.value.splice(index, 1)  
346 -}  
347 -#end 44 +const [${subSimpleClassName}Grid, ${subClassNameVar}GridApi] = useVbenVxeGrid({
  45 +gridOptions: {
  46 + columns: use${subSimpleClassName}GridColumns(onActionClick),
  47 + border: true,
  48 + showOverflow: true,
  49 + autoResize: true,
  50 + keepSource: true,
  51 + rowConfig: {
  52 + keyField: 'id',
  53 + },
  54 + pagerConfig: {
  55 + enabled: false,
  56 + },
  57 + toolbarConfig: {
  58 + enabled: false,
  59 + },
  60 +},
  61 +});
348 62
349 -/** 表单校验 */  
350 -const validate = () => {  
351 - return formRef.value.validate() 63 +/** 删除${subTable.classComment} */
  64 +const onDelete = async (row: ${simpleClassName}Api.${subSimpleClassName}) => {
  65 + await ${subClassNameVar}GridApi.grid.remove(row);
352 } 66 }
353 67
354 -/** 表单值 */  
355 -const getData = () => {  
356 - return formData.value 68 +/** 添加${subTable.classComment} */
  69 +const handleAdd = async () => {
  70 + await ${subClassNameVar}GridApi.grid.insertAt({} as ${simpleClassName}Api.${subSimpleClassName}, -1);
357 } 71 }
358 72
359 -defineExpose({ validate, getData })  
360 -</script>  
361 \ No newline at end of file 73 \ No newline at end of file
  74 +/** 提供获取表格数据的方法供父组件调用 */
  75 +defineExpose({
  76 + getData: (): ${simpleClassName}Api.${subSimpleClassName}[] => {
  77 + return [
  78 + ...${subClassNameVar}GridApi.grid.getData(),
  79 + ...${subClassNameVar}GridApi.grid.getInsertRecords().map((row) => {
  80 + delete row.id;
  81 + return row;
  82 + }),
  83 + ];
  84 + },
  85 +});
  86 +
  87 +/** 监听主表的关联字段的变化，加载对应的子表数据 */
  88 +watch(
  89 + () => props.${subJoinColumn.javaField},
  90 + async (val) => {
  91 + if (!val) {
  92 + return;
  93 + }
  94 +
  95 + await nextTick();
  96 + await ${subClassNameVar}GridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
  97 + },
  98 +);
  99 +#else
  100 +const [${subSimpleClassName}Form, ${subClassNameVar}FormApi] = useVbenForm({
  101 +layout: 'horizontal',
  102 +schema: use${subSimpleClassName}FormSchema(),
  103 +showDefaultActions: false
  104 +});
  105 +
  106 +/** 暴露出表单校验方法和表单值获取方法 */
  107 +defineExpose({
  108 + validate: async () => {
  109 + const { valid } = await ${subClassNameVar}FormApi.validate();
  110 + return valid;
  111 + },
  112 + getValues: ${subClassNameVar}FormApi.getValues,
  113 +});
  114 +
  115 +/** 监听主表的关联字段的变化，加载对应的子表数据 */
  116 +watch(
  117 + () => props.${subJoinColumn.javaField},
  118 + async (val) => {
  119 + if (!val) {
  120 + return;
  121 + }
  122 +
  123 + await nextTick();
  124 + await ${subClassNameVar}FormApi.setValues(await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
  125 + },
  126 +);
  127 +#end
  128 +</script>
  129 +
  130 +<template>
  131 +#if ($subTable.subJoinMany) ## 一对多
  132 + <${subSimpleClassName}Grid class="mx-4">
  133 + #foreach($column in $subColumns)
  134 + #if ($column.createOperation || $column.updateOperation)
  135 + #set ($javaField = $column.javaField)
  136 + #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
  137 + #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
  138 + <template #${javaField}="{ row }">
  139 + <Input v-model:value="row.${javaField}" />
  140 + </template>
  141 + #elseif($column.htmlType == "imageUpload")## 图片上传
  142 + <template #${javaField}="{ row }">
  143 + <UploadImg v-model:value="row.${javaField}" />
  144 + </template>
  145 + #elseif($column.htmlType == "fileUpload")## 文件上传
  146 + <template #${javaField}="{ row }">
  147 + <UploadFile v-model:value="row.${javaField}" />
  148 + </template>
  149 + #elseif($column.htmlType == "editor")## 文本编辑器
  150 + <template #${javaField}="{ row }">
  151 + <Textarea v-model:value="row.${javaField}" />
  152 + </template>
  153 + #elseif($column.htmlType == "select")## 下拉框
  154 + <template #${javaField}="{ row, column }">
  155 + <Select v-model:value="row.${javaField}" class="w-full">
  156 + <Select.Option v-for="option in column.params.options" :key="option.value" :value="option.value">
  157 + {{ option.label }}
  158 + </Select.Option>
  159 + </Select>
  160 + </template>
  161 + #elseif($column.htmlType == "checkbox")## 多选框
  162 + <template #${javaField}="{ row, column }">
  163 + <CheckboxGroup v-model:value="row.${javaField}" :options="column.params.options" />
  164 + </template>
  165 + #elseif($column.htmlType == "radio")## 单选框
  166 + <template #${javaField}="{ row, column }">
  167 + <RadioGroup v-model:value="row.${javaField}" :options="column.params.options" />
  168 + </template>
  169 + #elseif($column.htmlType == "datetime")## 时间框
  170 + <template #${javaField}="{ row }">
  171 + <DatePicker
  172 + v-model:value="row.${javaField}"
  173 + :showTime="true"
  174 + format="YYYY-MM-DD HH:mm:ss"
  175 + valueFormat='x'
  176 + />
  177 + </template>
  178 + #elseif($column.htmlType == "textarea")## 文本框
  179 + <template #${javaField}="{ row }">
  180 + <Textarea v-model:value="row.${javaField}" />
  181 + </template>
  182 + #end
  183 + #end
  184 + #end
  185 + </${subSimpleClassName}Grid>
  186 + <div class="flex justify-center">
  187 + <Button :icon="h(Plus)" type="primary" ghost @click="handleAdd" v-access:code="['${subTable.moduleName}:${simpleClassName_strikeCase}:create']">
  188 + {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
  189 + </Button>
  190 + </div>
  191 +#else
  192 + <${subSimpleClassName}Form class="mx-4" />
  193 +#end
  194 +</template>