BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 515cbbb285dc2df4decca664995cbb1512446e3b

Authored by puhui999
1 parent 57138d79

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

Inline Side-by-side
Showing 3 changed files with 301 additions and 98 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/form_sub_inner.vue.vm
  View file @515cbbb
1 ## 主表的 normal 和 inner 使用相同的 form 表单 1 ## 主表的 normal 和 inner 使用相同的 form 表单
2 -#parse("codegen/vue3_vben5_antd/schema/views/modules/form_sub_normal.vue.vm")  
3 \ No newline at end of file 2 \ No newline at end of file
  3 +#parse("codegen/vue3_vben5_antd/general/views/modules/form_sub_normal.vue.vm")
4 \ No newline at end of file 4 \ No newline at end of file
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/list_sub_erp.vue.vm
  View file @515cbbb
@@ -6,30 +6,33 @@ @@ -6,30 +6,33 @@
6 #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex)) 6 #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex))
7 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 7 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
8 <script lang="ts" setup> 8 <script lang="ts" setup>
9 - import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';  
10 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; 9 import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
  10 + import type { VxeTableInstance } from 'vxe-table';
  11 +
  12 + import { DictTag } from '#/components/dict-tag';
  13 + import { DICT_TYPE, getDictOptions } from '#/utils/dict';
  14 + import { VxeColumn, VxeTable } from 'vxe-table';
  15 + import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
  16 + import { cloneDeep, formatDateTime } from '@vben/utils';
11 17
12 #if ($table.templateType == 11) ## erp 18 #if ($table.templateType == 11) ## erp
13 - import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue' 19 + import { useVbenModal } from '@vben/common-ui';
  20 + import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
  21 + import { Button, message } from 'ant-design-vue';
  22 + import { Plus } from '@vben/icons';
  23 + import { $t } from '#/locales';
  24 + import { TableToolbar } from '#/components/table-toolbar';
  25 + import { getRangePickerDefaultProps } from '#/utils/date';
14 #end 26 #end
15 - import { useVbenModal } from '@vben/common-ui';  
16 - import { Button, message } from 'ant-design-vue';  
17 - import { Plus } from '@vben/icons';  
18 - import { #if($table.templateType != 11)ref,#end h, nextTick,watch } from 'vue';  
19 - import { $t } from '#/locales';  
20 - import { useVbenVxeGrid } from '#/adapter/vxe-table';  
21 -  
22 27
23 #if ($table.templateType == 11) ## erp 28 #if ($table.templateType == 11) ## erp
24 import { delete${subSimpleClassName}, get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; 29 import { delete${subSimpleClassName}, get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
25 - import { use${subSimpleClassName}GridFormSchema, use${subSimpleClassName}GridColumns } from '../data';  
26 #else 30 #else
27 #if ($subTable.subJoinMany) ## 一对多 31 #if ($subTable.subJoinMany) ## 一对多
28 import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; 32 import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
29 #else 33 #else
30 import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; 34 import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
31 #end 35 #end
32 - import { use${subSimpleClassName}GridColumns } from '../data';  
33 #end 36 #end
34 37
35 const props = defineProps<{ 38 const props = defineProps<{
@@ -69,91 +72,83 @@ async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) { @@ -69,91 +72,83 @@ async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
69 content: $t('ui.actionMessage.deleteSuccess', [row.id]), 72 content: $t('ui.actionMessage.deleteSuccess', [row.id]),
70 key: 'action_process_msg', 73 key: 'action_process_msg',
71 }); 74 });
72 - onRefresh(); 75 + getList();
73 } catch { 76 } catch {
74 hideLoading(); 77 hideLoading();
75 } 78 }
76 } 79 }
77 -  
78 -/** 表格操作按钮的回调函数 */  
79 -function onActionClick({  
80 - code,  
81 - row,  
82 -}: OnActionClickParams<${simpleClassName}Api.${subSimpleClassName}>) {  
83 - switch (code) {  
84 - case 'edit': {  
85 - onEdit(row);  
86 - break;  
87 - }  
88 - case 'delete': {  
89 - onDelete(row);  
90 - break;  
91 - }  
92 - }  
93 -}  
94 -  
95 -#end  
96 - const [Grid, gridApi] = useVbenVxeGrid({  
97 -#if ($table.templateType == 11)  
98 - formOptions: {  
99 - schema: use${subSimpleClassName}GridFormSchema(),  
100 - },  
101 -#end  
102 - gridOptions: {  
103 -#if ($table.templateType == 11)  
104 - columns: use${subSimpleClassName}GridColumns(onActionClick),  
105 - proxyConfig: {  
106 - ajax: {  
107 - query: async ({ page }, formValues) => {  
108 - if (!props.${subJoinColumn.javaField}){  
109 - return []  
110 - }  
111 - return await get${subSimpleClassName}Page({  
112 - pageNo: page.currentPage,  
113 - pageSize: page.pageSize,  
114 - ${subJoinColumn.javaField}: props.${subJoinColumn.javaField},  
115 - ...formValues,  
116 - });  
117 - },  
118 - },  
119 - },  
120 - pagerConfig: {  
121 - enabled: true,  
122 - },  
123 - toolbarConfig: {  
124 - refresh: { code: 'query' },  
125 - search: true,  
126 - },  
127 -#else  
128 - columns: use${subSimpleClassName}GridColumns(),  
129 - pagerConfig: {  
130 - enabled: false,  
131 - },  
132 - toolbarConfig: {  
133 - enabled: false,  
134 - },  
135 #end 80 #end
136 - height: '600px',  
137 - rowConfig: {  
138 - keyField: 'id',  
139 - isHover: true,  
140 - },  
141 - } as VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>,  
142 - });  
143 81
144 -/** 刷新表格 */  
145 -const onRefresh = async ()=> { 82 + const loading = ref(true) // 列表的加载中
  83 + const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
146 #if ($table.templateType == 11) ## erp 84 #if ($table.templateType == 11) ## erp
147 - await gridApi.query();  
148 -#else  
149 - #if ($subTable.subJoinMany) ## 一对多  
150 - await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));  
151 - #else  
152 - await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);  
153 - #end 85 + const total = ref(0) // 列表的总页数
154 #end 86 #end
  87 +#if ($table.templateType == 11) ## erp
  88 + const queryFormRef = ref() // 搜索的表单
  89 + const queryParams = reactive({
  90 + pageNo: 1,
  91 + pageSize: 10,
  92 + #foreach ($column in $subColumns)
  93 + #if ($column.listOperation)
  94 + #if ($column.listOperationCondition != 'BETWEEN')
  95 + $column.javaField: undefined,
  96 + #end
  97 + #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
  98 + $column.javaField: undefined,
  99 + #end
  100 + #end
  101 + #end
  102 +
  103 + ${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
  104 + })
  105 +
  106 +/** 搜索按钮操作 */
  107 +const handleQuery = () => {
  108 + queryParams.pageNo = 1
  109 + getList()
155 } 110 }
156 111
  112 +/** 重置按钮操作 */
  113 +const resetQuery = () => {
  114 + queryFormRef.value.resetFields()
  115 + handleQuery()
  116 +}
  117 +#end
  118 + /** 查询列表 */
  119 + const getList = async () => {
  120 + loading.value = true
  121 + try {
  122 + if (!props.${subJoinColumn.javaField}){
  123 + return []
  124 + }
  125 + ## 特殊：树表专属逻辑（树不需要分页接口）
  126 + #if ($table.templateType == 11) ## erp
  127 + const params = cloneDeep(queryParams) as any;
  128 + #foreach ($column in $columns)
  129 + #if ($column.listOperation)
  130 + #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
  131 + if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
  132 + params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
  133 + }
  134 + #end
  135 + #end
  136 + #end
  137 + const data = await get${subSimpleClassName}Page(params)
  138 + list.value = data.list
  139 + total.value = data.total
  140 + #else
  141 + #if ($subTable.subJoinMany) ## 一对多
  142 + list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
  143 + #else
  144 + list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
  145 + #end
  146 + #end
  147 + } finally {
  148 + loading.value = false
  149 + }
  150 + }
  151 +
157 /** 监听主表的关联字段的变化，加载对应的子表数据 */ 152 /** 监听主表的关联字段的变化，加载对应的子表数据 */
158 watch( 153 watch(
159 () => props.${subJoinColumn.javaField}, 154 () => props.${subJoinColumn.javaField},
@@ -162,23 +157,231 @@ const onRefresh = async ()=&gt; { @@ -162,23 +157,231 @@ const onRefresh = async ()=&gt; {
162 return; 157 return;
163 } 158 }
164 await nextTick(); 159 await nextTick();
165 - await onRefresh() 160 + await getList()
166 }, 161 },
167 { immediate: true }, 162 { immediate: true },
168 ); 163 );
  164 +
  165 +#if ($table.templateType == 11) ## erp
  166 +/** 隐藏搜索栏 */
  167 +const hiddenSearchBar = ref(false);
  168 +const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
  169 +const tableRef = ref<VxeTableInstance>();
  170 +
  171 +/** 初始化 */
  172 +onMounted(async () => {
  173 + await getList();
  174 + await nextTick();
  175 + // 挂载 toolbar 工具栏
  176 + const table = tableRef.value;
  177 + const tableToolbar = tableToolbarRef.value;
  178 + if (table && tableToolbar) {
  179 + await table.connect(tableToolbar.getToolbarRef()!);
  180 + }
  181 +});
  182 +#end
169 </script> 183 </script>
170 184
171 <template> 185 <template>
172 #if ($table.templateType == 11) ## erp 186 #if ($table.templateType == 11) ## erp
173 - <FormModal @success="onRefresh" />  
174 - <Grid table-title="${subTable.classComment}列表">  
175 - <template #toolbar-tools>  
176 - <Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:create']">  
177 - {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}  
178 - </Button>  
179 - </template>  
180 - </Grid> 187 + <FormModal @success="getList" />
  188 + <div class="h-[600px]">
  189 + <ContentWrap v-if="!hiddenSearchBar">
  190 + <!-- 搜索工作栏 -->
  191 + <Form
  192 + :model="queryParams"
  193 + ref="queryFormRef"
  194 + layout="inline"
  195 + >
  196 + #foreach($column in $subColumns)
  197 + #if ($column.listOperation)
  198 + #set ($dictType = $column.dictType)
  199 + #set ($javaField = $column.javaField)
  200 + #set ($javaType = $column.javaType)
  201 + #set ($comment = $column.columnComment)
  202 + #if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
  203 + #set ($dictMethod = "number")
  204 + #elseif ($javaType == "String")
  205 + #set ($dictMethod = "string")
  206 + #elseif ($javaType == "Boolean")
  207 + #set ($dictMethod = "boolean")
  208 + #end
  209 + #if ($column.htmlType == "input")
  210 + <Form.Item label="${comment}" name="${javaField}">
  211 + <Input
  212 + v-model:value="queryParams.${javaField}"
  213 + placeholder="请输入${comment}"
  214 + allowClear
  215 + @pressEnter="handleQuery"
  216 + class="w-full"
  217 + />
  218 + </Form.Item>
  219 + #elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox")
  220 + <Form.Item label="${comment}" name="${javaField}">
  221 + <Select
  222 + v-model:value="queryParams.${javaField}"
  223 + placeholder="请选择${comment}"
  224 + allowClear
  225 + class="w-full"
  226 + >
  227 + #if ("" != $dictType)## 设置了 dictType 数据字典的情况
  228 + <Select.Option
  229 + v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
  230 + :key="dict.value"
  231 + :value="dict.value"
  232 + >
  233 + {{ dict.label }}
  234 + </Select.Option>
  235 + #else## 未设置 dictType 数据字典的情况
  236 + <Select.Option label="请选择字典生成" value="" />
  237 + #end
  238 + </Select>
  239 + </Form.Item>
  240 + #elseif($column.htmlType == "datetime")
  241 + #if ($column.listOperationCondition != "BETWEEN")## 非范围
  242 + <Form.Item label="${comment}" name="${javaField}">
  243 + <DatePicker
  244 + v-model:value="queryParams.${javaField}"
  245 + valueFormat="YYYY-MM-DD"
  246 + placeholder="选择${comment}"
  247 + allowClear
  248 + class="w-full"
  249 + />
  250 + </Form.Item>
  251 + #else## 范围
  252 + <Form.Item label="${comment}" name="${javaField}">
  253 + <RangePicker
  254 + v-model:value="queryParams.${javaField}"
  255 + v-bind="getRangePickerDefaultProps()"
  256 + class="w-full"
  257 + />
  258 + </Form.Item>
  259 + #end
  260 + #end
  261 + #end
  262 + #end
  263 + <Form.Item>
  264 + <Button class="ml-2" @click="resetQuery"> 重置 </Button>
  265 + <Button class="ml-2" @click="handleQuery" type="primary">
  266 + 搜索
  267 + </Button>
  268 + </Form.Item>
  269 + </Form>
  270 + </ContentWrap>
  271 +
  272 + <!-- 列表 -->
  273 + <ContentWrap title="${table.classComment}">
  274 + <template #extra>
  275 + <TableToolbar
  276 + ref="tableToolbarRef"
  277 + v-model:hidden-search="hiddenSearchBar"
  278 + >
  279 + <Button
  280 + class="ml-2"
  281 + :icon="h(Plus)"
  282 + type="primary"
  283 + @click="onCreate"
  284 + v-access:code="['${permissionPrefix}:create']"
  285 + >
  286 + {{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
  287 + </Button>
  288 + </TableToolbar>
  289 + </template>
  290 + <vxe-table
  291 + ref="tableRef"
  292 + :data="list"
  293 + show-overflow
  294 + :loading="loading"
  295 + >
  296 + #foreach($column in $subColumns)
  297 + #if ($column.listOperationResult)
  298 + #set ($dictType=$column.dictType)
  299 + #set ($javaField = $column.javaField)
  300 + #set ($comment=$column.columnComment)
  301 + #if ($column.javaType == "LocalDateTime")## 时间类型
  302 + <vxe-column field="${javaField}" title="${comment}" align="center">
  303 + <template #default="{row}">
  304 + {{formatDateTime(row.${javaField})}}
  305 + </template>
  306 + </vxe-column>
  307 + #elseif($column.dictType && "" != $column.dictType)## 数据字典
  308 + <vxe-column field="${javaField}" title="${comment}" align="center">
  309 + <template #default="{row}">
  310 + <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
  311 + </template>
  312 + </vxe-column>
  313 + #elseif ($table.templateType == 2 && $javaField == $treeNameColumn.javaField)
  314 + <vxe-column field="${javaField}" title="${comment}" align="center" tree-node/>
  315 + #else
  316 + <vxe-column field="${javaField}" title="${comment}" align="center" />
  317 + #end
  318 + #end
  319 + #end
  320 + <vxe-column field="operation" title="操作" align="center">
  321 + <template #default="{row}">
  322 + <Button
  323 + size="small"
  324 + type="link"
  325 + @click="onEdit(row as any)"
  326 + v-access:code="['${permissionPrefix}:update']"
  327 + >
  328 + {{ $t('ui.actionTitle.edit') }}
  329 + </Button>
  330 + <Button
  331 + size="small"
  332 + type="link"
  333 + danger
  334 + class="ml-2"
  335 + @click="onDelete(row as any)"
  336 + v-access:code="['${permissionPrefix}:delete']"
  337 + >
  338 + {{ $t('ui.actionTitle.delete') }}
  339 + </Button>
  340 + </template>
  341 + </vxe-column>
  342 + </vxe-table>
  343 + <!-- 分页 -->
  344 + <div class="mt-2 flex justify-end">
  345 + <Pagination
  346 + :total="total"
  347 + v-model:current="queryParams.pageNo"
  348 + v-model:page-size="queryParams.pageSize"
  349 + show-size-changer
  350 + @change="getList"
  351 + />
  352 + </div>
  353 + </ContentWrap>
  354 + </div>
181 #else 355 #else
182 - <Grid table-title="${subTable.classComment}列表" /> 356 + <ContentWrap title="${subTable.classComment}列表">
  357 + <vxe-table
  358 + :data="list"
  359 + show-overflow
  360 + :loading="loading"
  361 + >
  362 + #foreach($column in $subColumns)
  363 + #if ($column.listOperationResult)
  364 + #set ($dictType=$column.dictType)
  365 + #set ($javaField = $column.javaField)
  366 + #set ($comment=$column.columnComment)
  367 + #if ($column.javaType == "LocalDateTime")## 时间类型
  368 + <vxe-column field="${javaField}" title="${comment}" align="center">
  369 + <template #default="{row}">
  370 + {{formatDateTime(row.${javaField})}}
  371 + </template>
  372 + </vxe-column>
  373 + #elseif($column.dictType && "" != $column.dictType)## 数据字典
  374 + <vxe-column field="${javaField}" title="${comment}" align="center">
  375 + <template #default="{row}">
  376 + <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
  377 + </template>
  378 + </vxe-column>
  379 + #else
  380 + <vxe-column field="${javaField}" title="${comment}" align="center" />
  381 + #end
  382 + #end
  383 + #end
  384 + </vxe-table>
  385 + </ContentWrap>
183 #end 386 #end
184 </template> 387 </template>
185 \ No newline at end of file 388 \ No newline at end of file
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/list_sub_inner.vue.vm
  View file @515cbbb
1 ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点： 1 ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点：
2 ## 1）inner 使用 list 不分页，erp 使用 page 分页 2 ## 1）inner 使用 list 不分页，erp 使用 page 分页
3 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持 3 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持
4 -#parse("codegen/vue3_vben5_antd/schema/views/modules/list_sub_erp.vue.vm")  
5 \ No newline at end of file 4 \ No newline at end of file
  5 +#parse("codegen/vue3_vben5_antd/general/views/modules/list_sub_erp.vue.vm")
6 \ No newline at end of file 6 \ No newline at end of file