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>