加入 东莞市 天麟物业 打印收据 单

This commit is contained in:
java110 2022-08-01 10:51:59 +08:00
parent d5b7d9896f
commit 26c1f04f3e
3 changed files with 314 additions and 4 deletions

View File

@ -0,0 +1,106 @@
<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.dateSubOneDay(vc.dateFormat(item.startTime),vc.dateFormat(item.endTime),item.feeFlag)}}</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">m2</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>东莞市天麟物业管理有限公司</div>
<div>物业服务中心</div>
</div>
</div>

View File

@ -0,0 +1,205 @@
(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.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() {
var param = {
params: {
page: 1,
row: 100,
receiptId: $that.printPayFeeInfo.receiptId,
receiptIds: $that.printPayFeeInfo.receiptIds,
detailIds: $that.printPayFeeInfo.detailIds,
communityId: vc.getCurrentCommunity().communityId
}
};
//发送get请求
vc.http.apiGet('/feeReceipt/queryFeeReceiptDetail',
param,
function(json, res) {
var _feeReceiptManageInfo = JSON.parse(json);
let _feeReceiptDetails = _feeReceiptManageInfo.data;
_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);

View File

@ -17,6 +17,7 @@
<!-- SUMMERNOTE 富文本组件-->
<link href="/css/plugins/summernote/summernote-bs4.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/vc-ui.css" />
<link rel="stylesheet" href="/css/vc.css" />
<link rel="stylesheet" href="/css/plugins/bootstrap-submenu/bootstrap-submenu.css">
<script src="/js/bootstrap/jquery-3.3.1.min.js"></script>
@ -50,11 +51,9 @@
<body class="vc-body" style="background-color: #fff;">
<vc:create path="frame/bodyTop"></vc:create>
<div class="vc">
<div id="vc-page" style="margin-left: 0;background-color: #FFF;min-height: 0vh;"
class="gray-bg dashbard-1 vc-page-height">
<div id="vc-page" style="margin-left: 0;background-color: #FFF;min-height: 0vh;" class="gray-bg dashbard-1 vc-page-height">
<!-- -->
<div id="component" class="vc-wrapper vc-content animated fadeInRight" style="padding:0px"
vc-path="/common/chooseEnterCommunity">
<div id="component" class="vc-wrapper vc-content animated fadeInRight" style="padding:0px" vc-path="/common/chooseEnterCommunity">
<vc:create path="/pages/common/enterCommunity"></vc:create>
</div>
</div>