feat: 新增 useTableToolbar hooks 简化 toolbar 工具栏挂载

apps/web-antd/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-table-toolbar';

apps/web-antd/src/hooks/use-table-toolbar.ts

@@ -0,0 +1,36 @@
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { TableToolbar } from '#/components/table-toolbar';
+
+import { ref, watch } from 'vue';
+
+export function useTableToolbar() {
+  const hiddenSearchBar = ref(false); // 隐藏搜索栏
+  const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
+  const tableRef = ref<VxeTableInstance>();
+  const isBound = ref<boolean>(false);
+
+  /** 挂载 toolbar 工具栏 */
+  async function bindTableToolbar() {
+    const table = tableRef.value;
+    const tableToolbar = tableToolbarRef.value;
+    if (table && tableToolbar) {
+      await table.connect(tableToolbar.getToolbarRef()!);
+      isBound.value = true;
+    }
+  }
+
+  watch(
+    () => tableRef.value,
+    (val) => {
+      if (!val || isBound.value) return;
+      bindTableToolbar();
+    },
+    { immediate: true },
+  );
+
+  return {
+    hiddenSearchBar,
+    tableToolbarRef,
+    tableRef,
+  };
+}

apps/web-antd/src/views/infra/demo/general/demo01/index.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from '#/adapter/vxe-table';
 import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
 
-import { h, nextTick, onMounted, reactive, ref } from 'vue';
+import { h, onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
@@ -31,6 +30,7 @@ import {
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { TableToolbar } from '#/components/table-toolbar';
+import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
@@ -119,20 +119,10 @@ async function onExport() {
   }
 }
 
-/** 隐藏搜索栏 */
-const hiddenSearchBar = ref(false);
-const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
-const tableRef = ref<VxeTableInstance>();
 /** 初始化 */
-onMounted(async () => {
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
-  await getList();
+onMounted(() => {
-  await nextTick();
+  getList();
-  // 挂载 toolbar 工具栏
-  const table = tableRef.value;
-  const tableToolbar = tableToolbarRef.value;
-  if (table && tableToolbar) {
-    await table.connect(tableToolbar.getToolbarRef()!);
-  }
 });
 </script>
 

apps/web-antd/src/views/infra/demo/general/demo02/index.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from 'vxe-table';
-
 import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
 
-import { h, nextTick, onMounted, reactive, ref } from 'vue';
+import { h, onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
@@ -15,8 +13,8 @@ import {
 } from '@vben/utils';
 
 import { Button, Form, Input, message, RangePicker } from 'ant-design-vue';
-import { VxeColumn, VxeTable } from 'vxe-table';
 
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import {
   deleteDemo02Category,
   exportDemo02Category,
@@ -24,6 +22,7 @@ import {
 } from '#/api/infra/demo/demo02';
 import { ContentWrap } from '#/components/content-wrap';
 import { TableToolbar } from '#/components/table-toolbar';
+import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -112,11 +111,6 @@ async function onExport() {
   }
 }
 
-/** 隐藏搜索栏 */
-const hiddenSearchBar = ref(false);
-const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
-const tableRef = ref<VxeTableInstance>();
-
 /** 切换树形展开/收缩状态 */
 const isExpanded = ref(true);
 function toggleExpand() {
@@ -125,15 +119,9 @@ function toggleExpand() {
 }
 
 /** 初始化 */
-onMounted(async () => {
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
-  await getList();
+onMounted(() => {
-  await nextTick();
+  getList();
-  // 挂载 toolbar 工具栏
-  const table = tableRef.value;
-  const tableToolbar = tableToolbarRef.value;
-  if (table && tableToolbar) {
-    await table.connect(tableToolbar.getToolbarRef()!);
-  }
 });
 </script>
 

apps/web-antd/src/views/infra/demo/general/demo03/erp/index.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from 'vxe-table';
-
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
-import { h, nextTick, onMounted, reactive, ref } from 'vue';
+import { h, onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
@@ -24,8 +22,8 @@ import {
   Select,
   Tabs,
 } from 'ant-design-vue';
-import { VxeColumn, VxeTable } from 'vxe-table';
 
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
   exportDemo03Student,
@@ -34,6 +32,7 @@ import {
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { TableToolbar } from '#/components/table-toolbar';
+import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
@@ -137,21 +136,10 @@ async function onExport() {
   }
 }
 
-/** 隐藏搜索栏 */
-const hiddenSearchBar = ref(false);
-const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
-const tableRef = ref<VxeTableInstance>();
-
 /** 初始化 */
-onMounted(async () => {
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
-  await getList();
+onMounted(() => {
-  await nextTick();
+  getList();
-  // 挂载 toolbar 工具栏
-  const table = tableRef.value;
-  const tableToolbar = tableToolbarRef.value;
-  if (table && tableToolbar) {
-    await table.connect(tableToolbar.getToolbarRef()!);
-  }
 });
 </script>
 

apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from 'vxe-table';
-
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, nextTick, onMounted, reactive, ref, watch } from 'vue';
@@ -17,14 +15,15 @@ import {
   Pagination,
   RangePicker,
 } from 'ant-design-vue';
-import { VxeColumn, VxeTable } from 'vxe-table';
 
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import {
   deleteDemo03Course,
   getDemo03CoursePage,
 } from '#/api/infra/demo/demo03/erp';
 import { ContentWrap } from '#/components/content-wrap';
 import { TableToolbar } from '#/components/table-toolbar';
+import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -129,21 +128,10 @@ watch(
   { immediate: true },
 );
 
-/** 隐藏搜索栏 */
-const hiddenSearchBar = ref(false);
-const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
-const tableRef = ref<VxeTableInstance>();
-
 /** 初始化 */
-onMounted(async () => {
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
-  await getList();
+onMounted(() => {
-  await nextTick();
+  getList();
-  // 挂载 toolbar 工具栏
-  const table = tableRef.value;
-  const tableToolbar = tableToolbarRef.value;
-  if (table && tableToolbar) {
-    await table.connect(tableToolbar.getToolbarRef()!);
-  }
 });
 </script>
 

apps/web-antd/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from 'vxe-table';
-
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
 
 import { h, nextTick, onMounted, reactive, ref, watch } from 'vue';
@@ -17,14 +15,15 @@ import {
   Pagination,
   RangePicker,
 } from 'ant-design-vue';
-import { VxeColumn, VxeTable } from 'vxe-table';
 
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import {
   deleteDemo03Grade,
   getDemo03GradePage,
 } from '#/api/infra/demo/demo03/erp';
 import { ContentWrap } from '#/components/content-wrap';
 import { TableToolbar } from '#/components/table-toolbar';
+import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { getRangePickerDefaultProps } from '#/utils';
 
@@ -129,21 +128,10 @@ watch(
   { immediate: true },
 );
 
-/** 隐藏搜索栏 */
-const hiddenSearchBar = ref(false);
-const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
-const tableRef = ref<VxeTableInstance>();
-
 /** 初始化 */
-onMounted(async () => {
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
-  await getList();
+onMounted(() => {
-  await nextTick();
+  getList();
-  // 挂载 toolbar 工具栏
-  const table = tableRef.value;
-  const tableToolbar = tableToolbarRef.value;
-  if (table && tableToolbar) {
-    await table.connect(tableToolbar.getToolbarRef()!);
-  }
 });
 </script>
 

apps/web-antd/src/views/infra/demo/general/demo03/inner/index.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from 'vxe-table';
-
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
-import { h, nextTick, onMounted, reactive, ref } from 'vue';
+import { h, onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
@@ -24,8 +22,8 @@ import {
   Select,
   Tabs,
 } from 'ant-design-vue';
-import { VxeColumn, VxeTable } from 'vxe-table';
 
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
   exportDemo03Student,
@@ -34,6 +32,7 @@ import {
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { TableToolbar } from '#/components/table-toolbar';
+import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
@@ -133,21 +132,10 @@ async function onExport() {
   }
 }
 
-/** 隐藏搜索栏 */
-const hiddenSearchBar = ref(false);
-const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
-const tableRef = ref<VxeTableInstance>();
-
 /** 初始化 */
-onMounted(async () => {
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
-  await getList();
+onMounted(() => {
-  await nextTick();
+  getList();
-  // 挂载 toolbar 工具栏
-  const table = tableRef.value;
-  const tableToolbar = tableToolbarRef.value;
-  if (table && tableToolbar) {
-    await table.connect(tableToolbar.getToolbarRef()!);
-  }
 });
 </script>
 

apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from 'vxe-table';
+import type { VxeTableInstance } from '#/adapter/vxe-table';
-
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { h, ref, watch } from 'vue';
@@ -8,8 +7,8 @@ import { h, ref, watch } from 'vue';
 import { Plus } from '@vben/icons';
 
 import { Button, Input } from 'ant-design-vue';
-import { VxeColumn, VxeTable } from 'vxe-table';
 
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
 import { $t } from '#/locales';
 

apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue

@@ -5,9 +5,9 @@ import { nextTick, ref, watch } from 'vue';
 
 import { formatDateTime } from '@vben/utils';
 
-import { VxeColumn, VxeTable } from 'vxe-table';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
-
 import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+import { ContentWrap } from '#/components/content-wrap';
 
 const props = defineProps<{
   studentId?: number; // 学生编号（主表的关联字段）

apps/web-antd/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue

@@ -5,8 +5,7 @@ import { nextTick, ref, watch } from 'vue';
 
 import { formatDateTime } from '@vben/utils';
 
-import { VxeColumn, VxeTable } from 'vxe-table';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
-
 import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
 
 const props = defineProps<{

apps/web-antd/src/views/infra/demo/general/demo03/normal/index.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from 'vxe-table';
-
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
-import { h, nextTick, onMounted, reactive, ref } from 'vue';
+import { h, onMounted, reactive, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
@@ -23,8 +21,8 @@ import {
   RangePicker,
   Select,
 } from 'ant-design-vue';
-import { VxeColumn, VxeTable } from 'vxe-table';
 
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import {
   deleteDemo03Student,
   exportDemo03Student,
@@ -33,6 +31,7 @@ import {
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
 import { TableToolbar } from '#/components/table-toolbar';
+import { useTableToolbar } from '#/hooks';
 import { $t } from '#/locales';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
@@ -127,21 +126,10 @@ async function onExport() {
   }
 }
 
-/** 隐藏搜索栏 */
-const hiddenSearchBar = ref(false);
-const tableToolbarRef = ref<InstanceType<typeof TableToolbar>>();
-const tableRef = ref<VxeTableInstance>();
-
 /** 初始化 */
-onMounted(async () => {
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
-  await getList();
+onMounted(() => {
-  await nextTick();
+  getList();
-  // 挂载 toolbar 工具栏
-  const table = tableRef.value;
-  const tableToolbar = tableToolbarRef.value;
-  if (table && tableToolbar) {
-    await table.connect(tableToolbar.getToolbarRef()!);
-  }
 });
 </script>
 

apps/web-antd/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { VxeTableInstance } from 'vxe-table';
+import type { VxeTableInstance } from '#/adapter/vxe-table';
-
 import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
 
 import { h, ref, watch } from 'vue';
@@ -8,8 +7,8 @@ import { h, ref, watch } from 'vue';
 import { Plus } from '@vben/icons';
 
 import { Button, Input } from 'ant-design-vue';
-import { VxeColumn, VxeTable } from 'vxe-table';
 
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
 import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
 import { $t } from '#/locales';