add EventDetail and PointRuleDetail

2026-08-23 12:26:44 +08:00
parent cfa6364d93
commit 38df3edc54
7 changed files with 702 additions and 25 deletions
@@ -0,0 +1,292 @@
+<template>
+	<div
+		v-can="permissionCodes.event.read"
+		class="registration-event-detail"
+	>
+		<section v-if="event" class="event-header">
+			<div class="color" :style="{ background: event.color || defaultColor }" />
+			<div class="header-content">
+				<div class="title-row">
+					<h2 v-text="event.name || '未命名事件'" />
+					<t-tag :theme="getStatusTheme(event.status)" variant="light-outline" :content="getStatusText(event.status)" />
+				</div>
+				<div class="description" v-text="Text.display(event.description)" />
+			</div>
+		</section>
+
+		<t-cell-group v-if="event" title="基本信息" theme="card">
+			<t-cell title="所属门店" :note="storeName" />
+			<t-cell title="事件颜色">
+				<template #note>
+					<div class="color-note">
+						<span class="color-dot" :style="{ background: event.color || defaultColor }" />
+						<span v-text="(event.color || defaultColor).toLowerCase()" />
+					</div>
+				</template>
+			</t-cell>
+			<t-cell title="说明" :note="Text.display(event.description)" />
+			<t-cell title="可登记角色">
+				<template #note>
+					<div v-if="event.roleCodeList?.length" class="tag-list">
+						<t-tag
+							v-for="roleCode in event.roleCodeList"
+							:key="roleCode"
+							theme="primary"
+							variant="light-outline"
+							:content="getRoleName(roleCode)"
+						/>
+					</div>
+					<span v-else>未配置</span>
+				</template>
+			</t-cell>
+		</t-cell-group>
+
+		<t-cell-group v-if="event" title="登记配置" theme="card">
+			<t-cell title="数值类型" :note="getValueTypeText(event.valueType)" />
+			<t-cell v-if="event.valueType === 'NUMBER'" title="数值单位" :note="getValueUnitText(event.valueUnit)" />
+			<t-cell v-if="event.valueType === 'NUMBER'" title="登记必填数值" :note="event.requireValue ? '是' : '否'" />
+			<t-cell title="需要拍照" :note="event.requirePhoto ? '是' : '否'" />
+			<t-cell title="次数约束" :note="getLimitText(event)" />
+		</t-cell-group>
+
+		<t-cell-group v-if="event" title="生效时间" theme="card">
+			<t-cell title="起始时间" :note="formatDate(event.beginAt)" />
+			<t-cell title="终止时间" :note="formatDate(event.endAt)" />
+			<t-cell title="创建时间" :note="formatDate(event.createdAt, '未知时间')" />
+			<t-cell title="更新时间" :note="formatDate(event.updatedAt, '未知时间')" />
+		</t-cell-group>
+
+		<t-empty v-else :description="isLoading ? '正在加载登记事件' : '登记事件不存在'" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { type ModuleCode, type Role, RoleAPI, Time, useUserStore, Text } from "timi-web";
+import EventAPI from "@/api/EventAPI";
+import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { EventItem, EventLimitType, EventStatus, EventValueType, EventValueUnit } from "@/types/EventItem";
+import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+import { Message } from "@/utils/message";
+
+defineOptions({
+	name: "EventDetail"
+});
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const currentStoreStore = useCurrentStoreStore();
+const moduleCode: ModuleCode = "GAO";
+const defaultColor = "#2f88ff";
+
+// ---------- 权限与门店 ----------
+
+const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.event.update));
+const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
+const storeName = computed(() => {
+	const storeId = event.value?.storeId;
+	if (!storeId) {
+		return "未绑定门店";
+	}
+	const store = currentStoreStore.storeList.find(item => item.id === storeId)
+		|| (currentStoreStore.loginStore?.id === storeId ? currentStoreStore.loginStore : undefined);
+	return store?.name || store?.code || storeId;
+});
+
+// ---------- 事件资料 ----------
+
+const event = ref<EventItem>();
+const roleOptions = ref<Role[]>([]);
+const isLoading = ref(false);
+
+async function loadStoreScope(): Promise<void> {
+	if (isGlobalManager.value) {
+		await currentStoreStore.loadStoreList();
+		return;
+	}
+	await currentStoreStore.loadLoginStore();
+}
+
+async function loadRoleOptions(): Promise<void> {
+	try {
+		roleOptions.value = await RoleAPI.manageableList(moduleCode);
+	} catch (error) {
+		console.warn("登记事件角色加载失败", error);
+		roleOptions.value = [];
+	}
+}
+
+async function loadEvent(): Promise<void> {
+	const eventId = String(route.params.id || "");
+	if (!eventId) {
+		event.value = undefined;
+		return;
+	}
+
+	event.value = undefined;
+	isLoading.value = true;
+	try {
+		await loadStoreScope();
+		const [eventResult] = await Promise.all([
+			EventAPI.detail(eventId),
+			loadRoleOptions()
+		]);
+		event.value = eventResult;
+	} catch (error) {
+		event.value = undefined;
+		console.warn("登记事件详情加载失败", error);
+		Message.error("登记事件加载失败");
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+// ---------- 展示 ----------
+
+function getStatusText(status?: EventStatus): string {
+	return ({
+		DRAFT: "草稿",
+		ACTIVE: "可登记",
+		INACTIVE: "不可登记",
+		DELETED: "已删除"
+	} as Record<string, string>)[status || "ACTIVE"] || "可登记";
+}
+
+function getStatusTheme(status?: EventStatus): "default" | "primary" | "danger" {
+	if (!status || status === "ACTIVE") {
+		return "primary";
+	}
+	if (status === "DELETED") {
+		return "danger";
+	}
+	return "default";
+}
+
+function getValueTypeText(valueType?: EventValueType): string {
+	return valueType === "NUMBER" ? "携带数值" : "不携带数值";
+}
+
+function getValueUnitText(valueUnit?: EventValueUnit | null): string {
+	return valueUnit === "CENT" ? "金额（元）" : valueUnit === "COUNT" ? "次数" : "未配置单位";
+}
+
+function getLimitText(value: EventItem): string {
+	const limitValue = value.limitValue && 0 < value.limitValue ? Math.floor(value.limitValue) : 1;
+	const textMap: Record<EventLimitType, string> = {
+		NONE: "不限",
+		DAILY_HALF_DAY: `上午和下午各 ${limitValue} 次`,
+		INTERVAL_HOUR: `每隔 ${limitValue} 小时`,
+		NATURAL_DAY: `每天 ${limitValue} 次`,
+		NATURAL_MONTH: `每月 ${limitValue} 次`,
+		TOTAL_LIMIT: `事件总计 ${limitValue} 次`,
+		CUSTOMER_TOTAL_LIMIT: `单客户总计 ${limitValue} 次`
+	};
+	return textMap[value.limitType || "NONE"];
+}
+
+function getRoleName(code: string): string {
+	const role = roleOptions.value.find(item => item.code === code);
+	return role?.name || code;
+}
+
+function formatDate(timestamp?: number, emptyText = "不限"): string {
+	return timestamp === undefined || timestamp === null ? emptyText : Time.toDateTime(timestamp);
+}
+
+// ---------- 导航 ----------
+
+async function toEdit(): Promise<void> {
+	const eventId = String(route.params.id || "");
+	if (!canUpdate.value || !eventId) {
+		return;
+	}
+	await router.push({
+		name: "EventEdit",
+		params: { id: eventId },
+		query: { transitionDepth: String(Number(route.meta.depth ?? 0) + 1) }
+	});
+}
+
+watch(() => route.params.id, async () => {
+	await loadEvent();
+}, { immediate: true });
+
+onMounted(() => {
+	navBarStore.clearRight();
+	if (canUpdate.value) {
+		navBarStore.setRightText("编辑", "var(--td-brand-color)", toEdit);
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+</script>
+
+<style scoped lang="less">
+.registration-event-detail {
+	gap: 1rem;
+	min-height: 100vh;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.event-header {
+		gap: .75rem;
+		margin: 0 1rem;
+		padding: 1rem;
+		display: flex;
+		background: var(--td-bg-color-container);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.4rem;
+
+		.color {
+			width: 3.5rem;
+			height: 3.5rem;
+			flex: 0 0 auto;
+			border-radius: .7rem;
+		}
+
+		.header-content {
+			min-width: 0;
+			flex: 1;
+		}
+
+		.title-row {
+			gap: .5rem;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			h2 {
+				margin: 0;
+				font-size: 1.125rem;
+			}
+		}
+
+		.description {
+			margin-top: .5rem;
+			color: var(--td-text-color-secondary);
+			line-height: 1.5;
+			word-break: break-all;
+		}
+	}
+
+	.color-note,
+	.tag-list {
+		gap: .4rem;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+	}
+
+	.color-dot {
+		width: 1rem;
+		height: 1rem;
+		border-radius: 50%;
+	}
+}
+</style>
@@ -14,8 +14,8 @@
 					class="item"
 					v-for="item in visibleEventList"
 					:key="item.id"
-					:arrow="canUpdateEventItem"
-					:hover="canUpdateEventItem"
+					:arrow="!!item.id"
+					:hover="!!item.id"
 					@click="toEventItem(item)"
 				>
 					<template #title>
@@ -147,14 +147,11 @@ const activeStatusTag: StatusTag = { text: "可登记", theme: "primary" };
 const notEffectiveStatusTag: StatusTag = { text: "未生效", theme: "default" };
 const expiredStatusTag: StatusTag = { text: "已过期", theme: "danger" };

-function toEventItem(item: EventItem): void {
-	if (!canUpdateEventItem.value) {
-		return;
-	}
+async function toEventItem(item: EventItem): Promise<void> {
 	if (!item.id) {
 		return;
 	}
-	router.push(`/management/registration-events/${item.id}/edit`);
+	await router.push(`/management/registration-events/${item.id}`);
 }

 // ---------- 展示文案 ----------