From 98ad9c484b199987d0b28009f4e809b897499156 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Wed, 15 Jun 2022 15:09:15 +0800
Subject: [PATCH] =?UTF-8?q?UP=20sc-upload-file&sc-upload-multiple=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=AF=B9=E8=B1=A1=E6=95=B0=E7=BB=84=E7=9A=84?=
 =?UTF-8?q?=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scUpload/file.vue     | 72 ++++++++++++++++++----------
 src/components/scUpload/multiple.vue | 64 ++++++++++++++++---------
 src/views/vab/upload.vue             | 16 +++++++
 3 files changed, 104 insertions(+), 48 deletions(-)

diff --git a/src/components/scUpload/file.vue b/src/components/scUpload/file.vue
index acffe5fd..0edd227e 100644
--- a/src/components/scUpload/file.vue
+++ b/src/components/scUpload/file.vue
@@ -1,22 +1,22 @@
 <template>
 	<div class="sc-upload-file">
-		<el-upload 
-			:disabled="disabled" 
-			:auto-upload="autoUpload" 
-			:action="action" 
-			:name="name" 
-			:data="data" 
-			:http-request="request" 
-			:file-list="defaultFileList" 
-			:show-file-list="showFileList" 
-			:drag="drag" 
-			:accept="accept" 
-			:multiple="multiple" 
-			:limit="limit" 
-			:before-upload="before" 
-			:on-success="success" 
-			:on-error="error" 
-			:on-preview="handlePreview" 
+		<el-upload
+			:disabled="disabled"
+			:auto-upload="autoUpload"
+			:action="action"
+			:name="name"
+			:data="data"
+			:http-request="request"
+			:file-list="defaultFileList"
+			:show-file-list="showFileList"
+			:drag="drag"
+			:accept="accept"
+			:multiple="multiple"
+			:limit="limit"
+			:before-upload="before"
+			:on-success="success"
+			:on-error="error"
+			:on-preview="handlePreview"
 			:on-exceed="handleExceed">
 			<slot>
 				<el-button type="primary" :disabled="disabled">Click to upload</el-button>
@@ -34,7 +34,7 @@
 
 	export default {
 		props: {
-			modelValue: { type: String, default: "" },
+			modelValue: { type: [String, Array], default: "" },
 			tip: { type: String, default: "" },
 			action: { type: String, default: "" },
 			apiObj: { type: Object, default: () => {} },
@@ -58,28 +58,35 @@
 		},
 		watch:{
 			modelValue(val){
-				if (val != this.toStr(this.defaultFileList)) {
-					this.defaultFileList = this.toArr(val)
-					this.value = val
+				if(Array.isArray(val)){
+					if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
+						this.defaultFileList = val
+						this.value = val
+					}
+				}else{
+					if (val != this.toStr(this.defaultFileList)) {
+						this.defaultFileList = this.toArr(val)
+						this.value = val
+					}
 				}
 			},
 			defaultFileList: {
 				handler(val){
-					this.$emit('update:modelValue', this.toStr(val))
+					this.$emit('update:modelValue', Array.isArray(this.modelValue) ? this.formatArr(val) : this.toStr(val))
 					this.value = this.toStr(val)
 				},
 				deep: true
 			}
 		},
 		mounted() {
+			this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
 			this.value = this.modelValue
-			this.defaultFileList = this.toArr(this.modelValue)
 		},
 		methods: {
 			//默认值转换为数组
 			toArr(str){
-				var _arr = [];
-				var arr = str.split(",");
+				var _arr = []
+				var arr = str.split(",")
 				arr.forEach(item => {
 					if(item){
 						var urlArr = item.split('/');
@@ -90,12 +97,25 @@
 						})
 					}
 				})
-				return _arr;
+				return _arr
 			},
 			//数组转换为原始值
 			toStr(arr){
 				return arr.map(v => v.url).join(",")
 			},
+			//格式化数组值
+			formatArr(arr){
+				var _arr = []
+				arr.forEach(item => {
+					if(item){
+						_arr.push({
+							name: item.name,
+							url: item.url
+						})
+					}
+				})
+				return _arr
+			},
 			before(file){
 				const maxSize = file.size / 1024 / 1024 < this.maxSize;
 				if (!maxSize) {
diff --git a/src/components/scUpload/multiple.vue b/src/components/scUpload/multiple.vue
index 2178f81b..870e48c8 100644
--- a/src/components/scUpload/multiple.vue
+++ b/src/components/scUpload/multiple.vue
@@ -1,21 +1,21 @@
 <template>
 	<div class="sc-upload-multiple">
-		<el-upload ref="uploader" list-type="picture-card" 
-			:auto-upload="autoUpload" 
-			:disabled="disabled" 
-			:action="action" 
-			:name="name" 
-			:data="data" 
-			:http-request="request" 
-			:file-list="defaultFileList" 
-			:show-file-list="showFileList" 
-			:accept="accept" 
-			:multiple="multiple" 
-			:limit="limit" 
-			:before-upload="before" 
-			:on-success="success" 
-			:on-error="error" 
-			:on-preview="handlePreview" 
+		<el-upload ref="uploader" list-type="picture-card"
+			:auto-upload="autoUpload"
+			:disabled="disabled"
+			:action="action"
+			:name="name"
+			:data="data"
+			:http-request="request"
+			:file-list="defaultFileList"
+			:show-file-list="showFileList"
+			:accept="accept"
+			:multiple="multiple"
+			:limit="limit"
+			:before-upload="before"
+			:on-success="success"
+			:on-error="error"
+			:on-preview="handlePreview"
 			:on-exceed="handleExceed">
 			<slot>
 				<el-icon><el-icon-plus/></el-icon>
@@ -51,7 +51,7 @@
 
 	export default {
 		props: {
-			modelValue: { type: String, default: "" },
+			modelValue: { type: [String, Array], default: "" },
 			tip: { type: String, default: "" },
 			action: { type: String, default: "" },
 			apiObj: { type: Object, default: () => {} },
@@ -75,14 +75,21 @@
 		},
 		watch:{
 			modelValue(val){
-				if (val != this.toStr(this.defaultFileList)) {
-					this.defaultFileList = this.toArr(val)
-					this.value = val
+				if(Array.isArray(val)){
+					if (JSON.stringify(val) != JSON.stringify(this.formatArr(this.defaultFileList))) {
+						this.defaultFileList = val
+						this.value = val
+					}
+				}else{
+					if (val != this.toStr(this.defaultFileList)) {
+						this.defaultFileList = this.toArr(val)
+						this.value = val
+					}
 				}
 			},
 			defaultFileList: {
 				handler(val){
-					this.$emit('update:modelValue', this.toStr(val))
+					this.$emit('update:modelValue', Array.isArray(this.modelValue) ? this.formatArr(val) : this.toStr(val))
 					this.value = this.toStr(val)
 				},
 				deep: true
@@ -94,8 +101,8 @@
 			}
 		},
 		mounted() {
+			this.defaultFileList = Array.isArray(this.modelValue) ? this.modelValue : this.toArr(this.modelValue)
 			this.value = this.modelValue
-			this.defaultFileList = this.toArr(this.modelValue)
 			if(!this.disabled && this.draggable){
 				this.rowDrop()
 			}
@@ -121,6 +128,19 @@
 			toStr(arr){
 				return arr.map(v => v.url).join(",")
 			},
+			//格式化数组值
+			formatArr(arr){
+				var _arr = []
+				arr.forEach(item => {
+					if(item){
+						_arr.push({
+							name: item.name,
+							url: item.url
+						})
+					}
+				})
+				return _arr
+			},
 			//拖拽
 			rowDrop(){
 				const _this = this
diff --git a/src/views/vab/upload.vue b/src/views/vab/upload.vue
index 715b498f..f2bd2f04 100644
--- a/src/views/vab/upload.vue
+++ b/src/views/vab/upload.vue
@@ -6,6 +6,12 @@
 			</sc-upload-file>
 		</el-card>
 
+		<el-card shadow="never" header="文件示例(值为对象数组,适合保存原始文件名)">
+			<sc-upload-file v-model="fileurlArr" :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传xlsx/docx格式文件">
+				<el-button type="primary" icon="el-icon-upload">上传附件</el-button>
+			</sc-upload-file>
+		</el-card>
+
 		<el-card shadow="never" header="图片卡片示例(已开启拖拽排序)">
 			<sc-upload-multiple v-model="fileurl2" draggable :limit="3" tip="最多上传3个文件,单个文件不要超过10M,请上传图像格式文件"></sc-upload-multiple>
 		</el-card>
@@ -69,6 +75,16 @@
 		data() {
 			return {
 				uploadApi: this.$API.common.upload,
+				fileurlArr: [
+					{
+						name: '销售合同模板.xlsx',
+						url: 'http://www.scuiadmin.com/files/220000198611262243.xlsx'
+					},
+					{
+						name: '企业员工联系方式.xlsx',
+						url: 'http://www.scuiadmin.com/files/350000201004261875.xlsx',
+					}
+				],
 				fileurl: "http://www.scuiadmin.com/files/220000198611262243.xlsx,http://www.scuiadmin.com/files/350000201004261875.xlsx",
 				fileurl2: "img/auth_banner.jpg,img/avatar3.gif",
 				fileurl3: "img/auth_banner.jpg",