完善文档上传附件
This commit is contained in:
龙运模
parent
29fa3a9ca4
commit
c771b9e432
@ -7,32 +7,26 @@
|
||||
class="upload"
|
||||
:action="oss.host"
|
||||
:data="upload_data"
|
||||
:file-list="fileList"
|
||||
:show-file-list="false"
|
||||
:on-success="handleSuccess"
|
||||
:on-error="handleError"
|
||||
:on-remove="handleRemove"
|
||||
:on-exceed="handleExceed"
|
||||
:before-upload="beforeUpload"
|
||||
:http-request="uploadFile"
|
||||
drag
|
||||
multiple
|
||||
:auto-upload="true"
|
||||
:limit="5"
|
||||
:disabled="importDis"
|
||||
>
|
||||
<div v-if="!importTrue">
|
||||
<div>
|
||||
<el-icon class="el-icon--upload"><sc-icon-UploadExcel /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
<span class="laText">请将Excel拖到此处</span>
|
||||
<span class="tipText">，或点击上传</span><em> Excel</em>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="el-upload__text">
|
||||
<el-icon class="trueIcon el-icon--upload">
|
||||
<sc-icon-FormXls />
|
||||
<!-- <div class="deleteFile" @click="deleteFile"><el-icon class="icon"><el-icon-Close/></el-icon></div>-->
|
||||
</el-icon>
|
||||
<div class="el-upload__text">文件已选择最大，可以点击立即上传或替换文件。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #tip>
|
||||
<div class="el-upload__tip">
|
||||
@ -41,12 +35,21 @@
|
||||
<slot name="download"></slot>
|
||||
</span>
|
||||
</div>
|
||||
<div class="importBox" v-if="progressShow">
|
||||
<div class="importBox" v-if="progressShow && fileList.length>0">
|
||||
<div v-if="uploadShow">
|
||||
<div class="item" v-for="(item,index) in fileList" :key="item">
|
||||
<div class="name">{{item.name}}</div>
|
||||
<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="0" />
|
||||
<div class="deleteFile" @click="deleteFileNum(index)"><el-icon class="icon"><el-icon-Close/></el-icon></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="item" v-for="item in listProgress" :key="item">
|
||||
<div class="name">{{item.type_desc}}</div>
|
||||
<div class="name">{{item.file_name}}</div>
|
||||
<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
@ -70,20 +73,17 @@ export default {
|
||||
data(){
|
||||
return{
|
||||
visible: false,
|
||||
text:"",
|
||||
listFile:[],
|
||||
listProgress:[],
|
||||
fileList:[], // 正在上传的文件
|
||||
listProgress:[], // 已上传的文件
|
||||
|
||||
oss:{
|
||||
host:''
|
||||
},
|
||||
upload_data:{},
|
||||
fileShow:false,
|
||||
params:{},
|
||||
|
||||
importDis:false,
|
||||
importTrue:false,
|
||||
progressShow:false,
|
||||
uploadShow:false,
|
||||
}
|
||||
},
|
||||
setup(){
|
||||
@ -101,20 +101,15 @@ export default {
|
||||
methods:{
|
||||
getWsResult(res){
|
||||
if(res.data && (res.data.type == 12)){
|
||||
let flag = this.listProgress.some(em=>em.file_unique_id == res.data.file_unique_id);
|
||||
if(!flag){
|
||||
this.listProgress.push(res.data)
|
||||
}else{
|
||||
this.listProgress.forEach((em,index)=>{
|
||||
if(em.file_unique_id == res.data.file_unique_id){
|
||||
if(em.uuid == res.data.file_unique_id){
|
||||
em.rate = res.data.rate
|
||||
if(res.data.status == 1){
|
||||
this.listProgress.splice(index,1);
|
||||
this.fileList.splice(index,1);
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
this.progressShow = true;
|
||||
if(this.listProgress.length==0 && res.data.status == 1){
|
||||
this.progressShow = false;
|
||||
}
|
||||
@ -130,47 +125,53 @@ export default {
|
||||
},
|
||||
// 上传前
|
||||
beforeUpload(file){
|
||||
// const text = file.name.split('.').pop();
|
||||
// if(!['xls','xlsx'].includes(text)){
|
||||
// this.$message.warning(`只能选择的excel文件类型`);
|
||||
// return false;
|
||||
// }
|
||||
// this.progressShow = true;
|
||||
this.text = file.name;
|
||||
this.listFile.push(file);
|
||||
this.progressShow = true;
|
||||
this.uploadShow = true;
|
||||
this.fileList.push(file);
|
||||
return true
|
||||
},
|
||||
async uploadFile() {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
for(let i in this.listFile){
|
||||
formData.append('files[]', this.listFile[i]);
|
||||
for(let i in this.fileList){
|
||||
formData.append('files[]', this.fileList[i]);
|
||||
}
|
||||
|
||||
for (const key in this.upload_data) {
|
||||
formData.append(key, this.upload_data[key]);
|
||||
}
|
||||
this.params = formData;
|
||||
this.importTrue = this.listFile.length>4?true:false;
|
||||
this.importDis = this.listFile.length>4?true:false;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
deleteFile(){
|
||||
this.importTrue = false;
|
||||
setTimeout(()=>{
|
||||
this.importDis = false;
|
||||
},100)
|
||||
|
||||
deleteFileNum(num){
|
||||
this.handleRemove(this.fileList[num], this.fileList);
|
||||
},
|
||||
async save() {
|
||||
const res = await this.$API.docs.manager.upload.post(this.params);
|
||||
if (res.code == 200) {
|
||||
this.$message.success('提交成功,正在上传');
|
||||
this.uploadShow = false;
|
||||
this.listProgress = res.data.files;
|
||||
}
|
||||
},
|
||||
handleExceed(){
|
||||
this.$message.warning('文件超出最大限制');
|
||||
},
|
||||
handleRemove(file,fileList){
|
||||
const index = fileList.findIndex(f => f.uid === file.uid);
|
||||
if (index !== -1) {
|
||||
fileList.splice(index, 1);
|
||||
}
|
||||
},
|
||||
// 上传成功
|
||||
handleSuccess(){
|
||||
|
||||
handleSuccess(response, file, fileList){
|
||||
const index = fileList.findIndex(f => f.uid === file.uid);
|
||||
if (index !== -1) {
|
||||
fileList.splice(index, 1);
|
||||
}
|
||||
},
|
||||
// 上传失败
|
||||
handleError(){
|
||||
@ -214,7 +215,6 @@ export default {
|
||||
width: 12px;height: 12px;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.upload ::v-deep .el-upload__tip{
|
||||
@ -233,7 +233,26 @@ export default {
|
||||
padding: 10px 5px;
|
||||
margin: 15px 0;
|
||||
border-radius: 4px;
|
||||
.item{margin-bottom: 10px;}
|
||||
.item{
|
||||
margin-bottom: 10px;position: relative;
|
||||
.deleteFile{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #AAAAAA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.icon{
|
||||
width: 12px;height: 12px;
|
||||
color: var(--el-color-white);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.item:last-child{margin-bottom: 0;}
|
||||
.name{margin-bottom: 5px;font-size: 13px;}
|
||||
.exportPopover ::v-deep .el-progress-bar__innerText{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user