SmartCommunity/operationSupport/src/views/payService/statisticalReport/propertyFeeStatistics.vue

<template>
    <div class="main">
        <div class="search">
            <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-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
            <div class="search-icon">
                <el-tooltip class="item" effect="light" placement="bottom" content="导出">
                    <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
                </el-tooltip>
            </div>
        </div>
        <div class="table-top">
            {{ `${new Date().getFullYear()}年${thisObjCommunit['communityName']}缴纳物业管理费情况表` }}
        </div>
        <zz-table
            :cols="cols"
            :settings="{ showIndex: false, stripe: true, summaryCol: summaryColData, hideFoot: true }"
            :loading="mixins_onQuery"
            :summaryData="{}"
            :data="mixins_list"
        >
            <template slot-scope="scope" slot="quarter">
                <span v-if="scope.row.quarter === 1">缴第一季度(1-3月) </span>
                <span v-if="scope.row.quarter === 2">缴第二季度(4-6月)</span>
                <span v-if="scope.row.quarter === 3">缴第三季度(7-9月) </span>
                <span v-if="scope.row.quarter === 4">缴第四季度(10-12月) </span>
                <span v-if="scope.row.quarter === 5">缴纳{{ new Date().getFullYear() }}年之前欠费</span>
            </template>
        </zz-table>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            cols: [
                {
                    label: '缴费情况',
                    prop: 'quarter',
                    slot: 'quarter'
                },
                {
                    label: '01月',
                    prop: 'january'
                },
                {
                    label: '02月',
                    prop: 'february'
                },
                {
                    label: '03月',
                    prop: 'march'
                },
                {
                    label: '04月',
                    prop: 'april'
                },
                {
                    label: '05月',
                    prop: 'may'
                },
                {
                    label: '06月',
                    prop: 'june'
                },
                {
                    label: '07月',
                    prop: 'july'
                },
                {
                    label: '08月',
                    prop: 'august'
                },
                {
                    label: '09月',
                    prop: 'september'
                },
                {
                    label: '10月',
                    prop: 'october'
                },
                {
                    label: '11月',
                    prop: 'november'
                },
                {
                    label: '12月',
                    prop: 'december'
                },
                {
                    label: '合计',
                    prop: 'total'
                }
            ],
            mixins_post: 'get',
            summaryColData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
            communityArr: [],
            thisObjCommunit: {}
        };
    },
    created() {
        new Promise((resolve) => {
            this.getorgTree(resolve);
        }).then(() => {
            this.mixins_dataUrl = '/sc-charge/charge/report/months/list';
            this.mixins_query = {
                chargeType: 1,
                year: new Date().getFullYear(),
                communityId: this.thisObjCommunit.id
            };
            this.mixins_search();
        });
    },
    mounted() {},
    methods: {
        exportExcel() {
            this.__exportExcel('/sc-charge/charge/report/months/export/excel', this.mixins_query);
        },
        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();
                }
            });
        },
        getList() {
            if (!this.mixins_dataUrl) {
                this.mixins_onQuery = false;
                return;
            }
            let data = Object.assign({}, this.mixins_pageset, this.mixins_query);
            this.mixins_onQuery = true;

            this.$http[this.mixins_post](this.mixins_dataUrl, data)
                .then(({ status, data, msg }) => {
                    this.mixins_onQuery = false;
                    if (0 === status) {
                        this.mixins_list = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch((err) => {
                    this.mixins_onQuery = false;
                });
        }
    }
};
</script>
<style lang="scss" scoped>
.table-top {
    height: 60px;
    line-height: 60px;
    background: white;
    text-align: center;
}
</style>