340 lines
11 KiB
Vue
340 lines
11 KiB
Vue
|
<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 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>
|
||
|
|
</div>
|
||
|
|
<el-image class="preview" ref="preview"
|
||
|
|
:src="hiddenSrc"
|
||
|
|
:preview-src-list="previewList"
|
||
|
|
v-show="false"
|
||
|
|
>
|
||
|
|
</el-image>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { deleteAffix, download, downloadAll, queryAffixs, upload } from "@/api/affix/affix";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'CmAffix',
|
||
|
|
inject: {
|
||
|
|
elForm: {
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
uploadCnt: 0,
|
||
|
|
affixId: '',
|
||
|
|
fileList: [],
|
||
|
|
downloading:false,//控制打包下载loading动画
|
||
|
|
baseurl: process.env.VUE_APP_BASE_API ,
|
||
|
|
hiddenSrc:"",
|
||
|
|
previewList:[],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
notupload:{
|
||
|
|
type:Boolean,
|
||
|
|
default:false
|
||
|
|
},
|
||
|
|
value: String, // 父组件值
|
||
|
|
disabled: Boolean,
|
||
|
|
maxSize:{
|
||
|
|
type: Number,
|
||
|
|
default: 20
|
||
|
|
},
|
||
|
|
accpet:{
|
||
|
|
type:String,
|
||
|
|
default:"*"
|
||
|
|
},
|
||
|
|
uploadStyle:
|
||
|
|
{
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
inputDisabled() {
|
||
|
|
return this.disabled || (this.elForm || {}).disabled;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
// 父组件值监听事件
|
||
|
|
value: {
|
||
|
|
handler: function(newVal/*, oldVal*/) {
|
||
|
|
if (newVal === undefined || newVal == null || newVal === ''
|
||
|
|
|| this.affixId === undefined || this.affixId == null || this.affixId === ''
|
||
|
|
|| newVal !== this.affixId) {
|
||
|
|
this.loadData();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 预览
|
||
|
|
preview(item){
|
||
|
|
this.hiddenSrc = item.savePath;
|
||
|
|
|
||
|
|
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);
|
||
|
|
},
|
||
|
|
handleUpload(file) {
|
||
|
|
|
||
|
|
upload({'file': file.file, 'affixId': this.affixId}).then(res => {
|
||
|
|
this.uploadCnt--;
|
||
|
|
|
||
|
|
if (res.code == 200) {
|
||
|
|
for (let i = 0; i < this.fileList.length; i++) {
|
||
|
|
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;
|
||
|
|
if(this.isImageURL(res.savePath)){
|
||
|
|
this.previewList.push( this.fileList[i].savePath);
|
||
|
|
}
|
||
|
|
// this.fileList[i].savePaths =[this.baseurl + res.savePath];
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.message);
|
||
|
|
}
|
||
|
|
}).catch(() => {
|
||
|
|
this.uploadCnt--;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleBeforeUpload(file) {
|
||
|
|
|
||
|
|
if (this.affixId == null || this.affixId === '') {
|
||
|
|
this.affixId = this.$tool.uuid();
|
||
|
|
this.$emit('input', this.affixId);
|
||
|
|
}
|
||
|
|
|
||
|
|
let isLt20M = file.size / 1024 / 1024 < this.maxSize;
|
||
|
|
if (!isLt20M) {
|
||
|
|
this.$message.error("上传大小不能超过 "+this.maxSize+"MB!");
|
||
|
|
} else {
|
||
|
|
this.fileList.push({name: file.name, status: 1});
|
||
|
|
this.uploadCnt++;
|
||
|
|
}
|
||
|
|
|
||
|
|
return isLt20M;
|
||
|
|
},
|
||
|
|
getFileName(id){
|
||
|
|
for (let i = 0; i < this.fileList.length; i++) {
|
||
|
|
let item = this.fileList[i];
|
||
|
|
|
||
|
|
if(item.id == id){
|
||
|
|
console.log(item);
|
||
|
|
return item.name;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
downloadFile(file) {
|
||
|
|
download(file.id).then((res) => {
|
||
|
|
console.log(res)
|
||
|
|
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对象
|
||
|
|
}).catch((res) => {
|
||
|
|
this.$message.error(res.message);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
downloadPack() {
|
||
|
|
|
||
|
|
if (this.affixId === null || this.affixId === '') {
|
||
|
|
this.$message.error("暂无附件！");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
//如果只有一个文件就不打包下载
|
||
|
|
if(this.fileList.length == 1){
|
||
|
|
|
||
|
|
this.downloadFile(this.fileList[0]);
|
||
|
|
}else{
|
||
|
|
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;
|
||
|
|
}).catch(() => {
|
||
|
|
this.downloading = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
deleteFile(file) {
|
||
|
|
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);//删除图片
|
||
|
|
if(this.fileList.length == 0){
|
||
|
|
this.affixId = '';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.message);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
loadData() {
|
||
|
|
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;
|
||
|
|
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.fileList.push({name: res.data[i].trueName, id: res.data[i].id, status: 2,savePath:this.baseurl+ res.data[i].savePath});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.affixId = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.$message.error(res.msg);
|
||
|
|
}
|
||
|
|
}).catch((res) => {
|
||
|
|
this.editLoading = false
|
||
|
|
this.$message.error(res.message);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.affixId = '';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
clearData() {
|
||
|
|
this.affixId = '';
|
||
|
|
this.fileList = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.loadData();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.cm-affix >>>.el-upload{
|
||
|
|
padding: 0px 10px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.file {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.file-item {
|
||
|
|
|
||
|
|
white-space: nowrap;
|
||
|
|
display: flex;
|
||
|
|
justify-content: start;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
.file-item div {
|
||
|
|
display: inline-block;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.file-upload {
|
||
|
|
font-size: 18px;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.file-download, .file-delete{
|
||
|
|
font-size: 18px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
}
|
||
|
|
.file-download:hover, .file-delete:hover {
|
||
|
|
color: #409EFF;
|
||
|
|
}
|
||
|
|
.file-item[class~=is-disabled] .file-delete {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.download-pack:hover {
|
||
|
|
background: #409eff;
|
||
|
|
border-color: #3999a8;
|
||
|
|
color: #fafbfd;
|
||
|
|
}
|
||
|
|
.preview .file-preview{
|
||
|
|
|
||
|
|
font-size: 19px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview >>>.el-image__inner{
|
||
|
|
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|