|
@@ -0,0 +1,382 @@
|
|
|
+<template>
|
|
|
+ <div class="content main">
|
|
|
+ <organ-tree @organId="currentOrganId"></organ-tree>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="search">
|
|
|
+ <el-radio-group v-model="chargeStatus" @change="changeRadio" class="zz-tab-button">
|
|
|
+ <el-radio-button label="1">未交押金</el-radio-button>
|
|
|
+ <el-radio-button label="2">已交押金</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-input
|
|
|
+ clearable
|
|
|
+ placeholder="输入客户名称/房间地址"
|
|
|
+ class="search-input"
|
|
|
+ v-trim
|
|
|
+ v-model.trim="mixins_query.likeValue"
|
|
|
+ ></el-input>
|
|
|
+
|
|
|
+ <el-select v-model="mixins_query.depositType" placeholder="押金类型" clearable>
|
|
|
+ <el-option label="装修押金" :value="1"></el-option>
|
|
|
+ <el-option label="租赁押金" :value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="times"
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ type="monthrange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="选择开始日期"
|
|
|
+ end-placeholder="选择结束日期"
|
|
|
+ @change="effectiveDateToggle"
|
|
|
+ ></el-date-picker>
|
|
|
+ <el-button class="search-btn" type="primary" @click="mixins_search()" icon="el-icon-search">搜索</el-button>
|
|
|
+ <div class="search-icon">
|
|
|
+ <el-tooltip
|
|
|
+ v-show="chargeStatus == 1 && chiData.type === 'room'"
|
|
|
+ class="item"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom"
|
|
|
+ content="新增押金"
|
|
|
+ >
|
|
|
+ <i class="zoniot_font zoniot-icon-tianjia2" @click="add()"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="light" placement="bottom" content="导出">
|
|
|
+ <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <zz-table
|
|
|
+ v-if="statusTable"
|
|
|
+ :settings="{ showIndex: true, stripe: true }"
|
|
|
+ :cols="chargeStatus == 1 ? cols : statusCols"
|
|
|
+ :data="mixins_list"
|
|
|
+ :pageset="mixins_pageset"
|
|
|
+ @page-change="pageChange"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope" slot="payBeginTime">
|
|
|
+ {{ typeTimeTransition(scope.row.payBeginTime, scope.row.payEndTime) }}
|
|
|
+ </template>
|
|
|
+ <template slot-scope="scope" slot="opt">
|
|
|
+ <div class="opt">
|
|
|
+ <el-tooltip v-if="chargeStatus == 1" class="item" effect="light" placement="bottom" content="收款">
|
|
|
+ <i class="zoniot_font zoniot-icon-shoukuan" @click="collections(scope.row)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-if="chargeStatus == 2" class="item" effect="light" placement="bottom" content="详情">
|
|
|
+ <i class="zoniot_font zoniot-icon-xiangqing" @click="lookDetails(scope.row)"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip v-if="chargeStatus == 2" class="item" effect="light" placement="bottom" content="退款">
|
|
|
+ <i class="zoniot_font zoniot-icon-tuikuan redText" @click="refund(scope.row)"></i>
|
|
|
+ <i class="zoniot_font zoniot-icon-tuikuan ashText"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </zz-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import list from '@/utils/list.js';
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [list],
|
|
|
+ name: 'propertyFee',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentId: '',
|
|
|
+ cols: [
|
|
|
+ {
|
|
|
+ label: '订单号',
|
|
|
+ prop: 'orderNumber'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '租户/业主',
|
|
|
+ prop: 'residentName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '房屋',
|
|
|
+ prop: 'assets'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '押金类型',
|
|
|
+ prop: 'depositTypeDict'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '应收金额(元)',
|
|
|
+ prop: 'amount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '缴费状态',
|
|
|
+ prop: 'paymentStatus',
|
|
|
+ format(val) {
|
|
|
+ if (val == 1) {
|
|
|
+ return '<span class="redText">未交费</span>';
|
|
|
+ } else if (val == 2) {
|
|
|
+ return '<span class="greenText">已缴费</span>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '操作',
|
|
|
+ prop: 'id',
|
|
|
+ slot: 'opt'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ statusCols: [
|
|
|
+ {
|
|
|
+ label: '订单号',
|
|
|
+ prop: 'orderNumber'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '租户/业主',
|
|
|
+ prop: 'residentName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '房屋',
|
|
|
+ prop: 'assets'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ label: '费用类型',
|
|
|
+ prop: 'depositTypeDict'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '状态',
|
|
|
+ prop: 'paymentStatus',
|
|
|
+ format(val) {
|
|
|
+ if (val == 1) {
|
|
|
+ return '<span class="redText">未交费</span>';
|
|
|
+ } else if (val == 2) {
|
|
|
+ return '<span class="greenText">已缴费</span>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '实收金额(元)',
|
|
|
+ prop: 'paymentAmount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '付款方式',
|
|
|
+ prop: 'paymentMode',
|
|
|
+ format(val) {
|
|
|
+ if (val == 1) {
|
|
|
+ return '微信';
|
|
|
+ } else if (val == 2) {
|
|
|
+ return '支付宝';
|
|
|
+ } else if (val == 3) {
|
|
|
+ return '现金';
|
|
|
+ } else if (val == 5) {
|
|
|
+ return '其他';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '退款状态',
|
|
|
+ prop: 'refundStatus',
|
|
|
+ format(val) {
|
|
|
+ if (val == 1) {
|
|
|
+ return '<span class="redText">未退款</span>';
|
|
|
+ } else if (val == 2) {
|
|
|
+ return '<span class="greenText">已退款</span>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '退款方式',
|
|
|
+ prop: 'refundMode',
|
|
|
+ format(val) {
|
|
|
+ if (val == 1) {
|
|
|
+ return '微信';
|
|
|
+ } else if (val == 2) {
|
|
|
+ return '支付宝';
|
|
|
+ } else if (val == 3) {
|
|
|
+ return '现金';
|
|
|
+ } else if (val == 5) {
|
|
|
+ return '其他';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '退款金额',
|
|
|
+ prop: 'refundAmount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '操作',
|
|
|
+ prop: 'id',
|
|
|
+ slot: 'opt'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ chargeStatus: 1,
|
|
|
+ chiData: {
|
|
|
+ type: '',
|
|
|
+ value: '',
|
|
|
+ address: ''
|
|
|
+ },
|
|
|
+ mixins_post: 'post',
|
|
|
+ thisCommObj: {},
|
|
|
+ times: [],
|
|
|
+ statusTable: true
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add() {
|
|
|
+ new Promise((resolve) => {
|
|
|
+ this.$store.dispatch('addPopup', {
|
|
|
+ url: '/payService/depositManagement/stepPage/add.vue',
|
|
|
+ width: '550px',
|
|
|
+ height: '300px',
|
|
|
+ props: {
|
|
|
+ thisCommObj: this.thisCommObj,
|
|
|
+ callback: resolve
|
|
|
+ },
|
|
|
+ title: '新增押金'
|
|
|
+ });
|
|
|
+ }).then(() => {
|
|
|
+ this.mixins_search();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ refund(row) {
|
|
|
+ new Promise((resolve) => {
|
|
|
+ this.$store.dispatch('addPopup', {
|
|
|
+ url: '/payService/depositManagement/stepPage/refund.vue',
|
|
|
+ width: '550px',
|
|
|
+ height: '400px',
|
|
|
+ props: {
|
|
|
+ data: row,
|
|
|
+ callback: resolve
|
|
|
+ },
|
|
|
+ title: '退款'
|
|
|
+ });
|
|
|
+ }).then(() => {
|
|
|
+ this.mixins_search();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ collections(row) {
|
|
|
+ new Promise((resolve) => {
|
|
|
+ this.$store.dispatch('addPopup', {
|
|
|
+ url: '/payService/depositManagement/stepPage/collections.vue',
|
|
|
+ width: '615px',
|
|
|
+ height: '400px',
|
|
|
+ props: {
|
|
|
+ data: row,
|
|
|
+ callback: resolve
|
|
|
+ },
|
|
|
+ title: '收款'
|
|
|
+ });
|
|
|
+ }).then(() => {
|
|
|
+ this.mixins_search();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ lookDetails(row) {
|
|
|
+ new Promise((resolve) => {
|
|
|
+ this.$store.dispatch('addPopup', {
|
|
|
+ url: '/payService/depositManagement/stepPage/details.vue',
|
|
|
+ width: '615px',
|
|
|
+ height: '581px',
|
|
|
+ props: {
|
|
|
+ data: row,
|
|
|
+ callback: resolve
|
|
|
+ },
|
|
|
+ showConfirmButton: true,
|
|
|
+ showCancelButton: true,
|
|
|
+ hideStar: true,
|
|
|
+ title: '账单详情'
|
|
|
+ });
|
|
|
+ }).then(() => {
|
|
|
+ this.mixins_search();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ currentOrganId(data) {
|
|
|
+ this.currentId = data || '';
|
|
|
+ },
|
|
|
+ changeRadio() {
|
|
|
+ this.statusTable = false;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.statusTable = true;
|
|
|
+ });
|
|
|
+ this.mixins_query.paymentStatus = this.chargeStatus;
|
|
|
+ this.mixins_search();
|
|
|
+ },
|
|
|
+ exportExcel() {
|
|
|
+ this.__exportExcel('/sc-charge/deposit/export/excel', this.mixins_query);
|
|
|
+ },
|
|
|
+ typeTimeTransition(start, end) {
|
|
|
+ let text = '';
|
|
|
+ if (!!end) {
|
|
|
+ let f = new Date(start).getMonth(),
|
|
|
+ l = new Date(end).getMonth();
|
|
|
+ if (f == l) {
|
|
|
+ text = `${this.$moment(new Date(start)).format('YYYY年M月')}`;
|
|
|
+ } else {
|
|
|
+ text = `${this.$moment(new Date(start)).format('YYYY年M月')}-${this.$moment(new Date(end)).format('YYYY年M月')}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return text;
|
|
|
+ },
|
|
|
+ effectiveDateToggle(va) {
|
|
|
+ let arr = va;
|
|
|
+ if (!arr) {
|
|
|
+ arr = ['', ''];
|
|
|
+ }
|
|
|
+ this.mixins_query.startTime = arr[0];
|
|
|
+ this.mixins_query.endTime = arr[1];
|
|
|
+ // this.mixins_search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ currentId(newValue, oldValue) {
|
|
|
+ this.thisCommObj = newValue;
|
|
|
+ this.mixins_query.communityId = '';
|
|
|
+ this.mixins_query.buildingId = '';
|
|
|
+ this.mixins_query.unitName = '';
|
|
|
+ this.mixins_query.houseId = '';
|
|
|
+ if (newValue.type) {
|
|
|
+ let newValueIds = newValue.id.split('-');
|
|
|
+ this.chiData.type = newValue.type;
|
|
|
+ if (newValue.type === 'community') {
|
|
|
+ this.mixins_query.communityId = newValue.communityId;
|
|
|
+ this.chiData.value = newValue.communityId;
|
|
|
+ this.chiData.address = newValue.communityName;
|
|
|
+ } else if (newValue.type === 'building') {
|
|
|
+ this.mixins_query.communityId = newValue.communityId;
|
|
|
+ this.mixins_query.buildingId = newValue.buildingId;
|
|
|
+ this.chiData.value = newValue.buildingId;
|
|
|
+ this.chiData.address = newValue.communityName + ' ' + newValue.buildingName;
|
|
|
+ } else if (newValue.type === 'unit') {
|
|
|
+ this.mixins_query.communityId = newValue.communityId;
|
|
|
+ this.mixins_query.buildingId = newValue.buildingId;
|
|
|
+ this.mixins_query.unitName = newValue.unitId;
|
|
|
+
|
|
|
+ this.chiData.value = newValue.buildingId + ':' + newValue.unitId;
|
|
|
+ this.chiData.address = newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName;
|
|
|
+ } else if (newValue.type === 'room') {
|
|
|
+ this.mixins_query.communityId = newValue.communityId;
|
|
|
+ this.mixins_query.buildingId = newValue.buildingId;
|
|
|
+ this.mixins_query.unitName = newValue.unitId;
|
|
|
+ this.mixins_query.houseId = newValue.houseId;
|
|
|
+
|
|
|
+ this.chiData.value = newValue.houseId;
|
|
|
+ this.chiData.address =
|
|
|
+ newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName + ' ' + newValue.houseName;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.mixins_search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.mixins_dataUrl = '/sc-charge/deposit/page'; // 分页查询接口
|
|
|
+ this.mixins_query = {
|
|
|
+ paymentStatus: this.chargeStatus
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped >
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+.search {
|
|
|
+ .zz-tab-button {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|