111

src/components/hc-pdfs/pdfs.vue

@@ -0,0 +1,64 @@
+<template>
+    <hc-pdf :src="pdfUrl" :download="isDownload" :print="isPrint" />
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+import { btnAuth, decode } from '~uti/btn-auth'
+import { isNullES } from 'js-fast-way'
+
+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('measure-pdf-download')
+    isPrint.value = btnAuth('measure-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/components/index.js

@@ -10,7 +10,7 @@ import HcSearchInput from './search-input/search-input.vue'
 import HcTasksUser from './hc-tasks-user/index.vue'
 import HcViewReport from './view-report/view-report.vue'
 import HcGradientCard from './gradient-card/index.vue'
-
+import HcPdfs from './hc-pdfs/pdfs.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
@@ -26,6 +26,5 @@ export const setupComponents = (App) => {
     App.component('HcSearchInput', HcSearchInput)
     App.component('HcTasksUser', HcTasksUser)
     App.component('HcViewReport', HcViewReport)
-
-
+    App.component('HcPdfs', HcPdfs)
 }

src/components/view-report/view-report.vue

@@ -29,7 +29,7 @@
                     <template #extra>
                         <el-button hc-btn type="warning" @click="backClick">返回</el-button>
                     </template>
-                    <hc-pdf src="http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230504/911982ba85e66cfa58fb02d5a738bb2b.pdf" />
+                    <hc-pdfs url="http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230504/911982ba85e66cfa58fb02d5a738bb2b.pdf" />
                 </hc-new-card>
             </div>
         </div>

src/views/home/pdf.vue

@@ -1,40 +1,27 @@
 <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('measure-pdf-download'))
-const isPrint = ref(btnAuth('measure-pdf-print'))
+
+defineOptions({
+    name: 'Pdf',
+})
 
 //渲染完成
 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>