goodsoperation image viewer

src/dashoo.cn/frontend_web/src/pages/oilsupplier/annualaudit/_opera/goodsoperation.vue

@@ -702,10 +702,24 @@
               <el-table-column prop="NeedFileType" label="文件分类" show-overflow-tooltip></el-table-column>
               <el-table-column prop="OldFileUrlList" label="原文件" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <div v-for="(tmpUrl, index) in scope.row.OldFileUrlList">
+                  <!-- <div v-for="(tmpUrl, index) in scope.row.OldFileUrlList">
                     <a :href="'http://'+fileurlcut(scope.row.OldFileUrl, index)" target="_blank"
                        class="buttonText">{{scope.row.OldFileName.split('$')[index]}}</a>
-                  </div>
+                  </div> -->
+                   <viewer :images="scope.row.OldFileUrlList">
+                    <div v-for="(tmpUrl,index) in scope.row.OldFileUrlList" :key="index" style="vertical-align: middle;	text-align: center;">
+                      <el-link :href="'http://'+fileurlcut(scope.row.OldFileUrl, index)" target="_blank" type="primary"
+                        v-if="imgFormat(scope.row.OldFileUrl, index)" >
+                        {{scope.row.OldFileName.split('$')[index]}}</el-link>
+                      <img
+                        v-else
+                        class="photoStyle" alt=""
+                        :src="'http://'+fileurlcut(scope.row.OldFileUrl, index)"
+                        :key="index">
+                    </div>
+                    </viewer>
+
+
                 </template>
               </el-table-column>
               <el-table-column prop="OldEffectDate" label="原有效日期" show-overflow-tooltip>
@@ -713,9 +727,37 @@
                   {{ jstimehandle(scope.row.OldEffectDate+'') }}
                 </template>
               </el-table-column>
-              <el-table-column prop="FileUrlList" label="变更后文件" show-overflow-tooltip>
+              <el-table-column prop="FileUrlList" label="变更后文件2" show-overflow-tooltip>
                 <template slot-scope="scope">
-                  <el-row align="middle">
+
+                    <el-row align="middle">
+                    <el-col :span="20">
+                      <viewer :images="scope.row.FileUrlList">
+                      <div v-for="(tmpUrl,index) in scope.row.FileUrlList" :key="index" style="vertical-align: middle;	text-align: center;">
+                      <el-link :href="'http://'+fileurlcut(scope.row.FileUrl, index)" target="_blank" type="primary"
+                        v-if="imgFormat(scope.row.FileUrl, index)" >
+                        {{scope.row.FileName.split('$')[index]}}</el-link>
+                      <img
+                        v-else
+                        class="photoStyle" alt=""
+                        :src="'http://'+fileurlcut(scope.row.FileUrl, index)"
+                        :key="index">
+                      </div>
+                      </viewer>
+                    </el-col>
+                    <el-col :span="4" v-if="scope.row.FileUrl != '' && Status <= 0 ">
+                      <i class="el-icon-close" :style="{'float': 'right', 'height': '100%','line-height': lineheight(scope.row.FileUrlList.length)  + 'px',}" @click="iconclear(scope.row)"></i>
+                    </el-col>
+                  </el-row>
+
+
+
+                    
+                 
+
+
+
+                  <!-- <el-row align="middle">
                     <el-col :span="20">
                       <div v-for="(tmpUrl, index) in scope.row.FileUrlList">
                         <a :href="'http://'+fileurlcut(scope.row.FileUrl, index)" target="_blank"
@@ -726,7 +768,9 @@
                     <el-col :span="4" v-if="scope.row.FileUrl != '' && Status <= 0 ">
                       <i class="el-icon-close" :style="{'float': 'right', 'height': '100%','line-height': lineheight(scope.row.FileUrlList.length)  + 'px',}" @click="iconclear(scope.row)"></i>
                     </el-col>
-                  </el-row>
+                  </el-row> -->
+
+
                 </template>
               </el-table-column>
               <el-table-column prop="EffectDate" label="变更后有效日期" show-overflow-tooltip >
@@ -1021,6 +1065,19 @@
   import setapi from '@/api/oilsupplier/oilclassorgset'
   import suppapi from '@/api/oilsupplier/supplier'
 
+
+ // 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' }
+  })
+
+
+
+
   export default {
     computed: {
       ...mapGetters({
@@ -1940,6 +1997,23 @@
       // 资质变更相关
       lineheight (list) {
         return list * 23 + ''
+      },
+       imgFormat(val,index){
+         console.log(val)
+        if(val !=null && val != undefined && val !=''){
+          let fileurlall = val.split('$')[index]
+          let fileurl = fileurlall.split('|')
+          if(fileurl[1] != null && fileurl[1] !='' && fileurl[1] != undefined){
+            let Format  = fileurl[1].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 false;
+              }
+            }
+          }
+          return true;
+        }
       },
       fileurlcut (val, index) {
         let fileurlall = val.split('$')[index]
@@ -3113,4 +3187,9 @@
       background-color: wheat;
     }
   }
+   .photoStyle{
+    margin-top:6px;
+    width:140px;
+    height: 60px;
+  }
 </style>