From 32cbf9076f5955b81beeb139ef1f8df1f3db1360 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Mon, 16 Oct 2023 17:03:29 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=9B=B4=E6=96=B0=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/tuple.png                 | Bin 0 -> 944 bytes
 src/components/DialogForm/index.vue         | 196 ++++++++++++++++----
 src/views/core/base/equipmentType/index.vue |  49 ++---
 3 files changed, 182 insertions(+), 63 deletions(-)
 create mode 100644 src/assets/images/tuple.png

diff --git a/src/assets/images/tuple.png b/src/assets/images/tuple.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3a7b740b12d58cb71832bad0290910b1f01cdf2
GIT binary patch
literal 944
zcmV;h15f;kP)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00001b5ch_0Itp)
z=>Px&YDq*vR7gv;)>)|TQy9nb&oR$aWQff3P$)x&P?QTIL)^KLA;ZNnM}|zH$UKCi
zkRgtwxFPe<5rqp}C~{24OfHQ5cF#I3|NiHF&wF9jZtwqIYdzn!p5gbbd1fD5;Y@sp
z`)1ufZ^jMV;3BMwPjK0c`^^H}78e$5F|Ne7{}*t(f~``Jzyh6lEXxgdzy(+t-_*^%
z>qu+k5bTBxuskxK7{7!?{i&t_cf|Px`wCa#`_91OIKJk`Zu<|O$HVwD3nl?~!g(Dm
zZv3IFX5Yy;xW0eFTlf@zU<>StjcfjW+z{x}fIAm#rE<yD9c($Af&<IgYj^;^4z9QY
zj=_<2vFGsM7;smdixmqNH~v`00y`B4)b|2BHYIaT#1Z&Amly&Q_;U*OMa3-c$_VUq
z>{s7U;)!KQ(;WOdY=i|pFm-lG!9GXa_;Uw41N+u@Kmji6I0=X0;|5%>07>y7ENLDo
z+q<kkj;BUQ8)7rOgJfqv4yw2>Zos%IamkG?t~$zwz|O*6wfj*#Jp$XlYBj=e1wI<A
zNemOqMFDP7DVx7<!|UDRz?vH$!80SUUKmoVIq>g;b!THAEDYpm9EUF}JDWR__NUdx
zhw$tOY*MYZ<(uLfq)hG!@KWTIIel)?MqHCbdI9&2z$VpdTb??;yo4ZfH$T8zus-g<
ztDWIMRx5YEI{@xd!jP07mQN3hQsrQ&!E2+h0p5=U`+B_B8P0;uG0e(Iwc55v=mU$(
z6QaBEawY@3xm135!^l#8qK#3LWL^v$Tk#l{PlM&~fkpTOy9=+h$pBOAF_ff8a<q{k
zr=xE@62FLa)T0SQ4@-ARP6T%6AWU;NjJTdqy>5Q_yN4!=lhP^dr2QLJi*xO!8+mpF
zmYNLg_CblwEe$Y+ZmhqDZtV?b?NCA5d|-KgB&(AkspmIGJhP-9rrkt-ekm8v@>WSE
z2bKp`V7FFp9OEqku2aRC-+2<GS$;jb<G=r0x5Q#g{8g~GC++LIMc$hcffVa+m6<QL
zr@_ETTGjrgj}iR9lI;tp9dg(Y^E61}L<lmHg(>>a%H69YQnfqMVKUM$Z%XT#25U((
zT(<^}!lBh0mu4roiU-mc+lyc-bJ8PfE$o3jIdbDQ%hl1u5329AN7YnNTktO*8^ht?
SJopR%0000<MNUMnLSTYW>c9~I

literal 0
HcmV?d00001

diff --git a/src/components/DialogForm/index.vue b/src/components/DialogForm/index.vue
index e55394de..72d7e166 100644
--- a/src/components/DialogForm/index.vue
+++ b/src/components/DialogForm/index.vue
@@ -48,23 +48,6 @@
 						:placeholder="`请选择${col.label}`"
 						value-format="timestamp"
 						v-bind="col.bind"></el-date-picker>
-					<el-upload
-						class="upload-in-dialog"
-						v-if="col.upload"
-						:file-list="uploadedFileList"
-						:action="col.url"
-						:on-success="handleUploadSuccess"
-						v-bind="col.bind">
-						<el-button
-							size="small"
-							type="primary"
-							:disabled="col.bind?.disabled || false">
-							点击上传
-						</el-button>
-						<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
-							{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
-						</div>
-					</el-upload>
 					<el-switch
 						v-if="col.switch"
 						v-model="form[col.prop]"
@@ -76,6 +59,43 @@
 						:key="col.key"
 						:is="col.subcomponent"
 						:inlineStyle="col.style"></component>
+
+					<div
+						class="upload-area"
+						:class="uploadOpen ? '' : 'height-48'"
+						ref="uploadArea"
+						v-if="col.upload">
+						<span class="close-icon" :class="uploadOpen ? 'open' : ''">
+							<el-button
+								type="text"
+								icon="el-icon-arrow-right"
+								@click="handleFilesOpen" />
+						</span>
+						<!-- :file-list="uploadedFileList" -->
+						<el-upload
+							class="upload-in-dialog"
+							v-if="col.upload"
+							:action="uploadUrl"
+							:headers="uploadHeaders"
+							:show-file-list="false"
+							icon="el-icon-upload2"
+							:before-upload="beforeUpload"
+							:on-success="handleUploadSuccess"
+							v-bind="col.bind">
+							<el-button size="mini" :disabled="col.bind?.disabled || false">
+								上传文件
+							</el-button>
+							<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
+								{{ col.uploadTips || '只能上传jpg/png文件, 大小不超过2MB' }}
+							</div>
+						</el-upload>
+
+						<uploadedFile
+							class="file"
+							v-for="file in form[col.prop] || []"
+							:file="file"
+							@delete="handleDeleteFile(file)" />
+					</div>
 				</el-form-item>
 			</el-col>
 		</el-row>
@@ -83,6 +103,9 @@
 </template>
 
 <script>
+import { getAccessToken } from '@/utils/auth';
+import tupleImg from '@/assets/images/tuple.png';
+
 /**
  * 找到最长的label
  * @param {*} options
@@ -101,6 +124,48 @@ function findMaxLabelWidth(rows) {
 	return max;
 }
 
+const uploadedFile = {
+	name: 'UploadedFile',
+	props: ['file'],
+	data() {
+		return {};
+	},
+	methods: {
+		handleDelete() {
+			console.log('emit delete event')
+			this.$emit('delete', this.file);
+		},
+	},
+	mounted() {},
+	render: function (h) {
+		return (
+			<div
+				title={this.file.fileName}
+				style={{
+					background: `url(${tupleImg}) no-repeat`,
+					backgroundSize: '14px',
+					backgroundPosition: '0 55%',
+					paddingLeft: '20px',
+					paddingRight: '24px',
+					textOverflow: 'ellipsis',
+					whiteSpace: 'nowrap',
+					overflow: 'hidden',
+					cursor: 'pointer',
+					display: 'inline-block',
+				}}>
+				{this.file.fileName}
+				<el-button
+					type="text"
+					icon="el-icon-close"
+					style="float: right; position: relative; top: 2px; left: 8px; z-index: 100"
+					class="dialog__upload_component__close"
+					onClick={this.handleDelete}
+				/>
+			</div>
+		);
+	},
+};
+
 export default {
 	name: 'DialogForm',
 	model: {
@@ -108,7 +173,7 @@ export default {
 		event: 'update',
 	},
 	emits: ['update'],
-	components: {},
+	components: { uploadedFile },
 	props: {
 		rows: {
 			type: Array,
@@ -133,10 +198,14 @@ export default {
 	},
 	data() {
 		return {
+			uploadOpen: false,
+			form: {},
 			formLoading: true,
 			optionListOf: {},
 			uploadedFileList: [],
 			dataLoaded: false,
+			uploadHeaders: { Authorization: 'Bearer ' + getAccessToken() },
+			uploadUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 上传有关的headers，url都是固定的
 		};
 	},
 	computed: {
@@ -146,16 +215,6 @@ export default {
 			return max * 20;
 			// return max * 20 + 'px';
 		},
-		form: {
-			get() {
-				// if (this.dataLoaded) return this.dataForm;
-				// else return {}
-				return this.dataForm;
-			},
-			set(val) {
-				console.log('set form', val);
-			},
-		},
 	},
 	watch: {
 		rows: {
@@ -168,6 +227,13 @@ export default {
 			deep: true,
 			immediate: false,
 		},
+		dataForm: {
+			handler(val) {
+				this.form = JSON.parse(JSON.stringify(val));
+			},
+			deep: true,
+			immediate: true,
+		},
 	},
 	mounted() {
 		// 处理 options
@@ -283,23 +349,27 @@ export default {
 		beforeUpload() {},
 		// 上传前的验证规则可通过 bind 属性传入
 		handleUploadSuccess(response, file, fileList) {
-			console.log(
-				'[dialogForm:handleUploadSuccess]',
-				response,
-				file,
-				fileList,
-				this.form
-			);
-			// 保存原始文件名
-			if ('fileNames' in this.form) this.form.fileNames.push(file.name);
-			// 保存完整地址
-			if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
+			this.form.files.push({
+				fileName: file.name,
+				fileUrl: response.data,
+				fileType: 2,
+			});
 			this.$modal.msgSuccess('上传成功');
+			this.$emit('update', this.form);
 		},
 
 		getFileName(fileUrl) {
 			return fileUrl.split('/').pop();
 		},
+
+		handleFilesOpen() {
+			this.uploadOpen = !this.uploadOpen;
+		},
+
+		handleDeleteFile(file) {
+			this.form.files = this.form.files.filter(item => item.fileUrl != file.fileUrl);
+			this.$emit('update', this.form);
+		},
 	},
 };
 </script>
@@ -309,4 +379,52 @@ export default {
 .el-select {
 	width: 100%;
 }
+
+.upload-area {
+	// background: #ccc;
+	// display: grid;
+	// grid-auto-rows: 34px;
+	// grid-template-columns: repeat(6, minmax(32px, max-content));
+	// gap: 8px;
+	// align-items: center;
+	position: relative;
+	overflow: hidden;
+	transition: height 0.3s ease-out;
+}
+
+.upload-in-dialog {
+	// display: inline-block;
+	margin-right: 24px;
+	// background: #ccc;
+	position: relative;
+	// top: -13px;
+	float: left;
+}
+
+.close-icon {
+	// background: #ccc;
+	position: absolute;
+	top: 0;
+	right: 12px;
+	z-index: 100;
+	transition: transform 0.3s ease-out;
+}
+
+.close-icon.open {
+	transform: rotateZ(90deg);
+}
+</style>
+
+<style>
+.dialog__upload_component__close {
+	color: #ccc;
+}
+.dialog__upload_component__close:hover {
+	/* color: #777; */
+	color: red;
+}
+
+.height-48 {
+	height: 35px !important;
+}
 </style>
diff --git a/src/views/core/base/equipmentType/index.vue b/src/views/core/base/equipmentType/index.vue
index 6fa94502..c5358201 100644
--- a/src/views/core/base/equipmentType/index.vue
+++ b/src/views/core/base/equipmentType/index.vue
@@ -37,22 +37,7 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
-			<div style="padding: 12px; background: #ccc">
-				<h3>文件列表</h3>
-				<hr />
-				<ul>
-					<li v-for="item in form.fileUrls" :key="item">
-						{{ JSON.stringify(item) }}
-					</li>
-				</ul>
-				<hr />
-				<ul>
-					<li v-for="item in form.fileNames" :key="item">
-						{{ JSON.stringify(item) }}
-					</li>
-				</ul>
-			</div>
+			<DialogForm v-if="open" ref="form" v-model="form" :rows="rows" />
 		</base-dialog>
 	</div>
 </template>
@@ -70,7 +55,7 @@ import {
 	exportEquipmentTypeExcel,
 } from '@/api/base/equipmentType';
 
-import { getAccessToken } from '@/utils/auth';
+// import { getAccessToken } from '@/utils/auth';
 
 export default {
 	name: 'EquipmentType',
@@ -164,15 +149,13 @@ export default {
 						prop: 'parentId',
 						url: '/base/equipment-type/page?pageNo=1&pageSize=100',
 					},
+					{},
+				],
+				[
 					{
 						upload: true,
 						label: '上传资料',
-						prop: 'uploadFiles',
-						url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
-						bind: {
-							headers: { Authorization: 'Bearer ' + getAccessToken() },
-							'show-file-list': false,
-						},
+						prop: 'files',
 					},
 				],
 				[{ input: true, label: '备注', prop: 'remark' }],
@@ -251,7 +234,25 @@ export default {
 			const id = row.id;
 			getEquipmentType(id).then((response) => {
 				this.form = response.data;
-				debugger;
+				// this.form = {
+				// 	code: 'SBLX20230925184444000041',
+				// 	name: '测试131',
+				// 	remark: '测试可删除',
+				// 	id: '1706258479729336322',
+				// 	files: [
+				// 		{ fileName: '1.png', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '1.asdfaslkjfkasdf.png', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '2.txt', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '1.rar', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '1.kkk', fileUrl: '', fileType: 2 },
+				// 		{ fileName: 'test.file', fileUrl: '', fileType: 2 },
+				// 		{ fileName: '222', fileUrl: '', fileType: 2 },
+				// 		{ fileName: 'g', fileUrl: '', fileType: 2 },
+				// 	],
+				// 	createTime: 1695638697000,
+				// 	parentId: '1701869972319584257',
+				// };
+				// debugger;
 				this.open = true;
 				this.title = '修改设备类型';
 			});