feat：合同签约下载pdf功能（海马汇下载文件功能有问题）

src/modules/contractSign/views/index.vue

@@ -4,21 +4,21 @@
 
     <section class="list">
       <Tabs v-model:active="active" title-active-color="#0277bc" color="#0277bc" @change="TabChange">
-        <Search v-model="searchValue" placeholder="请输入合同编号/代理店" @update:model-value="onSearch"/>
+        <Search v-model="searchValue" placeholder="请输入合同编号/代理店" @update:model-value="onSearch" />
 
         <Tab title="未签署">
           <Notice detail="只对已关联的项目发送合同签约链接" />
 
           <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
-            <List :finished="finished" finished-text="没有更多了" @load="loadApproval">
+            <List v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadApproval">
               <SignListItem v-for="item in notList" :sdata="item" @click="eSign(item.signUrl)" />
             </List>
           </PullRefresh>
         </Tab>
 
         <Tab title="已签署">
-          <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
-            <List :finished="finished" finished-text="没有更多了" @load="loadApproval">
+          <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll signed">
+            <List v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadApproval">
               <SignListItem v-for="item in alreadyList" :sdata="item" @click="pdfPre(item)" />
             </List>
           </PullRefresh>
@@ -33,8 +33,7 @@ import { goBack } from "@/utils/globalFun"
 import { NavBar, List, PullRefresh, Tab, Tabs, Search, Toast } from "vant";
 import Notice from '@/components/Notice.vue'
 import SignListItem from '../components/SignListItem.vue'
-import popMessage from '@/components/popMessage.vue'
-import {watchEffect} from "vue";
+import { watchEffect } from "vue";
 import api from "../api";
 import { useRouter } from "vue-router";
 import { usePlanData } from '../store/index'
@@ -45,17 +44,24 @@ const usePlanDataStore = usePlanData()
 
 let active = $ref(0)
 let searchValue = $ref('')
-let refreshing = $ref(true);
+let loading = $ref(false)
+let refreshing = $ref(false);
 let finished = $ref(true);
 
 
-let pager = {
-  page: 1,
-  pageSize: 10
-}
+let pager = [
+  {
+    page: 1,
+    pageSize: 10
+  },
+  {
+    page: 1,
+    pageSize: 10
+  }
+]
 
 watchEffect(() => {
-  if(usePlanDataStore.active){
+  if (usePlanDataStore.active) {
     active = usePlanDataStore.active
   }
 })
@@ -67,25 +73,25 @@ const onSearch = () => {
     alreadyList = []
   }
   finished = true;
-  refreshing = true;
-  pager.page = 1;
-  pager.pageSize = 10;
+  pager[active].page = 1;
+  pager[active].pageSize = 10;
   queryList()
 }
 
 let queryList = async () => {
-  refreshing = true
   let res = await api.contextQuery({
     actionType: active,
     agencyName: searchValue,
     receivets: + new Date() + '',
     projectNumber: searchValue,
-    // ...pager
+    ...pager[active]
   })
-  if (active === 0) {
-    notList = []
-  } else {
-    alreadyList = []
+  if(refreshing){
+    if (active === 0) {
+      notList = []
+    } else {
+      alreadyList = []
+    }
   }
   if (res.success && res.rows.length > 0) {
     res.rows.forEach(item => {
@@ -102,17 +108,19 @@ let queryList = async () => {
         alreadyList.push({ ...temp, isSign: true })
       }
     })
-    if(res.rows.length >= 10) {
+    if (res.rows.length >= pager[active].pageSize) {
       finished = false
+    } else {
+      finished = true
     }
   } else {
     finished = true
   }
-  refreshing = false
+  loading = false
 }
 queryList();
 
-const onRefresh = () => {
+const onRefresh = async () => {
   // 下拉重置参数，重新加载
   if (active === 0) {
     notList = []
@@ -120,11 +128,13 @@ const onRefresh = () => {
     alreadyList = []
   }
   finished = true
-  refreshing = true
   searchValue = '';
-  pager.page = 1;
-  pager.pageSize = 10;
-  queryList()
+  pager[active].page = 1;
+  pager[active].pageSize = 10;
+  console.log('onRefresh')
+  loading = true;
+  await queryList()
+  refreshing = false
 };
 
 let TabChange = () => {
@@ -134,15 +144,15 @@ let TabChange = () => {
   }
 }
 
-const loadApproval = () => {
-  pager.page++
-  queryList()
+const loadApproval = async () => {
+  pager[active].page++
+  await queryList()
 }
 
 const router = useRouter();
 
 const pdfPre = (item) => {
-  if(item.esignFlowId){
+  if (item.esignFlowId) {
     router.push({ path: '/contractsign/views/pdfprelist', query: { esignFlowId: item.esignFlowId } })
   } else {
     Toast('未获取到签署合同，请联系管理员！');
@@ -150,7 +160,7 @@ const pdfPre = (item) => {
 }
 
 const eSign = (eUrl) => {
-  if(eUrl){
+  if (eUrl) {
     router.push({ path: '/contractsign/views/esign', query: { url: eUrl } })
   } else {
     Toast('未获取到签署合同链接，请联系管理员！');
@@ -175,6 +185,10 @@ const eSign = (eUrl) => {
   overflow-y: auto;
   padding-top: 10px;
 }
+
+.scroll.signed {
+  height: calc(100vh - 40vw);
+}
 </style>
 
 <route>

src/modules/contractSign/views/pdfPre.vue

 <template>
   <div class="container">
-    <NavBar title="合同预览" left-arrow @click-left="goBack" />
+    <NavBar title="合同预览" left-arrow @click-left="goBack" right-text="下载" @click-right="download" />
 
     <div class="content">
-      <VuePdfEmbed ref="pdfRef"  :source="pdfSource" :page="page" @rendered="handleDocumentRender"></VuePdfEmbed>
+      <VuePdfEmbed ref="pdfRef" :source="pdfSource" :page="page" @rendered="handleDocumentRender"></VuePdfEmbed>
     </div>
   </div>
 </template>
@@ -14,6 +14,7 @@ import { NavBar, Toast } from "vant";
 import VuePdfEmbed from 'vue-pdf-embed'
 import { watchEffect } from 'vue'
 import { useRoute, useRouter } from "vue-router";
+import downfileHips from "@/utils/downfileHips"
 
 const route = useRoute();
 const router = useRouter();
@@ -31,6 +32,33 @@ watchEffect(() => {
   }
 })
 
+const download = () => {
+  downfileHips(
+    pdfSource,
+    (msg) => {
+      console.log(msg);
+      const msgObj = JSON.parse(msg)
+      switch (msgObj.status) {
+        case "PROGRESS":
+          console.log("正在传输")
+          break
+        case "FINISH":
+          Toast({
+            message: `下载成功！保存地址是：${msgObj.response}`,
+            position: 'bottom',
+          });
+          break
+        case "FAIL":
+          Toast.fail('下载失败');
+      }
+
+    },
+    (err) => {
+      console.error('下载失败：', err)
+      Toast.fail('下载失败');
+    })
+}
+
 const handleDocumentRender = (args) => {
   isLoading = false
   pageCount = pdfRef.pageCount
@@ -43,7 +71,5 @@ const handleDocumentRender = (args) => {
   overflow-y: auto;
 }
 
-.vue-pdf-embed {
-
-}
+.vue-pdf-embed {}
 </style>

src/modules/contractSign/views/pdfPreList.vue

@@ -6,10 +6,13 @@
         <List :finished="finished" finished-text="没有更多了">
           <div class="item" v-for="item in preList">
             <div class="left">
-              <img src="../../../assets/list.png"/>
-              <div class="title">{{item.documentName}}</div>
+              <img src="../../../assets/list.png" />
+              <div class="title">{{ item.documentName }}</div>
+            </div>
+            <div style="display: flex;">
+              <div class="button-status sign" @click="jump(item)">查看</div>
+              <div class="button-status sign" @click="download(item)">下载</div>
             </div>
-            <div class="button-status sign" @click="jump(item)">查看</div>
           </div>
         </List>
       </PullRefresh>
@@ -19,10 +22,10 @@
 
 <script setup>
 import { goBack } from "@/utils/globalFun"
-import { NavBar, List, PullRefresh, Empty, Toast} from "vant";
-import ListItem from '@/components/ListItem.vue'
+import { NavBar, List, PullRefresh, Toast } from "vant";
 import api from "../api";
 import { useRoute, useRouter } from "vue-router";
+import downfileHips from "@/utils/downfileHips"
 
 const route = useRoute();
 const router = useRouter();
@@ -34,9 +37,9 @@ const esignFlowId = route.query.esignFlowId;
 let preList = $ref([]);
 
 const getDailyLiquidatedDetail = async () => {
-  const res = await api.preListQuery({"esignFlowId": esignFlowId})
+  const res = await api.preListQuery({ "esignFlowId": esignFlowId })
   refreshing = false;
-  if(res.success){
+  if (res.success) {
     preList = res.rows
   } else {
     Toast('请求失败，请联系管理员！');
@@ -44,9 +47,35 @@ const getDailyLiquidatedDetail = async () => {
 };
 getDailyLiquidatedDetail();
 
+const download = (item) => {
+  downfileHips(
+    item.fileUrl,
+    (msg) => {
+      console.log(msg);
+      const msgObj = JSON.parse(msg)
+      switch (msgObj.status) {
+        case "PROGRESS":
+          console.log("正在传输")
+          break
+        case "FINISH":
+          Toast({
+            message: `下载成功！保存地址是：${msgObj.response}`,
+            position: 'bottom',
+          });
+          break
+        case "FAIL":
+          Toast.fail('下载失败');
+      }
+
+    },
+    (err) => {
+      console.error('下载失败：', err)
+      Toast.fail('下载失败');
+    })
+}
 
 const jump = (item) => {
-  if(item.fileUrl){
+  if (item.fileUrl) {
     router.push({ path: '/contractsign/views/pdfPre', query: { url: item.fileUrl } })
   } else {
     Toast('未获取到签署文件！');
@@ -71,42 +100,47 @@ const jump = (item) => {
   height: 100%;
   overflow-y: auto;
 }
-.item{
+
+.item {
   width: 100%;
   height: 50px;
-  margin:0 auto;
+  margin: 0 auto;
   background-color: #fff;
-  margin-top:10px;
+  margin-top: 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+
 .left {
   display: flex;
 }
-.item img{
+
+.item img {
   width: 20px;
   height: 20px;
   margin-left: 16px;
 }
-.item .title{
+
+.item .title {
   font-size: 14px;
   color: #656464;
   margin-left: 16px;
   font-weight: 600;
   line-height: 20px;
 }
-.button-status{
-  width: 54px;
+
+.button-status {
+  width: 50px;
   height: 20px;
   font-size: 12px;
   border-radius: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 15px;
 }
-.sign{
+
+.sign {
   color: #2499FF;
 }
 </style>

src/utils/downfileHips.js

+//成功回调
+var onDownloadFileSuccess = function (message) {
+  //message：数据格式为JSON字符串
+}
+//失败回调
+var onDownloadFileError = function (message) {
+  console.error('download:',message);
+}
+function downloadFile(source, target, isTemp = 'N') {
+  var options = {
+    source,
+    target,//如果用户制定了文件的存放路径则直接存放，否则存放至app的默认路径,仅android
+    isTemp,//仅iOS,如果为Y会放到临时目录，当系统资源紧张会清空这个目录；如果为N会放到永久目录里 
+  }
+  var args = {
+    className: "FileBridge",
+    function: "download",
+    params: options,
+    successCallBack: "onDownloadFileSuccess",
+    failCallBack: "onDownloadFileError"
+  }
+  console.log(JSON.stringify(args));
+  HandBridge.postMessage(JSON.stringify(args))
+}
+
+// {
+//   "status":"PROGRESS"/"FINISH"/"FAIL" //正在传输/完成/失败
+//   "fileSize":1234   //文件总大小，当为-1时则表示文件的大小不可获取
+//   "finishSize":1222 //已传输大小
+//   "response":"xxxxx" //传输完成后文件的本地路径
+// }
+
+export default function downfileHips(source, succesE, errorE, target, isTemp = 'N') {
+  succesE && (onDownloadFileSuccess = succesE);
+  errorE && (onDownloadFileError = errorE);
+  downloadFile(source, target, isTemp)
+}
\ No newline at end of file