Commit b0f4a252c747fadfda2d2d95b7be3e33f08f3ba7
1 parent
28c818e9
【功能完善】INFRA:代码生成 vben5 antd 树表模版
Showing
2 changed files
with
76 additions
and
13 deletions
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/form.vue.vm
| ... | ... | @@ -5,11 +5,11 @@ import type { Rule } from 'ant-design-vue/es/form'; |
| 5 | 5 | import { useVbenModal } from '@vben/common-ui'; |
| 6 | 6 | import { Tinymce as RichTextarea } from '#/components/tinymce'; |
| 7 | 7 | import { ImageUpload, FileUpload } from "#/components/upload"; |
| 8 | -import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker } from 'ant-design-vue'; | |
| 8 | +import { message, Tabs, Form, Input, Textarea, Select, RadioGroup, Radio, CheckboxGroup, Checkbox, DatePicker, TreeSelect } from 'ant-design-vue'; | |
| 9 | 9 | import { DICT_TYPE, getDictOptions } from '#/utils/dict'; |
| 10 | 10 | #if($table.templateType == 2)## 树表需要导入这些 |
| 11 | 11 | import { get${simpleClassName}List } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; |
| 12 | -import { handleTree } from '#/utils/tree'; | |
| 12 | +import { handleTree } from '@vben/utils' | |
| 13 | 13 | #end |
| 14 | 14 | ## 特殊:主子表专属逻辑 |
| 15 | 15 | #if ( $table.templateType == 10 || $table.templateType == 12 ) |
| ... | ... | @@ -90,10 +90,12 @@ const resetForm = () => { |
| 90 | 90 | /** 获得${table.classComment}树 */ |
| 91 | 91 | const get${simpleClassName}Tree = async () => { |
| 92 | 92 | ${classNameVar}Tree.value = [] |
| 93 | - const data = await get${simpleClassName}List() | |
| 94 | - const root: Tree = { id: 0, name: '顶级${table.classComment}', children: [] } | |
| 95 | - root.children = handleTree(data, 'id', '${treeParentColumn.javaField}') | |
| 96 | - ${classNameVar}Tree.value.push(root) | |
| 93 | + const data = await get${simpleClassName}List({}); | |
| 94 | + data.unshift({ | |
| 95 | + id: 0, | |
| 96 | + name: '顶级${table.classComment}', | |
| 97 | + }); | |
| 98 | + ${classNameVar}Tree.value = handleTree(data); | |
| 97 | 99 | } |
| 98 | 100 | #end |
| 99 | 101 | |
| ... | ... | @@ -205,9 +207,17 @@ const [Modal, modalApi] = useVbenModal({ |
| 205 | 207 | v-model:value="formData.${javaField}" |
| 206 | 208 | :treeData="${classNameVar}Tree" |
| 207 | 209 | #if ($treeNameColumn.javaField == "name") |
| 208 | - :fieldNames="defaultProps" | |
| 210 | + :fieldNames="{ | |
| 211 | + label: 'name', | |
| 212 | + value: 'id', | |
| 213 | + children: 'children', | |
| 214 | + }" | |
| 209 | 215 | #else |
| 210 | - :fieldNames="{...defaultProps, label: '$treeNameColumn.javaField'}" | |
| 216 | + :fieldNames="{ | |
| 217 | + label: '$treeNameColumn.javaField', | |
| 218 | + value: 'id', | |
| 219 | + children: 'children', | |
| 220 | + }" | |
| 211 | 221 | #end |
| 212 | 222 | checkable |
| 213 | 223 | treeDefaultExpandAll | ... | ... |
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/index.vue.vm
| ... | ... | @@ -26,7 +26,7 @@ import { getRangePickerDefaultProps } from '#/utils/date'; |
| 26 | 26 | import { ref, h, reactive,onMounted,nextTick } from 'vue'; |
| 27 | 27 | import { $t } from '#/locales'; |
| 28 | 28 | #if (${table.templateType} == 2)## 树表接口 |
| 29 | -import { handleTree } from '@/utils/tree' | |
| 29 | +import { handleTree,isEmpty } from '@vben/utils' | |
| 30 | 30 | import { get${simpleClassName}List, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; |
| 31 | 31 | #else## 标准表接口 |
| 32 | 32 | import { get${simpleClassName}Page, delete${simpleClassName}, export${simpleClassName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}'; |
| ... | ... | @@ -42,7 +42,12 @@ const select${simpleClassName} = ref<${simpleClassName}Api.${simpleClassName}>() |
| 42 | 42 | #end |
| 43 | 43 | |
| 44 | 44 | const loading = ref(true) // 列表的加载中 |
| 45 | +#if ( $table.templateType == 2 ) | |
| 46 | +const list = ref<any[]>([]) // 树列表的数据 | |
| 47 | +#else | |
| 45 | 48 | const list = ref<${simpleClassName}Api.${simpleClassName}[]>([]) // 列表的数据 |
| 49 | +#end | |
| 50 | + | |
| 46 | 51 | ## 特殊:树表专属逻辑(树不需要分页接口) |
| 47 | 52 | #if ( $table.templateType != 2 ) |
| 48 | 53 | const total = ref(0) // 列表的总页数 |
| ... | ... | @@ -83,8 +88,7 @@ const getList = async () => { |
| 83 | 88 | #end |
| 84 | 89 | ## 特殊:树表专属逻辑(树不需要分页接口) |
| 85 | 90 | #if ( $table.templateType == 2 ) |
| 86 | - const data = await get${simpleClassName}List(params) | |
| 87 | - list.value = handleTree(data, 'id', '${treeParentColumn.javaField}') | |
| 91 | + list.value = await get${simpleClassName}List(params); | |
| 88 | 92 | #else |
| 89 | 93 | const data = await get${simpleClassName}Page(params) |
| 90 | 94 | list.value = data.list |
| ... | ... | @@ -97,7 +101,9 @@ const getList = async () => { |
| 97 | 101 | |
| 98 | 102 | /** 搜索按钮操作 */ |
| 99 | 103 | const handleQuery = () => { |
| 104 | +#if ( $table.templateType != 2 ) | |
| 100 | 105 | queryParams.pageNo = 1 |
| 106 | +#end | |
| 101 | 107 | getList() |
| 102 | 108 | } |
| 103 | 109 | |
| ... | ... | @@ -163,6 +169,16 @@ try { |
| 163 | 169 | const hiddenSearchBar = ref(false); |
| 164 | 170 | const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>(); |
| 165 | 171 | const tableRef = ref<VxeTableInstance>(); |
| 172 | + | |
| 173 | +#if (${table.templateType} == 2) | |
| 174 | +/** 切换树形展开/收缩状态 */ | |
| 175 | +const isExpanded = ref(true); | |
| 176 | +function toggleExpand() { | |
| 177 | + isExpanded.value = !isExpanded.value; | |
| 178 | + tableRef.value?.setAllTreeExpand(isExpanded.value); | |
| 179 | +} | |
| 180 | +#end | |
| 181 | + | |
| 166 | 182 | /** 初始化 */ |
| 167 | 183 | onMounted(async () => { |
| 168 | 184 | await getList(); |
| ... | ... | @@ -270,6 +286,11 @@ onMounted(async () => { |
| 270 | 286 | ref="tableToolbarRef" |
| 271 | 287 | v-model:hidden-search="hiddenSearchBar" |
| 272 | 288 | > |
| 289 | + #if (${table.templateType} == 2) | |
| 290 | + <Button @click="toggleExpand" class="mr-2"> | |
| 291 | + {{ isExpanded ? '收缩' : '展开' }} | |
| 292 | + </Button> | |
| 293 | + #end | |
| 273 | 294 | <Button |
| 274 | 295 | class="ml-2" |
| 275 | 296 | :icon="h(Plus)" |
| ... | ... | @@ -277,7 +298,7 @@ onMounted(async () => { |
| 277 | 298 | @click="onCreate" |
| 278 | 299 | v-access:code="['${permissionPrefix}:create']" |
| 279 | 300 | > |
| 280 | - {{ $t('ui.actionTitle.create', ['示例联系人']) }} | |
| 301 | + {{ $t('ui.actionTitle.create', ['${table.classComment}']) }} | |
| 281 | 302 | </Button> |
| 282 | 303 | <Button |
| 283 | 304 | :icon="h(Download)" |
| ... | ... | @@ -291,7 +312,21 @@ onMounted(async () => { |
| 291 | 312 | </Button> |
| 292 | 313 | </TableToolbar> |
| 293 | 314 | </template> |
| 294 | - <vxe-table ref="tableRef" :data="list" show-overflow :loading="loading"> | |
| 315 | + <vxe-table | |
| 316 | + ref="tableRef" | |
| 317 | + :data="list" | |
| 318 | + #if ( $table.templateType == 2 ) | |
| 319 | + :tree-config="{ | |
| 320 | + parentField: '${treeParentColumn.javaField}', | |
| 321 | + rowField: 'id', | |
| 322 | + transform: true, | |
| 323 | + expandAll: true, | |
| 324 | + reserve: true, | |
| 325 | + }" | |
| 326 | + #end | |
| 327 | + show-overflow | |
| 328 | + :loading="loading" | |
| 329 | + > | |
| 295 | 330 | ## 特殊:主子表专属逻辑 |
| 296 | 331 | #if ( $table.templateType == 12 && $subTables && $subTables.size() > 0 ) |
| 297 | 332 | <!-- 子表的列表 --> |
| ... | ... | @@ -330,6 +365,8 @@ onMounted(async () => { |
| 330 | 365 | <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" /> |
| 331 | 366 | </template> |
| 332 | 367 | </vxe-column> |
| 368 | + #elseif ($table.templateType == 2 && $javaField == $treeNameColumn.javaField) | |
| 369 | + <vxe-column field="${javaField}" title="${comment}" align="center" tree-node/> | |
| 333 | 370 | #else |
| 334 | 371 | <vxe-column field="${javaField}" title="${comment}" align="center" /> |
| 335 | 372 | #end |
| ... | ... | @@ -337,6 +374,16 @@ onMounted(async () => { |
| 337 | 374 | #end |
| 338 | 375 | <vxe-column field="operation" title="操作" align="center"> |
| 339 | 376 | <template #default="{row}"> |
| 377 | +#if ( $table.templateType == 2 ) | |
| 378 | + <Button | |
| 379 | + size="small" | |
| 380 | + type="link" | |
| 381 | + @click="onAppend(row as any)" | |
| 382 | + v-access:code="['${permissionPrefix}:create']" | |
| 383 | + > | |
| 384 | + 新增下级 | |
| 385 | + </Button> | |
| 386 | +#end | |
| 340 | 387 | <Button |
| 341 | 388 | size="small" |
| 342 | 389 | type="link" |
| ... | ... | @@ -348,7 +395,11 @@ onMounted(async () => { |
| 348 | 395 | <Button |
| 349 | 396 | size="small" |
| 350 | 397 | type="link" |
| 398 | + danger | |
| 351 | 399 | class="ml-2" |
| 400 | + #if ( $table.templateType == 2 ) | |
| 401 | + :disabled="!isEmpty(row?.children)" | |
| 402 | + #end | |
| 352 | 403 | @click="onDelete(row as any)" |
| 353 | 404 | v-access:code="['${permissionPrefix}:delete']" |
| 354 | 405 | > |
| ... | ... | @@ -357,6 +408,7 @@ onMounted(async () => { |
| 357 | 408 | </template> |
| 358 | 409 | </vxe-column> |
| 359 | 410 | </vxe-table> |
| 411 | +#if ( $table.templateType != 2 ) | |
| 360 | 412 | <!-- 分页 --> |
| 361 | 413 | <div class="mt-2 flex justify-end"> |
| 362 | 414 | <Pagination |
| ... | ... | @@ -367,6 +419,7 @@ onMounted(async () => { |
| 367 | 419 | @change="getList" |
| 368 | 420 | /> |
| 369 | 421 | </div> |
| 422 | +#end | |
| 370 | 423 | </ContentWrap> |
| 371 | 424 | |
| 372 | 425 | #if ($table.templateType == 11) ## erp情况 | ... | ... |