|
|
@@ -8,6 +8,8 @@ import type { ReportSaveRequest } from '@/types/report.types';
|
|
|
import { CompLog } from '@/libs/log.lib';
|
|
|
import { useReportExport } from '@/libs/reportExport.lib';
|
|
|
import { routeToReportEditor } from '@/router';
|
|
|
+import * as logoService from "@/services/logo.service"
|
|
|
+import { useAuthStore } from '@/stores/auth.store';
|
|
|
|
|
|
const logError = CompLog.logErr("ReportPreviewView")
|
|
|
// 当前路由对象
|
|
|
@@ -18,14 +20,14 @@ const data = ref<ReportSaveRequest | null>(null)
|
|
|
const reportExport = useReportExport()
|
|
|
// 下载状态
|
|
|
const downloading = ref(false)
|
|
|
+// auth store
|
|
|
+const authStore = useAuthStore()
|
|
|
|
|
|
function onExport() {
|
|
|
if (data.value) {
|
|
|
reportExport.download(data.value.name, data.value.id)
|
|
|
downloading.value = true
|
|
|
- setTimeout(() => {
|
|
|
- downloading.value = false
|
|
|
- }, 5000)
|
|
|
+ setTimeout(() => downloading.value = false, 5000)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -49,20 +51,22 @@ onMounted(() => {
|
|
|
<div class="main" v-if="data">
|
|
|
<div class="report-preview-wrap">
|
|
|
<div class="cover">
|
|
|
- <h1>{{ data.name }}</h1>
|
|
|
+ <div class="logo" v-if="authStore.token">
|
|
|
+ <img :src="logoService.link(data.id, authStore.token)" />
|
|
|
+ </div>
|
|
|
+ <h1 class="company-name">{{ data.companyName }}</h1>
|
|
|
+ <h1 class="report-title">{{ data.name }}</h1>
|
|
|
<div class="metadata-wrap">
|
|
|
<a-row v-for="(item, index) in data.metadata" :key="index" class="metadata-item" type="flex">
|
|
|
<a-col class="metadata-name">{{ item.name }}: </a-col>
|
|
|
<a-col class="metadata-value" flex="1">{{ item.value }}</a-col>
|
|
|
</a-row>
|
|
|
</div>
|
|
|
- <h3>{{ data.companyName }}</h3>
|
|
|
- <h3>{{ dayjs().format("YYYY-MM-DD") }}</h3>
|
|
|
</div>
|
|
|
<a-divider />
|
|
|
<div v-for="(chapter, index) in data.chapters" :key="index" class="chapter-wrap">
|
|
|
<h2>{{ chapter.fullTitle }}</h2>
|
|
|
- <p v-html="chapter.content"></p>
|
|
|
+ <p class="chapter-content" v-html="chapter.content"></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -86,6 +90,8 @@ onMounted(() => {
|
|
|
background-color: #fff;
|
|
|
|
|
|
.cover {
|
|
|
+ padding-top: 10em;
|
|
|
+
|
|
|
h1, h3 {
|
|
|
text-align: center;
|
|
|
}
|
|
|
@@ -93,6 +99,18 @@ onMounted(() => {
|
|
|
font-size: 2em;
|
|
|
}
|
|
|
|
|
|
+ .logo {
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-name {
|
|
|
+ margin-top: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
.metadata-wrap {
|
|
|
padding: 40px 0;
|
|
|
min-height: 400px;
|
|
|
@@ -100,12 +118,9 @@ onMounted(() => {
|
|
|
align-items: center;
|
|
|
|
|
|
.metadata-item {
|
|
|
- width: 100%;
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto;
|
|
|
|
|
|
- .metadata-name, .metadata-value {
|
|
|
- margin: 10px 10px;
|
|
|
- padding: 20px 10px;
|
|
|
- }
|
|
|
.metadata-name {
|
|
|
width: 120px;
|
|
|
text-align: right;
|
|
|
@@ -121,6 +136,11 @@ onMounted(() => {
|
|
|
|
|
|
.chapter-wrap {
|
|
|
margin-top: 3em;
|
|
|
+
|
|
|
+ .chapter-content {
|
|
|
+ text-indent: 2em;
|
|
|
+ line-height: 1.5em;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|