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

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/form_sub_inner.vue.vm

@@ -1,2 +1,2 @@
 ## 主表的 normal 和 inner 使用相同的 form 表单
-#parse("codegen/vue3_vben5_antd/schema/views/modules/form_sub_normal.vue.vm")
+#parse("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/general/views/modules/list_sub_erp.vue.vm

@@ -6,30 +6,33 @@
 #set ($subSimpleClassName_strikeCase = $subSimpleClassName_strikeCases.get($subIndex))
 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
 <script lang="ts" setup>
-  import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
   import type { ${simpleClassName}Api } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
+  import type { VxeTableInstance } from 'vxe-table';
+
+  import { DictTag } from '#/components/dict-tag';
+  import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+  import { VxeColumn, VxeTable } from 'vxe-table';
+  import { reactive,ref, h, nextTick,watch,onMounted } from 'vue';
+  import { cloneDeep, formatDateTime } from '@vben/utils';
 
 #if ($table.templateType == 11) ## erp
-  import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
+    import { useVbenModal } from '@vben/common-ui';
+    import ${subSimpleClassName}Form from './${subSimpleClassName_strikeCase}-form.vue'
+    import { Button, message } from 'ant-design-vue';
+    import { Plus } from '@vben/icons';
+    import { $t } from '#/locales';
+    import { TableToolbar } from '#/components/table-toolbar';
+    import { getRangePickerDefaultProps } from '#/utils/date';
 #end
-  import { useVbenModal } from '@vben/common-ui';
-  import { Button, message } from 'ant-design-vue';
-  import { Plus } from '@vben/icons';
-  import { #if($table.templateType != 11)ref,#end h, nextTick,watch } from 'vue';
-  import { $t } from '#/locales';
-  import { useVbenVxeGrid } from '#/adapter/vxe-table';
-
 
 #if ($table.templateType == 11) ## erp
   import { delete${subSimpleClassName}, get${subSimpleClassName}Page } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
-  import { use${subSimpleClassName}GridFormSchema, use${subSimpleClassName}GridColumns } from '../data';
   #else
   #if ($subTable.subJoinMany) ## 一对多
   import { get${subSimpleClassName}ListBy${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
   #else
   import { get${subSimpleClassName}By${SubJoinColumnName} } from '#/api/${table.moduleName}/${simpleClassName_strikeCase}';
   #end
-  import { use${subSimpleClassName}GridColumns } from '../data';
 #end
 
 const props = defineProps<{
@@ -69,91 +72,83 @@ async function onDelete(row: ${simpleClassName}Api.${subSimpleClassName}) {
       content: $t('ui.actionMessage.deleteSuccess', [row.id]),
       key: 'action_process_msg',
     });
-    onRefresh();
+    getList();
   } catch {
     hideLoading();
   }
 }
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
- code,
- row,
-}: OnActionClickParams<${simpleClassName}Api.${subSimpleClassName}>) {
-  switch (code) {
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-  }
-}
-
-#end
-  const [Grid, gridApi] = useVbenVxeGrid({
-#if ($table.templateType == 11)
-    formOptions: {
-      schema: use${subSimpleClassName}GridFormSchema(),
-    },
-#end
-    gridOptions: {
-#if ($table.templateType == 11)
-    columns: use${subSimpleClassName}GridColumns(onActionClick),
-      proxyConfig: {
-        ajax: {
-          query: async ({ page }, formValues) => {
-              if (!props.${subJoinColumn.javaField}){
-                  return []
-              }
-            return await get${subSimpleClassName}Page({
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-              ${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
-              ...formValues,
-            });
-          },
-        },
-      },
-    pagerConfig: {
-        enabled: true,
-    },
-    toolbarConfig: {
-        refresh: { code: 'query' },
-        search: true,
-    },
-#else
-    columns: use${subSimpleClassName}GridColumns(),
-    pagerConfig: {
-        enabled: false,
-    },
-    toolbarConfig: {
-        enabled: false,
-    },
 #end
-    height: '600px',
-    rowConfig: {
-        keyField: 'id',
-        isHover: true,
-    },
-    } as VxeTableGridOptions<${simpleClassName}Api.${subSimpleClassName}>,
-  });
 
-/** 刷新表格 */
-const onRefresh = async ()=> {
+  const loading = ref(true) // 列表的加载中
+  const list = ref<${simpleClassName}Api.${subSimpleClassName}[]>([]) // 列表的数据
 #if ($table.templateType == 11) ## erp
-    await gridApi.query();
-#else
-    #if ($subTable.subJoinMany) ## 一对多
-    await gridApi.grid.loadData(await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!));
-    #else
-    await gridApi.grid.loadData([await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)]);
-    #end
+  const total = ref(0) // 列表的总页数
 #end
+#if ($table.templateType == 11) ## erp
+  const queryFormRef = ref() // 搜索的表单
+  const queryParams = reactive({
+      pageNo: 1,
+      pageSize: 10,
+      #foreach ($column in $subColumns)
+          #if ($column.listOperation)
+              #if ($column.listOperationCondition != 'BETWEEN')
+                      $column.javaField: undefined,
+              #end
+              #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
+                      $column.javaField: undefined,
+              #end
+          #end
+      #end
+
+    ${subJoinColumn.javaField}: props.${subJoinColumn.javaField},
+  })
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
 }
 
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+#end
+  /** 查询列表 */
+  const getList = async () => {
+    loading.value = true
+    try {
+      if (!props.${subJoinColumn.javaField}){
+        return []
+      }
+        ## 特殊：树表专属逻辑（树不需要分页接口）
+        #if ($table.templateType == 11) ## erp
+          const params = cloneDeep(queryParams) as any;
+            #foreach ($column in $columns)
+                #if ($column.listOperation)
+                    #if ($column.htmlType == "datetime" || $column.listOperationCondition == "BETWEEN")
+                      if (params.${column.javaField} && Array.isArray(params.${column.javaField})) {
+                        params.${column.javaField} = (params.${column.javaField} as string[]).join(',');
+                      }
+                    #end
+                #end
+            #end
+          const data = await get${subSimpleClassName}Page(params)
+          list.value = data.list
+          total.value = data.total
+        #else
+            #if ($subTable.subJoinMany) ## 一对多
+             list.value = await get${subSimpleClassName}ListBy${SubJoinColumnName}(props.${subJoinColumn.javaField}!);
+            #else
+             list.value = [await get${subSimpleClassName}By${SubJoinColumnName}(props.${subJoinColumn.javaField}!)];
+            #end
+        #end
+    } finally {
+      loading.value = false
+    }
+  }
+
   /** 监听主表的关联字段的变化，加载对应的子表数据 */
   watch(
       () => props.${subJoinColumn.javaField},
@@ -162,23 +157,231 @@ const onRefresh = async ()=> {
           return;
         }
         await nextTick();
-        await onRefresh()
+        await getList()
       },
       { immediate: true },
   );
+
+#if ($table.templateType == 11) ## erp
+/** 隐藏搜索栏 */
+const hiddenSearchBar = ref(false);
+const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
+const tableRef = ref<VxeTableInstance>();
+
+/** 初始化 */
+onMounted(async () => {
+  await getList();
+  await nextTick();
+  // 挂载 toolbar 工具栏
+  const table = tableRef.value;
+  const tableToolbar = tableToolbarRef.value;
+  if (table && tableToolbar) {
+    await table.connect(tableToolbar.getToolbarRef()!);
+  }
+});
+#end
 </script>
 
 <template>
     #if ($table.templateType == 11) ## erp
-      <FormModal @success="onRefresh" />
-      <Grid table-title="${subTable.classComment}列表">
-        <template #toolbar-tools>
-          <Button :icon="h(Plus)" type="primary" @click="onCreate" v-access:code="['${table.moduleName}:${simpleClassName_strikeCase}:create']">
-            {{ $t('ui.actionTitle.create', ['${subTable.classComment}']) }}
-          </Button>
-        </template>
-      </Grid>
+      <FormModal @success="getList" />
+      <div class="h-[600px]">
+        <ContentWrap v-if="!hiddenSearchBar">
+          <!-- 搜索工作栏 -->
+          <Form
+              :model="queryParams"
+              ref="queryFormRef"
+              layout="inline"
+          >
+              #foreach($column in $subColumns)
+                  #if ($column.listOperation)
+                      #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")
+                        <Form.Item label="${comment}" name="${javaField}">
+                          <Input
+                              v-model:value="queryParams.${javaField}"
+                              placeholder="请输入${comment}"
+                              allowClear
+                              @pressEnter="handleQuery"
+                              class="w-full"
+                          />
+                        </Form.Item>
+                      #elseif ($column.htmlType == "select" || $column.htmlType == "radio" || $column.htmlType == "checkbox")
+                        <Form.Item label="${comment}" name="${javaField}">
+                          <Select
+                              v-model:value="queryParams.${javaField}"
+                              placeholder="请选择${comment}"
+                              allowClear
+                              class="w-full"
+                          >
+                              #if ("" != $dictType)## 设置了 dictType 数据字典的情况
+                                <Select.Option
+                                    v-for="dict in getDictOptions(DICT_TYPE.$dictType.toUpperCase(), '$dictMethod')"
+                                    :key="dict.value"
+                                    :value="dict.value"
+                                >
+                                  {{ dict.label }}
+                                </Select.Option>
+                              #else## 未设置 dictType 数据字典的情况
+                                <Select.Option label="请选择字典生成" value="" />
+                              #end
+                          </Select>
+                        </Form.Item>
+                      #elseif($column.htmlType == "datetime")
+                          #if ($column.listOperationCondition != "BETWEEN")## 非范围
+                            <Form.Item label="${comment}" name="${javaField}">
+                              <DatePicker
+                                  v-model:value="queryParams.${javaField}"
+                                  valueFormat="YYYY-MM-DD"
+                                  placeholder="选择${comment}"
+                                  allowClear
+                                  class="w-full"
+                              />
+                            </Form.Item>
+                          #else## 范围
+                            <Form.Item label="${comment}" name="${javaField}">
+                              <RangePicker
+                                  v-model:value="queryParams.${javaField}"
+                                  v-bind="getRangePickerDefaultProps()"
+                                  class="w-full"
+                              />
+                            </Form.Item>
+                          #end
+                      #end
+                  #end
+              #end
+            <Form.Item>
+              <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+              <Button class="ml-2" @click="handleQuery" type="primary">
+                搜索
+              </Button>
+            </Form.Item>
+          </Form>
+        </ContentWrap>
+
+        <!-- 列表 -->
+        <ContentWrap title="${table.classComment}">
+          <template #extra>
+            <TableToolbar
+                ref="tableToolbarRef"
+                v-model:hidden-search="hiddenSearchBar"
+            >
+              <Button
+                  class="ml-2"
+                  :icon="h(Plus)"
+                  type="primary"
+                  @click="onCreate"
+                  v-access:code="['${permissionPrefix}:create']"
+              >
+                {{ $t('ui.actionTitle.create', ['${table.classComment}']) }}
+              </Button>
+            </TableToolbar>
+          </template>
+          <vxe-table
+              ref="tableRef"
+              :data="list"
+              show-overflow
+              :loading="loading"
+          >
+              #foreach($column in $subColumns)
+                  #if ($column.listOperationResult)
+                      #set ($dictType=$column.dictType)
+                      #set ($javaField = $column.javaField)
+                      #set ($comment=$column.columnComment)
+                      #if ($column.javaType == "LocalDateTime")## 时间类型
+                        <vxe-column field="${javaField}" title="${comment}" align="center">
+                          <template #default="{row}">
+                            {{formatDateTime(row.${javaField})}}
+                          </template>
+                        </vxe-column>
+                      #elseif($column.dictType && "" != $column.dictType)## 数据字典
+                        <vxe-column field="${javaField}" title="${comment}" align="center">
+                          <template #default="{row}">
+                            <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
+                          </template>
+                        </vxe-column>
+                      #elseif ($table.templateType == 2 && $javaField == $treeNameColumn.javaField)
+                        <vxe-column field="${javaField}" title="${comment}" align="center"  tree-node/>
+                      #else
+                        <vxe-column field="${javaField}" title="${comment}" align="center" />
+                      #end
+                  #end
+              #end
+            <vxe-column field="operation" title="操作" align="center">
+              <template #default="{row}">
+                <Button
+                    size="small"
+                    type="link"
+                    @click="onEdit(row as any)"
+                    v-access:code="['${permissionPrefix}:update']"
+                >
+                  {{ $t('ui.actionTitle.edit') }}
+                </Button>
+                <Button
+                    size="small"
+                    type="link"
+                    danger
+                    class="ml-2"
+                    @click="onDelete(row as any)"
+                    v-access:code="['${permissionPrefix}:delete']"
+                >
+                  {{ $t('ui.actionTitle.delete') }}
+                </Button>
+              </template>
+            </vxe-column>
+          </vxe-table>
+          <!-- 分页 -->
+          <div class="mt-2 flex justify-end">
+            <Pagination
+                :total="total"
+                v-model:current="queryParams.pageNo"
+                v-model:page-size="queryParams.pageSize"
+                show-size-changer
+                @change="getList"
+            />
+          </div>
+        </ContentWrap>
+      </div>
     #else
-      <Grid table-title="${subTable.classComment}列表" />
+    <ContentWrap title="${subTable.classComment}列表">
+      <vxe-table
+          :data="list"
+          show-overflow
+          :loading="loading"
+      >
+          #foreach($column in $subColumns)
+              #if ($column.listOperationResult)
+                  #set ($dictType=$column.dictType)
+                  #set ($javaField = $column.javaField)
+                  #set ($comment=$column.columnComment)
+                  #if ($column.javaType == "LocalDateTime")## 时间类型
+                    <vxe-column field="${javaField}" title="${comment}" align="center">
+                      <template #default="{row}">
+                        {{formatDateTime(row.${javaField})}}
+                      </template>
+                    </vxe-column>
+                  #elseif($column.dictType && "" != $column.dictType)## 数据字典
+                    <vxe-column field="${javaField}" title="${comment}" align="center">
+                      <template #default="{row}">
+                        <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="row.${javaField}" />
+                      </template>
+                    </vxe-column>
+                  #else
+                    <vxe-column field="${javaField}" title="${comment}" align="center" />
+                  #end
+              #end
+          #end
+      </vxe-table>
+    </ContentWrap>
     #end
 </template>

yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue3_vben5_antd/general/views/modules/list_sub_inner.vue.vm

@@ -1,4 +1,4 @@
 ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点：
 ## 1）inner 使用 list 不分页，erp 使用 page 分页
 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持
-#parse("codegen/vue3_vben5_antd/schema/views/modules/list_sub_erp.vue.vm")
+#parse("codegen/vue3_vben5_antd/general/views/modules/list_sub_erp.vue.vm")