update dialog: 多上传组件分流

src/components/base-dialog/addOrUpdate/index.vue

@@ -45,10 +45,16 @@
 
 				<!-- extra components , like Markdown or RichEdit -->
 				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
-					<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label" class="extra-components">
+					<el-form-item v-for="(ec, index) in configs.extraComponents" :key="ec.name + index" :label="ec.label" class="extra-components">
 						<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
 						<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
-						<component v-else :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files" />
+						<component
+							v-else
+							:is="ec.component"
+							v-bind="ec.props"
+							@uploader-update-filelist="handleUploadListUpdate($event, ec.props.extraParams.typeCode)"
+							:uploader-inject-file-list="dataForm.files"
+						/>
 					</el-form-item>
 				</template>
 			</el-form>
@@ -167,7 +173,8 @@ export default {
 			dataForm: {},
 			dataFormRules: {},
 			tempForm: [], // 临时保存自动生成的code，或其他数据
-			shouldWait: null
+			shouldWait: null,
+			fileForm: {} // 文件上传分流用、合并用的表单，根据 typeCode 进行分流，在请求时合并
 		}
 	},
 	computed: {
@@ -373,6 +380,21 @@ export default {
 					/** 需要验证表单的操作 */
 					this.$refs['dataForm'].validate(valid => {
 						if (valid) {
+							/** 对于文件上传的单独处理（合并处理） */
+							if (Object.keys(this.fileForm).length) {
+								console.log('fileform 有值')
+								// LABEL: FILE_RELATED
+								let fileIds = []
+								for (const [key, item] of Object.entries(this.fileForm)) {
+									if (Array.isArray(item)) {
+										fileIds = fileIds.concat(item)
+									} else {
+										console.error('handleClick(): 上传文件数组类型不正确')
+									}
+								}
+								this.$set(this.dataForm, 'fileIds', fileIds)
+							}
+
 							console.log('before send: ', this.dataForm)
 
 							this.$http({
@@ -422,14 +444,25 @@ export default {
 			}
 		},
 
-		handleUploadListUpdate(filelist) {
-			// 此处需要参照‘设备类型’新增的接口，灵活地设置 dataForm
+		// LABEL: FILE_RELATED
+		handleUploadListUpdate(filelist, typeCode = 'DefaultTypeCode') {
+			// 设备类型 typeCode: EquipmentTypeFile
+			// 设备信息 typeCode: EquipmentInfoFile | EquipmentInfoImage
+
+			// 原先写法：直接更新 dataForm 对象，不适用于有多个上传组件的需求
+			// this.$set(
+			// 	this.dataForm,
+			// 	'fileIds',
+			// 	filelist.map(item => item.id)
+			// )
+			// console.log('handleUploadListUpdate(): ', this.dataForm)
+			// 现更改为分流写法
 			this.$set(
-				this.dataForm,
-				'fileIds',
+				this.fileForm,
+				typeCode,
 				filelist.map(item => item.id)
 			)
-			console.log('handleUploadListUpdate(): ', this.dataForm)
+			console.log('handleUploadListUpdate(): ', this.fileForm)
 		},
 
 		handleClose() {

src/views/modules/monitoring/equipment.vue

@@ -100,7 +100,7 @@ const addOrUpdateConfigs = {
 			props: {
 				// 上传组件需要的 props
 				url: '/monitoring/attachment/uploadFileFormData',
-				extraParams: { typeCode: 'EquipmentTypeFile' },
+				extraParams: { typeCode: 'EquipmentInfoFile' },
 				buttonContent: '点击上传',
 				tip: '上传文件大小不要超过 2mb (2048kb)'
 			},
@@ -117,7 +117,7 @@ const addOrUpdateConfigs = {
 			props: {
 				// 上传组件需要的 props
 				url: '/monitoring/attachment/uploadFileFormData',
-				extraParams: { typeCode: 'EquipmentTypeImage' },
+				extraParams: { typeCode: 'EquipmentInfoImage' },
 				buttonContent: '点击上传',
 				tip: '上传文件大小不要超过 2mb (2048kb)'
 			},