'修改首页顶部数据和ui，新增消息批量删除的功能，封装useBatchDelete批量删除的hook'

+import { ref, computed } from 'vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+/**
+ *
+ * @param deleteFn 要删除的API接口方法
+ * @param handleSuccess  刷新表格的方法
+ * @returns {
+ * hasBatchDelete: 是否可以删除
+ * selectionOptions 表格复选框配置项
+ * handleDeleteOrBatchDelete 删除方法，适用单一删除和批量删除。参数为null为批量删除
+ * }
+ *
+ */
+export interface selectionOptions {
+  rowKey: string;
+  clickToRowSelect: boolean;
+  rowSelection: {
+    onChange: (selectedRowKeys: string[]) => void;
+    type: 'radio' | 'checkbox';
+  };
+}
+export const useBatchDelete = (
+  deleteFn: (deleteIds: string[]) => Promise<void>,
+  handleSuccess: () => void
+) => {
+  const { createMessage } = useMessage();
+  const selectedRowIds = ref<string[]>([]);
+  const hasBatchDelete = computed(() => selectedRowIds.value.length <= 0);
+  // 复选框事件
+  const onSelectRowChange = (selectedRowKeys: string[]) => {
+    selectedRowIds.value = selectedRowKeys;
+  };
+  const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
+    if (record) {
+      try {
+        await deleteFn([record.id]);
+        createMessage.success('删除联系人成功');
+        handleSuccess();
+      } catch (e) {
+        createMessage.error('删除失败');
+      }
+    } else {
+      try {
+        await deleteFn(selectedRowIds.value);
+        createMessage.success('批量删除联系人成功');
+        selectedRowIds.value = [];
+        handleSuccess();
+      } catch (e) {
+        createMessage.info('删除失败');
+      }
+    }
+  };
+  const selectionOptions: selectionOptions = {
+    rowKey: 'id',
+    clickToRowSelect: false,
+    rowSelection: {
+      onChange: onSelectRowChange,
+      type: 'checkbox',
+    },
+  };
+  return { hasBatchDelete, selectionOptions, handleDeleteOrBatchDelete };
+};

@@ -45,6 +45,9 @@
         </div>
         <div class="flex-auto">
           <div class="flex justify-between" style="align-items: center">
+            <div v-if="!isAdmin(role)" style="font-size: 1.625rem; color: #333">{{
+              growCardList?.alarmInfo?.sumCount
+            }}</div>
             <div style="font-size: 1.625rem; color: #333">{{
               growCardList?.tenantInfo?.sumCount
             }}</div>
@@ -53,7 +56,10 @@
           <div> {{ !isAdmin(role) ? `${currentMonth}月告警数（条）` : '租户总量(个)' }}</div>
         </div>
       </div>
-      <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+      <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+        今日新增 {{ growCardList?.alarmInfo?.todayAdd }}</div
+      >
+      <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
         今日新增 {{ growCardList?.tenantInfo?.todayAdd }}</div
       >
     </Card>
@@ -66,27 +72,40 @@
             style="width: 5rem; height: 5rem"
           /><img v-else src="/src/assets/images/kf.png" style="width: 5rem; height: 5rem" />
         </div>
-        <div style="display: flex; align-items: center">
-          <div v-if="!isAdmin(role)">
-            <div>
+        <div v-if="!isAdmin(role)" style="display: flex; align-items: center">
+          <div>
+            <div class="flex" style="align-items: center">
               {{ `${currentMonth}月数据点（条）` }}
-              <span>{{ growCardList?.messageInfo?.dataPointsCount }}</span>
+              <span style="font-size: 1.625rem; color: #333">
+                {{ growCardList?.messageInfo?.dataPointsCount }}</span
+              >
             </div>
-            <div>
+            <div class="flex" style="align-items: center">
               {{ `${currentMonth}月消息量（条）` }}
-              <span>{{ growCardList?.messageInfo?.messageCount }}</span>
+              <span style="font-size: 1.625rem; color: #333">
+                {{ growCardList?.messageInfo?.messageCount }}</span
+              >
             </div>
           </div>
-          <div v-else>客户总量(个)</div>
         </div>
-      </div>
-      <div class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
-        <div>
-          今日新增
-          <span class="ml-8">数据点 ({{ growCardList?.messageInfo?.todayDataPointsAdd }})</span>
-          <span class="ml-8">消息量 ({{ growCardList?.messageInfo?.todayMessageAdd }})</span>
+        <div class="flex-auto" v-else>
+          <div class="flex justify-between" style="align-items: center">
+            <div style="font-size: 1.625rem; color: #333">{{
+              growCardList?.customerInfo?.sumCount
+            }}</div>
+            <img src="/src/assets/images/tip.png" style="width: 1.4rem; height: 1.4rem" />
+          </div>
+          <div>客户总量(个)</div>
         </div>
       </div>
+      <div v-if="!isAdmin(role)" class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+        今日新增
+        <span class="ml-8">数据点 ({{ growCardList?.messageInfo?.todayDataPointsAdd }})</span>
+        <span class="ml-8">消息量 ({{ growCardList?.messageInfo?.todayMessageAdd }})</span>
+      </div>
+      <div v-else class="ml-2 pt-4" style="border-top: 2px solid #f0f2f5">
+        今日新增 {{ growCardList?.customerInfo?.todayAdd }}</div
+      >
     </Card>
   </div>
 </template>

@@ -15,37 +15,3 @@ export const achieveList: TabItem[] = [
     component: 'EmailLog',
   },
 ];
-
-export const actions: any[] = [
-  { icon: 'clarity:star-line', text: '156', color: '#018ffb' },
-  { icon: 'bx:bxs-like', text: '156', color: '#459ae8' },
-  { icon: 'bx:bxs-message-dots', text: '2', color: '#42d27d' },
-];
-
-export const articleList = (() => {
-  const result: any[] = [];
-  for (let i = 0; i < 4; i++) {
-    result.push({
-      title: 'Vben Admin',
-      description: ['Vben', '设计语言', 'Typescript'],
-      content: '基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统。',
-      time: '2020-11-14 11:20',
-    });
-  }
-  return result;
-})();
-
-export const applicationList = (() => {
-  const result: any[] = [];
-  for (let i = 0; i < 8; i++) {
-    result.push({
-      title: 'Vben Admin',
-      icon: 'emojione-monotone:letter-a',
-      color: '#1890ff',
-      active: '100',
-      new: '1,799',
-      download: 'bx:bx-download',
-    });
-  }
-  return result;
-})();

@@ -3,6 +3,14 @@
     <BasicTable @register="registerTable">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 导出 </a-button>
+        <a-button
+          type="primary"
+          color="error"
+          @click="handleDeleteOrBatchDelete(null)"
+          :disabled="hasBatchDelete"
+        >
+          批量删除
+        </a-button>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -18,7 +26,7 @@
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
               },
             },
           ]"
@@ -33,16 +41,19 @@
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawerInner } from '/@/components/Drawer';
   import { columns, searchFormSchema } from './email.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { mailLogPage, deleteMailLog } from '/@/api/message/records';
   import { useModal } from '/@/components/Modal';
   import EmailDetail from '/@/views/message/records/item/EmailDetail.vue';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   export default defineComponent({
     name: 'EmailLog',
     components: { EmailDetail, BasicTable, TableAction },
     setup() {
       const [registerModal, { openModal }] = useModal();
-      const { createMessage } = useMessage();
+      const { hasBatchDelete, selectionOptions, handleDeleteOrBatchDelete } = useBatchDelete(
+        deleteMailLog,
+        handleSuccess
+      );
       const [register] = useDrawerInner(() => {});
       const [registerTable, { reload }] = useTable({
         title: '邮件发送列表',
@@ -64,7 +75,7 @@
           slots: { customRender: 'action' },
           fixed: 'right',
         },
-        immediate: true,
+        ...selectionOptions,
       });
 
       function handleCreate() {}
@@ -75,14 +86,6 @@
         });
       }
 
-      function handleDelete(record: Recordable) {
-        let ids = [record.id];
-        deleteMailLog(ids).then((result) => {
-          createMessage.success(result.message);
-          handleSuccess();
-        });
-      }
-
       function handleSuccess() {
         reload();
       }
@@ -92,7 +95,8 @@
         registerTable,
         registerModal,
         handleCreate,
-        handleDelete,
+        hasBatchDelete,
+        handleDeleteOrBatchDelete,
         handleModal,
         handleSuccess,
       };

@@ -2,7 +2,15 @@
   <div style="background-color: #f0f2f5">
     <BasicTable @register="registerTable">
       <template #toolbar>
-        <a-button type="primary" @click="handleCreate"> 导出 </a-button>
+        <a-button type="primary" @click="handleExport"> 导出 </a-button>
+        <a-button
+          type="primary"
+          color="error"
+          @click="handleDeleteOrBatchDelete(null)"
+          :disabled="hasBatchDelete"
+        >
+          批量删除
+        </a-button>
       </template>
       <template #action="{ record }">
         <TableAction
@@ -18,7 +26,7 @@
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
-                confirm: handleDelete.bind(null, record),
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
               },
             },
           ]"
@@ -29,21 +37,22 @@
 </template>
 <script lang="ts">
   import { defineComponent, h } from 'vue';
-
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useDrawerInner } from '/@/components/Drawer';
   import { columns, searchFormSchema } from './sms.data';
   import { Modal } from 'ant-design-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { smsLogPage, deleteSmsLog } from '/@/api/message/records';
   import { JsonPreview } from '/@/components/CodeEditor';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
 
   export default defineComponent({
     name: 'SmsLog',
     components: { BasicTable, TableAction },
     setup() {
-      const { createMessage } = useMessage();
-      const [register] = useDrawerInner(() => {});
+      // 批量删除的hooks
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteSmsLog,
+        handleSuccess
+      );
       const [registerTable, { reload }] = useTable({
         title: '短信发送列表',
         api: smsLogPage,
@@ -64,10 +73,8 @@
           slots: { customRender: 'action' },
           fixed: 'right',
         },
+        ...selectionOptions,
       });
-
-      function handleCreate() {}
-
       function handleQuery(record: Recordable) {
         Modal.info({
           title: '当前配置',
@@ -75,26 +82,19 @@
           content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.templateParam)) }),
         });
       }
-
-      function handleDelete(record: Recordable) {
-        let ids = [record.id];
-        deleteSmsLog(ids).then((result) => {
-          createMessage.success(result.message);
-          handleSuccess();
-        });
-      }
-
+      // 导出 TODO:待做
+      const handleExport = () => {};
+      // 刷新表格
       function handleSuccess() {
         reload();
       }
 
       return {
-        register,
+        hasBatchDelete,
         registerTable,
-        handleCreate,
-        handleDelete,
-        handleSuccess,
+        handleExport,
         handleQuery,
+        handleDeleteOrBatchDelete,
       };
     },
   });