Merge pull request #3777 from dataease/pr@dev@perf_public_link_style

perf(公共链接): 交互区域样式

backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java

@@ -112,6 +112,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);

frontend/src/components/canvas/components/editor/CanvasOptBar.vue

@@ -1,18 +1,35 @@
 <template>
+
   <div
-    v-show="existLinkage"
-    class="bar-main"
+    :class="containerClass"
   >
+
     <div
-      v-show="isPublicLink && !isNewBlank"
-      class="bar-main-left"
+      v-if="isPublicLink"
+      class="function-div"
     >
-      <el-button
-        size="mini"
-        @click="back2Last"
-      ><i class="icon iconfont el-icon-back" />{{ $t('chart.back') }}</el-button>
+      <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" />{{ $t('panel.down') }}</el-button>
+      </el-button-group>
     </div>
-    <div class="bar-main-right">
+
+    <div
+      v-else-if="existLinkage"
+      class="bar-main-right"
+    >
       <el-button
         size="mini"
         type="warning"
@@ -43,6 +60,9 @@ export default {
     isNewBlank() {
       return window.history.length === 1
     },
+    containerClass() {
+      return this.isPublicLink ? 'trans-pc' : 'bar-main'
+    },
     ...mapState([
       'componentData'
     ])
@@ -54,6 +74,9 @@ export default {
     },
     back2Last() {
       this.$router.back(-1)
+    },
+    exportPDF() {
+      this.$emit('link-export-pdf')
     }
   }
 }
@@ -86,4 +109,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>

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: {
@@ -313,6 +361,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])
@@ -549,6 +598,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()
+      })
     }
   }
 }

frontend/src/lang/en.js

@@ -1865,8 +1865,12 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+
+    down: 'Down',
+
     mobile_style_setting: 'Style setting',
     mobile_style_setting_tips: 'Customize the mobile background',
+
     board: 'Border',
     text: 'Text',
     board_background: 'Background',

frontend/src/lang/tw.js

@@ -1865,8 +1865,12 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+
+    down: '下載',
+
     mobile_style_setting: '樣式設置',
     mobile_style_setting_tips: '自定義移動端背景',
+
     board: '邊框',
     text: '文字',
     board_background: '背景',

frontend/src/lang/zh.js

@@ -1865,8 +1865,12 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+
+    down: '下载',
+
     mobile_style_setting: '样式设置',
     mobile_style_setting_tips: '自定义移动端背景',
+
     board: '边框',
     text: '文字',
     board_background: '背景',