fix(upload): preserve file ids and upload state

src/components/OutputMaterialFiles.vue

@@ -10,22 +10,19 @@
 			append-to-body
 			destroy-on-close
 		>
-			<el-upload
+			<sc-upload-filed
-				v-model:file-list="fileList"
+				v-model="fileIds"
+				:file_="sourceFiles"
 				:disabled="disabled"
-				:http-request="uploadRequest"
+				:multiple="true"
-				:before-upload="beforeUpload"
+				tip="支持文件、图片和视频，可一次选择多个文件"
-				:on-preview="preview"
+				@uploading-change="uploading = $event"
-				multiple
 			>
 				<el-button v-if="!disabled" type="primary">上传文件</el-button>
-				<template #tip>
+			</sc-upload-filed>
-					<div class="el-upload__tip">支持文件、图片和视频，可一次选择多个文件</div>
-				</template>
-			</el-upload>
 			<template #footer>
 				<el-button @click="visible = false">关闭</el-button>
-				<el-button v-if="!disabled" type="primary" :loading="saving" @click="save">保存</el-button>
+				<el-button v-if="!disabled" type="primary" :loading="saving" :disabled="uploading" @click="save">保存</el-button>
 			</template>
 		</el-dialog>
 	</span>
@@ -42,7 +39,9 @@ export default {
 		return {
 			visible: false,
 			saving: false,
-			fileList: [],
+			uploading: false,
+			fileIds: [],
+			sourceFiles: [],
 		};
 	},
 	computed: {
@@ -52,46 +51,19 @@ export default {
 	},
 	methods: {
 		open() {
-			this.fileList = (this.row.files_ || []).map((file) => ({
+			this.sourceFiles = [...(this.row.files_ || [])];
-				id: file.id,
+			this.fileIds = this.sourceFiles.map((file) => file.id);
-				name: file.name,
+			this.uploading = false;
-				url: file.path,
-				status: "success",
-			}));
 			this.visible = true;
 		},
-		beforeUpload(file) {
-			if (file.size <= 0) {
-				this.$message.warning("不能上传空文件");
-				return false;
-			}
-			return true;
-		},
-		uploadRequest(param) {
-			const data = new FormData();
-			data.append("file", param.file);
-			this.$API.common.upload.post(data, {
-				onUploadProgress: (event) => {
-					if (event.total) {
-						param.onProgress({ percent: Math.round((event.loaded / event.total) * 100) });
-					}
-				},
-			}).then(param.onSuccess).catch(param.onError);
-		},
-		preview(file) {
-			const url = file.url || file.response?.path;
-			if (url) window.open(url, "_blank");
-		},
 		async save() {
-			const uploading = this.fileList.some((file) => ["ready", "uploading"].includes(file.status));
+			if (this.uploading) {
-			if (uploading) {
 				this.$message.warning("请等待文件上传完成");
 				return;
 			}
-			const ids = this.fileList.map((file) => file.id || file.response?.id).filter(Boolean);
 			this.saving = true;
 			try {
-				const result = await this.$API.wpm.mlogbw.files.req(this.row.id, { files: ids });
+				const result = await this.$API.wpm.mlogbw.files.req(this.row.id, { files: this.fileIds });
 				this.row.files = result.files;
 				this.row.files_ = result.files_;
 				this.visible = false;

src/components/scUpload/filed.vue

@@ -52,7 +52,8 @@
 		},
 		data() {
 			return {
-				defaultFileList: []
+				defaultFileList: [],
+				uploadingCount: 0,
 			}
 		},
 		watch:{
@@ -100,14 +101,20 @@
 				arr.forEach(item => {
 					if(item){
 						_arr.push({
+							id: item.id,
 							name: item.name,
-							url: item.path
+							url: item.path || item.url,
+							status: "success",
 						})
 					}
 				})
 				return _arr
 			},
 			before(file){
+				if (file.size <= 0) {
+					this.$message.warning("不能上传空文件");
+					return false;
+				}
 				const maxSize = file.size / 1024 / 1024 < this.maxSize;
 				if (!maxSize) {
 					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
@@ -154,6 +161,8 @@
 				for (const key in param.data) {
 					data.append(key, param.data[key]);
 				}
+				this.uploadingCount += 1
+				this.$emit('uploading-change', true)
 				apiObj.post(data, {
 					onUploadProgress: e => {
 						const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
@@ -164,6 +173,9 @@
 					param.onSuccess(res)
 				}).catch(err => {
 					param.onError(err)
+				}).finally(() => {
+					this.uploadingCount = Math.max(0, this.uploadingCount - 1)
+					this.$emit('uploading-change', this.uploadingCount > 0)
 				})
 			}
 		}