脱机存档

src/test/index.vue

@@ -1,47 +1,32 @@
 <template>
     <div class="hc-page-box">
         <hc-new-card title="测试">
-            <div class="flex h-full">
-                <div class="w-96">
-                    <template v-for="(item, index) in pdfData" :key="index">
-                        <div class="p-3" @click="pdfDataClick(item, index)">
-                            {{ item.name }}
-                        </div>
-                    </template>
-                </div>
-                <div class="flex-1">
-                    <HcPdf v-if="pdfItem.pdf" :sign="logoName" :src="pdfItem.pdf" :dom="pdfItem.hcSignImageArr" :batch="true" @change="pdfChange" />
-                </div>
-            </div>
+            <template #extra>
+                <hc-upload-file useFile :options="upFileOpt" @success="upFileSuc" @item="upFileItem">
+                    <el-button type="primary" hc-btn>上传文件</el-button>
+                </hc-upload-file>
+            </template>
         </hc-new-card>
     </div>
 </template>
 
 <script setup>
-import { nextTick, ref } from 'vue'
-import HcPdf from '../views/tasks/components/hc-pdf1.vue'
-import logoName from '~src/assets/logo/name.png'
+import {getTokenHeader} from "~src/api/request/header";
 
-const pdfData = ref([
-    { id: 1, pdf: 'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230918/8343c6296916f06f440fad513d89a9ca.pdf', name: '1.pdf' },
-    { id: 2, pdf: 'http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230616/686e713fa3f0563fbc85a3745f07ab30.pdf', name: '2.pdf' },
-    { id: 3, pdf: 'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230914/937fca6e36ff573164d0fef0e8580eea.pdf', name: '3.pdf' },
-])
+//上传配置
+const upFileOpt = {
+    accept: '*',
+    accept_tip: '',
+    headers: getTokenHeader(),
+}
 
-//切换PDF
-const pdfItem = ref({})
-const pdfIndex = ref(-1)
-const pdfDataClick = (item, index) => {
-    pdfItem.value = {}
-    pdfIndex.value = index
-    nextTick(() => {
-        pdfItem.value = item
-    })
+// 文件上传成功的回调
+const upFileSuc = (res) => {
+    console.log('上传成功：',  res?.resData?.link)
 }
 
-//签章数据改变
-const pdfChange = (data) => {
-    pdfData.value[pdfIndex.value].hcSignImageArr = data
-    console.log('签章数据', data)
+// 点击了使用此文件的事件
+const upFileItem = ({item}) => {
+    console.log(item?.resData?.link)
 }
 </script>