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

<template>
    <div class="main">
        <div class="search">
            <el-select v-model="mixins_query.communityId" placeholder="选择社区" clearable>
                <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-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="选择开始日期"
                end-placeholder="选择结束日期"
                @change="effectiveDateToggle"
            ></el-date-picker>

            <el-button type="primary" class="search-btn" @click="initPageData" 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="search_bottom_tab">
            <div
                class="tab_list"
                v-for="(item, index) in tabs"
                @click="toggle(index + 1)"
                :class="activeIndex == index + 1 ? 'active' : ''"
                :key="index"
            >
                {{ item.label }}{{ item.value }}元
            </div>
        </div>
        <zz-table
            :cols="activeIndex == 1 ? cols : statusCols"
            :settings="{ showIndex: true, stripe: true }"
            :loading="mixins_onQuery"
            :data="mixins_list"
            :pageset="mixins_pageset"
            @page-change="pageChange"
        >
        </zz-table>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            cols: [
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '房间',
                    prop: 'assets'
                },
                {
                    label: '充值时间',
                    prop: 'createDate'
                },
                {
                    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 '其他';
                        }
                    }
                },
                {
                    label: '充值人姓名',
                    prop: 'userName'
                },
                {
                    label: '手机号',
                    prop: 'phone'
                },
                {
                    label: '充值金额(元)',
                    prop: 'amount'
                },
                {
                    label: '备注',
                    prop: 'remark'
                }
            ],
            statusCols: [
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '房间',
                    prop: 'assets'
                },
                {
                    label: '扣费时间',
                    prop: 'createDate'
                },
                {
                    label: '上期读数',
                    prop: 'previousReading'
                },
                {
                    label: '本期读数',
                    prop: 'currentReading'
                },
                {
                    label: '用电量(度)',
                    prop: 'volume'
                },
                {
                    label: '扣费金额(元)',
                    prop: 'amount'
                }
            ],
            tabs: [
                {
                    label: '充值金额：',
                    value: '0'
                },
                {
                    label: '扣费金额：',
                    value: '0'
                }
            ],
            activeIndex: 1,
            mixins_post: 'post',
            times: [],
            communityArr: []
        };
    },
    created() {
        this.mixins_dataUrl = '/sc-charge/payment/record/page';
        this.mixins_query = {
            accountType: 3,
            paymentType: 1
        };
        this.initPageData();
        this.getorgTree();
    },
    mounted() {},
    methods: {
        toggle(index) {
            this.activeIndex = index;
            this.mixins_query.paymentType = index;
            this.mixins_search();
        },
        initPageData() {
            this.getSun(1);
            this.getSun(2);
            this.mixins_search();
        },
        getSun(type) {
            this.$http
                .post('/sc-charge/payment/record/sum/amount', {
                    accountType: 3,
                    paymentType: type,
                    communityId: this.mixins_query.communityId,
                    endTime: this.mixins_query.endTime,
                    startTime: this.mixins_query.startTime
                })
                .then(({ data, status, msg }) => {
                    if (status == 0) {
                        if (type == 1) {
                            this.tabs[0].value = data;
                        } else if (type == 2) {
                            this.tabs[1].value = data;
                        }
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        exportExcel() {
            this.__exportExcel('/sc-charge/payment/record/export/excel', this.mixins_query);
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.mixins_query.startTime = !!arr[0] ? arr[0] + ' 00:00:00' : '';
            this.mixins_query.endTime = !!arr[1] ? arr[1] + ' 23:59:59' : '';
        },
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        }
    }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
.search_bottom_tab {
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    .tab_list {
        display: inline-block;
        border-bottom: 1px solid transparent;
        cursor: pointer;
        color: #424656;
        &:not(:last-child) {
            margin-right: 40px;
        }
        &.active {
            color: $mainTextColor;
            border-color: $mainTextColor;
        }
    }
}
</style>