通知中心 假数据删除和批量删除功能

src/views/notifications/noticeManage/index.vue

@@ -3,10 +3,11 @@
     <tabs v-model:value="activeKey" @change="handleTabChange">
       <Tabs.TabPane key="1" tab=" 通知记录">
         <BasicTable @register="registerTable" class="p-2">
-          <!-- <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
-        <a-button type="primary" @click="handleExport"> 导出 </a-button>
-      </template> -->
+          <template #toolbar>
+            <!-- <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
+        <a-button type="primary" @click="handleExport"> 导出 </a-button> -->
+            <a-button type="error" @click="handleDeleteBatch"> 删除选中的通知 </a-button>
+          </template>
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'action'">
               <TableAction
@@ -36,33 +37,34 @@
             <Alert message="请先配置用于发送告警通知的邮箱/短信" show-icon type="warning" />
             <a-button type="primary" @click="handleCreate"> 新建通知规则(配置完成后显示)</a-button>
             <a-button type="primary" @click="handleEmail"> 邮箱/短信配置</a-button>
+            <a-button type="error" @click="handleDeleteBatch2"> 删除选中的规则 </a-button>
           </template>
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'action'">
-              <!-- <TableAction
+              <TableAction
                 :actions="[
+                  // {
+                  //   // icon: 'clarity:note-edit-line',
+                  //   label: '编22222222222辑',
+                  //   onClick: handleEdit.bind(null, record),
+                  // },
+                  // {
+                  //   // icon: 'clarity:note-edit-line',
+                  //   label: '数据222222222222222权限',
+                  //   onClick: dataPermiss.bind(null, record),
+                  // },
                   {
-                    // icon: 'clarity:note-edit-line',
-                    label: '编22222222222辑',
-                    onClick: handleEdit.bind(null, record),
-                  },
-                  {
-                    // icon: 'clarity:note-edit-line',
-                    label: '数据222222222222222权限',
-                    onClick: dataPermiss.bind(null, record),
-                  },
-                  {
-                    // icon: 'ant-design:delete-outlined',
-                    label: '删2222222222222222除',
+                    icon: 'ant-design:delete-outlined',
+                    label: '删除',
                     color: 'error',
                     popConfirm: {
                       title: '是否确认删除',
                       placement: 'left',
-                      confirm: handleDelete.bind(null, record),
+                      confirm: handleDeletetab2.bind(null, record),
                     },
                   },
                 ]"
-              /> -->
+              />
             </template>
           </template>
         </BasicTable>
@@ -97,10 +99,12 @@
   const filterStore = useFilterStore();
   const route = useRoute();
   const { createMessage } = useMessage();
+  const tableData = ref([]);
+  const tableDatatab2 = ref([]);
   const [registerDrawer, { openDrawer }] = useDrawer();
   const [registerModal, { openModal }] = useModal();
   const [registerModalEmail, { openModal: openModalEmail }] = useModal();
-  const [registerTable, { reload, getForm }] = useTable({
+  const [registerTable, { reload, getForm, getRowSelection }] = useTable({
     title: '通知列表',
     api: async (params) => {
       console.log('params', params);
@@ -135,7 +139,10 @@
       fixed: undefined,
     },
   });
-  const [registerTable2, { reload: reload2, getForm: getForm2 }] = useTable({
+  const [
+    registerTable2,
+    { reload: reload2, getForm: getForm2, getRowSelection: getRowSelection2 },
+  ] = useTable({
     title: '通知规则名称',
     api: async (params) => {
       console.log('params', params);
@@ -162,13 +169,13 @@
     showTableSetting: true,
     bordered: true,
     showIndexColumn: false,
-    // actionColumn: {
-    //   width: 50,
-    //   title: '操作',
-    //   dataIndex: 'action',
-    //   // slots: { customRender: 'action' },
-    //   fixed: undefined,
-    // },
+    actionColumn: {
+      width: 50,
+      title: '操作',
+      dataIndex: 'action',
+      // slots: { customRender: 'action' },
+      fixed: undefined,
+    },
   });
   /***新增规则按钮*/
   function handleCreate() {
@@ -214,18 +221,51 @@
     });
   }
 
-  /**删除按钮*/
-  async function handleDelete(record: Recordable) {
-    await deleteById(record.businessId);
+  /**批量删除*/
+  function handleDeleteBatch() {
+    const rowSelection = getRowSelection().selectedRowKeys;
+    for (let i = 0; i < rowSelection.length; i++) {
+      tableData.value.splice(
+        tableData.value.findIndex((item) => item.businessId === rowSelection[i]),
+        1,
+      );
+    }
+    createMessage.success('删除成功!');
+    reload();
+  }
+
+  /**批量删除tab2*/
+  function handleDeleteBatch2() {
+    const rowSelection = getRowSelection2().selectedRowKeys;
+    for (let i = 0; i < rowSelection.length; i++) {
+      tableDatatab2.value.splice(
+        tableDatatab2.value.findIndex((item) => item.businessId === rowSelection[i]),
+        1,
+      );
+    }
+    createMessage.success('删除成功!');
+    reload2();
+  }
+
+  /** 删除按钮*/
+  function handleDelete(record: Recordable) {
+    tableData.value.splice(
+      tableData.value.findIndex((item) => item.businessId === record.businessId),
+      1,
+    );
     createMessage.success('删除成功!');
-    await reload();
+    reload();
   }
 
   /**tab2删除按钮*/
-  async function handleDeletetab2(record: Recordable) {
-    await deleteById(record.businessId);
+
+  function handleDeletetab2(record: Recordable) {
+    tableDatatab2.value.splice(
+      tableDatatab2.value.findIndex((item) => item.businessId === record.businessId),
+      1,
+    );
     createMessage.success('删除成功!');
-    await reload2();
+    reload2();
   }
 
   function handleSuccess() {
@@ -237,6 +277,8 @@
 
   /**进入页面的初始化方法 getForm2是给tab2用的*/
   onMounted(() => {
+    tableData.value = tableListtab1;
+    tableDatatab2.value = tableListtab2;
     const path = route.path;
     if (filterStore.getSearchParams[path]) {
       if (JSON.parse(filterStore.getSearchParams[path] !== {})) {