下载增加loading
This commit is contained in:
parent
33198d1cb2
commit
9b8915a803
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue