feat(vben5): 增加批量处理Webhook发送记录

apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { VxeGridListeners, VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { VbenFormProps } from '@vben/common-ui';
 
@@ -7,24 +8,42 @@ import type { WebhookSendRecordDto } from '../../types/sendAttempts';
 
 import { h, ref } from 'vue';
 
+import { useAccess } from '@vben/access';
+import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
 import { formatToDateTime } from '@abp/core';
 import { useHttpStatusCodeMap } from '@abp/request';
 import { useTenantsApi } from '@abp/saas';
 import { useVbenVxeGrid } from '@abp/ui';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
-import { Button, message, Modal, Tag } from 'ant-design-vue';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Dropdown, Menu, message, Modal, Tag } from 'ant-design-vue';
 import debounce from 'lodash.debounce';
 
 import { useSendAttemptsApi } from '../../api/useSendAttemptsApi';
+import { WebhooksSendAttemptsPermissions } from '../../constants/permissions';
 
 defineOptions({
   name: 'WebhookSendAttemptTable',
 });
 
+const MenuItem = Menu.Item;
+const SendMessageIcon = createIconifyIcon('ant-design:send-outlined');
+
+const { hasAccessByCodes } = useAccess();
 const { getPagedListApi: getTenantsApi } = useTenantsApi();
-const { cancel, deleteApi, getPagedListApi } = useSendAttemptsApi();
+const {
+  bulkDeleteApi,
+  bulkReSendApi,
+  cancel,
+  deleteApi,
+  getPagedListApi,
+  reSendApi,
+} = useSendAttemptsApi();
 const { getHttpStatusColor, httpStatusCodeMap } = useHttpStatusCodeMap();
 
 const tenantFilter = ref<string>();
@@ -162,7 +181,7 @@ const gridOptions: VxeGridProps<WebhookSendRecordDto> = {
       fixed: 'right',
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
-      width: 200,
+      width: 220,
     },
   ],
   exportConfig: {},
@@ -223,10 +242,96 @@ function onDelete(row: WebhookSendRecordDto) {
     title: $t('AbpUi.AreYouSure'),
   });
 }
+async function onMenuClick(row: WebhookSendRecordDto, info: MenuInfo) {
+  switch (info.key) {
+    case 'send': {
+      await onSend(row);
+      break;
+    }
+  }
+}
+async function onSend(row: WebhookSendRecordDto) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('WebhooksManagement.ItemWillBeResendMessageWithFormat', [$t('WebhooksManagement.SelectedItems')])}`,
+    onOk: async () => {
+      try {
+        gridApi.setLoading(true);
+        await reSendApi(row.id);
+        message.success($t('WebhooksManagement.SuccessfullySent'));
+        gridApi.query();
+      } finally {
+        gridApi.setLoading(false);
+      }
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+async function onSendMany(keys: string[]) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('WebhooksManagement.ItemWillBeResendMessageWithFormat', [$t('WebhooksManagement.SelectedItems')])}`,
+    onOk: async () => {
+      try {
+        gridApi.setLoading(true);
+        await bulkReSendApi({ recordIds: keys });
+        message.success($t('WebhooksManagement.SuccessfullySent'));
+        // 重新查询
+        gridApi.query();
+      } finally {
+        gridApi.setLoading(false);
+      }
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
+async function onDeleteMany(keys: string[]) {
+  Modal.confirm({
+    centered: true,
+    content: `${$t('AbpUi.ItemWillBeDeletedMessageWithFormat', [$t('WebhooksManagement.SelectedItems')])}`,
+    onOk: async () => {
+      try {
+        gridApi.setLoading(true);
+        await bulkDeleteApi({ recordIds: keys });
+        message.success($t('AbpUi.DeletedSuccessfully'));
+        // 清理选中的key
+        selectedKeys.value = selectedKeys.value.filter(
+          (key) => !keys.includes(key),
+        );
+        // 重新查询
+        gridApi.query();
+      } finally {
+        gridApi.setLoading(false);
+      }
+    },
+    title: $t('AbpUi.AreYouSure'),
+  });
+}
 </script>
 
 <template>
   <Grid :table-title="$t('WebhooksManagement.SendAttempts')">
+    <template #toolbar-tools>
+      <div v-if="selectedKeys.length > 0" class="flex flex-row gap-2">
+        <Button
+          v-if="hasAccessByCodes([WebhooksSendAttemptsPermissions.Resend])"
+          :icon="h(SendMessageIcon)"
+          type="primary"
+          @click="onSendMany(selectedKeys)"
+        >
+          {{ $t('WebhooksManagement.Resend') }}
+        </Button>
+        <Button
+          v-if="hasAccessByCodes([WebhooksSendAttemptsPermissions.Delete])"
+          :icon="h(DeleteOutlined)"
+          type="primary"
+          danger
+          @click="onDeleteMany(selectedKeys)"
+        >
+          {{ $t('AbpUi.Delete') }}
+        </Button>
+      </div>
+    </template>
     <template #responseStatusCode="{ row }">
       <Tag :color="getHttpStatusColor(row.responseStatusCode)">
         {{ httpStatusCodeMap[row.responseStatusCode] }}
@@ -234,10 +339,16 @@ function onDelete(row: WebhookSendRecordDto) {
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <Button :icon="h(EditOutlined)" type="link" @click="onUpdate(row)">
+        <Button
+          v-if="hasAccessByCodes([WebhooksSendAttemptsPermissions.Default])"
+          :icon="h(EditOutlined)"
+          type="link"
+          @click="onUpdate(row)"
+        >
           {{ $t('AbpUi.Edit') }}
         </Button>
         <Button
+          v-if="hasAccessByCodes([WebhooksSendAttemptsPermissions.Delete])"
           :icon="h(DeleteOutlined)"
           danger
           type="link"
@@ -245,6 +356,24 @@ function onDelete(row: WebhookSendRecordDto) {
         >
           {{ $t('AbpUi.Delete') }}
         </Button>
+        <Dropdown>
+          <template #overlay>
+            <Menu @click="(info) => onMenuClick(row, info)">
+              <MenuItem
+                v-if="
+                  hasAccessByCodes([WebhooksSendAttemptsPermissions.Resend])
+                "
+                key="send"
+              >
+                <div class="flex flex-row items-center gap-[4px]">
+                  <SendMessageIcon color="green" />
+                  {{ $t('WebhooksManagement.Resend') }}
+                </div>
+              </MenuItem>
+            </Menu>
+          </template>
+          <Button :icon="h(EllipsisOutlined)" type="link" />
+        </Dropdown>
       </div>
     </template>
   </Grid>

apps/vben5/packages/@abp/webhooks/src/constants/permissions.ts

@@ -30,3 +30,12 @@ export const WebhookSubscriptionPermissions = {
   /** 更新 */
   Update: 'AbpWebhooks.Subscriptions.Update',
 };
+
+/** Webhook发送记录权限 */
+export const WebhooksSendAttemptsPermissions = {
+  Default: 'AbpWebhooks.SendAttempts',
+  /** 删除 */
+  Delete: 'AbpWebhooks.SendAttempts.Delete',
+  /** 更新 */
+  Resend: 'AbpWebhooks.SendAttempts.Resend',
+};