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

2024-12-11 11:09:16 +08:00
parent 3014b62086
commit 7ec3cfb3fd
19 changed files with 62 additions and 157 deletions
--- 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']"