下载增加loading

src/components/Form/src/jeecg/components/JUpload/JUpload.vue

@@ -21,7 +21,9 @@
         <span>{{ text }}</span>
       </a-button>
     </a-upload>
-
+  </div>
+  <div class="example">
+    <a-spin :spinning="spinning" size="large" tip="下载中..." />
   </div>
 </template>
 
@@ -42,6 +44,7 @@
   import { buildUUID } from '/@/utils/uuid';
   import CryptoJS from 'crypto-js';
 
+  const spinning = ref<boolean>(false);
   const { createMessage, createConfirm } = useMessage();
   const { prefixCls } = useDesign('j-upload');
   const attrs = useAttrs();
@@ -396,7 +399,39 @@
     if (isImageMode.value) {
       createImgPreview({ imageList: [file.url], maskClosable: true });
     } else {
-      window.open(file.url);
+      // window.open(file.url);
+      openWindowWithLoading(file.url);
+    }
+  }
+
+  /**
+   * 自定义下载事件，带加载中
+   */
+  function openWindowWithLoading(url){
+    let xhr = new XMLHttpRequest();
+    spinning.value = true;
+    xhr.open('GET',url,true);
+    // xhr.onprogress = function (e){
+    //   let percent = Math.floor(e.loaded / e.total * 100);//百分比加载，用于进度条
+    //   console.log(percent);
+    // }
+    xhr.send();
+    xhr.responseType = "arraybuffer";
+    xhr.onreadystatechange = event =>{
+      console.log(xhr);
+      if(xhr.readyState == 4){
+        if(xhr.status == 200){
+          let fileName = url.substring(url.lastIndexOf("/")+1);
+          let blob = new Blob([xhr.response]);
+          const downLoadLink = document.createElement('a');
+          downLoadLink.download = fileName;
+          downLoadLink.href = URL.createObjectURL(blob);
+          downLoadLink.click();
+        }else if (xhr.status == 404){
+          createMessage.warning('没有找到可下载的资源！');
+        }
+      }
+      spinning.value = false;
     }
   }
 
@@ -785,4 +820,13 @@
       }
     }
   }
+
+  .example {
+    text-align: center;
+    background: rgba(0, 0, 0, 0);
+    border-radius: 4px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+  }
 </style>

src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcMain.vue

@@ -45,9 +45,9 @@
 
   //进入就加载
   onMounted(() => {
-    console.log('rwbh:',rwbh);
+    // console.log('rwbh:',rwbh);
     defHttp.get({ url: '/ktgl/kcKechengbiao/getKcxxByRwbhXqxn', params: { rwbh: rwbh,xqxn:xqxn } }).then((res) => {
-    console.log(`🚀 ~ 1111 defHttp.get ~ res:`, res)
+    // console.log(`🚀 ~ 1111 defHttp.get ~ res:`, res)
     kcxxInfo.value = res;
     });
   });

src/views/site/renKeJiaoCheng/checkKecheng/dqxqkcMenu.vue

@@ -100,7 +100,7 @@
     }else if(zytype=='zycd'){
       href = "/zy/dqkcCdxx";
     }
-    
+
     router.push({path:href,query: {rwbh,xqxn,type}});
   }
 
@@ -110,7 +110,7 @@
 
   //进入就加载
   onMounted(() => {
-    console.log('rwbh:',rwbh);
+    // console.log('rwbh:',rwbh);
   });
 
 </script>

src/views/zy/jiaoXueDanYuanNeiRong/downloadAssembly.vue

@@ -7,7 +7,8 @@
             <div class="ant-upload-text-icon">
               <Icon icon="ant-design:paper-clip-outlined"/>
             </div>
-            <a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name" :title="getFileName()" :href="getFilePath()">{{ getFileName() }}</a>
+<!--            <a target="_blank" rel="noopener noreferrer" class="ant-upload-list-item-name" :title="getFileName()" :href="getFilePath()">{{ getFileName() }}</a>-->
+            <a rel="noopener noreferrer" class="ant-upload-list-item-name" :title="getFileName()" @click="downLoadFile()">{{ getFileName() }}</a>
           </span>
         </div>
         <div class="ant-upload-list-item-progress" style="display: none;"></div>
@@ -15,10 +16,16 @@
       <a-empty v-else/>
     </div>
   </div>
-
+  <div class="example">
+    <a-spin :spinning="spinning" size="large" tip="下载中..." />
+  </div>
 </template>
 <script lang="ts" name="jiaoXueDanYuanNeiRongIndexDownload" setup>
   import { getFileAccessHttpUrl } from '/@/utils/common/compUtils'
+  import {ref} from "vue";
+  import {useMessage} from "/@/hooks/web/useMessage";
+  const { createMessage } = useMessage();
+  const spinning = ref<boolean>(false);
   const props = defineProps({
     filePath: { type: String },
     fileName: { type: String },
@@ -41,4 +48,45 @@
     if(!props.filePath) return null;
     return getFileAccessHttpUrl(props.filePath);
   }
-</script>
+
+  function downLoadFile(){
+    if(!props.filePath) return null;
+    let url = getFileAccessHttpUrl(props.filePath);
+    openWindowWithLoading(url);
+  }
+
+  function openWindowWithLoading(url){
+    let xhr = new XMLHttpRequest();
+    spinning.value = true;
+    xhr.open('GET',url,true);
+    xhr.send();
+    xhr.responseType = "arraybuffer";
+    xhr.onreadystatechange = event =>{
+      if(xhr.readyState == 4){
+        if(xhr.status == 200){
+          let fileName = url.substring(url.lastIndexOf("/")+1);
+          let blob = new Blob([xhr.response]);
+          const downLoadLink = document.createElement('a');
+          downLoadLink.download = fileName;
+          downLoadLink.href = URL.createObjectURL(blob);
+          downLoadLink.click();
+        }else if (xhr.status == 404){
+          createMessage.warning('没有找到可下载的资源！');
+        }
+      }
+      spinning.value = false;
+    }
+  }
+
+</script>
+
+<style lang="less" scoped>
+.example {
+  text-align: center;
+  background: rgba(0, 0, 0, 0);
+  border-radius: 4px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+</style>

src/views/zy/jiaoXueDanYuanNeiRong/index.vue

@@ -146,8 +146,9 @@
     </a-modal>
   </div>
 </div>
-
+<div class="example">
-
+  <a-spin :spinning="spinning" size="large" tip="下载中..." />
+</div>
 </template>
 
 <script lang="ts" name="jiaoXueDanYuanNeiRongIndex" setup>
@@ -164,6 +165,7 @@
   import downloadAssembly from '/@/views/zy/jiaoXueDanYuanNeiRong/downloadAssembly.vue';
   import stuIndex from './stuIndex.vue';
 
+  const spinning = ref<boolean>(false);
   //当前路由信息
   const { currentRoute } = useRouter();
   const { query } = unref(currentRoute);
@@ -496,7 +498,31 @@
 
   function downloadFile(three) {
     let url = getFileAccessHttpUrl(three.filePath);
-    window.open(url,"_blank");
+    // window.open(url,"_blank");
+    openWindowWithLoading(url);
+  }
+
+  function openWindowWithLoading(url){
+    let xhr = new XMLHttpRequest();
+    spinning.value = true;
+    xhr.open('GET',url,true);
+    xhr.send();
+    xhr.responseType = "arraybuffer";
+    xhr.onreadystatechange = event =>{
+      if(xhr.readyState == 4){
+        if(xhr.status == 200){
+          let fileName = url.substring(url.lastIndexOf("/")+1);
+          let blob = new Blob([xhr.response]);
+          const downLoadLink = document.createElement('a');
+          downLoadLink.download = fileName;
+          downLoadLink.href = URL.createObjectURL(blob);
+          downLoadLink.click();
+        }else if (xhr.status == 404){
+          createMessage.warning('没有找到可下载的资源！');
+        }
+      }
+      spinning.value = false;
+    }
   }
 
   //移动结束时触发，如果未移动则不触发，刷新排序,
@@ -685,4 +711,13 @@
   }
 }
 
+.example {
+  text-align: center;
+  background: rgba(0, 0, 0, 0);
+  border-radius: 4px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+
 </style>

src/views/zyk/ZykInfoList.vue

@@ -80,6 +80,9 @@
     <!-- 表单区域 -->
     <ZykInfoModal ref="registerModal" @success="handleSuccess"></ZykInfoModal>
   </div>
+  <div class="example">
+    <a-spin :spinning="spinning" size="large" tip="下载中..." />
+  </div>
 </template>
 
 <script lang="ts" name="zyk-zykInfo" setup>
@@ -89,11 +92,14 @@ import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectT
 import { useListPage } from '/@/hooks/system/useListPage';
 import { columns } from './ZykInfo.data';
 import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './ZykInfo.api';
-import { downloadFile } from '/@/utils/common/renderUtils';
+// import { downloadFile } from '/@/utils/common/renderUtils';
 import { useUserStore } from '/@/store/modules/user';
 import ZykInfoModal from './components/ZykInfoModal.vue'
 import { getUserSf,getSysConfig } from '/@/views/site/utils/index';
-
+import {baseApiUrl, getFileAccessHttpUrl} from "/@/utils/common/compUtils";
+import {useMessage} from "/@/hooks/web/useMessage";
+const spinning = ref<boolean>(false);
+const { createMessage } = useMessage();
 const userStore = useUserStore();
 const userName = userStore.getUserInfo.username;
 const queryParam = ref<any>({
@@ -153,6 +159,47 @@ const wjlxDic = ref<String>(
   "zyk_info,wjlx,wjlx,create_by = '"+userName+"' and xh is null and wjlx !='学生论文' group by wjlx order by wjlx"
 );
 
+function downloadFile(url){
+  if (!url) {
+    createMessage.warning('未知的文件');
+    return;
+  }
+  if (url.indexOf(',') > 0) {
+    url = url.substring(0, url.indexOf(','));
+  }
+  url = getFileAccessHttpUrl(url.split(',')[0]);
+  if (url) {
+    openWindowWithLoading(url);
+  }
+}
+
+function openWindowWithLoading(url){
+  let xhr = new XMLHttpRequest();
+  spinning.value = true;
+  xhr.open('GET',url,true);
+  // xhr.onprogress = function (e){
+  //   let percent = Math.floor(e.loaded / e.total * 100);//百分比加载
+  //   console.log(percent);
+  // }
+  xhr.send();
+  xhr.responseType = "arraybuffer";
+  xhr.onreadystatechange = event =>{
+    if(xhr.readyState == 4){
+      if(xhr.status == 200){
+        let fileName = url.substring(url.lastIndexOf("/")+1);
+        let blob = new Blob([xhr.response]);
+        const downLoadLink = document.createElement('a');
+        downLoadLink.download = fileName;
+        downLoadLink.href = URL.createObjectURL(blob);
+        downLoadLink.click();
+      }else if (xhr.status == 404){
+        createMessage.warning('没有找到可下载的资源！');
+      }
+    }
+    spinning.value = false;
+  }
+}
+
 function changeXqxnDic(){
   if(queryParam.value.xqxn!=null && queryParam.value.xqxn!=""){
     kkdwDic.value = "zyk_info,kkdw,kkdw,create_by = '"+userName+"' and xh is null and xqxn = '"+queryParam.value.xqxn+"' group by kkdw order by kkdw";
@@ -332,4 +379,14 @@ onMounted(() => {
     text-align: center
   }
 }
+
+.example {
+  text-align: center;
+  background: rgba(0, 0, 0, 0);
+  border-radius: 4px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+
 </style>