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

<template>
    <div class="main">
        <div class="search">
            <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
                v-model="times"
                value-format="yyyy-MM"
                type="monthrange"
                range-separator="至"
                start-placeholder="选择开始日期"
                end-placeholder="选择结束日期"
                @change="effectiveDateToggle"
                :clearable="false"
            ></el-date-picker>

            <el-button type="primary" class="search-btn" @click="initSearchAll" 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">
            <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>
        </div>
        <zz-table
            :cols="cols"
            :settings="{ showIndex: true, stripe: true }"
            :loading="mixins_onQuery"
            :data="mixins_list"
            :updateFlag="true"
            :pageset="mixins_pageset"
            @page-change="pageChange"
        >
            <template slot-scope="scope" :slot="item.md5Key" v-for="(item, index) in tableInsert">
                <div :key="index">
                    {{ activeName(item, scope.row['details']) }}
                </div>
            </template>
        </zz-table>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        let _this = this;
        return {
            cols: [
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '房间',
                    prop: 'houseDetail'
                },
                {
                    label: '业主',
                    prop: 'residentName'
                },
                {
                    label: '物业费标准(元/月)',
                    prop: 'chargingStandard'
                },
                {
                    label: '月数',
                    prop: 'months'
                },
                {
                    label: '合计',
                    prop: 'totalAmount'
                }
            ],
            mixins_post: 'post',
            times: [],
            communityArr: [],
            blockArr: [],
            tableInsert: [],
            thisObjCommunit: {}
        };
    },
    created() {
        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.initSearchAll();
        });
    },
    mounted() {},
    methods: {
        initSearchData(time) {
            this.mixins_query = {
                communityId: this.thisObjCommunit.id,
                startTime: time,
                endTime: time
            };
        },
        initSearchAll() {
            new Promise((resolve) => {
                this.getTopTable(resolve);
            }).then(() => {
                this.mixins_search();
            });
        },
        typeName(item) {
            let name = '';
            switch (item.chargeType) {
                case 1:
                    name = '物业费';
                    break;
                case 2:
                    name = '水费';
                    break;
                case 3:
                    name = '电费';
                    break;
                case 4:
                    name = '车位费';
                    break;
                case 6:
                    name = '卫生费';
                    break;
                case 7:
                    name = item.chargeName;
                    break;
            }
            return name;
        },
        activeName(item, arr) {
            let amount = '--';
            arr.map((its) => {
                if (its.md5Key == item.md5Key) {
                    amount = its.amount;
                }
            });
            return amount;
        },
        exportExcel() {
            this.__exportExcel('/sc-charge/charge/report/export/excel', this.mixins_query);
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.mixins_query.startTime = arr[0];
            this.mixins_query.endTime = arr[1];
            this.initSearchAll();
        },
        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 () {});
        },
        getTopTable(resolve) {
            this.cols = [
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '房间',
                    prop: 'houseDetail'
                },
                {
                    label: '业主',
                    prop: 'residentName'
                },
                {
                    label: '物业费标准(元/月)',
                    prop: 'chargingStandard'
                },
                {
                    label: '月数',
                    prop: 'months'
                },
                {
                    label: '合计',
                    prop: 'totalAmount'
                }
            ];
            let tableInsert = [];
            this.$http.post('/sc-charge/charge/report/total', this.mixins_query).then(({ data, status, msg }) => {
                if (status == 0) {
                    if (!!data && data.details.length) {
                        let arr = [{ label: '总收费', val: data.totalAmount }];
                        data.details.map((item, index) => {
                            arr.push({ label: this.typeName(item), val: item.amount });
                            tableInsert.push({
                                md5Key: item.md5Key
                            });
                            this.cols.splice(5 + index, 0, {
                                label: this.typeName(item),
                                slot: item.md5Key
                            });
                        });
                        this.tableInsert = tableInsert;
                        this.blockArr = arr;
                    } else {
                        this.tableInsert = [];
                        this.blockArr = [];
                    }
                }
                resolve && resolve();
            });
        },
        communityChange(e) {
            this.communityArr.find((item) => {
                if (item.id == e) {
                    this.thisObjCommunit = item;
                    this.initSearchAll();
                }
            });
        },
        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;
        }
    }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
.table-top {
    display: flex;
    // margin-bottom: 20px;
    background: white;
    padding: 10px 0;
    .table-top_block {
        height: 60px;
        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 {
            min-width: 150px;
            text-align: left;
            border-right: 1px solid #eee;
            &:last-child {
                border: none;
            }
            .number {
                font-size: 24px;
                font-weight: 600;
                line-height: 33px;
            }
        }
    }
}
</style>