From 1be57a2f1ce1f6cfdc0d955a31281d0517ea3631 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 17 Nov 2022 16:03:00 +0800
Subject: [PATCH] =?UTF-8?q?perf(=E5=85=AC=E5=85=B1=E9=93=BE=E6=8E=A5):=20?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../auth/service/impl/ShiroServiceImpl.java   |  2 +
 .../canvas/components/editor/CanvasOptBar.vue | 67 +++++++++++++-
 .../canvas/components/editor/Preview.vue      | 89 +++++++++++++++++--
 3 files changed, 149 insertions(+), 9 deletions(-)

diff --git a/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
index ea3abba81b..989e16f350 100644
--- a/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
@@ -108,6 +108,8 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/plugin/larksuite/getQrParam", ANON);
         filterChainDefinitionMap.put("/cas/reset/**", ANON);
         filterChainDefinitionMap.put("/cas/loginPage", ANON);
+        filterChainDefinitionMap.put("/pdf-template/queryAll", ANON);
+
 
         filterChainDefinitionMap.put("/unauth", ANON);
         filterChainDefinitionMap.put("/display/**", ANON);
diff --git a/frontend/src/components/canvas/components/editor/CanvasOptBar.vue b/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
index d5643e5c3f..9048798c54 100644
--- a/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
+++ b/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
@@ -1,9 +1,32 @@
 <template>
+
   <div
-    v-show="existLinkage"
-    class="bar-main"
+    :class="containerClass"
   >
+
     <div
+      v-if="isPublicLink"
+      class="function-div"
+    >
+      <el-button-group size="mini">
+        <el-button
+          v-if="!isNewBlank"
+          size="mini"
+          @click="back2Last"
+        ><i class="icon iconfont el-icon-back" />{{ $t('chart.back') }}</el-button>
+        <el-button
+          v-if="existLinkage"
+          size="mini"
+          @click="clearAllLinkage"
+        ><i class="icon iconfont icon-quxiaoliandong" />{{ $t('panel.remove_all_linkage') }}</el-button>
+        <el-button
+          size="mini"
+          @click="exportPDF"
+        ><i class="icon iconfont el-icon-download" />下载</el-button>
+      </el-button-group>
+    </div>
+
+    <!-- <div
       v-show="isPublicLink && !isNewBlank"
       class="bar-main-left"
     >
@@ -11,8 +34,11 @@
         size="mini"
         @click="back2Last"
       ><i class="icon iconfont el-icon-back" />{{ $t('chart.back') }}</el-button>
-    </div>
-    <div class="bar-main-right">
+    </div> -->
+    <div
+      v-else-if="existLinkage"
+      class="bar-main-right"
+    >
       <el-button
         size="mini"
         type="warning"
@@ -43,6 +69,9 @@ export default {
     isNewBlank() {
       return window.history.length === 1
     },
+    containerClass() {
+      return this.isPublicLink ? 'trans-pc' : 'bar-main'
+    },
     ...mapState([
       'componentData'
     ])
@@ -54,6 +83,9 @@ export default {
     },
     back2Last() {
       this.$router.back(-1)
+    },
+    exportPDF() {
+      this.$emit('link-export-pdf')
     }
   }
 }
@@ -86,4 +118,31 @@ export default {
     }
   }
 
+  .trans-pc {
+    position: absolute;
+    width: 60px;
+    right: 0;
+    top: 0;
+    border-top: 60px solid rgba(245, 74, 69, 0.2);
+    border-left: 60px solid transparent;
+    cursor: pointer;
+    z-index: 999;
+    .function-div {
+      display: none;
+      position: absolute;
+      right: 10px;
+      top: -50px;
+      width: max-content;
+      text-align: end;
+      z-index: 999;
+
+    }
+    &:hover {
+      border-top: 60px solid rgba(245, 74, 69, 0.8);;
+      .function-div {
+        display: block;
+      }
+    }
+  }
+
 </style>
diff --git a/frontend/src/components/canvas/components/editor/Preview.vue b/frontend/src/components/canvas/components/editor/Preview.vue
index 26c50fedde..e4fc09e275 100644
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/frontend/src/components/canvas/components/editor/Preview.vue
@@ -1,11 +1,15 @@
 <template>
   <div
     :id="previewMainDomId"
+    v-loading="dataLoading"
+    :element-loading-text="$t('panel.data_loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(220,220,220,1)"
     class="bg"
     :style="customStyle"
     @scroll="canvasScroll"
   >
-    <canvas-opt-bar/>
+    <canvas-opt-bar @link-export-pdf="downloadAsPDF" />
     <div
       :id="previewDomId"
       :ref="previewRefId"
@@ -57,6 +61,40 @@
         />
       </div>
     </div>
+    <el-dialog
+      v-if="pdfExportShow"
+      :title="'['+panelInfo.name+']'+'PDF导出'"
+      :visible.sync="pdfExportShow"
+      width="80%"
+      :top="'8vh'"
+      :destroy-on-close="true"
+      class="dialog-css2"
+    >
+      <span style="position: absolute;right: 70px;top:15px">
+        <svg-icon
+          icon-class="PDF"
+          class="ds-icon-pdf"
+        />
+        <el-select
+          v-model="pdfTemplateSelectedIndex"
+          :placeholder="'切换PDF模板'"
+          @change="changePdfTemplate()"
+        >
+          <el-option
+            v-for="(item, index) in pdfTemplateAll"
+            :key="index"
+            :label="item.name"
+            :value="index"
+          />
+        </el-select>
+      </span>
+      <PDFPreExport
+        :snapshot="snapshotInfo"
+        :panel-name="panelInfo.name"
+        :template-content="pdfTemplateContent"
+        @closePreExport="closePreExport"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -75,11 +113,12 @@ import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMat
 import { hasDataPermission } from '@/utils/permission'
 import { activeWatermark } from '@/components/canvas/tools/watermark'
 import { proxyUserLoginInfo, userLoginInfo } from '@/api/systemInfo/userLogin'
-
+import html2canvas from 'html2canvasde'
+import { queryAll } from '@/api/panel/pdfTemplate'
 const erd = elementResizeDetectorMaker()
-
+import PDFPreExport from '@/views/panel/export/PDFPreExport'
 export default {
-  components: { ComponentWrapper, CanvasOptBar },
+  components: { ComponentWrapper, CanvasOptBar, PDFPreExport },
   model: {
     prop: 'show',
     event: 'change'
@@ -148,6 +187,7 @@ export default {
   },
   data() {
     return {
+      canvasInfoTemp: 'preview-temp-canvas-main',
       previewMainDomId: 'preview-main-' + this.canvasId,
       previewDomId: 'preview-' + this.canvasId,
       previewRefId: 'preview-ref-' + this.canvasId,
@@ -175,7 +215,15 @@ export default {
       searchCount: 0,
       // 布局展示 1.pc pc端布局 2.mobile 移动端布局
       terminal: 'pc',
-      buttonFilterMap: null
+      buttonFilterMap: null,
+      pdfExportShow: false,
+      dataLoading: false,
+      exporting: false,
+      snapshotInfo: '',
+      pdfTemplateSelectedIndex: 0,
+      pdfTemplateContent: '',
+      templateInfo: {},
+      pdfTemplateAll: []
     }
   },
   computed: {
@@ -309,6 +357,7 @@ export default {
     }
     bus.$on('trigger-search-button', this.triggerSearchButton)
     bus.$on('trigger-reset-button', this.triggerResetButton)
+    this.initPdfTemplate()
   },
   beforeDestroy() {
     erd.uninstall(this.$refs[this.previewTempRefId])
@@ -545,6 +594,36 @@ export default {
           })
         }
       }, 1500)
+    },
+    downloadAsPDF() {
+      this.dataLoading = true
+      const domId = this.canvasInfoTemp
+      setTimeout(() => {
+        this.exporting = true
+        setTimeout(() => {
+          html2canvas(document.getElementById(domId)).then(canvas => {
+            const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
+            this.dataLoading = false
+            this.exporting = false
+            if (snapshot !== '') {
+              this.snapshotInfo = snapshot
+              this.pdfExportShow = true
+            }
+          })
+        }, 1500)
+      }, 500)
+    },
+    closePreExport() {
+      this.pdfExportShow = false
+    },
+    changePdfTemplate() {
+      this.pdfTemplateContent = this.pdfTemplateAll[this.pdfTemplateSelectedIndex] ? this.pdfTemplateAll[this.pdfTemplateSelectedIndex].templateContent : ''
+    },
+    initPdfTemplate() {
+      queryAll().then(res => {
+        this.pdfTemplateAll = res.data
+        this.changePdfTemplate()
+      })
     }
   }
 }