初始化
This commit is contained in:
339
src/components/affix/index.vue
Normal file
339
src/components/affix/index.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user