refactor file tree

2026-08-11 15:24:36 +08:00
parent 575d41b2e2
commit 819c1623eb
42 changed files with 86 additions and 86 deletions
@@ -0,0 +1,144 @@
+<template>
+	<div v-can="permissionCodes.eventRecord.read" class="registration-record-detail">
+		<customer-profile-card
+			v-if="record?.customer"
+			class="customer-profile"
+			:customer="record.customer"
+			@click="toCustomerDetail"
+		/>
+		<t-cell-group v-if="record" title="登记信息" theme="card">
+			<t-cell title="登记事件" :note="record.event?.name || '未知事件'" />
+			<t-cell title="登记时间" :note="record.registeredAt ? Time.toPassedDateTime(record.registeredAt) : '-'" />
+			<t-cell title="登记人" :note="Text.display(record.operator?.nick || record.operator?.name)" />
+			<t-cell title="客户编码" :note="Text.display(record.customer?.code)" />
+			<t-cell title="备注" :note="Text.display(record.remark)" />
+		</t-cell-group>
+		<section v-if="record" class="photo-panel">
+			<photo-scroller
+				:model-value="recordPhotoList"
+				:show-add="false"
+				:show-remove="false"
+				title="登记照片"
+			/>
+		</section>
+		<t-empty v-else :description="isLoading ? '正在加载登记事件记录' : '登记事件记录不存在'" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Text, Time, useUserStore } from "timi-web";
+import EventRecordAPI from "@/api/EventRecordAPI";
+import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
+import PhotoScroller from "@/components/PhotoScroller.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { EventRecord } from "@/types/EventRecord";
+import { getEventRecordPhotoURL } from "@/utils/eventRecord";
+import { permissionCodes } from "@/utils/permission";
+
+defineOptions({
+	name: "EventRecordDetail"
+});
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+
+// ---------- 记录数据 ----------
+
+const record = ref<EventRecord>();
+const isLoading = ref(false);
+
+const canUpdateRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.update));
+const recordPhotoList = computed(() => {
+	const url = getEventRecordPhotoURL(record.value);
+	return url ? [url] : [];
+});
+
+// ---------- 页面数据 ----------
+
+async function loadRecord(): Promise<void> {
+	const recordId = String(route.params.id || "");
+	if (!recordId) {
+		record.value = undefined;
+		return;
+	}
+
+	isLoading.value = true;
+	try {
+		record.value = await EventRecordAPI.detail(recordId);
+	} catch (err) {
+		record.value = undefined;
+		console.warn("登记事件记录加载失败", err);
+	} finally {
+		isLoading.value = false;
+	}
+}
+
+// ---------- 导航 ----------
+
+async function toEdit(): Promise<void> {
+	const recordId = String(route.params.id || "");
+	if (!recordId) {
+		return;
+	}
+	await router.push(`/management/registration-event-records/${recordId}/edit`);
+}
+
+async function toCustomerDetail(): Promise<void> {
+	const customerId = record.value?.customer?.id;
+	if (!customerId) {
+		return;
+	}
+
+	await router.push(`/management/customers/${customerId}`);
+}
+
+watch(() => route.params.id, async () => {
+	await loadRecord();
+}, { immediate: true });
+
+onMounted(() => {
+	navBarStore.clearRight();
+	if (canUpdateRecord.value) {
+		navBarStore.setRightText("编辑", "var(--td-brand-color)", toEdit);
+	}
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+</script>
+
+<style scoped lang="less">
+.registration-record-detail {
+	gap: 1rem;
+	min-height: 100vh;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
+	display: flex;
+	flex-direction: column;
+
+	.customer-profile {
+		margin: 0 1rem;
+	}
+
+	.photo-panel {
+		padding: 1rem;
+		margin: 0 1rem;
+		background: rgba(255, 255, 255, .92);
+		box-shadow: var(--td-shadow-1);
+		border-radius: 1.4rem;
+	}
+
+}
+
+:global(html.theme-dark) {
+	.registration-record-detail {
+		.photo-panel {
+			background: rgba(15, 23, 42, .88);
+			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+		}
+	}
+}
+</style>
+