|
@@ -0,0 +1,229 @@
|
|
|
+<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="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="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.getSun(1);
|
|
|
+ this.getSun(2);
|
|
|
+ this.mixins_search();
|
|
|
+ this.getorgTree();
|
|
|
+ },
|
|
|
+ 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(() => {});
|
|
|
+ },
|
|
|
+ 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] + ' 00:00:00';
|
|
|
+ this.mixins_query.endTime = 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>
|