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>

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>

src/views/core/base/equipment/components/EquipmentDrawer.vue

@@ -187,6 +187,9 @@ export default {
 						// 重置图片的位置
 						return {
 							...col,
+							bind: {
+								...col.bind
+							},
 							style: {
 								left: 0,
 								right: 'unset',

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,
+								},
 							},
 						],
 				  ]