优化 代码

public/components/property/reportHuaningOweFeeDetail/reportHuaningOweFeeDetail.html

@@ -0,0 +1,44 @@
+<div>
+    <div class="margin-top">
+        <div class="row">
+            <div class="col-sm-12 margin-lr-0 padding-lr-0">
+                <table class="footable table table-stripped " style="margin-top:10px" data-page-size="10">
+                    <thead>
+                        <tr>
+                            <th class="text-center " style="border-bottom: none;">房号</th>
+                            <th class="text-center" style="border-bottom: none;">面积</th>
+                            <th class="text-center " style="border-bottom: none;">单价</th>
+                            <th class="text-center " style="border-bottom: none;">月收费</th>
+                            <th class="text-center " style="border-bottom: none;">费用开始时间</th>
+                            <th class="text-center " style="border-bottom: none;">费用截止时间</th>
+                            <th class="text-center " style="border-bottom: none;">总未收金额</th>
+                            <th class="text-center " style="border-bottom: none;">2021年1-7月未收金额</th>
+                            <th class="text-center " style="border-bottom: none;">2021年前未收金额</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="fee in reportHuaningOweFeeDetailInfo.fees">
+                            <td class="text-center ">{{fee.payerObjName}}</td>
+                            <td class="text-center ">{{fee.builtUpArea}}</td>
+                            <td class="text-center ">{{fee.squarePrice}}</td>
+                            <td class="text-center">{{_getMonthFee(fee)}}</td>
+                            <td class="text-center">{{fee.startTime}}</td>
+                            <td class="text-center">{{fee.endTime}}</td>
+                            <td class="text-center">{{fee.oweAmount}}</td>
+                            <td class="text-center">{{fee.btAmount}}</td>
+                            <td class="text-center">{{fee.bfAmount}}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-5">
+                <span> </span>
+            </div>
+            <div class="col-sm-7 float-right">
+                <vc:create namespace="reportHuaningOweFeeDetail" path="frame/paginationPlus"></vc:create>
+            </div>
+        </div>
+    </div>
+</div>

public/components/property/reportHuaningOweFeeDetail/reportHuaningOweFeeDetail.js

@@ -0,0 +1,81 @@
+/**
+ 入驻小区
+ **/
+(function (vc) {
+    var DEFAULT_PAGE = 1;
+    var DEFAULT_ROWS = 10;
+    vc.extends({
+        data: {
+            reportHuaningOweFeeDetailInfo: {
+                fees: [],
+                listColumns: [],
+                roomId: '',
+                roomName: '',
+                conditions: {
+                    year: new Date().getFullYear(),
+                    month: new Date().getMonth() + 1
+                },
+                dateStr: vc.dateFormat(new Date().getTime())
+            }
+        },
+        _initMethod: function () {
+        },
+        _initEvent: function () {
+            //切换 至费用页面
+            vc.on('reportHuaningOweFeeDetail', 'switch', function (_param) {
+                $that.clearReportHuaningOweFeeDetailInfo();
+                $that.reportHuaningOweFeeDetailInfo.conditions = _param;
+                $that._listReportHuaningOweFeeDetail(DEFAULT_PAGE, DEFAULT_ROWS);
+            });
+            vc.on('reportHuaningOweFeeDetail', 'notify', function () {
+                $that._listReportHuaningOweFeeDetail(DEFAULT_PAGE, DEFAULT_ROWS);
+            });
+            vc.on('reportHuaningOweFeeDetail', 'paginationPlus', 'page_event',
+                function (_currentPage) {
+                    vc.component._listReportHuaningOweFeeDetail(_currentPage, DEFAULT_ROWS);
+                });
+        },
+        methods: {
+            _listReportHuaningOweFeeDetail: function (_page, _row) {
+                $that.reportHuaningOweFeeDetailInfo.conditions.page = _page;
+                $that.reportHuaningOweFeeDetailInfo.conditions.row = _row;
+                $that.reportHuaningOweFeeDetailInfo.conditions.communityId = vc.getCurrentCommunity().communityId;
+                let param = {
+                    params: $that.reportHuaningOweFeeDetailInfo.conditions
+                };
+                //发送get请求
+                vc.http.apiGet('/reportFeeMonthStatistics/queryHuaningOweFeeDetail',
+                    param,
+                    function (json) {
+                        let _feeConfigInfo = JSON.parse(json);
+                        vc.component.reportHuaningOweFeeDetailInfo.total = _feeConfigInfo.total;
+                        vc.component.reportHuaningOweFeeDetailInfo.records = _feeConfigInfo.records;
+                        vc.component.reportHuaningOweFeeDetailInfo.fees = _feeConfigInfo.data;
+                        vc.emit('reportHuaningOweFeeDetail', 'paginationPlus', 'init', {
+                            total: _feeConfigInfo.records,
+                            currentPage: _page
+                        });
+                    }, function () {
+                        console.log('请求失败处理');
+                    }
+                );
+            },
+            clearReportHuaningOweFeeDetailInfo: function () {
+                $that.reportHuaningOweFeeDetailInfo = {
+                    fees: [],
+                    roomId: '',
+                    roomName: '',
+                    name: '',
+                    conditions: {
+                        year: new Date().getFullYear(),
+                        month: new Date().getMonth() + 1
+                    },
+                    dateStr: vc.dateFormat(new Date().getTime())
+                }
+            },
+            _getMonthFee: function (_fee) {
+                return (_fee.builtUpArea * _fee.squarePrice).toFixed(2);
+            }
+        }
+    });
+})(window.vc);

public/pages/property/reportHuaning/reportHuaning.html

@@ -87,6 +87,10 @@
                     <a class="nav-link" v-bind:class="{active:reportHuaningInfo._currentTab == 'reportHuaningPayFeeTwo'}"
                         v-on:click="changeTab('reportHuaningPayFeeTwo')">当月收费情况表2</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" v-bind:class="{active:reportHuaningInfo._currentTab == 'reportHuaningOweFeeDetail'}"
+                        v-on:click="changeTab('reportHuaningOweFeeDetail')">物业费欠费明细表</a>
+                </li>
             </ul>
         </div>
         <div v-if="reportHuaningInfo._currentTab == 'reportHuaningOweFee'">
@@ -99,5 +103,9 @@
         <div v-if="reportHuaningInfo._currentTab == 'reportHuaningPayFeeTwo'">
             <vc:create path="property/reportHuaningPayFeeTwo"></vc:create>
         </div>
+        <div v-if="reportHuaningInfo._currentTab == 'reportHuaningOweFeeDetail'">
+            <vc:create path="property/reportHuaningOweFeeDetail"></vc:create>
+        </div>
+        
     </div>
 </div>