|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
<div class="search">
|
|
|
- <el-input class="search-input" v-model="mixins_query.name" placeholder="输入业主/房间号"></el-input>
|
|
|
- <el-select v-model="mixins_query.communityId" placeholder="选择社区" clearable>
|
|
|
+ <el-input class="search-input" v-model="mixins_query.likeValue" placeholder="输入业主/房间号" clearable></el-input>
|
|
|
+ <el-select v-model="mixins_query.communityId" placeholder="选择社区" @change="communityChange">
|
|
|
<el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
|
|
|
</el-select>
|
|
|
<el-date-picker
|
|
|
@@ -13,6 +13,7 @@
|
|
|
start-placeholder="选择开始日期"
|
|
|
end-placeholder="选择结束日期"
|
|
|
@change="effectiveDateToggle"
|
|
|
+ :clearable="false"
|
|
|
></el-date-picker>
|
|
|
|
|
|
<el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
|
|
|
@@ -23,13 +24,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table-top">
|
|
|
- <div class="table-top_block">
|
|
|
- <div>海逸一号收费统计</div>
|
|
|
- <div>2021年1月-2021年3月</div>
|
|
|
+ <div class="table-top_block title">
|
|
|
+ <div>{{ thisObjCommunit['communityName'] }}收费统计</div>
|
|
|
+ <div>{{ timeFiterType() }}</div>
|
|
|
</div>
|
|
|
<div class="table-top_block blockColor" v-for="item in blockArr" :key="item">
|
|
|
+ <div class="number">{{ item.val }}</div>
|
|
|
<div>{{ item.label }}</div>
|
|
|
- <div>{{ item.val }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<zz-table
|
|
|
@@ -40,6 +41,9 @@
|
|
|
:pageset="mixins_pageset"
|
|
|
@page-change="pageChange"
|
|
|
>
|
|
|
+ <template slot-scope="scope" :slot="'type' + index" v-for="(item, index) in blockArr">
|
|
|
+ <div :key="index" class="111">{{ scope.row['details'][index].amount }}</div>
|
|
|
+ </template>
|
|
|
</zz-table>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -49,6 +53,7 @@ import list from '@utils/list.js';
|
|
|
export default {
|
|
|
mixins: [list],
|
|
|
data() {
|
|
|
+ let _this = this;
|
|
|
return {
|
|
|
cols: [
|
|
|
{
|
|
|
@@ -57,97 +62,74 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
label: '房间',
|
|
|
- prop: 'assets'
|
|
|
+ prop: 'houseDetail'
|
|
|
},
|
|
|
{
|
|
|
label: '业主',
|
|
|
- prop: 'createDate'
|
|
|
+ prop: 'residentName'
|
|
|
},
|
|
|
{
|
|
|
label: '物业费标准(元/月)',
|
|
|
- prop: 'paymentMethod',
|
|
|
- format(val) {
|
|
|
- if (val == '1') {
|
|
|
- return '微信';
|
|
|
- } else if (val == '2') {
|
|
|
- return '支付宝';
|
|
|
- } else if (val == '3') {
|
|
|
- return '现金';
|
|
|
- } else if (val == '4') {
|
|
|
- return '预存';
|
|
|
- } else if (val == '5') {
|
|
|
- return '其他';
|
|
|
- }
|
|
|
- }
|
|
|
+ prop: 'chargingStandard'
|
|
|
},
|
|
|
{
|
|
|
label: '月数',
|
|
|
- prop: 'userName'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '物业费(元)',
|
|
|
- prop: 'phone'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '水费(元)',
|
|
|
- prop: 'amount'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '电费(元)',
|
|
|
- prop: 'remark'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '车位管理费(元)',
|
|
|
- prop: 'remark'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '卫生费(元)',
|
|
|
- prop: 'remark'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '电梯维修费(元)',
|
|
|
- prop: 'remark'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '外墙砖维修费(元)',
|
|
|
- prop: 'remark'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '摩托租赁费(元)',
|
|
|
- prop: 'remark'
|
|
|
+ prop: 'months'
|
|
|
},
|
|
|
{
|
|
|
label: '合计',
|
|
|
- prop: 'remark'
|
|
|
+ prop: 'totalAmount'
|
|
|
}
|
|
|
],
|
|
|
mixins_post: 'post',
|
|
|
times: [],
|
|
|
communityArr: [],
|
|
|
- blockArr: [
|
|
|
- { label: '总收费', val: '11111' },
|
|
|
- { label: '物业费', val: '11111' },
|
|
|
- { label: '水费', val: '11111' },
|
|
|
- { label: '电费', val: '11111' },
|
|
|
- { label: '车位管理费', val: '11111' },
|
|
|
- { label: '卫生费', val: '11111' },
|
|
|
- { label: '其他费用', val: '11111' }
|
|
|
- ]
|
|
|
+ blockArr: [],
|
|
|
+ thisObjCommunit: {}
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.mixins_dataUrl = '/sc-charge/payment/record/page';
|
|
|
- this.mixins_query = {
|
|
|
- accountType: 2,
|
|
|
- paymentType: 1
|
|
|
- };
|
|
|
- this.mixins_search();
|
|
|
- this.getorgTree();
|
|
|
+ let thisDay = this.$moment(new Date()).format('YYYY-MM');
|
|
|
+ this.times = [thisDay, thisDay];
|
|
|
+ new Promise((resolve) => {
|
|
|
+ this.getorgTree(resolve);
|
|
|
+ }).then(() => {
|
|
|
+ this.initSearchData(thisDay);
|
|
|
+ this.mixins_dataUrl = '/sc-charge/charge/report/page';
|
|
|
+ this.mixins_search();
|
|
|
+ });
|
|
|
},
|
|
|
mounted() {},
|
|
|
+ watch: {
|
|
|
+ mixins_list(val) {
|
|
|
+ if (!!val) {
|
|
|
+ if (val.length) {
|
|
|
+ let arr = [{ label: '总收费', val: val[0].totalAmount }];
|
|
|
+ val[0].details.map((item, index) => {
|
|
|
+ arr.push({ label: item.chargeName, val: item.amount });
|
|
|
+ this.cols.splice(4 + index, 0, {
|
|
|
+ label: item.chargeName,
|
|
|
+ prop: 'type' + index,
|
|
|
+ slot: 'type' + index
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.blockArr = arr;
|
|
|
+ } else {
|
|
|
+ this.blockArr = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ initSearchData(time) {
|
|
|
+ this.mixins_query = {
|
|
|
+ communityId: this.thisObjCommunit.id,
|
|
|
+ startTime: time,
|
|
|
+ endTime: time
|
|
|
+ };
|
|
|
+ },
|
|
|
exportExcel() {
|
|
|
- this.__exportExcel('/sc-charge/payment/record/export/excel', this.mixins_query);
|
|
|
+ this.__exportExcel('/sc-charge/charge/report/export/excel', this.mixins_query);
|
|
|
},
|
|
|
effectiveDateToggle(va) {
|
|
|
let arr = va;
|
|
|
@@ -156,16 +138,42 @@ export default {
|
|
|
}
|
|
|
this.mixins_query.startTime = arr[0];
|
|
|
this.mixins_query.endTime = arr[1];
|
|
|
+ this.mixins_search();
|
|
|
},
|
|
|
- getorgTree() {
|
|
|
+ getorgTree(resolve) {
|
|
|
this.$http
|
|
|
.get('/sc-community/assets/community/list')
|
|
|
.then((data) => {
|
|
|
this.communityArr = data.data;
|
|
|
+ this.thisObjCommunit = this.communityArr[0];
|
|
|
this.$store.commit('setAreaSelect', data.data);
|
|
|
+ resolve && resolve();
|
|
|
})
|
|
|
|
|
|
.catch(function () {});
|
|
|
+ },
|
|
|
+ communityChange(e) {
|
|
|
+ this.communityArr.find((item) => {
|
|
|
+ if (item.id == e) {
|
|
|
+ this.thisObjCommunit = item;
|
|
|
+ this.mixins_search();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ timeFiterType() {
|
|
|
+ let arr = this.times;
|
|
|
+ let text = '';
|
|
|
+ if (!arr) {
|
|
|
+ arr = ['', ''];
|
|
|
+ }
|
|
|
+ let f = new Date(arr[0]).getMonth(),
|
|
|
+ l = new Date(arr[1]).getMonth();
|
|
|
+ if (f == l) {
|
|
|
+ text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}`;
|
|
|
+ } else {
|
|
|
+ text = `${this.$moment(new Date(arr[0])).format('YYYY年M月')}-${this.$moment(new Date(arr[1])).format('YYYY年M月')}`;
|
|
|
+ }
|
|
|
+ return text;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -179,15 +187,29 @@ export default {
|
|
|
padding: 10px 0;
|
|
|
.table-top_block {
|
|
|
height: 60px;
|
|
|
- line-height: 30px;
|
|
|
+ line-height: 20px;
|
|
|
text-align: center;
|
|
|
-
|
|
|
margin-left: 20px;
|
|
|
+ &.title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #0eaeff;
|
|
|
+ line-height: 27px;
|
|
|
+ border-right: 1px solid #eee;
|
|
|
+ padding-right: 60px;
|
|
|
+ }
|
|
|
&.blockColor {
|
|
|
width: 150px;
|
|
|
- background: $mainTextColor;
|
|
|
- color: white;
|
|
|
- border-radius: 5px;
|
|
|
+ text-align: left;
|
|
|
+ border-right: 1px solid #eee;
|
|
|
+ &:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 33px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
Shannon_mu