SmartCommunity/operationSupport/src/views/payService/ChargebackRecord.vue

<template>
    <div class="main">
        <div class="search">
            <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="mixins_search" icon="el-icon-search">查询 </el-button>
        </div>
        <div class="table-top">
            <div class="name">
                {{ name }} <span class="totle">扣费总金额：{{ balance || '-' }} 元</span>
            </div>
        </div>
        <div class="roles-wrap">
            <zz-table
                :cols="cols"
                :settings="{ showIndex: true, stripe: true }"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
            >
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            cols: [
                {
                    label: '扣费时间',
                    prop: 'createDate'
                },
                {
                    label: '上期读数',
                    prop: 'previousReading'
                },
                {
                    label: '本期读数',
                    prop: 'currentReading'
                },
                {
                    label: '用水量(吨)',
                    prop: 'volume'
                },
                {
                    label: '扣费金额(元)',
                    prop: 'amount'
                },
                {
                    label: '水费余额(元)',
                    prop: 'balance'
                }
            ],
            mixins_post: 'post',
            times: '',
            balance: '',
            name: ''
        };
    },
    created() {
        this.mixins_dataUrl = '/sc-charge/payment/record/page';
        if (this.$route.query) {
            const { accountType, name, paymentType, id } = this.$route.query;
            this.name = name;
            let typeName = '水';
            let Quantity = '用水量(吨)';
            if (accountType == 1) {
                typeName = '物业';
            } else if (accountType == 2) {
                typeName = '水';
                Quantity = '用水量(吨)';
            } else if (accountType == 3) {
                typeName = '电';
                Quantity = '用电量(度)';
            }
            this.cols[3].label = Quantity;
            this.cols[5].label = typeName + '费余额(元)';
            this.publicData = {
                accountType: accountType,
                paymentType: paymentType,
                houseId: id
            };
            this.mixins_query = this.publicData;
            this.getSun();
            this.mixins_search();
        }
    },
    mounted() {},
    methods: {
        getSun() {
            this.$http
                .post('/sc-charge/payment/record/sum/amount', this.publicData)
                .then(({ data, status, msg }) => {
                    if (status == 0) {
                        this.balance = data;
                    } else {
                        this.$message.error(msg);
                    }
                })
                .catch(() => {});
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.mixins_query.startTime = arr[0] + ' 00:00:00';
            this.mixins_query.endTime = arr[1] + ' 23:59:59';
        }
    }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
.table-top {
    width: 1660px;
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    font-size: 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    padding-left: 20px;
    color: #424656;
    .totle {
        font-size: 12px;
        margin-left: 40px;
    }
}
</style>