printPayFeeTianlin.md
14.4 KB
html
<div>
<div class="top-1 flex justify-between ">
<div class="top-left" style="width: 80%;">
<h1 class="text-center" style="color:#000;font-weight: 400;">{{printPayFeeInfo.storeName}}收据单</h1>
<div class="flex justify-around" style="color:#000;font-size:20px">
<div style="width: 25%;">小区名称：{{printPayFeeInfo.communityName}}</div>
<div style="width: 25%;">栋号：{{printPayFeeInfo.roomInfo.floorNum}}栋</div>
<div style="width: 25%;">建筑面积：{{printPayFeeInfo.fees && printPayFeeInfo.fees.length>0?printPayFeeInfo.fees[0].area:'无'}}</div>
</div>
<div class="flex justify-around" style="color:#000;font-size:20px">
<div style="width: 25%;">户主姓名：{{printPayFeeInfo.payObjName}}</div>
<div style="width: 25%;">房号：{{printPayFeeInfo.roomInfo.roomNum}}</div>
<div style="width: 25%;">房屋编号：{{printPayFeeInfo.fees && printPayFeeInfo.fees.length>0?printPayFeeInfo.fees[0].objName:'无'}}</div>
</div>
</div>
<div class="top-right">
<img :src="printPayFeeInfo.qrImg" width="100px" height="100px">
</div>
</div>
<div class="context-1">
<table class="table vc-table-border" style="color:#000;font-size:20px">
<thead>
<tr>
<th scope="col" class="text-center" width="80px"><span><vc:i18n name="费用名称" namespace="printPayFeeBangTai"></vc:i18n></span></th>
<th scope="col" class="text-center"><span><vc:i18n name="起始日期" namespace="printPayFeeBangTai"></vc:i18n></span></th>
<th scope="col" class="text-center"><span><vc:i18n name="结束日期" namespace="printPayFeeBangTai"></vc:i18n></span></th>
<th scope="col" class="text-center"><span><vc:i18n name="上期读数" namespace="printPayFeeBangTai"></vc:i18n></span></th>
<th scope="col" class="text-center"><span><vc:i18n name="本期读数" namespace="printPayFeeBangTai"></vc:i18n></span></th>
<th scope="col" class="text-center"><span><vc:i18n name="本期用量" namespace="printPayFeeBangTai"></vc:i18n></span></th>
<th scope="col" class="text-center"><span><vc:i18n name="单位" namespace="printPayFeeBangTai"></vc:i18n></span></th>
<th scope="col" class="text-center"><span><vc:i18n name="单价" namespace="printPayFeeBangTai"></vc:i18n></span></th>
<th scope="col" class="text-center"><span><vc:i18n name="小计(元)" namespace="printPayFeeBangTai"></vc:i18n></span></th>
</tr>
</thead>
<tbody class="vc-table-border" style="color:#000;font-size:20px">
<tr v-for="(item,index) in printPayFeeInfo.fees" class="vc-table-border">
<td scope="row" class="text-center">{{item.feeName}}</td>
<td class="text-center">{{vc.dateFormat(item.startTime)}}</td>
<td class="text-center">{{vc.dateFormat(item.endTime)}}</td>
<td class="text-center" v-if="item.preDegrees">{{item.preDegrees}} </td>
<td class="text-center" v-else>-</td>
<td class="text-center" v-if="item.preDegrees">{{item.curDegrees}}</td>
<td class="text-center" v-else>-</td>
<td class="text-center" v-if="item.preDegrees">{{item.curDegrees - item.preDegrees}}</td>
<td class="text-center" v-else>-</td>
<td class="text-center">{{item.units}}</td>
<td class="text-center">{{item.squarePrice}}</td>
<td class="text-center">{{item.amount}}</td>
</tr>
<tr>
<td colspan="5" class="text-right "><span><vc:i18n name="合计：" namespace="printPayFeeBangTai"></vc:i18n></span></td>
<td colspan="3" class="text-center ">{{vc.changeNumMoneyToChinese(printPayFeeInfo.amount)}}
</td>
<td class="text-center ">{{printPayFeeInfo.amount}}</td>
</tr>
<tr>
<td scope="row" class="text-center">物业费预存日期</td>
<td scope="row" class="text-center"></td>
<td scope="row" class="text-center">上期预存</td>
<td scope="row" class="text-center">0.00</td>
<td scope="row" class="text-center">预存剩余</td>
<td scope="row" class="text-center">0.00</td>
<td colspan="2" scope="row" class="text-center">抵扣预存后应缴</td>
<td scope="row" class="text-center">{{printPayFeeInfo.amount}}</td>
</tr>
<tr height="60px">
<td scope="row" class="text-center">备注1</td>
<td colspan="8">
<p>
<!-- {{printPayFeeInfo.content}} -->
<div v-html="printPayFeeInfo.content"></div>
</p>
</td>
</tr>
<tr height="60px">
<td scope="row" class="text-center">备注2</td>
<td colspan="8">
<p>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-around " style="color:#000;font-size:20px">
<div style="width: 20%;">制单人：{{printPayFeeInfo.userName}}</div>
<div style="width: 20%;">复核人：</div>
<div style="width: 20%;">客服管家：</div>
<div style="width: 20%;">缴费方式：{{printPayFeeInfo.fees && printPayFeeInfo.fees.length>0?printPayFeeInfo.fees[0].primeRate:'无'}}</div>
</div>
<div class="flex justify-around " style="color:#000;font-size:20px">
<div style="width: 20%;">日期：{{vc.dateFormat(new Date())}}</div>
<div style="width: 20%;"></div>
<div style="width: 20%;">手机/微信号：</div>
<div style="width: 20%;">实缴日期：{{printPayFeeInfo.feeTime}}</div>
</div>
<div class="text-right margin-top" style="color:#000;font-size:20px">
<div>{{printPayFeeInfo.storeName}}</div>
<div>物业服务中心</div>
</div>
<div class="text-right" id="print-btn">
<button class="btn btn-primary float-right" type="button" v-on:click="_printPurchaseApplyDiv()">
<i class="fa fa-check"></i> 打印
</button>
<button type="button" class="btn btn-warning float-right" style="margin-right:20px;" v-on:click="_closePage()"><span><vc:i18n name="取消" namespace="printPayFeeBangTai"></vc:i18n></span>
</button>
</div>
</div>
js
(function(vc) {
vc.extends({
data: {
printPayFeeInfo: {
communityName: '',
receiptId: '',
receiptIds: '',
detailIds: '',
roomName: '',
amount: 0.00,
fees: [],
feeTime: '',
wechatName: '',
content: '',
qrImg: '',
payObjName: '',
feeReceipt: [],
apply: 'N',
userName: vc.getData('/nav/getUserInfo').name,
storeName: '',
roomInfo: {
}
},
printFlag: '0'
},
_initMethod: function() {
//vc.component._initPrintPurchaseApplyDateInfo();
$that.printPayFeeInfo.receiptId = vc.getParam('receiptId');
$that.printPayFeeInfo.receiptIds = vc.getParam('receiptIds');
$that.printPayFeeInfo.detailIds = vc.getParam('detailIds');
$that.printPayFeeInfo.apply = vc.getParam('apply');
$that.printPayFeeInfo.merge = vc.getParam('merge');
//$that.printPayFeeInfo.feeTime = vc.dateTimeFormat(new Date());
$that.printPayFeeInfo.communityName = vc.getCurrentCommunity().name;
$that._loadReceipt();
$that._loadPrintSpec();
},
_initEvent: function() {
},
methods: {
_initPayFee: function() {
},
_loadReceipt: function() {
var param = {
params: {
page: 1,
row: 30,
receiptId: $that.printPayFeeInfo.receiptId,
receiptIds: $that.printPayFeeInfo.receiptIds,
detailIds: $that.printPayFeeInfo.detailIds,
communityId: vc.getCurrentCommunity().communityId
}
};
//发送get请求
vc.http.apiGet('/feeReceipt/queryFeeReceipt',
param,
function(json, res) {
var _feeReceiptManageInfo = JSON.parse(json);
let _feeReceipt = _feeReceiptManageInfo.data;
let _amount = 0;
_feeReceipt.forEach(item => {
_amount += parseFloat(item.amount)
});
$that.printPayFeeInfo.amount = _amount.toFixed(2);
$that.printPayFeeInfo.roomName = _feeReceipt[0].objName;
$that.printPayFeeInfo.feeTime = _feeReceipt[0].createTime;
//$that.printPayFeeInfo.receiptNum = _feeReceipt[0].receiptId;
$that.printPayFeeInfo.payObjName = _feeReceipt[0].payObjName;
$that.printPayFeeInfo.storeName = _feeReceipt[0].storeName;
$that.printPayFeeInfo.feeReceipt = _feeReceipt;
$that.listRoom(_feeReceipt[0].objId);
$that._loadReceiptDetail();
},
function(errInfo, error) {
console.log('请求失败处理');
}
);
},
_loadReceiptDetail: function() {
let param = {
params: {
page: 1,
row: 100,
receiptId: $that.printPayFeeInfo.receiptId,
receiptIds: $that.printPayFeeInfo.receiptIds,
detailIds: $that.printPayFeeInfo.detailIds,
communityId: vc.getCurrentCommunity().communityId,
mergeFee:$that.printPayFeeInfo.merge
}
};
//发送get请求
vc.http.apiGet('/feeReceipt/queryFeeReceiptDetail',
param,
function(json, res) {
var _feeReceiptManageInfo = JSON.parse(json);
let _feeReceiptDetails = _feeReceiptManageInfo.data;
$that.printPayFeeInfo.receiptNum = _feeReceiptDetails[0].receiptId + "(" + _feeReceiptDetails[0].payOrderId + ")";
_feeReceiptDetails.forEach(item => {
$that.printPayFeeInfo.feeReceipt.forEach(im => {
if (item.receiptId == im.receiptId) {
item.objName = im.objName;
item.feeTypeCd = im.feeTypeCd;
}
})
})
$that.printPayFeeInfo.fees = _feeReceiptDetails;
},
function(errInfo, error) {
console.log('请求失败处理');
}
);
},
_loadPrintSpec: function() {
var param = {
params: {
page: 1,
row: 1,
specCd: 2020,
communityId: vc.getCurrentCommunity().communityId
}
};
//发送get请求
vc.http.apiGet('/feePrintSpec/queryFeePrintSpec',
param,
function(json, res) {
var _json = JSON.parse(json);
var _data = _json.data;
if (_data.length > 0) {
$that.printPayFeeInfo.content = _data[0].content;
$that.printPayFeeInfo.qrImg = _data[0].qrImg;
if (_data[0].printName) {
$that.printPayFeeInfo.communityName = _data[0].printName;
}
}
},
function(errInfo, error) {
console.log('请求失败处理');
}
);
},
_printPurchaseApplyDiv: function() {
$that.printFlag = '1';
console.log('console.log($that.printFlag);', $that.printFlag);
document.getElementById("print-btn").style.display = "none"; //隐藏
window.print();
//$that.printFlag = false;
window.opener = null;
window.close();
},
_closePage: function() {
window.opener = null;
window.close();
},
listRoom: function(_roomId) {
let param = {
params: {
page: 1,
row: 1,
communityId: vc.getCurrentCommunity().communityId,
roomId: _roomId
}
};
//发送get请求
vc.http.apiGet('/room.queryRooms',
param,
function(json, res) {
let listRoomData = JSON.parse(json);
if (!listRoomData.rooms || listRoomData.rooms.length < 1) {
return;
}
vc.component.printPayFeeInfo.roomInfo = listRoomData.rooms[0];
},
function(errInfo, error) {
console.log('请求失败处理');
}
);
},
}
});
})(window.vc);