Selaa lähdekoodia

feature 1001606

报告预览企业Logo预览实现
Kevin Jiang 2 vuotta sitten
vanhempi
commit
6f1122cfe8
1 muutettua tiedostoa jossa 32 lisäystä ja 12 poistoa
  1. 32 12
      src/views/reportPreview/ReportPreviewView.vue

+ 32 - 12
src/views/reportPreview/ReportPreviewView.vue

@@ -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;
+      }
     }
   }
 }