优化

src/views/sb/info/modules/Detail.vue

@@ -1,4 +1,4 @@
-<template>
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <a-card :bordered="false" v-show="visibleDetail" class="card" :title="modalTitle">
     <div v-show="visible">
       <a-row :gutter="48" slot="extra">
@@ -21,14 +21,6 @@
           </span>
         </a-col>
       </a-row>
-      <title-divider title="图片信息" width="90px"></title-divider>
-      <a-carousel effect="fade">
-        <div v-for="item in model.sbFileList">
-          <h3>
-            <img :src="BaseTool.Constant.FILE_URL + item.url" width="200px" height="200px"/>
-          </h3>
-        </div>
-      </a-carousel>
       <detail-list title="" :col="3">
         <!--        <detail-list-item v-for="item in model.sbFileList" term="">
                   <img :src="BaseTool.Constant.FILE_URL + item.url" width="200px" height="200px"/>
@@ -87,6 +79,17 @@
         <detail-list-item term="检定证书编号">{{ model.sbdh }}</detail-list-item>
         <detail-list-item term="预警天数">{{ model.seatNumber }}</detail-list-item>
       </detail-list>
+      <title-divider title="图片信息" width="90px"></title-divider>
+      <detail-list title="" :col="1">
+        <detail-list-item term="" v-if="model.sbFileList.length > 0">
+          <viewer :images="model.sbFileList" @inited="inited" ref="viewer" :index="1" >
+            <img v-for="item in model.sbFileList" :src="item.url" :key="item.id" class="image">
+          </viewer>
+        </detail-list-item>
+        <detail-list-item term="" v-if="model.sbFileList.length === 0">
+          暂无
+        </detail-list-item>
+      </detail-list>
       <title-divider title="文件信息" width="90px"></title-divider>
       <detail-list title="" :col="4">
         <detail-list-item term="维保手册">
@@ -284,6 +287,18 @@ export default {
   computed: {
   },
   methods: {
+    inited (viewer) {
+      this.$viewer = viewer
+      // this.$viewer.index = 0
+      // // 不要他的按钮
+      // this.$viewer.options.button = false
+      // // 不要他的底部缩略图
+      // this.$viewer.options.navbar = false
+      // // 不要他的底部标题
+      // this.$viewer.options.title = false
+      // // 不要他的底部工具栏
+      // this.$viewer.options.toolbar = false
+    },
     handleViewBom (record) {
       this.visible = false
       const modal = this.$refs.detailSbBomModal
@@ -306,6 +321,7 @@ export default {
       this.model = record
       this.activeKey = '1'
       this.collapseActiveKey = '0'
+      console.log('length: ' + this.model.sbFileList.length)
       this.fetchNum()
       fetchFirmProducer({ id: this.model.producerId }).then(res => {
         this.firmProducer = res.data
@@ -394,4 +410,11 @@ export default {
 .ant-carousel >>> .slick-slide h3 {
   color: #fff;
 }
+
+.image {
+  width: calc(20% - 10px);
+  cursor: pointer;
+  margin: 5px;
+  display: inline-block;
+}
 </style>

src/views/sqarepartmanage/sparepartinfo/modules/Detail.vue

@@ -7,13 +7,6 @@
         </span>
       </a-col>
     </a-row>
-    <title-divider title="备件信息" width="90px"></title-divider>
-    <detail-list title="" :col="3">
-      <detail-list-item v-for="item in model.applicationFileList" term="">
-        <img :src="BaseTool.Constant.FILE_URL + item.url" width="200px" height="200px"/>
-      </detail-list-item>
-      <detail-list-item term=""><img-code :src="model.qrCode" :type="2" :code-id="model.id" :width="200"></img-code></detail-list-item>
-    </detail-list>
     <title-divider title="基础信息" width="90px"></title-divider>
     <detail-list title="" :col="3">
       <detail-list-item term="id">{{ model.id }}</detail-list-item>
@@ -48,7 +41,17 @@
       <detail-list-item term="更新人">{{ model.updateUserName }}</detail-list-item>
       <detail-list-item term="更新日期">{{ model.updateTime }}</detail-list-item>
     </detail-list>
-
+    <title-divider title="图片信息" width="90px"></title-divider>
+    <detail-list title="" :col="1">
+      <detail-list-item term="" v-if="model.applicationFileList.length > 0">
+        <viewer :images="model.applicationFileList" @inited="inited" ref="viewer" :index="1" >
+          <img v-for="item in model.applicationFileList" :src="item.url" :key="item.id" class="image">
+        </viewer>
+      </detail-list-item>
+      <detail-list-item term="" v-if="model.applicationFileList.length === 0">
+        暂无
+      </detail-list-item>
+    </detail-list>
     <template slot="footer">
       <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">返回</a-button>
     </template>
@@ -122,6 +125,18 @@ export default {
       this.modalTitle = '详情'
       this.model = record
     },
+    inited (viewer) {
+      this.$viewer = viewer
+      // this.$viewer.index = 0
+      // // 不要他的按钮
+      // this.$viewer.options.button = false
+      // // 不要他的底部缩略图
+      // this.$viewer.options.navbar = false
+      // // 不要他的底部标题
+      // this.$viewer.options.title = false
+      // // 不要他的底部工具栏
+      // this.$viewer.options.toolbar = false
+    },
     handleCancel () {
       this.visible = false
       this.confirmLoading = false
@@ -131,3 +146,11 @@ export default {
   }
 }
 </script>
+<style scoped>
+.image {
+  width: calc(20% - 10px);
+  cursor: pointer;
+  margin: 5px;
+  display: inline-block;
+}
+</style>