picviewer

package.json

@@ -26,6 +26,7 @@
     "nprogress": "0.2.0",
     "qrcode": "^1.3.2",
     "time-formater": "^1.0.3",
+    "v-viewer": "^1.3.1",
     "vue": "2.5.17",
     "vue-router": "3.0.1",
     "vuex": "3.0.1",

src/main.js

@@ -17,10 +17,17 @@ import curd from '@/utils/curd'
 import time from 'time-formater'
 
 import htmlToPdf from '@/vendor/htmlToPdf'
-
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 Vue.use(curd)
 Vue.use(htmlToPdf)
 Vue.use(ElementUI)
+// 查看图片
+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' }
+})
+
 // 处理时间字符串格式全局过滤器 '2018/1/23 00:00:00' to '2018-01-23'
 Vue.filter('formatTime', function(value) {
   if (!value) return ''

src/views/PurchasingCenter/PurchaseInvoiceDelivery/index.vue

@@ -9,17 +9,6 @@
           :label="item.label"
           :value="item.value"/>
       </el-select>
-      <!--<span>采购合同号:</span>-->
-      <!--<el-select v-model="contractNumValue" placeholder="合同号" size="small" filterable clearable>-->
-      <!--<el-option-->
-      <!--v-for="item in contractNums"-->
-      <!--:key="item.value"-->
-      <!--:label="item.label"-->
-      <!--:value="item.value">-->
-      <!--<div style="float: left">{{ item.label }}</div>-->
-      <!--<div style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</div>-->
-      <!--</el-option>-->
-      <!--</el-select>-->
       <el-button
         type="success"
         size="small"
@@ -36,34 +25,29 @@
     </el-card>
 
     <el-card>
-      <el-table v-loading="" :data="tableData1" show-summary size="mini" style="max-height: 400px" height="400px" stripe border highlight-current-row @row-click="searchPic">
+      <el-table id="expandTable" :data="tableData1" show-summary size="mini" style="max-height: 400px" height="400px" stripe border>
         <el-table-column type="expand">
           <template slot-scope="scope">
             <el-form id="table" label-position="left" inline class="demo-table-expand">
               <el-row>
-                <el-col :span="8">
+                <el-col :span="9">
+                  <viewer>
+                    <img :src="scope.row.scanSrc" alt="发票扫描件" height="200px">
+                  </viewer>
+                </el-col>
+                <el-col :span="15">
                   <el-form-item label="接收人">
                     {{ scope.row.接收人 ? scope.row.接收人 : '—' }}
-                  </el-form-item>
+                  </el-form-item><br>
-                </el-col>
-                <el-col :span="8">
                   <el-form-item label="接收时间">
                     {{ scope.row.接收时间 ? scope.row.接收时间 : '—' }}
-                  </el-form-item>
+                  </el-form-item><br>
-                </el-col>
-                <el-col :span="8">
                   <el-form-item label="发票号">
                     {{ scope.row.发票号 ? scope.row.发票号 : '—' }}
-                  </el-form-item>
+                  </el-form-item><br>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="8">
                   <el-form-item label="开户行">
                     {{ scope.row.开户行 ? scope.row.开户行 : '—' }}
-                  </el-form-item>
+                  </el-form-item><br>
-                </el-col>
-                <el-col :span="8">
                   <el-form-item label="开票时间">
                     {{ scope.row.开票时间 ? scope.row.开票时间.split(' ')[0] : '—' }}
                   </el-form-item>
@@ -83,7 +67,7 @@
             {{ scope.row.供应商名称 }}
           </template>
         </el-table-column>
-        <el-table-column align="center" label="关联合同" min-width="80px">
+        <el-table-column align="center" label="相关合同" min-width="80px">
           <template slot-scope="scope">
             <el-popover placement="right" width="400" trigger="click">
               <el-table :data="tableData01" stripe size="mini" show-summary>
@@ -104,15 +88,10 @@
                   </template>
                 </el-table-column>
               </el-table>
-              <el-button slot="reference" plain type="success" size="mini" icon="el-icon-search" @click="invoiceDetail(scope.row)"/>
+              <el-button slot="reference" plain type="success" size="mini" icon="el-icon-document" @click="invoiceDetail(scope.row)"/>
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column align="center" label="备注" min-width="150px">
-          <template slot-scope="scope">
-            {{ scope.row.备注 ? scope.row.备注 : '—' }}
-          </template>
-        </el-table-column>
         <el-table-column align="center" label="开票金额" min-width="100px" prop="开票金额">
           <template slot-scope="scope">
             {{ scope.row.开票金额 }}
@@ -128,6 +107,11 @@
             {{ scope.row.传送时间 }}
           </template>
         </el-table-column>
+        <el-table-column align="center" label="备注" min-width="150px">
+          <template slot-scope="scope">
+            {{ scope.row.备注 ? scope.row.备注 : '—' }}
+          </template>
+        </el-table-column>
         <el-table-column align="center" label="操作" fixed="right" width="200px">
           <template slot-scope="scope">
             <el-button
@@ -156,7 +140,6 @@
           @size-change="handleSizeChange1"
           @current-change="handleCurrentChange1"/>
       </div>
-      <img :src="scanSrc" alt="发票扫描件" width="100%">
     </el-card>
 
     <el-dialog :title="title1" :visible.sync="dialogVisible1" center style="min-height: 300px" width="460px">
@@ -458,6 +441,13 @@ export default {
       this.contractNumValue ? this.check2 = 1 : this.check2 = 0
       searchInvoice(this.pageCurrent1, this.pageSize1, this.check1, this.supplierNumValue, this.check2, this.contractNumValue).then(response => {
         this.tableData1 = response.data.rows
+        this.tableData1.map(v => {
+          this.$set(v, 'scanSrc', '')
+          return v
+        })
+        for (let i = 0; i < response.data.rows.length; i++) {
+          this.tableData1[i].scanSrc = this.searchPic(response.data.rows[i], i)
+        }
         this.total1 = response.data.total
       })
       this.scanSrc = ''
@@ -571,7 +561,7 @@ export default {
         })
       })
     },
-    async searchPic(row) {
+    async searchPic(row, i) {
       const { data } = await request({
         url: '',
         method: 'post',
@@ -581,12 +571,16 @@ export default {
         }
       })
       this.scanSrc = 'http://localhost:8411/webpage/file/' + data[0].文件标识 + '.' + data[0].文件后缀
+      this.tableData1[i].scanSrc = 'http://localhost:8411/webpage/file/' + data[0].文件标识 + '.' + data[0].文件后缀
     }
   }
 }
 </script>
 
 <style scoped>
+  #expandTable .el-form-item{
+    margin: 0;
+  }
   .el-tag{
     margin: 0
   }
@@ -602,9 +596,6 @@ export default {
   .el-input{
     width:200px
   }
-  span{
-    margin: 10px 0 10px 10px;
-  }
   .searchForm .el-form-item{
     margin-top: 1px;
     margin-bottom: 1px;