增项申请-物资类-image viewer

src/dashoo.cn/frontend_web/src/pages/oilsupplier/supplierappend/_opera/goodsdataopera.vue

@@ -616,10 +616,25 @@
                 <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> -->
+                    <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>
@@ -629,7 +644,30 @@
                 </el-table-column>
                 <el-table-column prop="FileUrlList" label="变更后文件" show-overflow-tooltip>
                   <template slot-scope="scope">
+
+
                     <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 != '' && formData.Status <= 0 && formData.Status != -5">
+                        <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"
@@ -640,7 +678,11 @@
                       <el-col :span="4" v-if="scope.row.FileUrl != '' && formData.Status <= 0 && formData.Status != -5">
                         <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 >
@@ -1048,6 +1090,16 @@
   import ChooseAuditorFen from '@/components/oilsupplier/chooseauditorfenban'
   import setapi from '@/api/oilsupplier/oilclassorgset'
 
+  // 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 {
     components: {
       WfMultiHistory,
@@ -2541,6 +2593,23 @@
       //       console.error(err)
       //     })
       // },
+       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]
         let fileurl = fileurlall.split('|')
@@ -3483,4 +3552,10 @@
     color: #228B22;
   }
 
+
+ .photoStyle{
+    margin-top:6px;
+    width:140px;
+    height: 60px;
+  }
 </style>