代码格式修改
This commit is contained in:
@@ -1,52 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-upload
|
||||
:style="uploadStyle"
|
||||
action=""
|
||||
:class="['cm-affix', {'is-disabled': inputDisabled}]"
|
||||
:disabled="inputDisabled"
|
||||
:multiple=true
|
||||
:http-request="handleUpload"
|
||||
:file-list="fileList"
|
||||
:accept="accpet"
|
||||
:show-file-list=false
|
||||
:before-upload="handleBeforeUpload"
|
||||
>
|
||||
<el-button id="affix1" v-if="inputDisabled !== true" :disabled="notupload" size="small" type="primary">点击上传</el-button>
|
||||
<el-button
|
||||
id="affix2"
|
||||
size="small"
|
||||
v-if="this.affixId !== null && this.affixId !== '' && this.fileList.length > 0"
|
||||
@click.stop="downloadPack()">
|
||||
<div v-if="downloading" class="el-icon-loading file-upload" style="margin-left: 0px;margin-right: 3px;font-size: 14px;"></div>
|
||||
打包下载
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<div>
|
||||
<el-upload
|
||||
:style="uploadStyle"
|
||||
action=""
|
||||
:class="['cm-affix', {'is-disabled': inputDisabled}]"
|
||||
:disabled="inputDisabled"
|
||||
:multiple="true"
|
||||
:http-request="handleUpload"
|
||||
:file-list="fileList"
|
||||
:accept="accpet"
|
||||
:show-file-list="false"
|
||||
:before-upload="handleBeforeUpload"
|
||||
>
|
||||
<el-button v-if="inputDisabled !== true" id="affix1" :disabled="notupload" size="small" type="primary">点击上传</el-button>
|
||||
<el-button
|
||||
v-if="this.affixId !== null && this.affixId !== '' && this.fileList.length > 0"
|
||||
id="affix2"
|
||||
size="small"
|
||||
@click.stop="downloadPack()"
|
||||
>
|
||||
<div v-if="downloading" class="el-icon-loading file-upload" style="margin-left: 0px;margin-right: 3px;font-size: 14px;" />
|
||||
打包下载
|
||||
</el-button>
|
||||
</el-upload>
|
||||
|
||||
<div v-for="(item, index) in fileList" class="file" :key="index">
|
||||
<div class="file-item" :class="[{'is-disabled': inputDisabled}]">
|
||||
<div class="file-name">{{item.name}}</div>
|
||||
<div v-if="item.status===1" class="el-icon-loading file-upload" title="上传中..."></div>
|
||||
<div v-if="item.status===2" class="el-icon-download file-download" title="下载" @click="downloadFile(item)"></div>
|
||||
<div v-if="item.status===2" class="el-icon-delete file-delete" title="删除" @click="deleteFile(item)"></div>
|
||||
<div v-if="isImageURL(item.name) && item.status === 2" class="el-icon-picture" title="预览" @click="preview(item)"></div>
|
||||
<div v-for="(item, index) in fileList" :key="index" class="file">
|
||||
<div class="file-item" :class="[{'is-disabled': inputDisabled}]">
|
||||
<div class="file-name">{{ item.name }}</div>
|
||||
<div v-if="item.status===1" class="el-icon-loading file-upload" title="上传中..." />
|
||||
<div v-if="item.status===2" class="el-icon-download file-download" title="下载" @click="downloadFile(item)" />
|
||||
<div v-if="item.status===2" class="el-icon-delete file-delete" title="删除" @click="deleteFile(item)" />
|
||||
<div v-if="isImageURL(item.name) && item.status === 2" class="el-icon-picture" title="预览" @click="preview(item)" />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<el-image class="preview" ref="preview"
|
||||
:src="hiddenSrc"
|
||||
:preview-src-list="previewList"
|
||||
v-show="false"
|
||||
>
|
||||
</el-image>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<el-image v-show="false" ref="preview"
|
||||
class="preview"
|
||||
:src="hiddenSrc"
|
||||
:preview-src-list="previewList"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deleteAffix, download, downloadAll, queryAffixs, upload } from "@/api/affix/affix";
|
||||
import { deleteAffix, download, downloadAll, queryAffixs, upload } from '@/api/affix/affix'
|
||||
|
||||
export default {
|
||||
name: 'CmAffix',
|
||||
@@ -55,17 +55,6 @@ export default {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadCnt: 0,
|
||||
affixId: '',
|
||||
fileList: [],
|
||||
downloading:false,//控制打包下载loading动画
|
||||
baseurl: process.env.VUE_APP_BASE_API ,
|
||||
hiddenSrc:"",
|
||||
previewList:[],
|
||||
}
|
||||
},
|
||||
props: {
|
||||
notupload:{
|
||||
type:Boolean,
|
||||
@@ -79,7 +68,7 @@ export default {
|
||||
},
|
||||
accpet:{
|
||||
type:String,
|
||||
default:"*"
|
||||
default:'*'
|
||||
},
|
||||
uploadStyle:
|
||||
{
|
||||
@@ -88,10 +77,21 @@ export default {
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadCnt: 0,
|
||||
affixId: '',
|
||||
fileList: [],
|
||||
downloading:false,//控制打包下载loading动画
|
||||
baseurl: process.env.VUE_APP_BASE_API ,
|
||||
hiddenSrc:'',
|
||||
previewList:[],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
inputDisabled() {
|
||||
return this.disabled || (this.elForm || {}).disabled;
|
||||
return this.disabled || (this.elForm || {}).disabled
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -101,39 +101,42 @@ export default {
|
||||
if (newVal === undefined || newVal == null || newVal === ''
|
||||
|| this.affixId === undefined || this.affixId == null || this.affixId === ''
|
||||
|| newVal !== this.affixId) {
|
||||
this.loadData();
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
// 预览
|
||||
preview(item){
|
||||
this.hiddenSrc = item.savePath;
|
||||
this.hiddenSrc = item.savePath
|
||||
|
||||
this.$refs.preview.showViewer = true;
|
||||
this.$refs.preview.showViewer = true
|
||||
},
|
||||
isImageURL(url) {
|
||||
// let imgRegex = /(\jpg|\jpeg|\png|\gif|\webp)$/i;
|
||||
const regex = /(\jpg|\jpeg|\png|\gif|\webp)$/i;
|
||||
return regex.test(url);
|
||||
const regex = /(\jpg|\jpeg|\png|\gif|\webp)$/i
|
||||
return regex.test(url)
|
||||
},
|
||||
handleUpload(file) {
|
||||
|
||||
upload({'file': file.file, 'affixId': this.affixId}).then(res => {
|
||||
this.uploadCnt--;
|
||||
this.uploadCnt--
|
||||
|
||||
if (res.code == 200) {
|
||||
for (let i = 0; i < this.fileList.length; i++) {
|
||||
let item = this.fileList[i];
|
||||
console.log(res.savePath);
|
||||
let item = this.fileList[i]
|
||||
console.log(res.savePath)
|
||||
if(item.name == res.trueName && item.status == 1){
|
||||
|
||||
this.fileList[i].id = res.id;
|
||||
this.fileList[i].status = 2;
|
||||
this.fileList[i].savePath = this.baseurl + res.savePath;
|
||||
this.fileList[i].id = res.id
|
||||
this.fileList[i].status = 2
|
||||
this.fileList[i].savePath = this.baseurl + res.savePath
|
||||
if(this.isImageURL(res.savePath)){
|
||||
this.previewList.push( this.fileList[i].savePath);
|
||||
this.previewList.push( this.fileList[i].savePath)
|
||||
}
|
||||
// this.fileList[i].savePaths =[this.baseurl + res.savePath];
|
||||
|
||||
@@ -144,82 +147,82 @@ export default {
|
||||
|
||||
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.uploadCnt--;
|
||||
});
|
||||
this.uploadCnt--
|
||||
})
|
||||
},
|
||||
handleBeforeUpload(file) {
|
||||
|
||||
if (this.affixId == null || this.affixId === '') {
|
||||
this.affixId = this.$tool.uuid();
|
||||
this.$emit('input', this.affixId);
|
||||
this.affixId = this.$tool.uuid()
|
||||
this.$emit('input', this.affixId)
|
||||
}
|
||||
|
||||
let isLt20M = file.size / 1024 / 1024 < this.maxSize;
|
||||
let isLt20M = file.size / 1024 / 1024 < this.maxSize
|
||||
if (!isLt20M) {
|
||||
this.$message.error("上传大小不能超过 "+this.maxSize+"MB!");
|
||||
this.$message.error('上传大小不能超过 '+this.maxSize+'MB!')
|
||||
} else {
|
||||
this.fileList.push({name: file.name, status: 1});
|
||||
this.uploadCnt++;
|
||||
this.fileList.push({name: file.name, status: 1})
|
||||
this.uploadCnt++
|
||||
}
|
||||
|
||||
return isLt20M;
|
||||
return isLt20M
|
||||
},
|
||||
getFileName(id){
|
||||
for (let i = 0; i < this.fileList.length; i++) {
|
||||
let item = this.fileList[i];
|
||||
let item = this.fileList[i]
|
||||
|
||||
if(item.id == id){
|
||||
console.log(item);
|
||||
return item.name;
|
||||
console.log(item)
|
||||
return item.name
|
||||
}
|
||||
}
|
||||
},
|
||||
downloadFile(file) {
|
||||
download(file.id).then((res) => {
|
||||
console.log(res)
|
||||
let fileName = this.getFileName(file.id).replace(/"/g, '');
|
||||
let fileName = this.getFileName(file.id).replace(/"/g, '')
|
||||
var blob = new Blob([res], {type: 'application/octet-stream;'})
|
||||
var downloadElement = document.createElement('a');
|
||||
var href = window.URL.createObjectURL(blob); // 创建下载的链接
|
||||
downloadElement.href = href;
|
||||
downloadElement.download = decodeURI(fileName); // 下载后文件名
|
||||
document.body.appendChild(downloadElement);
|
||||
downloadElement.click(); // 点击下载
|
||||
document.body.removeChild(downloadElement); // 下载完成移除元素
|
||||
window.URL.revokeObjectURL(href); // 释放掉blob对象
|
||||
var downloadElement = document.createElement('a')
|
||||
var href = window.URL.createObjectURL(blob) // 创建下载的链接
|
||||
downloadElement.href = href
|
||||
downloadElement.download = decodeURI(fileName) // 下载后文件名
|
||||
document.body.appendChild(downloadElement)
|
||||
downloadElement.click() // 点击下载
|
||||
document.body.removeChild(downloadElement) // 下载完成移除元素
|
||||
window.URL.revokeObjectURL(href) // 释放掉blob对象
|
||||
}).catch((res) => {
|
||||
this.$message.error(res.message);
|
||||
});
|
||||
this.$message.error(res.message)
|
||||
})
|
||||
},
|
||||
downloadPack() {
|
||||
|
||||
if (this.affixId === null || this.affixId === '') {
|
||||
this.$message.error("暂无附件！");
|
||||
return;
|
||||
this.$message.error('暂无附件！')
|
||||
return
|
||||
}
|
||||
//如果只有一个文件就不打包下载
|
||||
if(this.fileList.length == 1){
|
||||
|
||||
this.downloadFile(this.fileList[0]);
|
||||
this.downloadFile(this.fileList[0])
|
||||
}else{
|
||||
this.downloading = true;
|
||||
this.downloading = true
|
||||
downloadAll(this.affixId).then((res) => {
|
||||
var blob = new Blob([res], {type: 'application/octet-stream'})
|
||||
var downloadElement = document.createElement('a');
|
||||
var href = window.URL.createObjectURL(blob); // 创建下载的链接
|
||||
downloadElement.href = href;
|
||||
downloadElement.download = decodeURI("download.zip"); // 下载后文件名
|
||||
document.body.appendChild(downloadElement);
|
||||
downloadElement.click(); // 点击下载
|
||||
document.body.removeChild(downloadElement); // 下载完成移除元素
|
||||
window.URL.revokeObjectURL(href); // 释放掉blob对象
|
||||
this.downloading = false;
|
||||
var downloadElement = document.createElement('a')
|
||||
var href = window.URL.createObjectURL(blob) // 创建下载的链接
|
||||
downloadElement.href = href
|
||||
downloadElement.download = decodeURI('download.zip') // 下载后文件名
|
||||
document.body.appendChild(downloadElement)
|
||||
downloadElement.click() // 点击下载
|
||||
document.body.removeChild(downloadElement) // 下载完成移除元素
|
||||
window.URL.revokeObjectURL(href) // 释放掉blob对象
|
||||
this.downloading = false
|
||||
}).catch(() => {
|
||||
this.downloading = false;
|
||||
});
|
||||
this.downloading = false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -228,52 +231,49 @@ export default {
|
||||
this.$confirm('请确认是否删除此文件？', '提示', {type: 'info'}).then(() => {
|
||||
deleteAffix(file.id).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.fileList = this.fileList.filter(item => item.id !== file.id);
|
||||
this.previewList = this.previewList.filter(item => item !== file.savePath);//删除图片
|
||||
this.fileList = this.fileList.filter(item => item.id !== file.id)
|
||||
this.previewList = this.previewList.filter(item => item !== file.savePath)//删除图片
|
||||
if(this.fileList.length == 0){
|
||||
this.affixId = '';
|
||||
this.affixId = ''
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.message);
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
})
|
||||
},
|
||||
loadData() {
|
||||
this.fileList = [];
|
||||
if (typeof this.value !== "undefined" && this.value !== null && this.value !== "") {
|
||||
this.fileList = []
|
||||
if (typeof this.value !== 'undefined' && this.value !== null && this.value !== '') {
|
||||
queryAffixs(this.value).then((res) => {
|
||||
if (res.code ==200) {
|
||||
if(res.data.length > 0){
|
||||
this.affixId = this.value;
|
||||
this.affixId = this.value
|
||||
for (var i=0;i<res.data.length;i++) {
|
||||
if(this.isImageURL(res.data[i].savePath)){
|
||||
this.previewList.push(this.baseurl+ res.data[i].savePath);
|
||||
this.previewList.push(this.baseurl+ res.data[i].savePath)
|
||||
}
|
||||
this.fileList.push({name: res.data[i].trueName, id: res.data[i].id, status: 2,savePath:this.baseurl+ res.data[i].savePath});
|
||||
this.fileList.push({name: res.data[i].trueName, id: res.data[i].id, status: 2,savePath:this.baseurl+ res.data[i].savePath})
|
||||
}
|
||||
} else {
|
||||
this.affixId = '';
|
||||
this.affixId = ''
|
||||
}
|
||||
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
}).catch((res) => {
|
||||
this.editLoading = false
|
||||
this.$message.error(res.message);
|
||||
});
|
||||
this.$message.error(res.message)
|
||||
})
|
||||
} else {
|
||||
this.affixId = '';
|
||||
this.affixId = ''
|
||||
}
|
||||
},
|
||||
clearData() {
|
||||
this.affixId = '';
|
||||
this.fileList = [];
|
||||
this.affixId = ''
|
||||
this.fileList = []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user