diff --git a/src/views/docsManager/uploadFile.vue b/src/views/docsManager/uploadFile.vue index ce97bb1..5b0318a 100644 --- a/src/views/docsManager/uploadFile.vue +++ b/src/views/docsManager/uploadFile.vue @@ -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" > -
+
请将Excel拖到此处 ,或点击上传 Excel
-
-
- - - - -
文件已选择最大,可以点击立即上传或替换文件。
-
-
@@ -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){ - em.rate = res.data.rate - if(res.data.status == 1){ - this.listProgress.splice(index,1); - } + this.listProgress.forEach((em,index)=>{ + 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); - return true + 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{