添加预览组件

src/components/imgPreview/ImgPreview.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-dialog
+    :visible.sync="isShowImageDialog"
+    @closed="clearImg"
+  >
+    <el-carousel indicator-position="outside" height="600px" :autoplay='false'>
+      <el-carousel-item v-for="src in imgs">
+        <img :src="src" style="max-width: 100%;max-height: 100%;display: block; margin: 0 auto;"/>
+      </el-carousel-item>
+    </el-carousel>
+  </el-dialog>
+</template>
+ 
+<script>
+export default {
+  name: 'ImgPreview',
+  data() {
+    return {
+      imgs: '',
+      isShowImageDialog: false
+    }
+  },
+  methods: {
+    clearImg() {
+      this.imgs = null
+    }
+  }
+}
+</script>
+ 
+<style scoped>
+ 
+</style>

src/components/imgPreview/index.js

@@ -0,0 +1,24 @@
+import ImgPreviewComponent from './ImgPreview'
+ 
+const ImgPreview = {}
+ 
+ImgPreview.install = Vue => {
+  const ImgConstructor = Vue.extend(ImgPreviewComponent)
+ 
+  const instance = new ImgConstructor()
+ 
+  instance.$mount(document.createElement('div'))
+ 
+  document.body.appendChild(instance.$el)
+ 
+  Vue.prototype.$imgPreview = (e) => {
+    instance.target = e.currentTarget
+    instance.imgs = instance.target.getAttribute('data-img').split(',')
+    for(let i = 0;i<instance.imgs.length;i++){
+        if(!instance.imgs[i]) instance.imgs.splice(i)
+    }
+    instance.isShowImageDialog = true
+  }
+}
+ 
+export default ImgPreview

src/main.js

@@ -15,7 +15,9 @@ const { router, store } = vendors
 Vue.config.productionTip = false
 import AMap from 'vue-amap';
 Vue.use(AMap);
-
+import imgPreview from '@/components/imgPreview'
+ 
+Vue.use(imgPreview)
 
 import $ from 'jquery'
 // import Warehouse from './common.js'

src/views/tranManagement/tranManagementFireFeedback.vue

@@ -107,7 +107,7 @@
             </ws-form-item>
             <!--磅单-->
             <ws-form-item label="磅单：" span="1" prop="loadPoundImg">
-              <template>
+              <template slot-scope="scope">
                 <!-- slot-scope="scope" -->
                 <el-upload action="https://www.zthymaoyi.com/upload/admin" :show-file-list="false" :on-success="
                     (res) => {
@@ -119,12 +119,10 @@
                 </el-upload>
                 <span v-if="item.imgCount > 0">{{item.imgCount}}</span>
                 <span v-if="item.imgCount == 0">未上传</span>
+              <!-- <el-button class="bg-bottom-preview" type="primary" size="small" @click="preview(item)"  v-if="item.imgCount != null ">预览</el-button> -->
+              <el-button v-if="item.imgCount>0" class="bg-bottom-preview" type="primary" size="small" :data-img="item.loadPoundImg" @click="$imgPreview">预览</el-button>
               </template>
             </ws-form-item>
-            <!--预览-->
-            <div>
-              <el-button class="bg-bottom" type="primary" size="small" @click="preview(item)"  v-if="item.imgCount != null ">预览</el-button>
-            </div>
             <!--箱号-->
             <!--装车日期-->
             <el-form-item label="装车日期:" span="1" prop="loadingDate">
@@ -1209,4 +1207,7 @@
     background: #e5f1f7;
     color: #50cad4;
   }
+  .bg-bottom-preview{
+    margin: 0 8px;
+  }
 </style>