manufacturlist.vue

src/dashoo.cn/frontend_web/src/components/oilsupplier/manufacturerlist.vue

@@ -13,9 +13,25 @@
 
       <el-table-column prop="FileUrl" label="资质文件" show-overflow-tooltip>
         <template slot-scope="scope">
-          <el-link :href="scope.row.FileUrl" target="_blank" type="primary">
+
+          <!-- <el-link :href="scope.row.FileUrl" target="_blank" type="primary">
             {{scope.row.FileUrl}}
-          </el-link>
+          </el-link> -->
+       
+          <viewer :images="FileUrl">
+              <div style="vertical-align: middle;	text-align: center;">
+                <el-link :href="'http://'+fileurlcut(scope.row.FileUrl)" target="_blank" type="primary"
+                  v-if="imgFormat(scope.row.FileUrl)" >
+                {{scope.row.FileUrl}}</el-link>
+                <img
+                  v-else
+                  class="photoStyle" alt=""
+                  :src="'http://'+fileurlcut(scope.row.FileUrl)"
+                  :key="index">
+              </div>
+          </viewer>
+
+       
         </template>
       </el-table-column>
 
@@ -65,6 +81,17 @@
 <script>
   import axios from 'axios'
   import uploadajax from '@/assets/js/uploadajax.js'
+
+  // v-viewer
+  import Vue from 'vue';
+  import Viewer from 'v-viewer'
+  import 'viewerjs/dist/viewer.css'
+  Vue.use(Viewer)
+  Viewer.setDefaults({
+    Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
+  })
+
+
   import {
     mapGetters
   } from 'vuex'
@@ -114,7 +141,29 @@
       }
     },
     methods: {
-
+      imgFormat(fileurl){
+        if(fileurl !=null && fileurl != undefined && fileurl !=''){
+            let Format  = fileurl.split(".")
+            if(Format[1]!=null && Format[1] !='' && Format[1] != undefined){
+              let pictureFormat = Format[1];
+              if("jpg"== pictureFormat || "bmp" ==pictureFormat || "png" ==pictureFormat || "gif" ==pictureFormat|| "jpeg" ==pictureFormat){
+                return true;
+              }
+            }
+        }
+        return false;
+      },
+      fileurlcut (val) {
+        let fileurlall = val
+        let fileurl = fileurlall.split('|')
+        let retUrl = fileurl[0]
+        // 内网服务器专用
+        if (process.client && retUrl.indexOf('/upfile') === 0) {
+          const myDomain = window.location.host
+          retUrl = myDomain + '/' + retUrl
+        }
+        return retUrl;
+      },
       getvalue  (certId ) {
         this.SupplierCertId = certId
         this.initData()