update 基本完成上传

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) // <== 此处的数据结构可能要调整
-          })
-          // TODO: 在新增和更新阶段，带入 files[] 数组给后端，就可完成文件和设备类型的绑定、删除操作
-        }
+					res.data.forEach(item => {
+						const ext = item.fileUrl.split('.').reverse()[0]
+						const name = `${item.fileName}.${ext}`
+						this.fileList.push({ ...pick(item, ['id', 'fileName', 'typeCode']), name })
+					})
+					// 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>