refactor: 判断vxe-table的复选框是否选中

2024-12-11 11:09:16 +08:00 · 2024-12-11 11:09:16 +08:00 · 7ec3cfb3fd
commit 7ec3cfb3fd
parent 3014b62086
19 changed files with 62 additions and 157 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,9 @@
 # 1.1.3

+**REFACTOR**
+
+- 重构: 判断vxe-table的复选框是否选中
+
 **Bug Fixes**

 - 节点树在编辑 & 空数组(不勾选)情况 勾选节点会造成watch延迟触发 导致会带上父节点id造成id重复
--- a/apps/web-antd/src/adapter/vxe-table.ts
+++ b/apps/web-antd/src/adapter/vxe-table.ts
@ -107,6 +107,7 @@ export type * from '@vben/plugins/vxe-table';

 /**
 * 通用的表格复选框是否选中事件
+ * @deprecated 使用vxeCheckboxChecked代替
 * @param checked 是否选中
 * @returns function
 */
@ -118,3 +119,14 @@ export function tableCheckboxEvent(checked: Ref<boolean>) {
  };
  return event;
 }
+
+/**
+ * 判断vxe-table的复选框是否选中
+ * @param tableApi api
+ * @returns boolean
+ */
+export function vxeCheckboxChecked(
+  tableApi: ReturnType<typeof useVbenVxeGrid>[1],
+) {
+  return tableApi?.grid?.getCheckboxRecords?.()?.length > 0;
+}
--- a/apps/web-antd/src/views/monitor/logininfor/index.vue
+++ b/apps/web-antd/src/views/monitor/logininfor/index.vue
@ -9,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridDefines,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
@ -77,18 +77,15 @@ const gridOptions: VxeGridProps = {
  id: 'monitor-logininfo-index',
 };

-const checked = ref(false);
 const canUnlock = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents: {
    checkboxChange: (e: VxeGridDefines.CheckboxChangeEventParams) => {
-      const records = e.$table.getCheckboxRecords();
-      checked.value = records.length > 0;
+      const records = e.$grid.getCheckboxRecords();
      canUnlock.value = records.length === 1 && records[0]?.status === '1';
    },
-    checkboxAll: tableCheckboxEvent(checked),
  },
 });

@ -125,7 +122,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await loginInfoRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -138,7 +134,6 @@ async function handleUnlock() {
  const { userName } = records[0];
  await userUnlock(userName);
  await tableApi.query();
-  checked.value = false;
  canUnlock.value = false;
  tableApi.grid.clearCheckboxRow();
 }
@ -173,7 +168,7 @@ function handleDownloadExcel() {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['monitor:logininfor:remove']"
--- a/apps/web-antd/src/views/monitor/operlog/index.vue
+++ b/apps/web-antd/src/views/monitor/operlog/index.vue
@ -3,19 +3,13 @@ import type { Recordable } from '@vben/types';

 import type { OperationLog } from '#/api/monitor/operlog/model';

-import { ref } from 'vue';
-
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { $t } from '@vben/locales';

 import { Modal, Space } from 'ant-design-vue';
 import { isEmpty } from 'lodash-es';

-import {
-  tableCheckboxEvent,
-  useVbenVxeGrid,
-  type VxeGridProps,
-} from '#/adapter/vxe-table';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
 import {
  operLogClean,
  operLogDelete,
@ -88,7 +82,6 @@ const gridOptions: VxeGridProps<OperationLog> = {
  id: 'monitor-operlog-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
@ -96,8 +89,6 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
    sortChange: () => {
      tableApi.query();
    },
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
  },
 });

@ -138,7 +129,6 @@ async function handleDelete() {
    onOk: async () => {
      await operLogDelete(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -148,6 +138,11 @@ function handleDownloadExcel() {
    fieldMappingTime: formOptions.fieldMappingTime,
  });
 }
+
+function isChecked() {
+  console.log('触发');
+  return tableApi?.grid?.getCheckboxRecords?.()?.length > 0;
+}
 </script>

 <template>
@ -168,7 +163,7 @@ function handleDownloadExcel() {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!isChecked()"
            danger
            type="primary"
            v-access:code="['monitor:operlog:remove']"
--- a/apps/web-antd/src/views/system/client/index.vue
+++ b/apps/web-antd/src/views/system/client/index.vue
@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { ref } from 'vue';
-
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
@ -10,8 +8,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -70,14 +68,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-client-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [ClientDrawer, drawerApi] = useVbenDrawer({
@ -109,7 +102,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await clientRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -133,7 +125,7 @@ const { hasAccessByCodes } = useAccess();
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:client:remove']"
--- a/apps/web-antd/src/views/system/config/index.vue
+++ b/apps/web-antd/src/views/system/config/index.vue
@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { ref } from 'vue';
-
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';

 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -72,14 +70,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-config-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 const [ConfigModal, modalApi] = useVbenModal({
  connectedComponent: configModal,
@ -110,7 +103,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await configRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -140,7 +132,7 @@ async function handleRefreshCache() {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:config:remove']"
--- a/apps/web-antd/src/views/system/dict/data/index.vue
+++ b/apps/web-antd/src/views/system/dict/data/index.vue
@ -9,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -73,14 +73,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-dict-data-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [DictDataDrawer, drawerApi] = useVbenDrawer({
@ -115,7 +110,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await dictDataRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -142,7 +136,7 @@ emitter.on('rowClick', async (value) => {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:dict:remove']"
--- a/apps/web-antd/src/views/system/dict/type/index.vue
+++ b/apps/web-antd/src/views/system/dict/type/index.vue
@ -9,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -67,7 +67,6 @@ const gridOptions: VxeGridProps = {
  id: 'system-dict-type-index',
 };

-const checked = ref(false);
 const lastDictType = ref('');

 const [BasicTable, tableApi] = useVbenVxeGrid({
@ -82,8 +81,6 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
      emitter.emit('rowClick', row.dictType);
      lastDictType.value = row.dictType;
    },
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
  },
 });
 const [DictTypeModal, modalApi] = useVbenModal({
@ -115,7 +112,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await dictTypeRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -152,7 +148,7 @@ function handleDownloadExcel() {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:dict:remove']"
--- a/apps/web-antd/src/views/system/notice/index.vue
+++ b/apps/web-antd/src/views/system/notice/index.vue
@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { ref } from 'vue';
-
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';

 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import { noticeList, noticeRemove } from '#/api/system/notice';
@ -60,14 +58,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-notice-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [NoticeModal, modalApi] = useVbenModal({
@ -99,7 +92,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await noticeRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -111,7 +103,7 @@ function handleMultiDelete() {
      <template #toolbar-tools>
        <Space>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:notice:remove']"
--- a/apps/web-antd/src/views/system/oss-config/index.vue
+++ b/apps/web-antd/src/views/system/oss-config/index.vue
@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { ref } from 'vue';
-
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
@ -10,8 +8,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -66,14 +64,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-oss-config-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [OssConfigDrawer, drawerApi] = useVbenDrawer({
@ -105,7 +98,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await ossConfigRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -119,7 +111,7 @@ const { hasAccessByCodes } = useAccess();
      <template #toolbar-tools>
        <Space>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:ossConfig:remove']"
--- a/apps/web-antd/src/views/system/oss/index.vue
+++ b/apps/web-antd/src/views/system/oss/index.vue
@ -20,8 +20,8 @@ import {
 import { isEmpty } from 'lodash-es';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import { configInfoByKey } from '#/api/system/config';
@ -91,7 +91,6 @@ const gridOptions: VxeGridProps = {
  id: 'system-oss-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
@ -99,8 +98,6 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
    sortChange: () => {
      tableApi.query();
    },
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
  },
 });

@ -172,7 +169,7 @@ const [FileUploadModal, fileUploadApi] = useVbenModal({
            配置管理
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:oss:remove']"
--- a/apps/web-antd/src/views/system/post/index.vue
+++ b/apps/web-antd/src/views/system/post/index.vue
@ -9,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import { postExport, postList, postRemove } from '#/api/system/post';
@ -79,14 +79,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-post-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [PostDrawer, drawerApi] = useVbenDrawer({
@ -118,7 +113,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await postRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -146,7 +140,7 @@ function handleDownloadExcel() {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:post:remove']"
--- a/apps/web-antd/src/views/system/role-assign/index.vue
+++ b/apps/web-antd/src/views/system/role-assign/index.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { ref } from 'vue';
 import { useRoute } from 'vue-router';

 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
@ -10,8 +9,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -69,14 +68,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-role-assign-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [RoleAssignDrawer, drawerApi] = useVbenDrawer({
@ -109,7 +103,6 @@ function handleMultipleAuthCancel() {
    onOk: async () => {
      await roleAuthCancelAll(roleId, ids);
      await tableApi.query();
-      checked.value = false;
      tableApi.grid.clearCheckboxRow();
    },
  });
@ -122,7 +115,7 @@ function handleMultipleAuthCancel() {
      <template #toolbar-tools>
        <Space>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:role:remove']"
--- a/apps/web-antd/src/views/system/role-assign/role-assign-drawer.vue
+++ b/apps/web-antd/src/views/system/role-assign/role-assign-drawer.vue
@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useRoute } from 'vue-router';

 import { useVbenDrawer, type VbenFormProps } from '@vben/common-ui';

-import {
-  tableCheckboxEvent,
-  useVbenVxeGrid,
-  type VxeGridProps,
-} from '#/adapter/vxe-table';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
 import { roleSelectAll, roleUnallocatedList } from '#/api/system/role';

 import { columns, querySchema } from './data';
@ -62,14 +57,9 @@ const gridOptions: VxeGridProps = {
  },
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 async function handleSubmit() {
--- a/apps/web-antd/src/views/system/role/index.vue
+++ b/apps/web-antd/src/views/system/role/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useRouter } from 'vue-router';

 import { useAccess } from '@vben/access';
@ -23,8 +23,8 @@ import {
 } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -91,14 +91,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-role-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });
 const [RoleDrawer, drawerApi] = useVbenDrawer({
  connectedComponent: roleDrawer,
@ -129,7 +124,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await roleRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -171,7 +165,7 @@ function handleAssignRole(record: Recordable<any>) {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:role:remove']"
--- a/apps/web-antd/src/views/system/tenant/index.vue
+++ b/apps/web-antd/src/views/system/tenant/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { computed, ref } from 'vue';
+import { computed } from 'vue';

 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
@ -11,8 +11,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -73,14 +73,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-tenant-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [TenantDrawer, drawerApi] = useVbenDrawer({
@ -121,7 +116,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await tenantRemove(ids);
      await tableApi.query();
-      checked.value = false;
      // 重新加载租户信息
      tenantStore.initTenant();
    },
@ -173,7 +167,7 @@ function handleSyncTenantDict() {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:tenant:remove']"
--- a/apps/web-antd/src/views/system/tenantPackage/index.vue
+++ b/apps/web-antd/src/views/system/tenantPackage/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { computed, ref } from 'vue';
+import { computed } from 'vue';

 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
@ -11,8 +11,8 @@ import { getVxePopupContainer } from '@vben/utils';
 import { Modal, Popconfirm, Space } from 'ant-design-vue';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -69,14 +69,9 @@ const gridOptions: VxeGridProps = {
  id: 'system-tenant-package-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [TenantPackageDrawer, drawerApi] = useVbenDrawer({
@ -108,7 +103,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await packageRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -144,7 +138,7 @@ const isSuperAdmin = computed(() => {
            {{ $t('pages.common.export') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['system:tenantPackage:remove']"
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@ -24,11 +24,8 @@ import {
  Space,
 } from 'ant-design-vue';

-import {
-  tableCheckboxEvent,
-  useVbenVxeGrid,
-  type VxeGridProps,
-} from '#/adapter/vxe-table';
+import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
+import { vxeCheckboxChecked } from '#/adapter/vxe-table';
 import {
  userExport,
  userList,
@ -126,14 +123,9 @@ const gridOptions: VxeGridProps = {
  },
  id: 'system-user-index',
 };
-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 const [UserDrawer, userDrawerApi] = useVbenDrawer({
@ -165,7 +157,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await userRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -201,7 +192,7 @@ const { hasAccessByCodes } = useAccess();
    <div class="flex h-full gap-[8px]">
      <DeptTree
        v-model:select-dept-id="selectDeptId"
-        class="w-[260px]"
+        :width="260"
        @reload="() => tableApi.reload()"
        @select="() => tableApi.reload()"
      />
@ -221,7 +212,7 @@ const { hasAccessByCodes } = useAccess();
              {{ $t('pages.common.import') }}
            </a-button>
            <a-button
-              :disabled="!checked"
+              :disabled="!vxeCheckboxChecked(tableApi)"
              danger
              type="primary"
              v-access:code="['system:user:remove']"
--- a/apps/web-antd/src/views/tool/gen/index.vue
+++ b/apps/web-antd/src/views/tool/gen/index.vue
@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Recordable } from '@vben/types';

-import { onMounted, ref } from 'vue';
+import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';

 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
@ -11,8 +11,8 @@ import { message, Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';

 import {
-  tableCheckboxEvent,
  useVbenVxeGrid,
+  vxeCheckboxChecked,
  type VxeGridProps,
 } from '#/adapter/vxe-table';
 import {
@ -78,14 +78,9 @@ const gridOptions: VxeGridProps = {
  id: 'tool-gen-index',
 };

-const checked = ref(false);
 const [BasicTable, tableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
-  gridEvents: {
-    checkboxChange: tableCheckboxEvent(checked),
-    checkboxAll: tableCheckboxEvent(checked),
-  },
 });

 onMounted(async () => {
@ -177,7 +172,6 @@ function handleMultiDelete() {
    onOk: async () => {
      await genRemove(ids);
      await tableApi.query();
-      checked.value = false;
    },
  });
 }
@ -203,7 +197,7 @@ function handleImport() {
        </a>
        <Space>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
            type="primary"
            v-access:code="['tool:gen:remove']"
@ -212,7 +206,7 @@ function handleImport() {
            {{ $t('pages.common.delete') }}
          </a-button>
          <a-button
-            :disabled="!checked"
+            :disabled="!vxeCheckboxChecked(tableApi)"
            v-access:code="['tool:gen:code']"
            @click="handleBatchGen"
          >