⚡ 批量删除前端.

orion-visor-ui/src/views/user/user/components/user-table.vue

@@ -60,19 +60,36 @@
               <icon-plus />
             </template>
           </a-button>
+          <!-- 删除 -->
+          <a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['infra:system-user:delete']"
+                      type="primary"
+                      status="danger"
+                      :disabled="selectedKeys.length === 0">
+              删除
+              <template #icon>
+                <icon-delete />
+              </template>
+            </a-button>
+          </a-popconfirm>
         </a-space>
       </div>
     </template>
     <!-- table -->
-    <a-table row-key="id"
+    <a-table v-model:selected-keys="selectedKeys"
+             row-key="id"
              ref="tableRef"
              :loading="loading"
              :columns="columns"
+             :row-selection="rowSelection"
              :data="tableRenderData"
              :pagination="pagination"
+             :bordered="false"
              @page-change="(page) => fetchTableData(page, pagination.pageSize)"
-             @page-size-change="(size) => fetchTableData(1, size)"
-             :bordered="false">
+             @page-size-change="(size) => fetchTableData(1, size)">
       <!-- 用户名 -->
       <template #username="{ record }">
         <span class="text-copy" @click="copy(record.username)">
@@ -158,12 +175,12 @@
 <script lang="ts" setup>
   import type { UserQueryRequest, UserQueryResponse } from '@/api/user/user';
   import { reactive, ref, onMounted } from 'vue';
-  import { deleteUser, getUserPage, updateUserStatus } from '@/api/user/user';
+  import { batchDeleteUser, deleteUser, getUserPage, updateUserStatus } from '@/api/user/user';
   import { Message } from '@arco-design/web-vue';
   import columns from '../types/table.columns';
   import { userStatusKey, UserStatus } from '../types/const';
   import useLoading from '@/hooks/loading';
-  import { usePagination } from '@/types/table';
+  import { usePagination, useRowSelection } from '@/types/table';
   import usePermission from '@/hooks/permission';
   import { useRouter } from 'vue-router';
   import { useDictStore, useUserStore } from '@/store';
@@ -171,13 +188,16 @@
 
   const emits = defineEmits(['openAdd', 'openUpdate', 'openResetPassword', 'openGrantRole']);
 
-  const tableRenderData = ref<UserQueryResponse[]>([]);
-
   const pagination = usePagination();
+  const rowSelection = useRowSelection();
   const { hasPermission } = usePermission();
   const { loading, setLoading } = useLoading();
   const { toOptions, getDictValue } = useDictStore();
+  const router = useRouter();
+  const userStore = useUserStore();
 
+  const selectedKeys = ref<number[]>([]);
+  const tableRenderData = ref<UserQueryResponse[]>([]);
   const formModel = reactive<UserQueryRequest>({
     id: undefined,
     username: undefined,
@@ -190,9 +210,6 @@
     lastLoginTime: undefined,
   });
 
-  const router = useRouter();
-  const userStore = useUserStore();
-
   // 删除当前行
   const deleteRow = async ({ id }: {
     id: number
@@ -210,6 +227,22 @@
     }
   };
 
+  // 删除选中行
+  const deleteSelectRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteUser(selectedKeys.value);
+      Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
   // 更新状态
   const updateStatus = (id: number, status: number) => {
     return updateUserStatus({
@@ -250,6 +283,7 @@
       pagination.total = data.total;
       pagination.current = request.page;
       pagination.pageSize = request.limit;
+      selectedKeys.value = [];
     } catch (e) {
     } finally {
       setLoading(false);