完善文档上传附件

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"
 			>
-				<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&#45;&#45;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,10 +35,19 @@
 							<slot name="download"></slot>
 						</span>
 					</div>
-					<div class="importBox" v-if="progressShow">
+					<div class="importBox" v-if="progressShow && fileList.length>0">
-						<div class="item" v-for="item in listProgress" :key="item">
+						<div v-if="uploadShow">
-							<div class="name">{{item.type_desc}}</div>
+							<div class="item" v-for="(item,index) in fileList" :key="item">
-							<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
+								<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.file_name}}</div>
+								<el-progress class="exportPopover" :text-inside="true" :stroke-width="12" :percentage="item.rate" />
+							</div>
 						</div>
 					</div>
 				</template>
@@ -70,20 +73,17 @@ export default {
 	data(){
 		return{
 			visible: false,
-			text:"",
+			fileList:[],      // 正在上传的文件
-			listFile:[],
+			listProgress:[],  // 已上传的文件
-			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);
+				this.listProgress.forEach((em,index)=>{
-				if(!flag){
+					if(em.uuid == res.data.file_unique_id){
-					this.listProgress.push(res.data)
+						em.rate = res.data.rate
-				}else{
+						if(res.data.status == 1){
-					this.listProgress.forEach((em,index)=>{
+							this.listProgress.splice(index,1);
-						if(em.file_unique_id == res.data.file_unique_id){
+							this.fileList.splice(index,1);
-							em.rate = res.data.rate
-							if(res.data.status == 1){
-								this.listProgress.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();
+			this.progressShow = true;
-			// if(!['xls','xlsx'].includes(text)){
+			this.uploadShow = true;
-			// 	this.$message.warning(`只能选择的excel文件类型`);
+			this.fileList.push(file);
-			// 	return false;
+			return true
-			// }
-			// this.progressShow = true;
-			this.text = file.name;
-			this.listFile.push(file);
-			return  true
 		},
 		async uploadFile() {
 			try {
 				const formData = new FormData();
-				for(let i in this.listFile){
+				for(let i in this.fileList){
-					formData.append('files[]', this.listFile[i]);
+					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;
+		deleteFileNum(num){
-			setTimeout(()=>{
+			this.handleRemove(this.fileList[num], this.fileList);
-				this.importDis = false;
-			},100)
 		},
 		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{