打印当前页面，关闭当前页面
window.print()打印
window.close()关闭
<template>
<div class="lookDetail" style="page-break-after: always;page-break-before:always;">
<br />
<div v-if="!printPage" style="margin-left:1120px">
<Button type="warning" v-if="this.$store.state.user.permissionList['报销单详情'].operationVOS.expense_list"
@click="exportDetails()" style="margin-right: 5px;">导出</Button>
<Button type="primary" v-if="this.$store.state.user.permissionList['报销单详情'].operationVOS.expense_list"
@click="print()">打印</Button>
</div>
<br />
<div style="width:780px;margin: 0 auto;">
<h2 class="title">样衣报销明细表</h2>
<Table :columns="columns" highlight-row :data="listData" size="default" ref="table" border>
</Table>
<div style="text-align:right;margin-top:10px">
<span>日期：</span>
<span style="margin-right:15px;">{{default_date}}</span>
<span>制表人：</span>
<span>{{default_name}}</span>
</div>
</div>
<br />
<br />
<br />
<br />
<Modal v-model="modal" title="更改报销金额">
<input type="text" v-model="changeReimbursement" autofocus="autofocus" placeholder="请输入更改金额..." style="padding-left: 3px;"/>
<div slot="footer">
<Button type="text" size="large" @click="modalCancel">取消</Button>
<Button type="primary" size="large" @click="modalOk">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import imgUpload from '@/view/components/imgUpload.vue'
import Expense from '@/api/expense.js'
import axios from 'axios'
export default {
components: {
imgUpload
},
data() {
return {
modal:false,
printPage: false,
id: this.$route.query.id,
listData: [],
default_date: '',
default_name: '',
imgUrl: [],
num:'',
changeReimbursement:'',
columns: [
{
type: 'index',
title: '序号',
align: 'center',
width: 35,
height: 70,
},
{
title: '样衣图片',
key: 'imgUrl',
align: 'center',
width: 100,
render: (h, params) => {
return h('img', {
attrs: {
class: 'sampleImg',
src: this.listData[params.index].imgSrc
}
})
}
},
{
title: '样衣编码',
key: 'sampleDressCode',
align: 'center',
width: 102,
render:(h,params)=>{
return h('div',{
style: {
color: 'red',
cursor: 'pointer'
},
on: {
'click': (event) => {
// this.$router.push('/sample_manage/detail/'+params.row.sampleDressId)
let url = '/sample_manage/detail/' + params.row.sampleDressId
this.$router.push({ path: url})
}
}
},params.row.sampleDressCode)
},
}, {
title: '样衣名称',
key: 'sampleDressName',
align: 'center',
width: 75
}, {
title: '品类',
key: 'inventoryCategory',
align: 'center',
width: 50
}, {
title: '来源类型',
key: 'serverType',
align: 'center',
width: 65,
render: (h, params) => {
switch (params.row.styleDipartite) {
case 1:
return h('div', {}, '供款')
break;
case 2:
return h('div', {}, '采购')
break;
case 3:
return h('div', {}, '自主')
break;
case 4:
return h('div', {}, '自研')
break;
default:
break;
}
}
}, {
title: '款式来源',
key: 'styleSource',
align: 'center',
width: 70
}, {
title: '渠道来源',
key: 'channelSource ',
align: 'center',
width: 70,
render: (h, params) => {
switch (params.row.channelSource) {
case 1:
return h('div', {}, '供款公司')
break;
case 2:
return h('div', {}, '外采样衣')
break;
case 3:
return h('div', {}, '市场批发')
break;
case 4:
return h('div', {}, '看图打样')
break;
case 5:
return h('div', {}, '库存')
case 6:
return h('div', {}, '技术部')
default:
break;
}
}
}, {
title: '采购价格',
key: 'purchasePrice',
align: 'center',
width: 50
}, {
title: '件数',
key: 'quantity',
align: 'center',
width: 50
}, {
title: '报销金额',
key: 'reimbursement',
align: 'center',
width: 50,
render:(h,params)=>{
return h('div',{
style:{
color:'#2D8cF0',
cursor:'pointer'
},
on:{
click:()=>{
if(params.row.sampleDressCode === '合计'){
this.$Message.warning('不能更改合计总价')
}else{
this.modal=true
this.changeReimbursement=''
this.sampleDressId = params.row.sampleDressId
}
}
}
},params.row.reimbursement)
}
}, {
title: '备注',
key: 'updateDate',
align: 'center',
width: 60
}
],
}
},
created() {
this.printPage = this.$route.name === 'lookDetail' ? false : true
this.getList(this.id)
},
methods: {
getList(id) {
Expense.getDetailList(id).then(data => {
//计算合计
// let sun = 0
// let sun1 = 0
let total = data
// total.forEach(ele => {
// sun = sun + ele.quantity
// sun1 = sun1 + ele.reimbursement
// })
this.listData = data
let num = 0
this.listData.forEach(ele => {
if (ele.imgUrl) {
num++
axios({
url: `/file/views/${ele.imgUrl}`,
methods: 'get',
responseType: 'blob',
}).then((data) => {
let blob = data.data;
let src = window.URL.createObjectURL(blob)
// ele.imgSrc = src
this.$set(ele,'imgSrc',src)
// console.log(data)
num--
})
}
})
let interval = setInterval(()=>{
if(num === 0 && this.$route.name !== 'lookDetail'){
clearInterval(interval)
setTimeout(() => {
window.print()
},500)
}else if(num === 0){
clearInterval(interval)
}
},500)
// this.listData.push({
// sampleDressCode: '合计',
// quantity: sun,
// reimbursement: sun1,
// })
if (this.listData.length > 0) {
this.default_date = this.listData[0].createDate
this.default_name = this.listData[0].createName
}
})
},
// 打印
print() {
// window.open('#/print-expense/'+this.id+'?isp=true' + (D?'&detail=true':''))
window.open(`#/print-lookDetail?id=${this.id}`)
},
//明细导出
exportDetails(){
this.$axios({
url:'findSampleFormPrintExport/'+this.id,
method:'get',
responseType: 'blob',
}).then((data)=>{
console.log('明细导出')
const url = window.URL.createObjectURL(data.data)
const a = document.createElement('a')
a.href = url
a.download = '样衣报销明细表.xls'
document.body.appendChild(a)
a.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(a)
})
},
modalCancel(){
this.modal=false
},
modalOk(){
let amount= {
expenseAccountId:this.id,
dressBaseList:[{
purchasePrice:this.changeReimbursement,
sampleDressId:this.sampleDressId
}]
}
if(this.changeReimbursement == ''){
this.$Message.warning('输入价格不能为空')
}else{
Expense.updateAmount(amount).then(data => {
this.$Message.success('更改价格成功!');
this.modal=false
this.getList(this.id)
})
}
},
}
}
</script>
<style lang="less" media="print">
.lookDetail {
/* 重置taber样式 */
.ivu-table-wrapper {
border: none
}
.ivu-table table {
/* border: 1px solid #ccc */
}
.ivu-table th,
.ivu-table td {
border: 1px solid #ddd;
}
.ivu-table:after {
background-color: transparent
}
.ivu-table:before {
background-color: transparent
}
/* 编辑表格 */
.title {
width: 778px;
height: 45px;
text-align: center;
line-height: 45px;
border: 1px solid #ccc;
}
.ivu-table-cell {
padding: 0px
}
.ivu-table-column-center {
.ivu-table-cell {
.sampleImg {
width: 80px;
height: 80px;
padding-top: 5px;
}
}
}
.ivu-table-tbody tr:last-child img {
display: none;
}
}
</style>
