picviewer

This commit is contained in:
chenjianan
2018-12-25 16:23:24 +08:00
parent f5c56f1cac
commit 2154b69223
3 changed files with 39 additions and 40 deletions

View File

@@ -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",

View File

@@ -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 ''

View File

@@ -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-col>
<el-col :span="8">
</el-form-item><br>
<el-form-item label="接收时间">
{{ scope.row.接收时间 ? scope.row.接收时间 : '—' }}
</el-form-item>
</el-col>
<el-col :span="8">
</el-form-item><br>
<el-form-item label="发票号">
{{ scope.row.发票号 ? scope.row.发票号 : '—' }}
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
</el-form-item><br>
<el-form-item label="开户行">
{{ scope.row.开户行 ? scope.row.开户行 : '—' }}
</el-form-item>
</el-col>
<el-col :span="8">
</el-form-item><br>
<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;