pdf预览

src/global/components/hc-pdfs/pdfs.vue

@@ -0,0 +1,64 @@
+<template>
+    <hc-pdf :src="pdfUrl" :download="isDownload" :print="isPrint" />
+</template>
+
+<script setup>
+import { isNullES } from 'js-fast-way'
+import {onMounted, ref, watch} from 'vue'
+import { btnAuth, decode } from '~uti/btn-auth'
+
+const props = defineProps({
+    url: {
+        type: String,
+        default: ''
+    },
+    code: {
+        type: String,
+        default: ''
+    },
+})
+
+defineOptions({
+    name: 'HcPdfs',
+})
+
+//监听
+const queryUrl = ref(props.url)
+const queryCode = ref(props.code)
+watch(() => [props.url, props.code], ([url, code]) => {
+    queryUrl.value = url
+    queryCode.value = code
+    setPdfSrcData()
+})
+
+//渲染完成
+const isDownload = ref(false)
+const isPrint = ref(false)
+onMounted(() => {
+    isDownload.value = btnAuth('client-pdf-download')
+    isPrint.value = btnAuth('client-pdf-print')
+    setPdfSrcData()
+})
+
+//设置PDF地址
+const pdfUrl = ref('')
+const setPdfSrcData = () => {
+    const url = queryUrl.value, code = queryCode.value
+    //如果url和code都为空，不做处理
+    if (isNullES(url) && isNullES(code)) {
+        return
+    }
+    //如果url不为空，code为空，以url为准
+    if (!isNullES(url) && isNullES(code)) {
+        pdfUrl.value = url
+        return
+    }
+    //如果url为空，code不为空，以code为准
+    if (isNullES(url) && !isNullES(code)) {
+        pdfUrl.value = decode(code ?? '')
+        return
+    }
+    //两个都有的情况下，以code为准
+    pdfUrl.value = decode(code ?? '')
+}
+</script>

src/global/components/index.js

@@ -5,6 +5,7 @@ import HcTasksUser from './hc-tasks-user/index.vue'
 import HcTableForm from './table-form/index.vue'
 import HcUploads from './hc-uploads/index.vue'
 import HcSmsAuth from './hc-sms-auth/index.vue'
+import HcPdfs from './hc-pdfs/pdfs.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -15,4 +16,5 @@ export const setupComponents = (App) => {
     App.component('HcTableForm', HcTableForm)
     App.component('HcUploads', HcUploads)
     App.component('HcSmsAuth', HcSmsAuth)
+    App.component('HcPdfs', HcPdfs)
 }

src/views/home/pdf.vue

@@ -1,19 +1,15 @@
 <template>
     <div class="hc-pdf-page-box">
-        <hc-pdf :src="pdfUrl" :download="isDownload" :print="isPrint" />
+        <hc-pdfs :url="pdfUrl" :code="pdfCode"/>
     </div>
 </template>
 
 <script setup>
-import { isNullES } from 'js-fast-way'
 import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { btnAuth, decode } from '~uti/btn-auth'
 
 //初始变量
 const useRoutes = useRoute()
-const isDownload = ref(btnAuth('client-pdf-download'))
-const isPrint = ref(btnAuth('client-pdf-print'))
 
 defineOptions({
     name: 'Pdf',
@@ -21,24 +17,11 @@ defineOptions({
 
 //渲染完成
 const pdfUrl = ref('')
+const pdfCode = ref('')
 onMounted(() => {
     const { url, code } = useRoutes.query
-    //如果url和code都为空，不做处理
-    if (isNullES(url) && isNullES(code)) {
-        return
-    }
-    //如果url不为空，code为空，以url为准
-    if (!isNullES(url) && isNullES(code)) {
-        pdfUrl.value = url
-        return
-    }
-    //如果url为空，code不为空，以code为准
-    if (isNullES(url) && !isNullES(code)) {
-        pdfUrl.value = decode(code ?? '')
-        return
-    }
-    //两个都有的情况下，以code为准
-    pdfUrl.value = decode(code ?? '')
+    pdfUrl.value = url
+    pdfCode.value = code
 })
 </script>
 

src/views/tasks/hc-data.vue

@@ -48,7 +48,7 @@
             </template>
             <div class="hc-card-body-flex">
                 <div v-if="batchPdfUrl" class="flex-iframe">
-                    <hc-pdf :src="batchPdfUrl" />
+                    <hc-pdfs :url="batchPdfUrl" />
                 </div>
                 <div v-else class="flex-iframe hc-no-table-form">
                     <div class="table-form-no">