add event remove dialog

src/pages/customer/CustomerDetail.vue

@@ -128,7 +128,7 @@ import CustomerAPI from "@/api/CustomerAPI";
 import PointAPI from "@/api/PointAPI";
 import TagAPI from "@/api/TagAPI";
 import BodyAreaSelector from "@/components/BodyAreaSelector.vue";
-import CustomerRemoveDialog from "@/components/CustomerRemoveDialog.vue";
+import CustomerRemoveDialog from "@/pages/customer/component/CustomerRemoveDialog.vue";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import TagSelector from "@/components/TagSelector.vue";

src/pages/customer/CustomerList.vue

@@ -89,7 +89,7 @@ import { Message } from "@/utils/message";
 import { Time, Toolkit, WebToolkit } from "timi-web";
 import { type Page, type PageResult, useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
-import CustomerRemoveDialog from "@/components/CustomerRemoveDialog.vue";
+import CustomerRemoveDialog from "@/pages/customer/component/CustomerRemoveDialog.vue";
 import TagSelector from "@/components/TagSelector.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";

src/pages/event/EventDetail.vue

@@ -98,15 +98,21 @@
 			/>
 		</div>
 	</bottom-popup>
+	<event-remove-dialog
+		v-model:visible="removeDialogVisible"
+		:event="removeTarget"
+		:loading="isRemoving"
+		@confirm="removeEvent"
+	/>
 </template>
 
 <script setup lang="ts">
-import { DialogPlugin } from "tdesign-mobile-vue";
 import { BottomPopup } from "timi-tdesign-mobile";
 import { Time, Text } from "timi-web";
 import { type ModuleCode, type Role, RoleAPI, useUserStore } from "timi-web-api";
 import EventAPI from "@/api/EventAPI";
 import EventOptionSelector from "@/components/EventOptionSelector.vue";
+import EventRemoveDialog from "@/pages/event/component/EventRemoveDialog.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { EventItem, EventLimitType, EventOptionSelectionMap, EventStatus, EventValueType, EventValueUnit } from "@/types/EventItem";
@@ -147,6 +153,8 @@ const event = ref<EventItem>();
 const roleOptions = ref<Role[]>([]);
 const isLoading = ref(false);
 const isRemoving = ref(false);
+const removeDialogVisible = ref(false);
+const removeTarget = ref<EventItem>();
 const optionPopupVisible = ref(false);
 const optionSelectionMap = reactive<EventOptionSelectionMap>({});
 
@@ -263,34 +271,28 @@ function closeOptionPopup(): void {
 
 // ---------- 删除 ----------
 
-async function confirmRemoveEvent(): Promise<void> {
+function confirmRemoveEvent(): void {
-	const eventId = String(route.params.id || "");
+	const currentEvent = event.value;
-	if (!eventId || !canDeleteEvent.value || isRemoving.value) {
+	if (!currentEvent?.id || !canDeleteEvent.value || isRemoving.value) {
 		return;
 	}
 
-	const eventName = event.value?.name || "未命名事件";
+	removeTarget.value = currentEvent;
-	const dialog = DialogPlugin.confirm({
+	removeDialogVisible.value = true;
-		title: "删除登记事件",
-		content: `确定删除登记事件 ${eventName} 吗？删除后无法恢复。`,
-		cancelBtn: "取消",
-		confirmBtn: "删除",
-		onCancel() {
-			dialog.destroy();
-		},
-		async onConfirm() {
-			dialog.destroy();
-			await removeEvent(eventId);
-		}
-	});
 }
 
-async function removeEvent(eventId: string): Promise<void> {
+async function removeEvent(eventItem: EventItem): Promise<void> {
+	const eventId = eventItem.id;
+	if (!eventId) {
+		return;
+	}
 	if (isRemoving.value) {
 		return;
 	}
 
 	isRemoving.value = true;
+	removeDialogVisible.value = false;
+	removeTarget.value = undefined;
 	try {
 		await EventAPI.remove(eventId);
 		Message.success("登记事件已删除");

src/pages/event/EventList.vue

@@ -71,13 +71,19 @@
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
+	<event-remove-dialog
+		v-model:visible="removeDialogVisible"
+		:event="removeTarget"
+		:loading="isRemoving"
+		@confirm="removeEvent"
+	/>
 </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";
+import EventRemoveDialog from "@/pages/event/component/EventRemoveDialog.vue";
 import ManagedUserAPI from "@/api/ManagedUserAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -132,6 +138,8 @@ const isRefreshing = ref(false);
 const isLoading = ref(false);
 const isNoMore = ref(false);
 const isRemoving = ref(false);
+const removeDialogVisible = ref(false);
+const removeTarget = ref<EventItem>();
 const removingEventId = ref("");
 const page = reactive<Page<EventItem>>({
 	index: 0,
@@ -182,29 +190,20 @@ function openRemoveDialog(eventItem: EventItem): void {
 		return;
 	}
 
-	const eventName = eventItem.name || "未命名事件";
+	removeTarget.value = eventItem;
-	const dialog = DialogPlugin.confirm({
+	removeDialogVisible.value = true;
-		title: "删除登记事件",
-		content: `确定删除登记事件 ${eventName} 吗？删除后无法恢复。`,
-		cancelBtn: "取消",
-		confirmBtn: "删除",
-		onCancel() {
-			dialog.destroy();
-		},
-		async onConfirm() {
-			dialog.destroy();
-			await removeEvent(eventId);
-		}
-	});
 }
 
-async function removeEvent(eventId: string): Promise<void> {
+async function removeEvent(eventItem: EventItem): Promise<void> {
-	if (isRemoving.value) {
+	const eventId = eventItem.id;
+	if (!eventId || isRemoving.value) {
 		return;
 	}
 
 	isRemoving.value = true;
 	removingEventId.value = eventId;
+	removeDialogVisible.value = false;
+	removeTarget.value = undefined;
 	try {
 		await EventAPI.remove(eventId);
 		pageResult.list = pageResult.list.filter(item => item.id !== eventId);

src/pages/event/component/EventRemoveDialog.vue

@@ -0,0 +1,151 @@
+<template>
+	<t-dialog
+		class="remove-dialog"
+		v-model:visible="visible"
+		title="删除登记事件"
+	>
+		<div class="content">
+			<div class="warning">删除后将停止使用该登记事件，请确认以下影响：</div>
+			<ul class="items">
+				<li>登记事件会标记为已删除，后续不能再用于新的登记</li>
+				<li>历史登记记录不会删除，仍可在登记记录中查看</li>
+				<li>历史登记产生的积分流水不会删除，也不会撤销客户积分</li>
+				<li>客户档案、客户积分账户和客户附件不会受到影响</li>
+				<li>删除后无法恢复，请谨慎操作</li>
+			</ul>
+			<div class="hint">
+				请输入登记事件名称
+				<span class="name red" v-text="eventName" />
+				以确认删除
+			</div>
+			<t-input
+				class="confirm-input"
+				v-model.trim="confirmName"
+				size="small"
+				borderless
+				clearable
+				placeholder="请输入登记事件名称"
+			/>
+		</div>
+		<template #cancelBtn>
+			<t-button
+				theme="default"
+				content="取消"
+				block
+				@click="close"
+			/>
+		</template>
+		<template #confirmBtn>
+			<t-button
+				theme="danger"
+				content="删除"
+				block
+				:loading="loading"
+				:disabled="!canConfirm || loading"
+				@click="confirm"
+			/>
+		</template>
+	</t-dialog>
+</template>
+
+<script setup lang="ts">
+import type { EventItem } from "@/types/EventItem";
+
+defineOptions({
+	name: "EventRemoveDialog"
+});
+
+interface Props {
+	visible?: boolean;
+	event?: EventItem;
+	loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	visible: false,
+	loading: false
+});
+
+const emit = defineEmits<{
+	"update:visible": [visible: boolean];
+	confirm: [event: EventItem];
+}>();
+
+const confirmName = ref("");
+const visible = computed({
+	get: () => props.visible,
+	set: (value: boolean) => emit("update:visible", value)
+});
+const eventName = computed(() => props.event?.name || "");
+const canConfirm = computed(() => !!eventName.value && confirmName.value === eventName.value);
+
+watch([() => props.visible, () => props.event], () => {
+	confirmName.value = "";
+});
+
+function close(): void {
+	visible.value = false;
+}
+
+function confirm(): void {
+	if (!props.event?.id || !canConfirm.value || props.loading) {
+		return;
+	}
+	emit("confirm", props.event);
+}
+</script>
+
+<style scoped lang="less">
+.remove-dialog {
+
+	:deep(.t-dialog__footer) {
+		gap: 1rem;
+	}
+
+	.content {
+		text-align: left;
+
+		.warning {
+			color: #b42318;
+			font-weight: 700;
+		}
+
+		.items {
+			gap: .5rem;
+			height: 9rem;
+			margin: .75rem 0 1rem;
+			display: flex;
+			overflow-y: auto;
+			line-height: 1.2;
+			padding-left: 1.25rem;
+			flex-direction: column;
+		}
+
+		.name {
+			font-weight: 700;
+		}
+
+		.confirm-input {
+			--td-input-vertical-padding: 10px;
+
+			border: 1px solid var(--td-component-border);
+			margin-top: .5rem;
+			border-radius: .75rem;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.remove-dialog {
+
+		.warning {
+			color: #fda29b;
+		}
+
+		.confirm-input {
+			background: rgba(15, 23, 42, .72);
+			border-color: rgba(148, 163, 184, .16);
+		}
+	}
+}
+</style>