delete event in list

src/pages/event/EventList.vue

@@ -10,11 +10,14 @@
 			@scrolltolower="fetch"
 		>
 			<t-cell-group theme="card">
+				<t-swipe-cell
+					v-entrance-transition="index * 30"
+					v-for="(item, index) in visibleEventList"
+					:key="item.id"
+					class="item"
+				>
 					<t-cell
-						v-entrance-transition="index * 30"
-						v-for="(item, index) in visibleEventList"
-						:key="item.id"
-						class="item"
+						class="cell"
 						:arrow="!!item.id"
 						:hover="!!item.id"
 						@click="toEventItem(item)"
@@ -51,7 +54,18 @@
 							</div>
 						</template>
 					</t-cell>
-			</t-cell-group>
+					<template v-if="canDeleteEvent" #right>
+						<t-button
+							class="delete"
+							theme="danger"
+							:loading="isRemoving && removingEventId === item.id"
+							@click.stop="openRemoveDialog(item)"
+						>
+							删除
+						</t-button>
+					</template>
+				</t-swipe-cell>
+				</t-cell-group>
 			<div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" />
 			<div v-if="visibleEventList.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
@@ -60,6 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import { DialogPlugin } from "tdesign-mobile-vue";
 import { Message } from "@/utils/message";
 import { type Page, type PageResult, type Role, useUserStore } from "timi-web-api";
 import EventAPI from "@/api/EventAPI";
@@ -84,6 +99,7 @@ const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalMan
 const eventListOptions = computed(() => ({ storeId: currentStoreStore.currentStoreId }));
 const canCreateEvent = computed(() => userStore.hasPermissions(permissionCodes.event.create));
 const canUpdateEventItem = computed(() => userStore.hasPermissions(permissionCodes.event.update));
+const canDeleteEvent = computed(() => userStore.hasPermissions(permissionCodes.event.delete));
 const canShowActionMenu = computed(() => canCreateEvent.value || canUpdateEventItem.value);
 
 const actionList = computed<NavBarAction[]>(() => {
@@ -115,6 +131,8 @@ const roleOptions = ref<Role[]>([]);
 const isRefreshing = ref(false);
 const isLoading = ref(false);
 const isNoMore = ref(false);
+const isRemoving = ref(false);
+const removingEventId = ref("");
 const page = reactive<Page<EventItem>>({
 	index: 0,
 	size: 15,
@@ -156,6 +174,51 @@ async function toEventItem(item: EventItem): Promise<void> {
 	await router.push(`/management/registration-events/${item.id}`);
 }
 
+// ---------- 删除 ----------
+
+function openRemoveDialog(eventItem: EventItem): void {
+	const eventId = eventItem.id;
+	if (!eventId || isRemoving.value) {
+		return;
+	}
+
+	const eventName = eventItem.name || "未命名事件";
+	const dialog = DialogPlugin.confirm({
+		title: "删除登记事件",
+		content: `确定删除登记事件 ${eventName} 吗？删除后无法恢复。`,
+		cancelBtn: "取消",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			await removeEvent(eventId);
+		}
+	});
+}
+
+async function removeEvent(eventId: string): Promise<void> {
+	if (isRemoving.value) {
+		return;
+	}
+
+	isRemoving.value = true;
+	removingEventId.value = eventId;
+	try {
+		await EventAPI.remove(eventId);
+		pageResult.list = pageResult.list.filter(item => item.id !== eventId);
+		pageResult.total = Math.max(0, pageResult.total - 1);
+		isNoMore.value = pageResult.list.length >= pageResult.total;
+		Message.success("登记事件已删除");
+	} catch {
+		Message.error("登记事件删除失败");
+	} finally {
+		isRemoving.value = false;
+		removingEventId.value = "";
+	}
+}
+
 // ---------- 展示文案 ----------
 
 function getStatusTag(item: EventItem): StatusTag {
@@ -293,6 +356,12 @@ onUnmounted(() => {
 
 	.item {
 
+		.delete {
+			height: 100%;
+			padding: 0 1rem;
+			border-radius: 0;
+		}
+
 		.header {
 			gap: .5rem;
 			width: 100%;