yunxi
/
jigangSCM2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

采购订单 打印功能

Browse Source
jg-waiwang-pro
qiuhongwu 4 months ago
parent 9aa7620aa6
commit 8ad209404c
2 changed files with 192 additions and 316 deletions
Show Stats Download Patch File Download Diff File

505
jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/Bill.vue
Unescape View File

@ -1,133 +1,68 @@
<template>
<transition name="el-zoom-in-center">
<div class="JNPF-preview-main">
<!-- <div class="JNPF-preview-main">
<div class="JNPF-common-page-header">
<el-page-header @back="goBack" content="打印预览" />
<div class="options">
<el-button type="primary" @click="dataFormSubmit()"> 保 存</el-button>
<el-button @click="goBack"> 取 消</el-button>
</div>
</div>
</div> -->
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="visible = false">{{ $t('common.cancelButton') }}</el-button>
<el-button type="primary" @click="select()">{{ $t('common.confirmButton') }}</el-button>
</span> -->
<div ref="print">
<div class='wrapper'>
<h1 style="text-align: center">{{bill.title}}</h1>
<p style="font-weight: bold">业务部门:{{bill.name}}</p>
<table border="1" cellspacing="0" width="100%">
<tr bgcolor="#6495ed" style="line-height: 44px" >
<td colspan="1" rowspan="2">订单日期</td>
<td colspan="5" rowspan="2">${creatorTime!""}</td>
<td colspan="3" rowspan="2">对方合同编号</td>
<td colspan="5" rowspan="2">${contractNo!""}</td>
<td colspan="4" rowspan="2">合同编号</td>
<td colspan="5" rowspan="2">${contractCode!""}</td>
</tr>
<tr bgcolor="#6495ed" style="">
</tr>
<tr bgcolor="#6495ed" style="line-height: 44px">
<td colspan="1" rowspan="2">供货单位</td>
<td colspan="22" rowspan="2">${supplierName!""}</td>
</tr>
<tr bgcolor="#6495ed" style="">
</tr>
<tr bgcolor="#6495ed" style="line-height: 22px">
<td colspan="3">订单号</td>
<td colspan="1" style="text-align: center">行号</td>
<td colspan="5">物料名称、规格型号</td>
<td colspan="2">数量</td>
<td colspan="2">单位</td>
<td colspan="3">单价（元/含税）</td>
<td colspan="3" >金额（元/含税）</td>
<td colspan="1">税率</td>
</tr>
<tr>
</tr>
<#if reportList?? && (reportList?size>0)>
<#list reportList as reportData>
<#if reportData??>
<tr bgcolor="#6495ed" style="line-height: 22px">
<td colspan="3" style="text-align: center">${documentNo!""}</td>
<td colspan="1" style="text-align: center">${reportData_index+1!""}</td>
<td colspan="5" style="text-align: center">${reportData.itemName!""}</td>
<td colspan="2" style="text-align: center">${reportData.settlement!""}</td>
<td colspan="2" style="text-align: center">${reportData.unit!""}</td>
<td colspan="3" style="text-align: center">${reportData.price?string["0.######"]!""}</td>
<td colspan="3" style="text-align: center">
${reportData.amount!""}
</td>
<td colspan="1" style="text-align: center">${reportData.rate!""}</td>
</tr>
<tr>
</tr>
</#if>
</#list>
</#if>
<tr bgcolor="#6495ed" style="line-height: 22px">
<td colspan="3">合计</td>
<td colspan="1"></td>
<td colspan="5"></td>
<td colspan="2" style="text-align: center">${settlementSum!""}</td>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3" style="text-align: center">${amountSum!""}</td>
<td colspan="1"></td>
</tr>
</table>
<br/>
<br/>
</div>
<!-- <div class="bill">
<h1 class="bill-title">水电费用清单汇总</h1>
<el-table :data="tableData" border id="bill1">
<el-table-column prop="month" label="月份"> </el-table-column>
<el-table-column label="2015" width="80">
<el-table-column label="电费" prop="electric1"></el-table-column>
<el-table-column label="水费" prop="waterFee1"></el-table-column>
</el-table-column>
<el-table-column label="2016" width="80">
<el-table-column label="电费" prop="electric2"></el-table-column>
<el-table-column label="水费" prop="waterFee2"></el-table-column>
</el-table-column>
<el-table-column label="2017" width="80">
<el-table-column label="电费" prop="electric3"></el-table-column>
<el-table-column label="水费" prop="waterFee3"></el-table-column>
</el-table-column>
<el-table-column label="2018" width="80">
<el-table-column label="电费" prop="electric4"></el-table-column>
<el-table-column label="水费" prop="waterFee4"></el-table-column>
</el-table-column>
</el-table>
</div> -->
<el-dialog :visible.sync="dialogVisible" title="打印预览" width="32cm">
<div ref="print" class="print-wrap">
<div class='page'>
<h1 style="text-align: center">{{bill.title}}</h1>
<p style="font-weight: bold">业务部门:{{bill.name}}</p>
<table border="1" cellspacing="0" width="100%">
<tr style="line-height: 44px">
<td colspan="1" rowspan="2">订单日期</td>
<td colspan="5" rowspan="2">{{bill.creatorTime}}</td>
<td colspan="3" rowspan="2">对方合同编号</td>
<td colspan="5" rowspan="2">{{bill.contractNo}}</td>
<td colspan="4" rowspan="2">合同编号</td>
<td colspan="5" rowspan="2">{{bill.contractCode}}</td>
</tr>
<tr style="">
</tr>
<tr style="line-height: 44px">
<td colspan="1" rowspan="2">供货单位</td>
<td colspan="22" rowspan="2">{{bill.supplierName}}</td>
</tr>
<tr style="">
</tr>
<tr style="line-height: 22px">
<td colspan="3">订单号</td>
<td colspan="1" style="text-align: center">行号</td>
<td colspan="5">物料名称、规格型号</td>
<td colspan="2">数量</td>
<td colspan="2">单位</td>
<td colspan="3">单价（元/含税）</td>
<td colspan="3">金额（元/含税）</td>
<td colspan="1">税率</td>
</tr>
<tr v-for="(item, index) in bill.reportList" :key="index">
<td colspan="3">{{bill.documentNo}}</td>
<td colspan="1" style="text-align: center">{{index+1}}</td>
<td colspan="5">{{item.itemName}}</td>
<td colspan="2">{{item.settlement}}</td>
<td colspan="2">{{item.unit}}</td>
<td colspan="3">{{item.price}}</td>
<td colspan="3">{{item.amount}}</td>
<td colspan="1">{{item.rate}}</td>
</tr>
<tr style="line-height: 22px">
<td colspan="3">合计</td>
<td colspan="1"></td>
<td colspan="5"></td>
<td colspan="2" style="text-align: center">{{bill.settlementSum}}</td>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3" style="text-align: center">{{bill.amountSum}}</td>
<td colspan="1"></td>
</tr>
</table>
<br />
<br />
</div>
</div>
</transition>
<div style="text-align: right;">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="onPrint">打 印</el-button>
</div>
</el-dialog>
</template>
<script>
@ -139,140 +74,8 @@ import printStyle from './printStyle'
export default {
data() {
return {
tableData: [
{
month: "1月份",
electric1: "968.00",
electric2: "734.00",
electric3: "737.00",
electric4: "651.00",
waterFee1: "144.00",
waterFee2: "241.00",
waterFee3: "234.00",
waterFee4: "179.00",
},
{
month: "2月份",
electric1: "968.00",
electric2: "734.00",
electric3: "737.00",
electric4: "651.00",
waterFee1: "144.00",
waterFee2: "241.00",
waterFee3: "234.00",
waterFee4: "179.00",
},
{
month: "3月份",
electric1: "968.00",
electric2: "734.00",
electric3: "737.00",
electric4: "651.00",
waterFee1: "144.00",
waterFee2: "241.00",
waterFee3: "234.00",
waterFee4: "179.00",
},
{
month: "4月份",
electric1: "968.00",
electric2: "734.00",
electric3: "737.00",
electric4: "651.00",
waterFee1: "144.00",
waterFee2: "241.00",
waterFee3: "234.00",
waterFee4: "179.00",
},
{
month: "5月份",
electric1: "968.00",
electric2: "734.00",
electric3: "737.00",
electric4: "651.00",
waterFee1: "144.00",
waterFee2: "241.00",
waterFee3: "234.00",
waterFee4: "179.00",
},
{
month: "6月份",
electric1: "968.00",
electric2: "734.00",
electric3: "737.00",
electric4: "651.00",
waterFee1: "144.00",
waterFee2: "241.00",
waterFee3: "234.00",
waterFee4: "179.00",
},
{
month: "7月份",
electric1: "837.00",
electric2: "518.00",
electric3: "737.00",
electric4: "651.00",
waterFee1: "144.00",
waterFee2: "241.00",
waterFee3: "234.00",
waterFee4: "179.00",
},
{
month: "8月份",
electric1: "938.00",
electric2: "976.00",
electric3: "923.00",
electric4: "856.00",
waterFee1: "180.00",
waterFee2: "103.00",
waterFee3: "285.00",
waterFee4: "215.00",
},
{
month: "9月份",
electric1: "938.00",
electric2: "976.00",
electric3: "923.00",
electric4: "856.00",
waterFee1: "180.00",
waterFee2: "103.00",
waterFee3: "285.00",
waterFee4: "215.00",
},
{
month: "10月份",
electric1: "938.00",
electric2: "976.00",
electric3: "923.00",
electric4: "856.00",
waterFee1: "180.00",
waterFee2: "103.00",
waterFee3: "285.00",
waterFee4: "215.00",
},
{
month: "11月份",
electric1: "938.00",
electric2: "976.00",
electric3: "923.00",
electric4: "856.00",
waterFee1: "180.00",
waterFee2: "103.00",
waterFee3: "285.00",
waterFee4: "215.00",
},
{
month: "12月份",
electric1: "938.00",
electric2: "976.00",
electric3: "923.00",
electric4: "856.00",
waterFee1: "180.00",
waterFee2: "103.00",
waterFee3: "285.00",
waterFee4: "215.00",
},
],
dialogVisible: false,
visible: false,
listLoading: true,
keyword: '',
@ -296,68 +99,142 @@ export default {
}
},
methods: {
goBack() {
this.$emit('refresh')
onPrint() {
// 拿到打印页面dom节点
const printNode = document.querySelector('.print-wrap')
if (!printNode) return
// 页面文档创建一个空的内框架，用于挂载打印节点，并设置一定的样式
const newIframe = document.createElement('iframe')
newIframe.setAttribute(
'style',
'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
)
newIframe.setAttribute('align', 'center')
document.body.appendChild(newIframe)
// 将打印页面设置为内框架内容
let doc = null
doc = newIframe.contentWindow.document
doc.write(`
<style type="text/css">
/* 浏览器打印基本样式 */
.page {
// height: 29.7cm;
// width: 21cm;
padding: 10mm;
margin: 20px auto;
border: 1px #d3d3d3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: relative;
font-size: 14px !important;
}
@page {
size: A4 landscape;
margin:1cm;
}
@media print {
.page {
margin:5mm 10mm;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
table {
width: 100%; /* 让表格宽度100%占满其父元素宽度 */
height: auto; /* 高度根据内容自适应 */
font-size: 12px;
text-align: center;
border-collapse: collapse;
td {
padding: 10px 0;
border: 1px solid #333;
}
}
</style>
<div>
${printNode.innerHTML}
</div>`)
doc.close()
// 浏览器打印页面打开渲染
setTimeout(() => {
newIframe.contentWindow.focus()
newIframe.contentWindow.print()
document.body.removeChild(newIframe) // 移除打印内框架，下次打印下次再挂载
dialogVisible.value = false
}, 100)
},
init(bill) {
this.bill = bill
this.visible = true
let print = this.$refs.print.innerHTML
let printPart = print + printStyle;
let newTab = window.open('_blank');
newTab.document.body.innerHTML = printPart;
newTab.print();
newTab.close();
this.visible = false
},
refresh() {
this.keyword = ''
this.listQuery.currentPage = 1
this.listQuery.pageSize = 20
this.listQuery.sort = "desc"
this.listQuery.sidx = ""
this.init()
console.log(this.bill);
this.dialogVisible = true;
},
search() {
this.listQuery.currentPage = 1
this.listQuery.pageSize = 20
this.listQuery.sort = "desc"
this.listQuery.sidx = ""
this.init()
handleClose() {
this.dialogVisible = false;
},
select() {
if (!this.checked.length) return
this.visible = false
this.$emit('refreshDataList', this.checked)
},
handleSelectionChange(val) {
this.checked = val
}
}
}
</script>
<style lang="scss" scoped>
.JNPF-preview-main {
font-family: SimSun;
margin:0;
overflow:hidden;
}
tr{
font-size: 12px;
}
.wrapper{
transform: rotate(90deg);
transform-origin:bottom left;
position:absolute;
top: -100vw;
left: 0;
height:100vw;
width:100vh;
.JNPF-preview-main {
font-family: SimSun;
margin: 0;
overflow: hidden;
}
tr {
font-size: 12px;
}
.page {
// width: 21cm;
// min-height: 29.7cm;
width: 29.7cm;
height: 21cm;
padding: 10mm;
margin: 20px auto;
border: 1px #d3d3d3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
position: relative;
font-size: 14px !important;
}
@page {
size: A4;
margin: 0;
}
@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
table {
width: 100%; /* 让表格宽度100%占满其父元素宽度 */
height: auto; /* 高度根据内容自适应 */
font-size: 14px;
text-align: center;
border-collapse: collapse;
margin-top: 5mm; /* 添加顶部外边距，替代原先的页内边距 */
td {
padding: 10px 0;
border: 1px solid #333;
}
}
overflow:auto;
}
/*
A4的大小：21cm*29.7cm（width:794px;）。
单位换算：1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
</style>

3
jnpf-java-boot/jnpf-web/src/views/scm/purchaseCenter/purchaseOrder/index.vue
Unescape View File

@ -227,8 +227,7 @@
</template>
<el-button size="mini" type="text"
@click="downLoadPDF(scope.row.code)">开票文件下载</el-button>
<!-- <el-button size="mini" type="text"
@click="printPDF(scope.row.code)">打印</el-button> -->
<el-button size="mini" type="text" @click="printPDF(scope.row.code)">打印</el-button>
<!-- <template v-if="scope.row.yunguanMark !== '200'">
<el-button size="mini" type="text" @click="repush(scope.row.id)">重新推送</el-button>
</template> -->

Write Preview
Loading…
Cancel
Save