131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<template>
|
|
<div v-can="permissionCodes.eventRecord.read" class="registration-record-detail">
|
|
<customer-profile-card v-if="record?.customer" class="customer-profile" :customer="record.customer" />
|
|
<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`);
|
|
}
|
|
|
|
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>
|
|
|