隐患照片和整改照片可支持多张图片预览

ruoyi-ui/src/views/ehs/ehsHiddenDanger/index.vue

@@ -561,7 +561,8 @@
       </el-row>
       <el-form-item label="隐患照片" prop="hiddenDangerImg">
         <image-upload  v-if="!isReadOnly" v-model="form.hiddenDangerImg"  />
-        <image-preview  v-if="isReadOnly" :src="form.hiddenDangerImg"  />
+<!--        <image-preview :width="100" :height="100" v-if="isReadOnly" :src="form.hiddenDangerImg"  />-->
+        <myImagePreview :width="100" :height="100" v-if="isReadOnly" :src="form.hiddenDangerImg"  />
       </el-form-item>
       <el-form-item label="整改措施" prop="rectifyMeasure">
         <el-input v-model="form.rectifyMeasure" type="textarea" placeholder="请输入整改措施" :readonly="isReadOnly"/>
@@ -585,7 +586,8 @@
       </el-row>
       <el-form-item label="整改照片" prop="rectifyImg">
         <image-upload  v-if="!isReadOnly" v-model="form.rectifyImg"  />
-        <image-preview  v-if="isReadOnly" :src="form.rectifyImg"  />
+<!--        <image-preview :width="100" :height="100" v-if="isReadOnly" :src="form.rectifyImg"  />-->
+        <myImagePreview :width="100" :height="100" v-if="isReadOnly" :src="form.rectifyImg"  />
       </el-form-item>
       <el-row>
         <el-col :span="12">
@@ -689,12 +691,13 @@ import { listEhsHiddenDanger, getEhsHiddenDanger, delEhsHiddenDanger, addEhsHidd
 import {listAllDept } from "@/api/system/dept";
 import enterpriseSelect from "./enterpriseSelect"
 import importUpload from "@/components/upload/upload";
+import myImagePreview from "./myImagePreview.vue";
 import { eventBus } from '@/main.js';
 export default {
   name: "EhsHiddenDanger",
   dicts: ['hidden_danger_type', 'hidden_danger_grade', 'hidden_danger_label', 'enterprise_type','enterprise_scale',
     'economic_type','area_id', "hidden_danger_status","check_type", "ehs_yes_no"],
-  components:{ importUpload,enterpriseSelect  },
+  components:{ importUpload,enterpriseSelect,myImagePreview  },
   data() {
     return {
       // 遮罩层

ruoyi-ui/src/views/ehs/ehsHiddenDanger/myImagePreview.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="image-preview-container">
+    <el-image
+      v-for="(imageSrc, index) in realSrcList"
+      :key="index"
+      :src="imageSrc"
+      fit="cover"
+      :style="`width:${realWidth};height:${realHeight};`"
+      :preview-src-list="realSrcList"
+    >
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+  </div>
+</template>
+
+<script>
+import { isExternal } from "@/utils/validate";
+
+export default {
+  name: "ImagePreview",
+  props: {
+    src: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: [Number, String],
+      default: ""
+    },
+    height: {
+      type: [Number, String],
+      default: ""
+    }
+  },
+  computed: {
+    realSrcList() {
+      if (!this.src) {
+        return [];
+      }
+      return this.src.split(",").map(item => {
+        if (isExternal(item)) {
+          return item;
+        }
+        return `${process.env.VUE_APP_BASE_API}${item}`;
+      });
+    },
+    realWidth() {
+      return typeof this.width === "string" ? this.width : `${this.width}px`;
+    },
+    realHeight() {
+      return typeof this.height === "string" ? this.height : `${this.height}px`;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.image-preview-container {
+  display: flex;
+  flex-wrap: wrap;
+  .el-image {
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    background-color: #ebeef5;
+    box-shadow: 0 0 5px 1px #ccc;
+
+    ::v-deep .el-image__inner {
+      transition: all 0.3s;
+      cursor: pointer;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+
+    ::v-deep .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      color: #909399;
+      font-size: 30px;
+    }
+  }
+}
+</style>