Project-Annex/operationSupport/src/views/payService/expenseReport/Electricity.vue

<template>
    <div class="main">
        <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'
        };
    },
    created() {
        this.mixins_dataUrl = '/sc-charge/payment/record/page';
        this.mixins_query.accountType = 3;
        this.mixins_query.paymentType = 1;
        Object.assign(this.mixins_query, this.$parent.mixins_query);
        this.getSun(1);
        this.getSun(2);
        this.mixins_search();
    },
    mounted() {},
    methods: {
        toggle(index) {
            this.activeIndex = index;
            this.mixins_query.paymentType = index;
            this.mixins_search();
        },
        getSun(type) {
            this.$http
                .post('/sc-charge/payment/record/sum/amount', { accountType: 3, paymentType: type })
                .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(() => {});
        },
        getParent(query) {
            Object.assign(this.mixins_query, query);
            this.mixins_search();
        },
        exportExcel() {
            this.__exportExcel('/sc-charge/payment/record/export/excel', this.mixins_query);
        }
    }
};
</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>