From 5534104e870d3d5dc58d6e8f08728d08fb7d2fae Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 13 Oct 2023 17:01:49 +0800
Subject: [PATCH] update equipment edit

---
 src/assets/images/default-file-icon.png       | Bin 0 -> 1613 bytes
 .../equipment/components/AssetsUpload.vue     | 133 +++++++++++++++++-
 .../base/equipment/components/DialogForm.vue  |   1 +
 .../equipment/components/EquipmentDrawer.vue  |   3 +
 src/views/core/base/equipment/index.vue       |   6 +
 5 files changed, 138 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/images/default-file-icon.png

diff --git a/src/assets/images/default-file-icon.png b/src/assets/images/default-file-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9e9d4671df842501d91974e35649b5e10b1e687
GIT binary patch
literal 1613
zcmb`I`BM^j7{<Q@f(NA8As%FAwpw1`!D@L%nD?<(m<MKAW}+6Ynl4J3DXv!Pn0RDj
z;Z<r5rhy`qW;GdElqTenXqLO$v|@OqE$#jVJF`E$@AJ;{erDczetH=JejX@wJ#_#8
z%JTprNU4cGN)@i`edBU(r9h}b9`2x7Wbg?9IKq?Q7Mv0>Tk$+0_#nD(%tq06QBQ)h
z^hq?1%HN&KXy&!T94U3=^p}fowwOOU;zMdXn)RrFrSTo$7crYDLb#Xh%tIHTXjjc#
zC3@M}&$i8%?|B=bYW=y)p^I8e<E78dcTF#iP^mW4g8^GJ8X(Q25R!9|QM^5250i`2
zta!!kWoCSRL#UG|2-jICN*JQirMy{m=eQs4Wzx`T?~pO6-pl^VrFy>ojOr<jANXUr
zw1SD-*I%i6YJ(o97sv#k^gqZh^8-7HwLA79t?h)NVvSFMQO!l@7X0&F!j$k|s2_?&
zl8*&igQjripX9wFpU3WK9@^%P3VPaKROYW3BDUxpyLPYaES=`9!%R8Zim*Jib{%l`
zeBmwKvC-upx>Gh0rbD0i>0&c`w%Dx1|GWAv1DAS_#9=@NzgnDay@WJUL;%_F&NUp_
zp#Jv=v%X4T8n>Db65MZDX}%t|XI;nZ0`=SdD%S0~0wS3olAutt;6DKYq?@qFxP@uE
zW!~-4Zu2$^5}f`}oehq4-sYT}iOiyT#)Mx*g6st@=%4EiS+2ePpxd<VMW~XR34@$S
zo<P#ltfR?V#7PsV>ru)Q$Zu-te-)6NMT<bo%#~L3(z<^4%3ASALHmC6)DEQ+o(=Mi
z*O;|7IeHY1wciiuVD=A)^?5xzuGl(A2?hERoIzh;Y2B&CCZg0d|G61dSh;y*)8aaG
zT6lR4$H}+d4NW5}BZbP<tToOQi56_7sYky#MJr?9?ZnpLc5l*%F0GBZRrhpIZ7R70
zQhk@-UJj!)X%Cs4Gg+n;i3B5Y#S<EHT6sT7K2BeF;apOEvTD=NRIh9TMjMkxDICM)
z0@B`>L<A|GAxZKG4k`41&TZlT?B*hGf9u38>DUbhSgjOI{n&=|L~`)u0`Zlc(AoH$
z!pX7TI63D2kyvEwhflpwDdU(-E`EO~)HpjAV@ioFuuQL<OWp2v#mPN*;p&&QBu7U-
z7lAnTMsYrzUUV(5+QH?%XD@L_-t=SR;L`12=Ig8z3h)m%o>ryvXledX*Uu$0dh4p=
z$413qAdStt1nQ+73R@tLXlOo~2ntvmCjM$JbfX^ZP#<YKZkS-qksH}e(fV}!4Ys=O
z$~edG3FRM*%JuO+tj_&46Kaa7zq&u?9EIiL<h2sCViD{Za6n7FEP4cDn{v@{MDvw?
z1O+i+(#IgDSYhL3`!Mg;!?Zi#V4$gG{53!uXm?!ruX83e*O23l*><_OQWf3-WkVgB
zaFJhldj?coJ34(OrK1-tx3c_TJ<!}2>fZX*V!4*AI4?+m$V|I<EtMsihgK)as^-A}
zl_g06^&|JE_X2rXeLDuk;^!PRfs;-n1woe-q=}%eFS28$kbiLH(T(Tv58p$2&lGKZ
zFb=#BXOBb+qbi>ukRCV*51RYEuryM@E_7~{J2wa!T|XE{Urnsvr1$Dp;d=8knLw4^
zfe-k2`V2$S;Ov}KojR2cg$yLzn287V5!^9XAeYwh^g-j{IlLBF{n{`Gr_YqEpkS^7
zT4N{Vf59t~=})`a=XZ|QbQht}F;BiZ;Ybl?A-qNL^6{}(DmzEbu-UbD;m9(w2mD#G
zXV@fI(YazH#xl%ov+W|0eEiucai_KpR`?nu_*&iaU~s*nkiJzYH1%d2by(H|J#lDa
z8ysEnX2A-NjlRTmFv8~aH9?N~^aa!`yi-dfrm{B*-?pvA@Ekcs4o?YEw$Z>;yilva
zq=xW#Sn(|VX;U{l5soI8>y77?WKS9EPMp}+mQ}Vt!N)R-0&BvasA8mhUv<Dx+6|GK
d%#84%RYN>u=t>|;Xs7%Sz;nMJq1in$^KakI?A8DP

literal 0
HcmV?d00001

diff --git a/src/views/core/base/equipment/components/AssetsUpload.vue b/src/views/core/base/equipment/components/AssetsUpload.vue
index e81eebf4..c6453eac 100644
--- a/src/views/core/base/equipment/components/AssetsUpload.vue
+++ b/src/views/core/base/equipment/components/AssetsUpload.vue
@@ -30,21 +30,37 @@
 					some tips....
 				</div>
 			</el-upload>
-			<div
+			<!-- <div
 				class="file-list__item"
 				v-for="n in 9"
 				:key="n"
-				style="background: #f003"
 				:style="{
 					display: n > 4 && !expand ? 'none' : 'block',
-				}">
-				1
+				}"
+				:data-name="n"
+				:class="{ 'default-icon': !isPicMode }">
+				<i class="el-icon-delete"></i>
+			</div> -->
+			<div
+				class="file-list__item"
+				v-for="(file, index) in files"
+				:key="file.fileName"
+				:style="{
+					display: index > 3 && !expand ? 'none' : 'block',
+					background: isPicMode ? `url(${file.fileUrl}) no-repeat` : `url(${defaultBg}) no-repeat`,
+					backgroundSize: isPicMode ? '100% 100%' : '64px',
+					backgroundPosition: isPicMode ? '0% 0%' : 'center',
+				}"
+				:data-name="file.fileName">
+				<i class="el-icon-delete"></i>
 			</div>
 		</section>
 	</div>
 </template>
 
 <script>
+import defaultBg from '../../../../../assets/images/default-file-icon.png';
+
 export default {
 	name: 'AssetsUpload',
 	components: {},
@@ -61,15 +77,73 @@ export default {
 			type: String,
 			default: '',
 		},
+		isPicMode: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: ['update-filelist'],
 	data() {
 		return {
+			defaultBg,
 			expand: false,
 			fileList: [],
+			files: [
+				// 服务器返回的结构
+				{
+					fileName: 'sf.docs',
+					fileType: 'asset',
+					fileUrl:
+						'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658',
+				},
+				{
+					fileName: 'sddf.docs',
+					fileType: 'asset',
+					fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg',
+				},
+				{
+					fileName: 'jjj.docs',
+					fileType: 'asset',
+					fileUrl:
+						'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg',
+				},
+				{
+					fileName: 'asdfasdf.docs',
+					fileType: 'asset',
+					fileUrl:
+						'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658',
+				},
+				{
+					fileName: 'asdkj.docs',
+					fileType: 'asset',
+					fileUrl:
+						'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg',
+				},
+				{
+					fileName: 'lkasjdf.docs',
+					fileType: 'asset',
+					fileUrl:
+						'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg',
+				},
+				{
+					fileName: 'asdf.docs',
+					fileType: 'asset',
+					fileUrl:
+						'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg',
+				},
+				{
+					fileName: 'afdffff.docs',
+					fileType: 'asset',
+					fileUrl:
+						'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg',
+				},
+			],
 		};
 	},
 	computed: {},
+	mounted() {
+		console.log('this.ispicmocde', this.isPicMode);
+	},
 	methods: {
 		handleUpload() {
 			switch (this.type) {
@@ -165,7 +239,56 @@ export default {
 	display: grid;
 	grid-template-columns: repeat(5, 188px);
 	grid-auto-rows: 128px;
-	gap: 18px;
+	gap: 24px 18px;
 	place-content: center;
 }
+
+.file-list__item {
+	background-color: #fff;
+	border: 1px dashed #d9d9d9;
+	border-radius: 6px;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	text-align: center;
+	cursor: pointer;
+	position: relative;
+	// overflow: hidden;
+
+	&:hover {
+		.el-icon-delete {
+			display: block;
+		}
+	}
+
+	.el-icon-delete {
+		color: #ccc;
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		display: none;
+
+		&:hover {
+			color: rgb(210, 41, 41);
+		}
+	}
+}
+
+.file-list__item:hover {
+	border-color: #0b58ff;
+}
+
+.file-list__item::after {
+	content: attr(data-name);
+	position: absolute;
+	left: 0;
+	bottom: -16px;
+	font-size: 14px;
+	line-height: 1;
+}
+
+.default-icon {
+	background: url(../../../../../assets/images/default-file-icon.png) no-repeat;
+	background-position: center;
+	background-size: 64px;
+}
 </style>
diff --git a/src/views/core/base/equipment/components/DialogForm.vue b/src/views/core/base/equipment/components/DialogForm.vue
index e55394de..39c16824 100644
--- a/src/views/core/base/equipment/components/DialogForm.vue
+++ b/src/views/core/base/equipment/components/DialogForm.vue
@@ -75,6 +75,7 @@
 						v-if="col.subcomponent"
 						:key="col.key"
 						:is="col.subcomponent"
+						v-bind="col.bind"
 						:inlineStyle="col.style"></component>
 				</el-form-item>
 			</el-col>
diff --git a/src/views/core/base/equipment/components/EquipmentDrawer.vue b/src/views/core/base/equipment/components/EquipmentDrawer.vue
index 30b84bfe..d69a714a 100644
--- a/src/views/core/base/equipment/components/EquipmentDrawer.vue
+++ b/src/views/core/base/equipment/components/EquipmentDrawer.vue
@@ -187,6 +187,9 @@ export default {
 						// 重置图片的位置
 						return {
 							...col,
+							bind: {
+								...col.bind
+							},
 							style: {
 								left: 0,
 								right: 'unset',
diff --git a/src/views/core/base/equipment/index.vue b/src/views/core/base/equipment/index.vue
index 378b791f..6ec5e6ae 100644
--- a/src/views/core/base/equipment/index.vue
+++ b/src/views/core/base/equipment/index.vue
@@ -462,6 +462,9 @@ export default {
 								label: '上传资料',
 								fieldName: 'assets',
 								subcomponent: AssetsUpload,
+								bind: {
+									'is-pic-mode': false,
+								},
 							},
 						],
 						[
@@ -471,6 +474,9 @@ export default {
 								label: '上传图片',
 								fieldName: 'images',
 								subcomponent: AssetsUpload,
+								bind: {
+									'is-pic-mode': true,
+								},
 							},
 						],
 				  ]