⚡ 批量删除前端.

2024-06-03 10:49:05 +08:00
parent 11606e25bb
commit 5c6758c8e7
7 changed files with 253 additions and 40 deletions
--- a/orion-visor-ui/src/views/asset/host-identity/components/host-identity-table.vue
+++ b/orion-visor-ui/src/views/asset/host-identity/components/host-identity-table.vue
@@ -74,19 +74,36 @@
              <icon-plus />
            </template>
          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['asset:host-identity: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 #type="{ record }">
        <a-tag :color="getDictValue(identityTypeKey, record.type, 'color')">
@@ -159,14 +176,14 @@
 <script lang="ts" setup>
  import type { HostIdentityQueryRequest, HostIdentityQueryResponse } from '@/api/asset/host-identity';
  import { reactive, ref, onMounted } from 'vue';
-  import { deleteHostIdentity, getHostIdentityPage } from '@/api/asset/host-identity';
+  import { deleteHostIdentity, batchDeleteHostIdentity, getHostIdentityPage } from '@/api/asset/host-identity';
  import { Message } from '@arco-design/web-vue';
  import columns from '../types/table.columns';
  import useLoading from '@/hooks/loading';
  import usePermission from '@/hooks/permission';
  import { copy } from '@/hooks/copy';
  import { useDictStore } from '@/store';
-  import { usePagination } from '@/types/table';
+  import { usePagination, useRowSelection } from '@/types/table';
  import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
  import { IdentityType, identityTypeKey } from '../types/const';
  import HostKeySelector from '@/components/asset/host-key/selector/index.vue';
@@ -174,10 +191,12 @@
  const emits = defineEmits(['openAdd', 'openUpdate', 'openKeyView']);

  const pagination = usePagination();
+  const rowSelection = useRowSelection();
  const { toOptions, getDictValue } = useDictStore();
  const { loading, setLoading } = useLoading();
  const { hasAnyPermission } = usePermission();

+  const selectedKeys = ref<number[]>([]);
  const tableRenderData = ref<HostIdentityQueryResponse[]>([]);
  const formModel = reactive<HostIdentityQueryRequest>({
    id: undefined,
@@ -204,6 +223,22 @@
    }
  };

+  // 删除选中行
+  const deleteSelectRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteHostIdentity(selectedKeys.value);
+      Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
  // 添加后回调
  const addedCallback = () => {
    fetchTableData();
@@ -227,6 +262,7 @@
      pagination.total = data.total;
      pagination.current = request.page;
      pagination.pageSize = request.limit;
+      selectedKeys.value = [];
    } catch (e) {
    } finally {
      setLoading(false);
--- a/orion-visor-ui/src/views/asset/host-key/components/host-key-table.vue
+++ b/orion-visor-ui/src/views/asset/host-key/components/host-key-table.vue
@@ -59,19 +59,36 @@
              <icon-plus />
            </template>
          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['asset:host-key: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 #handle="{ record }">
        <div class="table-handle-wrapper">
@@ -116,20 +133,21 @@
 <script lang="ts" setup>
  import type { HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
  import { reactive, ref, onMounted } from 'vue';
-  import { deleteHostKey, getHostKeyPage } from '@/api/asset/host-key';
+  import { deleteHostKey, batchDeleteHostKey, getHostKeyPage } from '@/api/asset/host-key';
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import columns from '../types/table.columns';
-  import { usePagination } from '@/types/table';
+  import { usePagination, useRowSelection } from '@/types/table';
  import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';

  const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);

-  const tableRenderData = ref<HostKeyQueryResponse[]>([]);
-
  const pagination = usePagination();
+  const rowSelection = useRowSelection();
  const { loading, setLoading } = useLoading();

+  const selectedKeys = ref<number[]>([]);
+  const tableRenderData = ref<HostKeyQueryResponse[]>([]);
  const formModel = reactive<HostKeyQueryRequest>({
    id: undefined,
    name: undefined,
@@ -154,6 +172,22 @@
    }
  };

+  // 删除选中行
+  const deleteSelectRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteHostKey(selectedKeys.value);
+      Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
  // 添加后回调
  const addedCallback = () => {
    fetchTableData();
@@ -177,6 +211,7 @@
      pagination.total = data.total;
      pagination.current = request.page;
      pagination.pageSize = request.limit;
+      selectedKeys.value = [];
    } catch (e) {
    } finally {
      setLoading(false);
--- a/orion-visor-ui/src/views/asset/host-list/components/host-table.vue
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-table.vue
@@ -85,19 +85,36 @@
              <icon-plus />
            </template>
          </a-button>
+          <!-- 删除 -->
+          <a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
+                        position="br"
+                        type="warning"
+                        @ok="deleteSelectRows">
+            <a-button v-permission="['asset:host: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 #code="{ record }">
        <a-tag>{{ record.code }}</a-tag>
@@ -166,10 +183,10 @@
 <script lang="ts" setup>
  import type { HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
  import { reactive, ref, onMounted } from 'vue';
-  import { deleteHost, getHostPage } from '@/api/asset/host';
+  import { deleteHost, batchDeleteHost, getHostPage } from '@/api/asset/host';
  import { Message } from '@arco-design/web-vue';
  import { tagColor } from '../types/const';
-  import { usePagination } from '@/types/table';
+  import { usePagination, useRowSelection } from '@/types/table';
  import useLoading from '@/hooks/loading';
  import { copy } from '@/hooks/copy';
  import columns from '../types/table.columns';
@@ -177,13 +194,15 @@
  import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
  import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue';

-  const tagSelector = ref();
-  const tableRenderData = ref<HostQueryResponse[]>([]);
-  const { loading, setLoading } = useLoading();
  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup']);

  const pagination = usePagination();
+  const rowSelection = useRowSelection();
+  const { loading, setLoading } = useLoading();

+  const tagSelector = ref();
+  const selectedKeys = ref<number[]>([]);
+  const tableRenderData = ref<HostQueryResponse[]>([]);
  const formModel = reactive<HostQueryRequest>({
    id: undefined,
    name: undefined,
@@ -210,6 +229,22 @@
    }
  };

+  // 删除选中行
+  const deleteSelectRows = async () => {
+    try {
+      setLoading(true);
+      // 调用删除接口
+      await batchDeleteHost(selectedKeys.value);
+      Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
+      selectedKeys.value = [];
+      // 重新加载数据
+      fetchTableData();
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
  // 添加后回调
  const addedCallback = () => {
    fetchTableData();
@@ -233,6 +268,7 @@
      pagination.total = data.total;
      pagination.current = request.page;
      pagination.pageSize = request.limit;
+      selectedKeys.value = [];
    } catch (e) {
    } finally {
      setLoading(false);