MicroCommunityWeb/public/pages/property/reportFeeBreakdown/reportFeeBreakdown.html
2021-11-18 23:39:08 +08:00

189 lines
11 KiB
HTML
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class=" animated fadeInRight ecommerce">
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-title">
<h5>查询条件</h5>
<div class="ibox-tools" style="top:10px;">
<!-- <button type="button" class="btn btn-link btn-sm" style="margin-right:10px;"
v-on:click="_moreCondition()">{{reportFeeBreakdownInfo.moreCondition == true?'隐藏':'更多'}}
</button> -->
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-4">
<div class="form-group input-group">
<input type="text" placeholder="请选择楼栋"
v-model="reportFeeBreakdownInfo.conditions.floorName" class=" form-control">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary btn-sm"
v-on:click="_openChooseFloorMethod()">
<i class="fa fa-search"></i> 选择
</button>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<select class="form-control-md form-control input-s-sm inline"
v-model="reportFeeBreakdownInfo.conditions.unitId">
<option selected value="">请选择单元</option>
<option v-for="(unit,index) in reportFeeBreakdownInfo.roomUnits" :key="index"
v-bind:value="unit.unitId">
{{unit.unitNum}}单元
</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<input type="text" placeholder="请填写年份月份如202109" class="form-control form-control-md"
v-model="reportFeeBreakdownInfo.conditions.yearMonth">
</div>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-primary btn-md" v-on:click="_queryMethod()">
<i class="fa fa-search"></i> 查询
</button>
<button type="button" class="btn btn-info btn-md" v-on:click="_resetMethod()"
style="margin-left: 20px;">
<i class="fa fa-repeat"></i> 重置
</button>
</div>
</div>
<!-- <div class="row" v-show="reportFeeBreakdownInfo.moreCondition == true">
<div class="col-sm-4">
<div class="form-group">
<select class="form-control-md form-control input-s-sm inline"
v-model="reportFeeBreakdownInfo.conditions.configId">
<option selected value="">请选择收费项</option>
<option v-for="(item,index) in reportFeeBreakdownInfo.feeConfigDtos" :key="index"
:value="item.configId">
{{item.feeName}}
</option>
</select>
</div>
</div>
<div class="col-sm-3">
<div class="form-group input-group">
<input type="text" placeholder="请选择缴费开始时间"
v-model="reportFeeBreakdownInfo.conditions.startTime"
class=" form-control startTime">
</div>
</div>
<div class="col-sm-3">
<div class="form-group input-group">
<input type="text" placeholder="请选择缴费结束时间"
v-model="reportFeeBreakdownInfo.conditions.endTime"
class=" form-control endTime">
</div>
</div>
</div> -->
<div class="row">
<!--费用类型-->
<div class="col-sm-4">
<select class="custom-select" v-model="reportFeeBreakdownInfo.conditions.feeTypeCd">
<option selected value="">请选择费用类型</option>
<option v-for="(item,index) in reportFeeBreakdownInfo.feeTypeCds" :key="index"
v-bind:value="item.statusCd">{{item.name}}
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="ibox">
<div class="ibox-title">
<h5>费用分项表</h5>
<div class="ibox-tools" style="top:10px;">
<button type="button" class="btn btn-primary btn-sm" v-on:click="_exportExcel()">
<i class="fa fa-plus"></i>导出
</button>
</div>
</div>
<div class="ibox-content">
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="15">
<thead>
<tr>
<th class="text-center">费用编号</th>
<th class="text-center">费用类型</th>
<th class="text-center">费用项</th>
<th class="text-center">历史欠费(单位:元)</th>
<th class="text-center">当月应收(单位:元)</th>
<th class="text-center">应收合计(单位:元)</th>
<th class="text-center">当月实收(单位:元)</th>
<th class="text-center">欠费追回(单位:元)</th>
<th class="text-center">预交费用(单位:元)</th>
<th class="text-center">实收合计(单位:元)</th>
<th class="text-center">欠费金额(单位:元)</th>
<th class="text-center">更新时间</th>
</tr>
</thead>
<tbody>
<tr v-for="(fee,index) in reportFeeBreakdownInfo.fees">
<td class="text-center">{{index+1}}</td>
<td class="text-center">{{fee.feeTypeCd}}</td>
<td class="text-center">{{fee.feeName}}</td>
<td class="text-center">{{fee.hisOweAmount}}</td>
<td class="text-center">{{fee.curReceivableAmount}}</td>
<td class="text-center">{{_computeSum(fee.hisOweAmount,fee.curReceivableAmount)}}</td>
<td class="text-center">{{fee.curReceivedAmount}}</td>
<td class="text-center">{{fee.hisOweReceivedAmount}}</td>
<td class="text-center">{{fee.preReceivedAmount}}</td>
<td class="text-center">{{_computeSum(_computeSum(fee.hisOweReceivedAmount,fee.preReceivedAmount),fee.curReceivedAmount)}}</td>
<td class="text-center">{{_computeOweFee(fee)}}</td>
<td class="text-center">{{fee.updateTime}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7">
<ul class="pagination float-right"></ul>
</td>
</tr>
</tfoot>
</table>
<!-- 分页 -->
<div class="row">
<span class="col-md-1 margin-left">
<div class="row"><b>小计</b></div>
<div class="row"><b>大计</b></div>
</span>
<span class="col-md-2">
<div class="row">应收: {{reportFeeBreakdownInfo.totalReceivableAmount}}元</div>
<div class="row">应收: {{reportFeeBreakdownInfo.allReceivableAmount}}元</div>
</span>
<span class="col-md-2">
<div class="row">实收: {{reportFeeBreakdownInfo.totalReceivedAmount}}元</div>
<div class="row">实收: {{reportFeeBreakdownInfo.allReceivedAmount}}元</div>
</span>
<span class="col-md-2">
<div class="row">欠费: {{_computeTotalOweAmount()}}元</div>
<div class="row">欠费: {{reportFeeBreakdownInfo.allOweAmount}}元</div>
</span>
<span class="col-md-2">
<div class="row">欠费追回: {{_computeTotalHisOweReceivedAmount()}}元</div>
<div class="row">欠费追回: {{reportFeeBreakdownInfo.allHisOweReceivedAmount}}元</div>
</span>
</div>
<div class="row margin-top-xs">
<div class="col-sm-9">
<div> 欠费金额 = 历史欠费 + 当月应收 - 当月实收 - 欠费追回</div>
<div> 历史欠费:当月之前欠费;当月应收:当前月收费;当月实收:当月收到中属于当前月应收费用部分;</div>
<div> 欠费追回:当月收到中属于历史欠费部分;预交费用:当月收到中属于预交费用部分</div>
</div>
<div class="col-sm-3 float-right">
<vc:create path="frame/pagination"></vc:create>
</div>
</div>
</div>
</div>
</div>
</div>
<vc:create path="property/searchFloor" emitChooseFloor="reportFeeBreakdown" emitLoadData="xx"></vc:create>
</div>