qzyReal
/
pco


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>打印收费明细</title>
		<style type="text/css">
			@page {
				size: A4 portrait;
				margin: 19mm 25mm 15mm 25mm;
			}

			.print-btn {
				color: white;
				background: #2D8CF0;
				border: none;
				border-radius: 3px;
				padding: 5px 10px;
				font-size: 10px;
				margin: 10px 20px;
				cursor: pointer;
			}

			.content-box {
				text-align: center;
				height: 1123px;
				width: 794px;
				margin: 0 auto;
			}

			table {
				border-collapse: collapse;
				border-spacing: 0;
				border-left: 1px solid #888;
				border-top: 1px solid #888;
			}

			th,
			td {
				border-right: 1px solid #888;
				border-bottom: 1px solid #888;
				word-break: break-all;
				padding: 0 2px;
			}

			th {
				/* font-weight: bold; */
			}

			.title-top {
				margin-top: 248px;
			}
			.hide-border{
				border-bottom-style:none;
				border-left-style:none;
				border-right-style: none;
			}
			tr td:first-child {
			  border-left: none;
			}
		</style>
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="../../static/kj/vue.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/print/jquery-2.0.3.js" type="text/javascript"></script>
		<script src="../../static/print/print2.js" type="text/javascript"></script>
		<script src="../../static/kj/layer/layer.js"></script>
		<script src="../../static/sa.js"></script>

	</head>

	<body>
		<div>
			<div class="box">
				<button class="print-btn" @click="printFn">打印</button>
				<div id="myPrintArea" style="position: relative;">
					<div class="content-box" style="position: relative;" v-for="(item,index) in dataList"
						:key="index" :class="index>0?'title-top':''" >
						<div class="header-title" style="text-align: center;" v-if="index==0">
							<span
								style="font-size: 20px;font-weight: 500;font-family: 黑体;">东兴口岸（二桥）进口货物集散区（A1地块)预存款余额表</span>
						
						</div>
						<table style="margin: 0 auto;text-align: center;width: 790px;" >
							<div
								style="text-align: left;width: 790px;margin: auto;padding: 5px 0;font-family: 黑体;font-weight: 500;">
								<span colspan="9">单位：广西东兴北投口岸投资有限公司
								<span style="margin-left: 10px;">期间：{{item.time}}</span>
								<span style="margin-left: 10px;">金额单位：元</span></span>
								
							</div>
							<tr style="height: 60px;font-size:10px;">
								<th style="min-width: 30px;">序号</th>
								<th style="width: 180px;">企业名称</th>
								<th style="min-width: 60px;"> 期初余额</th>
								<th style="min-width: 60px;">本期充值</th>
								<th style="min-width: 60px;">本期扣除</th>
								<th style="min-width: 60px;">余额退款</th>
								<th style="min-width: 60px;">异常退款</th>
								<th style="width: 70px;">期末余额</th>
							</tr>
							<tr v-for="(cel,i) in item.list" :key="cel.index" style="height:60px;font-size: 10px;">
								<td>{{i+1}}</td>
								<td>{{cel.customerName}}</td>
								<td>{{cel.beginMoney}}</td>
								<td>{{cel.chargeMoney}}</td>
								<td>{{cel.deuctionMoney}}</td>
								<td>{{cel.balanceRefundMoney}}</td>
								<td>{{cel.errorRefundMoney}}</td>
								<td>{{cel.endMoney}}</td>
							</tr>
							<tr style="height: 40px;padding: 0 0.5px;" v-if="index==dataList.length-1">
								<td></td>
								<td>合计</td>
								<td>{{totalInit}}</td>
								<td>{{totalCharge}}</td>
								<td>{{totalDeuctionMoney}}</td>
								<td>{{totalRefundMoney}}</td>
								<td>{{totalErrorRefund}}</td>
								<td>{{totalEnd}}</td>
							</tr>
						<!-- 	<tr style="height: 40px;padding: 0 0.5px;" v-if="index==dataList.length-1">
								<td class="hide-border"></td>
								<td class="hide-border"></td>
								<td class="hide-border">统计稽核员：</td>
								<td class="hide-border"></td>
								<td class="hide-border">复核员：</td>
								<td class="hide-border"></td>
								<td class="hide-border">开单员：</td>
								<td class="hide-border"></td>
							</tr> -->
						</table>
						<div>
							<div style="display: flex;margin-top: 15px;">
								<div style="flex: 2;text-align: right;margin-right: 50px;">统计稽核员：</div>
								<div style="flex: 1;">复核员：</div>
								<div style="flex: 1;margin-right: 20px;">开单员：</div>
							</div>
						</div>
						<span style="position: absolute;top: 1250px;left: 750px">{{index+1}}/{{dataList.length}}</span>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '.box',
				data: {
					p: {
						"beginTime": sa.p('bDay', ''),
						"endTime": sa.p('eDay', ''),
						"customerName": sa.p('customerName', '')
					},
					dataList: [],
					allDayFee: 0,
					allDayTaxes: 0,
					allDayNoTaxFee: 0,
					totalCharge:0,
					totalInit:0,
					totalDeuctionMoney:0,
					totalRefundMoney:0,
					totalErrorRefund:0,
					totalEnd:0
				},
				methods: {
					getDataList() {
						sa.ajax('/TbAccount/getBalance/list', this.p, function(resp) {
							var list = resp.data;
							let len = list.length;
							let child = [];
							let dataList = [];
							let totalCharge=0;
							let totalInit=0;
							let totalDeuctionMoney=0;
							let totalRefundMoney=0;
							let totalErrorRefund=0;
							let totalEnd=0;
							for (i = 0; i < len; i++) {
								let item = list[i];
								child.push(item);
								totalInit+=item.beginMoney;
								totalCharge+=item.chargeMoney;
								totalDeuctionMoney+=item.deuctionMoney;
								totalRefundMoney+=item.balanceRefundMoney;
								totalErrorRefund+=item.errorRefundMoney;
								totalEnd+=item.endMoney;
								if (child.length == 18 || i == len - 1) {
									let title = {
										time: this.p.beginTime + '至' + this.p.endTime,
										list: child
									}
									dataList.push(title);
									child = [];
								}
							
							}
							this.dataList = dataList;
							this.totalCharge=totalCharge;
							this.totalInit=totalInit;
							this.totalDeuctionMoney=totalDeuctionMoney;
							this.totalErrorRefund=totalErrorRefund;
							this.totalRefundMoney=totalRefundMoney;
							this.totalEnd=totalEnd;
							// sa.loading("准备打印...");
							// setTimeout(() => {
							// 	this.printFn();
							// 	sa.hideLoading();
							// }, 2000)
						}.bind(this))
					},
					printFn() {
						Print('#myPrintArea', {
							noPrint: '.noPrint'
						});
					}
				},
				mounted() {
					this.getDataList();
				}
			})
		</script>


	</body>
</html>