Cheng Zhou
103 lines
2.5 KiB
Vue
103 lines
2.5 KiB
Vue
<template>
|
|
<div class="page">
|
|
<div class="page-header">
|
|
<div>
|
|
<h1 class="page-title">注意事项详情</h1>
|
|
<p class="page-subtitle">查看注意事项与附件</p>
|
|
</div>
|
|
<div class="actions">
|
|
<el-button type="primary" @click="goEdit">编辑</el-button>
|
|
<el-button @click="goBack">返回</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<el-card v-loading="loading">
|
|
<el-descriptions :column="2" border>
|
|
<el-descriptions-item label="分中心">{{ detail.site_name || "—" }}</el-descriptions-item>
|
|
<el-descriptions-item label="重要等级">{{ detail.level || "—" }}</el-descriptions-item>
|
|
<el-descriptions-item label="标题" :span="2">{{ detail.title || "—" }}</el-descriptions-item>
|
|
<el-descriptions-item label="内容" :span="2">{{ detail.content || "—" }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
|
|
<AttachmentList
|
|
v-if="noteId"
|
|
:study-id="studyId"
|
|
entity-type="knowledge_note"
|
|
:entity-id="noteId"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, reactive, ref } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { ElMessage } from "element-plus";
|
|
import { useStudyStore } from "../../store/study";
|
|
import { getKnowledgeNote } from "../../api/knowledgeNotes";
|
|
import AttachmentList from "../../components/attachments/AttachmentList.vue";
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const study = useStudyStore();
|
|
const loading = ref(false);
|
|
const noteId = route.params.noteId as string;
|
|
const studyId = study.currentStudy?.id || "";
|
|
|
|
const detail = reactive<any>({
|
|
site_name: "",
|
|
title: "",
|
|
level: "",
|
|
content: "",
|
|
});
|
|
|
|
const load = async () => {
|
|
if (!studyId || !noteId) return;
|
|
loading.value = true;
|
|
try {
|
|
const { data } = await getKnowledgeNote(studyId, noteId);
|
|
Object.assign(detail, data);
|
|
} catch (e: any) {
|
|
ElMessage.error(e?.response?.data?.message || "加载失败");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const goEdit = () => router.push(`/knowledge/notes/${noteId}/edit`);
|
|
const goBack = () => router.push("/knowledge/notes");
|
|
|
|
onMounted(load);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.page-title {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.page-subtitle {
|
|
margin: 6px 0 0;
|
|
font-size: 13px;
|
|
color: var(--ctms-text-secondary);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
</style>
|