update 基本完成上传

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

@@ -46,7 +46,7 @@
 				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
 					<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
 						<!-- <component :is="ec.component" v-model="dataForm[ec.name]"></component> -->
-						<component :is="ec.component" v-bind="ec.props" />
+						<component :is="ec.component" v-bind="ec.props" @uploader-update-filelist="handleUploadListUpdate" :uploader-inject-file-list="dataForm.files"/>
 					</el-form-item>
 				</template>
 			</el-form>
@@ -137,6 +137,11 @@ export default {
 			return defaultNames[name]
 		}
 	},
+	// provide() {
+	// 	return {
+	// 		_df: this.dataForm
+	// 	}
+	// },
 	data() {
 		return {
 			COLUMN_PER_ROW,
@@ -236,15 +241,26 @@ export default {
 				} // end if (item.rules)
 			})
 
+			/** 计算默认值 */
+			function calDefault(type) {
+				switch (type) {
+					case 'array': 
+						return []
+					// more case...
+					default: 
+						return ''
+				}
+			}
 			/** 检查是否需要额外的组件 */
 			this.configs.extraComponents &&
 				this.configs.extraComponents.forEach(item => {
-					this.$set(this.dataForm, [item.name], '')
+					this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
 				})
 
 			/** 单独设置 id */
 			this.$set(this.dataForm, 'id', null)
 		})
+		console.log("mounted: this.dataForm", JSON.stringify(this.dataForm))
 	},
 
 	methods: {
@@ -302,6 +318,7 @@ export default {
 					}).then(({ data: res }) => {
 						if (res && res.code === 0) {
 							const dataFormKeys = Object.keys(this.dataForm)
+							console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
 							this.dataForm = pick(res.data, dataFormKeys)
 						}
 					})
@@ -310,9 +327,12 @@ export default {
 					if (this.shouldWait)
 						this.shouldWait.then(() => {
 							if (this.tempForm.length) {
+								console.log("create new, tempform", JSON.stringify(this.tempForm.length))
 								this.tempForm.forEach(item => {
+									console.log('item data', item.data)
 									this.dataForm[item.name] = item.data
 								})
+								console.log("create new, dataform", JSON.stringify(this.dataForm))
 							}
 						})
 				}
@@ -381,6 +401,12 @@ export default {
 			}
 		},
 
+		handleUploadListUpdate(filelist) {
+			// 此处需要参照‘设备类型’新增的接口，灵活地设置 dataForm
+			this.$set(this.dataForm, 'fileIds', filelist.map(item => item.id))
+			console.log('handleUploadListUpdate(): ', this.dataForm)
+		},
+
 		handleClose() {
 			this.$emit('destory-dialog')
 			this.visible = false

src/components/base-upload/index.vue

@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import { pick } from 'lodash/object'
+
 export default {
 	name: 'BaseUpload',
 	props: {
@@ -21,13 +23,40 @@ export default {
 		extraParams: {
 			type: Object,
 			default: () => ({})
+		},
+		uploaderInjectFileList: {
+			// 从外部传进来 fileList，用于展示文件列表用
+			type: Array,
+			default: () => []
 		}
 	},
+	// inject: {
+	// 	parentDataForm: "_df"
+	// },
 	data() {
 		return {
 			fileList: []
 		}
 	},
+	mounted() {
+		this.fileList.splice(0)
+
+		this.$watch('uploaderInjectFileList', function(val) {
+			if (val && val.length) {
+				console.log('this.uploaderInjectFileList', this.uploaderInjectFileList)
+				/** uploaderInjectFileList 里关于文件的信息比较全，需要手动过滤一下 */
+				this.fileList = val.map(item => {
+					const name = item.fileUrl.split('/').pop()
+					return { ...pick(item, ['id', 'fileName', 'typeCode']), name }
+				})
+			}
+			console.log('fillist: ', this.fileList)
+		})
+
+		// if (this.parentDataForm) {
+		// 	console.log('parent dataform: ', this.parentDataForm)
+		// }
+	},
 	methods: {
 		/** 自定义上传行为 */
 		handleUpload(file) {
@@ -44,19 +73,34 @@ export default {
 				}
 			}).then(({ data: res }) => {
 				if (res && res.code === 0) {
-          console.log(this.fileList)
-          this.fileList.splice(0)
 					res.data.forEach(item => {
-            this.fileList.push(item) // <== 此处的数据结构可能要调整
+						const ext = item.fileUrl.split('.').reverse()[0]
+						const name = `${item.fileName}.${ext}`
+						this.fileList.push({ ...pick(item, ['id', 'fileName', 'typeCode']), name })
 					})
-          // TODO: 在新增和更新阶段，带入 files[] 数组给后端，就可完成文件和设备类型的绑定、删除操作
+					// TODO: 在新增和更新阶段，带入 fileIds[] 数组给后端，就可完成文件和设备类型的绑定、删除操作
+					this.$emit('uploader-update-filelist', this.fileList)
 				}
 			})
 		},
+		/** 大小验证 */
+		validateFile(file) {
+			this.extraUploadParams.typeCode = 'equipmentInfoFile'
+
+			const isRightSize = file.size / 1024 / 1024 < 10
+			if (!isRightSize) {
+				this.$message.error(this.$t('upload.picSizeAlarm'))
+			}
+			return isRightSize
+		},
+
 		beforeRemove(file, filelist) {
 			return this.$confirm(`确定移除 ${file.name}?`)
 		},
-		handleRemove(file, filelist) {}
+		handleRemove(file, filelist) {
+			// 把更新后的 fileList 传递出去
+			this.$emit('uploader-update-filelist', filelist)
+		}
 	}
 }
 </script>

src/views/modules/monitoring/equipmentType.vue

@@ -81,12 +81,13 @@ const addOrUpdateConfigs = {
 	],
 	extraComponents: [
 		{
-			name: 'file-upload-key',
+			name: 'files',
+			fieldType: 'array',
 			label: '上传资料',
 			component: () => import('@/components/base-upload'),
 			props: { // 上传组件需要的 props
 				url: "/monitoring/attachment/uploadFileFormData",
-				extraParams: { typeCode: 123 },
+				extraParams: { typeCode: "EquipmentTypeFile" },
 				buttonContent: '点击上传',
 				tip: '上传文件大小不要超过 2mb (2048kb)'
 			}