BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 78e69421dbf1361d061e5574e9c9b51e61135693

Authored by xingyu4j
1 parent 39e7d782

perf: vben5 代码生成 使用 table action

Inline Side-by-side
Showing 3 changed files with 187 additions and 245 deletions
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/schema/views/data.ts.vm
  View file @78e6942
... ... @@ -218,43 +218,10 @@ export function useGridColumns(): VxeTableGridOptions<${simpleClassName}Api.${si
218 218 #end
219 219 #end
220 220 {
221   - field: 'operation',
222 221 title: '操作',
223   - minWidth: 200,
224   - align: 'center',
  222 + width: 200,
225 223 fixed: 'right',
226   - headerAlign: 'center',
227   - showOverflow: false,
228   - cellRender: {
229   - attrs: {
230   - nameField: '${columns[0].javaField}',
231   - nameTitle: '${table.classComment}',
232   - onClick: onActionClick,
233   - },
234   - name: 'CellOperation',
235   - options: [
236   -#if (${table.templateType} == 2)## 树表特有操作
237   - {
238   - code: 'append',
239   - text: '新增下级',
240   - show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:create']),
241   - },
242   -#end
243   - {
244   - code: 'edit',
245   - show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:update']),
246   - },
247   - {
248   - code: 'delete',
249   - show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:delete']),
250   -#if (${table.templateType} == 2)## 树表禁止删除带有子节点的数据
251   - disabled: (row: ${simpleClassName}Api.${simpleClassName}) => {
252   - return !!(row.children && row.children.length > 0);
253   - },
254   -#end
255   - },
256   - ],
257   - },
  224 + slots: { default: 'actions' },
258 225 },
259 226 ];
260 227 }
... ... @@ -422,9 +389,7 @@ export function use${subSimpleClassName}GridFormSchema(): VbenFormSchema[] {
422 389 }
423 390  
424 391 /** 列表的字段 */
425   -export function use${subSimpleClassName}GridColumns(
426   - onActionClick?: OnActionClickFn<${simpleClassName}Api.${subSimpleClassName}>,
427   -): VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>['columns'] {
  392 +export function use${subSimpleClassName}GridColumns(): VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>['columns'] {
428 393 return [
429 394 #if ($table.templateType != 2 && $deleteBatchEnable)
430 395 { type: 'checkbox', width: 40 },
... ... @@ -450,31 +415,10 @@ export function use${subSimpleClassName}GridColumns(
450 415 #end
451 416 #end
452 417 {
453   - field: 'operation',
454 418 title: '操作',
455   - minWidth: 200,
456   - align: 'center',
  419 + width: 200,
457 420 fixed: 'right',
458   - headerAlign: 'center',
459   - showOverflow: false,
460   - cellRender: {
461   - attrs: {
462   - nameField: '${columns[0].javaField}',
463   - nameTitle: '${subTable.classComment}',
464   - onClick: onActionClick,
465   - },
466   - name: 'CellOperation',
467   - options: [
468   - {
469   - code: 'edit',
470   - show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:update']),
471   - },
472   - {
473   - code: 'delete',
474   - show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:delete']),
475   - },
476   - ],
477   - },
  421 + slots: { default: 'actions' },
478 422 },
479 423 ];
480 424 }
... ... @@ -520,27 +464,10 @@ export function use${subSimpleClassName}GridColumns(
520 464 #end
521 465 #end
522 466 {
523   - field: 'operation',
524 467 title: '操作',
525   - minWidth: 60,
526   - align: 'center',
  468 + width: 200,
527 469 fixed: 'right',
528   - headerAlign: 'center',
529   - showOverflow: false,
530   - cellRender: {
531   - attrs: {
532   - nameField: '${columns[0].javaField}',
533   - nameTitle: '${table.classComment}',
534   - onClick: onActionClick,
535   - },
536   - name: 'CellOperation',
537   - options: [
538   - {
539   - code: 'delete',
540   - show: hasAccessByCodes(['${table.moduleName}:${simpleClassName_strikeCase}:delete']),
541   - },
542   - ],
543   - },
  470 + slots: { default: 'actions' },
544 471 },
545 472 ];
546 473 }
... ... @@ -675,7 +602,6 @@ export function use${subSimpleClassName}GridColumns(
675 602 #end
676 603 ];
677 604 }
678   -
679 605 #end
680 606 #end
681 607 #end
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/schema/views/index.vue.vm
  View file @78e6942
... ... @@ -11,7 +11,7 @@ import Form from &#39;./modules/form.vue&#39;;
11 11 #foreach ($subSimpleClassName in $subSimpleClassNames)
12 12 #set ($index = $foreach.count - 1)
13 13 #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($index))
14   - import ${subSimpleClassName}List from './modules/${subSimpleClassName_strikeCase}-list.vue'
  14 +import ${subSimpleClassName}List from './modules/${subSimpleClassName_strikeCase}-list.vue'
15 15 #end
16 16 #end
17 17  
... ... @@ -227,38 +227,39 @@ const [Grid, gridApi] = useVbenVxeGrid({
227 227 <template #toolbar-tools>
228 228 <TableAction
229 229 :actions="[
230   - #if (${table.templateType} == 2)## 树表特有：展开/收缩按钮
231   - {
232   - label: isExpanded ? '收缩' : '展开',
233   - type: 'primary',
234   - onClick: toggleExpand,
235   - },
236   - #end
237   - {
238   - label: $t('ui.actionTitle.create', ['${table.classComment}']),
239   - type: 'primary',
240   - icon: ACTION_ICON.ADD,
241   - auth: ['${table.moduleName}:${simpleClassName_strikeCase}:create'],
242   - onClick: handleCreate,
243   - },
244   - {
245   - label: $t('ui.actionTitle.export'),
246   - type: 'primary',
247   - icon: ACTION_ICON.DOWNLOAD,
248   - auth: ['${table.moduleName}:${simpleClassName_strikeCase}:export'],
249   - onClick: handleExport,
250   - },
251   - #if ($table.templateType != 2 && $deleteBatchEnable)
252   - {
253   - label: $t('ui.actionTitle.deleteBatch'),
254   - type: 'primary',
255   - icon: ACTION_ICON.DELETE,
256   - disabled: isEmpty(deleteIds),
257   - auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
258   - onClick: handleDeleteBatch,
259   - },
260   - #end
261   - ]"
  230 + #if (${table.templateType} == 2)## 树表特有：展开/收缩按钮
  231 + {
  232 + label: isExpanded ? '收缩' : '展开',
  233 + type: 'primary',
  234 + onClick: toggleExpand,
  235 + },
  236 + #end
  237 + {
  238 + label: $t('ui.actionTitle.create', ['${table.classComment}']),
  239 + type: 'primary',
  240 + icon: ACTION_ICON.ADD,
  241 + auth: ['${table.moduleName}:${simpleClassName_strikeCase}:create'],
  242 + onClick: handleCreate,
  243 + },
  244 + {
  245 + label: $t('ui.actionTitle.export'),
  246 + type: 'primary',
  247 + icon: ACTION_ICON.DOWNLOAD,
  248 + auth: ['${table.moduleName}:${simpleClassName_strikeCase}:export'],
  249 + onClick: handleExport,
  250 + },
  251 + #if ($table.templateType != 2 && $deleteBatchEnable)
  252 + {
  253 + label: $t('ui.actionTitle.deleteBatch'),
  254 + type: 'primary',
  255 + danger: true,
  256 + icon: ACTION_ICON.DELETE,
  257 + disabled: isEmpty(deleteIds),
  258 + auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
  259 + onClick: handleDeleteBatch,
  260 + },
  261 + #end
  262 + ]"
262 263 />
263 264 </template>
264 265 <template #actions="{ row }">
... ...
yudao-module-infra/src/main/resources/codegen/vue3_vben5_antd/schema/views/modules/list_sub_erp.vue.vm
  View file @78e6942
... ... @@ -6,45 +6,43 @@
6 6 #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex))
7 7 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
8 8 <script lang="ts" setup>
9   - import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
10   - import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
  9 +import type { VxeTableGridOptions } from '#/adapter/vxe-table';
  10 +import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${table.businessName}';
11 11  
12 12 #if ($table.templateType == 11) ## erp
13   - import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
  13 +import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
14 14 #end
15   - import { useVbenModal } from '@vben/common-ui';
16   - import { Button, message } from 'ant-design-vue';
17   - import { Plus, Trash2 } from '@vben/icons';
18   - import { ref, computed, h, nextTick,watch } from 'vue';
19   - import { $t } from '#/locales';
20   - import { useVbenVxeGrid } from '#/adapter/vxe-table';
21   -
  15 +import { useVbenModal } from '@vben/common-ui';
  16 +import { message } from 'ant-design-vue';
  17 +import { ref, computed, nextTick,watch } from 'vue';
  18 +import { $t } from '#/locales';
  19 +import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
22 20  
23 21 #if ($table.templateType == 11) ## erp
24   - import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}ListByIds,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${table.businessName}';
25   - import { use${subSimpleClassName}GridFormSchema, use${subSimpleClassName}GridColumns } from '../data';
26   - import { isEmpty } from '@vben/utils';
27   - #else
28   - #if ($subTable.subJoinMany) ## 一对多
29   - import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${table.businessName}';
30   - #else
31   - import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${table.businessName}';
32   - #end
33   - import { use${subSimpleClassName}GridColumns } from '../data';
  22 +import { delete${subSimpleClassName},#if ($deleteBatchEnable) delete${subSimpleClassName}ListByIds,#end get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${table.businessName}';
  23 +import { use${subSimpleClassName}GridFormSchema, use${subSimpleClassName}GridColumns } from '../data';
  24 +import { isEmpty } from '@vben/utils';
  25 +#else
  26 +#if ($subTable.subJoinMany) ## 一对多
  27 +import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${table.businessName}';
  28 +#else
  29 +import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${table.businessName}';
  30 +#end
  31 +import { use${subSimpleClassName}GridColumns } from '../data';
34 32 #end
35 33  
36 34 const props = defineProps<{
37   - ${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}（主表的关联字段）
  35 + ${subJoinColumn.javaField}?: number // ${subJoinColumn.columnComment}（主表的关联字段）
38 36 }>()
39 37  
40 38 #if ($table.templateType == 11) ## erp
41   - const [FormModal, formModalApi] = useVbenModal({
42   - connectedComponent: ${subSimpleClassName}Form,
43   - destroyOnClose: true,
44   - });
  39 +const [FormModal, formModalApi] = useVbenModal({
  40 + connectedComponent: ${subSimpleClassName}Form,
  41 + destroyOnClose: true,
  42 +});
45 43  
46 44 /** 创建${subTable.classComment} */
47   -function onCreate() {
  45 +function handleCreate() {
48 46 if (!props.${subJoinColumn.javaField}){
49 47 message.warning("请先选择一个${table.classComment}!")
50 48 return
... ... @@ -53,20 +51,22 @@ function onCreate() {
53 51 }
54 52  
55 53 /** 编辑${subTable.classComment} */
56   -function onEdit(row: ${simpleClassName}Api.${subSimpleClassName}) {
  54 +function handleEdit(row: ${simpleClassName}Api.${subSimpleClassName}) {
57 55 formModalApi.setData(row).open();
58 56 }
59 57  
60 58 /** 删除${subTable.classComment} */
61   -async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
  59 +async function handleDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
62 60 const hideLoading = message.loading({
63 61 content: $t('ui.actionMessage.deleting', [row.id]),
64   - duration: 0,
65 62 key: 'action_process_msg',
66 63 });
67 64 try {
68 65 await delete${subSimpleClassName}(row.id as number);
69   - message.success( $t('ui.actionMessage.deleteSuccess', [row.id]) );
  66 + message.success({
  67 + content: $t('ui.actionMessage.deleteSuccess', [row.id]),
  68 + key: 'action_key_msg',
  69 + });
70 70 onRefresh();
71 71 } finally {
72 72 hideLoading();
... ... @@ -75,15 +75,17 @@ async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
75 75  
76 76 #if ($deleteBatchEnable)
77 77 /** 批量删除${subTable.classComment} */
78   -async function onDeleteBatch() {
  78 +async function handleDeleteBatch() {
79 79 const hideLoading = message.loading({
80 80 content: $t('ui.actionMessage.deleting'),
81   - duration: 0,
82   - key: 'action_process_msg',
  81 + key: 'action_key_msg',
83 82 });
84 83 try {
85 84 await delete${subSimpleClassName}ListByIds(deleteIds.value);
86   - message.success( $t('ui.actionMessage.deleteSuccess') );
  85 + message.success({
  86 + content: $t('ui.actionMessage.deleteSuccess', [row.id]),
  87 + key: 'action_key_msg',
  88 + });
87 89 onRefresh();
88 90 } finally {
89 91 hideLoading();
... ... @@ -100,103 +102,86 @@ function setDeleteIds({
100 102 }
101 103 #end
102 104  
103   -/** 表格操作按钮的回调函数 */
104   -function onActionClick({
105   - code,
106   - row,
107   -}: OnActionClickParams<${simpleClassName}Api.${subSimpleClassName}>) {
108   - switch (code) {
109   - case 'edit': {
110   - onEdit(row);
111   - break;
112   - }
113   - case 'delete': {
114   - onDelete(row);
115   - break;
116   - }
117   - }
118   -}
119   -
120 105 #end
121   - const [Grid, gridApi] = useVbenVxeGrid({
  106 +const [Grid, gridApi] = useVbenVxeGrid({
122 107 #if ($table.templateType == 11)
123   - formOptions: {
124   - schema: use${subSimpleClassName}GridFormSchema(),
125   - },
  108 + formOptions: {
  109 + schema: use${subSimpleClassName}GridFormSchema(),
  110 + },
126 111 #end
127   - gridOptions: {
  112 + gridOptions: {
128 113 #if ($table.templateType == 11)
129   - columns: use${subSimpleClassName}GridColumns(onActionClick),
130   - proxyConfig: {
131   - ajax: {
132   - query: async ({ page }, formValues) => {
133   - if (!props.${subJoinColumn.javaField}){
134   - return []
135   - }
136   - return await get${subSimpleClassName}Page({
137   - pageNo: page.currentPage,
138   - pageSize: page.pageSize,
139   - ${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
140   - ...formValues,
141   - });
142   - },
  114 + columns: use${subSimpleClassName}GridColumns(),
  115 + proxyConfig: {
  116 + ajax: {
  117 + query: async ({ page }, formValues) => {
  118 + if (!props.${subJoinColumn.javaField}){
  119 + return []
  120 + }
  121 + return await get${subSimpleClassName}Page({
  122 + pageNo: page.currentPage,
  123 + pageSize: page.pageSize,
  124 + ${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
  125 + ...formValues,
  126 + });
143 127 },
144 128 },
145   - pagerConfig: {
146   - enabled: true,
147   - },
148   - toolbarConfig: {
149   - refresh: { code: 'query' },
150   - search: true,
151 129 },
  130 + pagerConfig: {
  131 + enabled: true,
  132 + },
  133 + toolbarConfig: {
  134 + refresh: { code: 'query' },
  135 + search: true,
  136 + },
152 137 #else
153   - columns: use${subSimpleClassName}GridColumns(),
154   - pagerConfig: {
155   - enabled: false,
156   - },
157   - toolbarConfig: {
158   - enabled: false,
159   - },
  138 + columns: use${subSimpleClassName}GridColumns(),
  139 + pagerConfig: {
  140 + nabled: false,
  141 + },
  142 + toolbarConfig: {
  143 + enabled: false,
  144 + },
160 145 #end
161   - height: '600px',
162   - rowConfig: {
163   - keyField: 'id',
164   - isHover: true,
165   - },
166   - } as VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>,
167   - #if (${table.templateType} == 11 && $deleteBatchEnable)
168   - gridEvents:{
169   - checkboxAll: setDeleteIds,
170   - checkboxChange: setDeleteIds,
171   - }
172   - #end
173   - });
  146 + height: '600px',
  147 + rowConfig: {
  148 + keyField: 'id',
  149 + isHover: true,
  150 + },
  151 + } as VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>,
  152 + #if (${table.templateType} == 11 && $deleteBatchEnable)
  153 + gridEvents:{
  154 + checkboxAll: setDeleteIds,
  155 + checkboxChange: setDeleteIds,
  156 + }
  157 + #end
  158 +});
174 159  
175 160 /** 刷新表格 */
176   -const onRefresh = async ()=> {
  161 +async function onRefresh() {
177 162 #if ($table.templateType == 11) ## erp
178   - await gridApi.query();
  163 + await gridApi.query();
179 164 #else
180   - #if ($subTable.subJoinMany) ## 一对多
181   - await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
182   - #else
183   - await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
184   - #end
  165 + #if ($subTable.subJoinMany) ## 一对多
  166 + await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
  167 + #else
  168 + await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
  169 + #end
185 170 #end
186 171 }
187 172  
188   - /** 监听主表的关联字段的变化，加载对应的子表数据 */
189   - watch(
190   - () => props.${subJoinColumn.javaField},
191   - async (val) => {
192   - if (!val) {
193   - return;
194   - }
195   - await nextTick();
196   - await onRefresh()
197   - },
198   - { immediate: true },
199   - );
  173 +/** 监听主表的关联字段的变化，加载对应的子表数据 */
  174 +watch(
  175 + () => props.${subJoinColumn.javaField},
  176 + async (val) => {
  177 + if (!val) {
  178 + return;
  179 + }
  180 + await nextTick();
  181 + await onRefresh()
  182 + },
  183 + { immediate: true },
  184 +);
200 185 </script>
201 186  
202 187 <template>
... ... @@ -204,22 +189,52 @@ const onRefresh = async ()=&gt; {
204 189 <FormModal @success="onRefresh" />
205 190 <Grid table-title="${subTable.classComment}列表">
206 191 <template #toolbar-tools>
207   - <Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:create']">
208   - {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
209   - </Button>
210   - #if ($table.templateType == 11 && $deleteBatchEnable)
211   - <Button
212   - :icon="h(Trash2)"
213   - type="primary"
214   - danger
215   - class="ml-2"
216   - :disabled="isEmpty(deleteIds)"
217   - @click="onDeleteBatch"
218   - v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:delete']"
219   - >
220   - 批量删除
221   - </Button>
222   - #end
  192 + <TableAction
  193 + :actions="[
  194 + {
  195 + label: $t('ui.actionTitle.create', ['${table.classComment}']),
  196 + type: 'primary',
  197 + icon: ACTION_ICON.ADD,
  198 + auth: ['${table.moduleName}:${simpleClassName_strikeCase}:create'],
  199 + onClick: handleCreate,
  200 + },
  201 + #if ($table.templateType == 11 && $deleteBatchEnable)
  202 + {
  203 + label: $t('ui.actionTitle.deleteBatch'),
  204 + type: 'primary',
  205 + danger: true,
  206 + icon: ACTION_ICON.DELETE,
  207 + disabled: isEmpty(deleteIds),
  208 + auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
  209 + onClick: handleDeleteBatch,
  210 + },
  211 + #end
  212 + ]"
  213 + />
  214 + </template>
  215 + <template #actions="{ row }">
  216 + <TableAction
  217 + :actions="[
  218 + {
  219 + label: $t('common.edit'),
  220 + type: 'link',
  221 + icon: ACTION_ICON.EDIT,
  222 + auth: ['${table.moduleName}:${simpleClassName_strikeCase}:update'],
  223 + onClick: handleEdit.bind(null, row),
  224 + },
  225 + {
  226 + label: $t('common.delete'),
  227 + type: 'link',
  228 + danger: true,
  229 + icon: ACTION_ICON.DELETE,
  230 + auth: ['${table.moduleName}:${simpleClassName_strikeCase}:delete'],
  231 + popConfirm: {
  232 + title: $t('ui.actionMessage.deleteConfirm', [row.id]),
  233 + confirm: handleDelete.bind(null, row),
  234 + },
  235 + },
  236 + ]"
  237 + />
223 238 </template>
224 239 </Grid>
225 240 #else
... ...