预览图片组件封装

src/components/PreviewImage/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="preview-image">
+    <el-tooltip :effect="effect" :content="content" :placement="placement">
+      <el-image
+        v-if="!$attrs['preview-src-list']"
+        v-bind="$attrs"
+        :preview-src-list="[$attrs.src]"
+        :style="{ width: width, height, height }"
+      />
+      <el-image v-else v-bind="$attrs" :style="{ width: width, height, height }" />
+    </el-tooltip>
+  </div>
+</template>
+<script>
+export default {
+  name: 'PreviewImage',
+  props: {
+    effect: {
+      type: String,
+      default: 'dark'
+    },
+    content: {
+      type: String,
+      default: '点击查看原图'
+    },
+    placement: {
+      type: String,
+      default: 'top-start'
+    },
+    width: {
+      type: String,
+      default: '120px'
+    },
+    height: {
+      type: String,
+      default: '120px'
+    }
+  }
+}
+</script>

src/components/index.js

@@ -3,6 +3,7 @@ import AuditButtonGroup from './AuditButtonGroup'
 import Pagination from './Pagination'
 import ParamList from './ParamList'
 import PermissionButton from './PermissionButton'
+import PreviewImage from './PreviewImage'
 
 const install = (Vue) => {
   Vue.component(AuditStatus.name, AuditStatus)
@@ -10,6 +11,7 @@ const install = (Vue) => {
   Vue.component(Pagination.name, Pagination)
   Vue.component(ParamList.name, ParamList)
   Vue.component(PermissionButton.name, PermissionButton)
+  Vue.component(PreviewImage.name, PreviewImage)
 }
 
 export default {

src/styles/index.scss

@@ -394,4 +394,10 @@ aside {
     left: 50%;
     transform: translateX(-50%);
   }
-}
+}
+
+.el-image {
+  .el-image__inner {
+    height: auto;
+  }
+}

src/views/admin/audit/club/device/review.vue

@@ -11,23 +11,13 @@
     <div class="row">
       <div class="col">设备图片：</div>
       <div class="col">
-        <el-image
-          v-if="productInfo.productImage"
-          style="width: 120px; height: 120px"
-          :src="productInfo.productImage"
-          :preview-src-list="[productInfo.productImage]"
-        />
+        <preview-image v-if="productInfo.productImage" class="preview-image" :src="productInfo.productImage" />
       </div>
     </div>
     <div class="row">
       <div class="col">授权牌：</div>
       <div class="col">
-        <el-image
-          v-if="productInfo.certificateImage"
-          style="width: 120px; height: 120px"
-          :src="productInfo.certificateImage"
-          :preview-src-list="[productInfo.certificateImage]"
-        />
+        <preview-image v-if="productInfo.certificateImage" class="preview-image" :src="productInfo.certificateImage" />
       </div>
     </div>
 
@@ -39,12 +29,7 @@
     <div class="row">
       <div class="col">发票：</div>
       <div class="col">
-        <el-image
-          v-if="productInfo.invoiceImage"
-          style="width: 120px; height: 120px"
-          :src="productInfo.invoiceImage"
-          :preview-src-list="[productInfo.invoiceImage]"
-        />
+        <preview-image v-if="productInfo.invoiceImage" class="preview-image" :src="productInfo.invoiceImage" />
       </div>
     </div>
 

src/views/admin/audit/club/review.vue

@@ -31,19 +31,14 @@
       <div class="row">
         <div class="col">logo：</div>
         <div class="col">
-          <el-image style="width: 120px; height: 120px" :src="clubInfo.logo" :preview-src-list="[clubInfo.logo]" />
+          <preview-image v-if="clubInfo.logo" class="preview-image" :src="clubInfo.logo" />
         </div>
       </div>
       <div class="row">
         <div class="col">门头照：</div>
         <div class="col">
           <template v-for="(image, index) in clubInfo.bannerList">
-            <el-image
-              :key="index"
-              style="width: 120px; height: 120px"
-              :src="image"
-              :preview-src-list="clubInfo.bannerList"
-            />
+            <preview-image :key="index" class="preview-image" :src="image" :preview-src-list="clubInfo.bannerList" />
           </template>
         </div>
       </div>
@@ -92,11 +87,7 @@
       <div v-if="clubInfo.firstClubType === 1" class="row">
         <div class="col">医疗许可证：</div>
         <div class="col">
-          <el-image
-            style="width: 120px; height: 120px"
-            :src="clubInfo.medicalLicenseImage"
-            :preview-src-list="[clubInfo.medicalLicenseImage]"
-          />
+          <preview-image v-if="clubInfo.medicalLicenseImage" class="preview-image" :src="clubInfo.medicalLicenseImage" />
         </div>
       </div>
       <div class="row">
@@ -294,7 +285,7 @@ export default {
         color: #666;
       }
 
-      .el-image {
+      .preview-image {
         margin-left: 12px;
         &:first-child {
           margin-left: 0;

src/views/admin/audit/device/review.vue

@@ -7,7 +7,7 @@
     <div class="row">
       <div class="col">设备图片：</div>
       <div class="col">
-        <el-image style="width: 120px; height: 120px" :src="cateData.image" :preview-src-list="[cateData.image]" />
+        <preview-image v-if="cateData.image" class="preview-image" :src="cateData.image" />
       </div>
     </div>
     <div class="row">
@@ -138,7 +138,7 @@ export default {
       }
     }
 
-    .el-image {
+    .preview-image {
       margin-left: 12px;
       &:first-child {
         margin-left: 0;

src/views/admin/audit/material/article/review.vue

@@ -3,7 +3,7 @@
     <el-form ref="formRef" :model="formData" :rules="formRules" class="detail" label-width="100px">
       <el-form-item label="文章标题：">{{ articleTitle }}</el-form-item>
       <el-form-item label="文章封面：">
-        <el-image style="width: 200px; height: 200px" :src="articleImage" :preview-src-list="srcList" />
+        <preview-image v-if="articleImage" width="200px" height="200px" class="preview-image" :src="articleImage" />
       </el-form-item>
       <el-form-item label="文章内容：">
         <div class="iframe" v-html="articleContent" />

src/views/admin/audit/material/image/review.vue

@@ -7,7 +7,14 @@
         </el-form-item>
         <el-form-item label="图片：">
           <template v-for="(item, index) in imageList">
-            <el-image :key="index" style="width: 150px; height: 150px" :src="item" :preview-src-list="imageList" />
+            <preview-image
+              :key="index"
+              width="150px"
+              height="150px"
+              class="preview-image"
+              :src="item"
+              :preview-src-list="imageList"
+            />
           </template>
         </el-form-item>
         <template v-if="type === 'audit'">
@@ -96,7 +103,7 @@ export default {
 .detail {
   width: 800px;
   margin: 25px auto;
-  .el-image {
+  .preview-image {
     margin-right: 12px;
     &:nth-child(4n) {
       margin-right: 0;

src/views/admin/audit/personnel/operate/review.vue

@@ -11,16 +11,19 @@
         <span>{{ doctorInfo.clubName }}</span>
       </el-form-item>
       <el-form-item label="形象照:" prop="doctorImage">
-        <el-image style="width: 140px; height: 140px" :src="doctorInfo.doctorImage" :preview-src-list="doctorImgList" />
+        <preview-image width="140px" height="140px" class="preview-image" :src="doctorInfo.doctorImage" />
       </el-form-item>
       <el-form-item label="简介图:" prop="banner">
-        <el-image
-          v-for="(image, index) in doctorInfo.bannerList"
-          :key="index"
-          style="width: 140px; height: 140px"
-          :src="image"
-          :preview-src-list="bannerImgList"
-        />
+        <template v-for="(image, index) in doctorInfo.bannerList">
+          <preview-image
+            :key="index"
+            width="140px"
+            height="140px"
+            class="preview-image"
+            :src="image"
+            :preview-src-list="bannerImgList"
+          />
+        </template>
       </el-form-item>
 
       <el-form-item label="操作操作师标签">
@@ -53,11 +56,7 @@
                 <span>{{ equipment.brand }}</span>
               </el-form-item>
               <el-form-item label="设备图片:">
-                <el-image
-                  style="width: 140px; height: 140px"
-                  :src="equipment.image"
-                  :preview-src-list="equipmentImgList"
-                />
+                <preview-image width="140px" height="140px" class="preview-image" :src="equipment.image" />
               </el-form-item>
             </el-form>
           </div>

src/views/admin/audit/personnel/training/review.vue

@@ -11,16 +11,19 @@
         <span>{{ doctorInfo.clubName }}</span>
       </el-form-item>
       <el-form-item label="形象照:" prop="doctorImage">
-        <el-image style="width: 140px; height: 140px" :src="doctorInfo.doctorImage" :preview-src-list="doctorImgList" />
+        <preview-image width="140px" height="140px" class="preview-image" :src="doctorInfo.doctorImage" />
       </el-form-item>
       <el-form-item label="简介图:" prop="banner">
-        <el-image
-          v-for="(image, index) in doctorInfo.bannerList"
-          :key="index"
-          style="width: 140px; height: 140px"
-          :src="image"
-          :preview-src-list="bannerImgList"
-        />
+        <template v-for="(image, index) in doctorInfo.bannerList">
+          <preview-image
+            :key="index"
+            width="140px"
+            height="140px"
+            class="preview-image"
+            :src="image"
+            :preview-src-list="doctorInfo.bannerList"
+          />
+        </template>
       </el-form-item>
 
       <el-form-item label="操作培训师标签">

src/views/normal/audit/club/components/club-list.vue

@@ -63,14 +63,10 @@
             type="warning"
             size="mini"
             style="margin-right: 5px"
-            @click="$_navigationTo(`/supplier-audit/club/club-detail?authId=${row.authId}`)"
+            @click="onClick(row, 'audit')"
           >审核</permission-button>
           <el-badge :hidden="row.shopWaitAuditNum === 0" :value="row.shopWaitAuditNum" :max="99">
-            <permission-button
-              type="primary"
-              size="mini"
-              @click="$_navigationTo(`/supplier-audit/club/device/list?authId=${row.authId}`)"
-            >设备认证</permission-button>
+            <permission-button type="primary" size="mini" @click="onClick(row, 'review')">设备认证</permission-button>
           </el-badge>
         </template>
       </el-table-column>
@@ -131,6 +127,9 @@ export default {
           this.listLoading = false
         })
     },
+    onClick(row, type) {
+      this.$router.push(`/supplier-audit/club/club-detail?authId=${row.authId}&type=${type}`)
+    },
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
     }

src/views/normal/audit/club/components/device-list.vue

@@ -58,9 +58,9 @@
             v-if="row.shopAuditStatus !== 1"
             type="primary"
             size="mini"
-            @click="$_navigationTo(`/supplier-audit/club/device-detail?id=${row.productId}&authId=${listQuery.authId}`)"
+            @click="onClick(row, 'audit')"
           >审核</permission-button>
-          <span v-else class="status success el-icon-check">&nbsp;已审核</span>
+          <permission-button v-else type="primary" size="mini" @click="onClick(row, 'review')">查看</permission-button>
         </template>
       </el-table-column>
     </el-table>
@@ -116,6 +116,11 @@ export default {
           this.listLoading = false
         })
     },
+    onClick(row, type) {
+      this.$router.push(
+        `/supplier-audit/club/device-detail?id=${row.productId}&authId=${this.listQuery.authId}&type=${type}`
+      )
+    },
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
     }

src/views/normal/audit/club/device/review.vue

@@ -11,20 +11,10 @@
     <div class="row">
       <div class="col">设备图片：</div>
       <div class="col">
-        <el-image
-          v-if="productInfo.productImage"
-          style="width: 120px; height: 120px"
-          :src="productInfo.productImage"
-          :preview-src-list="[productInfo.productImage]"
-        />
+        <preview-image v-if="productInfo.productImage" :src="productInfo.productImage" />
       </div>
     </div>
 
-    <!-- <div class="row">
-        <div class="col">所属品牌：</div>
-        <div class="col">{{ productInfo.brandName }}</div>
-      </div> -->
-
     <div class="row">
       <div class="col">购买渠道：</div>
       <div class="col">{{ productInfo.purchaseWay }}</div>
@@ -33,26 +23,10 @@
     <div class="row">
       <div class="col">发票：</div>
       <div class="col">
-        <el-image
-          v-if="productInfo.invoiceImage"
-          style="width: 120px; height: 120px"
-          :src="productInfo.invoiceImage"
-          :preview-src-list="[productInfo.invoiceImage]"
-        />
+        <preview-image v-if="productInfo.invoiceImage" :src="productInfo.invoiceImage" />
       </div>
     </div>
-    <!-- <div class="row">
-        <div class="col">设备参数：</div>
-        <div class="col">
-          <template v-for="(param, index) in productInfo.paramList">
-            <div :key="index" class="param">
-              <div class="label">{{ param.paramName }}：</div>
-              <div class="content">{{ param.paramContent }}</div>
-            </div>
-          </template>
-        </div>
-      </div> -->
-    <el-form ref="auditForm" label-width="112px" :model="auditForm" :rules="rules">
+    <el-form v-if="type === 'audit'" ref="auditForm" label-width="112px" :model="auditForm" :rules="rules">
       <el-form-item label="审核：">
         <el-radio-group v-model="auditForm.auditStatus">
           <el-radio :label="1">通过</el-radio>
@@ -78,6 +52,7 @@ import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
+      type: 'review',
       productInfo: {
         productId: '',
         productName: '',
@@ -107,6 +82,7 @@ export default {
   },
   created() {
     this.productInfo.productId = this.$route.query.id
+    this.type = this.$route.query.type
     this.authId = this.$route.query.authId
     this.getDetail()
   },

src/views/normal/audit/club/review.vue

@@ -30,12 +30,7 @@
     <div class="row">
       <div class="col">logo：</div>
       <div class="col">
-        <el-image
-          v-if="clubInfo.logo"
-          style="width: 120px; height: 120px"
-          :src="clubInfo.logo"
-          :preview-src-list="[clubInfo.logo]"
-        />
+        <preview-image v-if="clubInfo.logo" :src="clubInfo.logo" />
       </div>
     </div>
     <div class="row">
@@ -43,12 +38,7 @@
       <div class="col">
         <template v-if="clubInfo.bannerList.length > 0">
           <template v-for="(image, index) in clubInfo.bannerList">
-            <el-image
-              :key="index"
-              style="width: 120px; height: 120px"
-              :src="image"
-              :preview-src-list="clubInfo.bannerList"
-            />
+            <preview-image :key="index" class="preview-image" :src="image" :preview-src-list="clubInfo.bannerList" />
           </template>
         </template>
       </div>
@@ -99,12 +89,7 @@
     <div v-if="clubInfo.firstClubType === 1" class="row">
       <div class="col">医疗许可证：</div>
       <div class="col">
-        <el-image
-          v-if="clubInfo.medicalLicenseImage"
-          style="width: 120px; height: 120px"
-          :src="clubInfo.medicalLicenseImage"
-          :preview-src-list="[clubInfo.medicalLicenseImage]"
-        />
+        <preview-image v-if="clubInfo.medicalLicenseImage" :src="clubInfo.medicalLicenseImage" />
       </div>
     </div>
     <div class="row">
@@ -294,7 +279,7 @@ export default {
       color: #666;
     }
 
-    .el-image {
+    .preview-image {
       margin-left: 12px;
       &:first-child {
         margin-left: 0;

src/views/normal/club/edit.vue

@@ -83,12 +83,7 @@
             <el-input v-show="false" v-model="formData.authImage" />
           </template>
           <template v-else>
-            <el-image
-              v-if="formData.authImage"
-              style="width: 148px; height: 148px"
-              :src="formData.authImage"
-              :preview-src-list="[formData.authImage]"
-            />
+            <preview-image v-if="formData.authImage" width="148px" height="148px" :src="formData.authImage" />
           </template>
         </div>
       </el-form-item>