SmartCommunity/operationSupport/src/views/payService/leaseBill/index.vue

<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.name"
                ></el-input>
                <el-select v-model="mixins_query.payType" v-if="chargeStatus == 2" class="width120" placeholder="缴费方式" clearable>
                    <el-option label="微信" :value="1"></el-option>
                    <el-option label="支付宝" :value="2"></el-option>
                    <el-option label="现金" :value="3"></el-option>
                    <el-option label="其他" :value="5"></el-option>
                    <el-option label="刷卡" :value="6"></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 class="search-btn" type="primary" @click="mixins_search()" icon="el-icon-search">搜索</el-button>
                <div class="search-icon">
                    <el-tooltip v-show="chargeStatus == 1" class="item" effect="light" placement="bottom" content="批量收款">
                        <i class="zoniot_font zoniot-icon-piliangshoukuan" @click="collections('bulk')"></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="{ showCheckbox: chargeStatus == 1, showIndex: chargeStatus == 2, stripe: true }"
                :cols="chargeStatus == 1 ? cols : statusCols"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                :selectable="selectable"
                @selection-change="selectionChange"
            >
                <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-show="chargeStatus == 1" class="item" effect="light" placement="bottom" content="收款">
                            <i class="zoniot_font zoniot-icon-shoukuan" @click="collections('single', scope.row)"></i>
                        </el-tooltip>
                        <el-tooltip v-show="chargeStatus == 2" class="item" effect="light" placement="bottom" content="详情">
                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookDetails(scope.row)"></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: 'billNumber'
                },
                {
                    label: '客户',
                    prop: 'residentName',
                    width: '100'
                },
                {
                    label: '房屋',
                    prop: 'assets'
                },

                {
                    label: '费用名称',
                    prop: 'chargeName',
                    width: '200'
                },
                {
                    label: '计费周期',
                    prop: 'payBeginTime',
                    slot: 'payBeginTime',
                    width: '150'
                },
                {
                    label: '费用金额(元)',
                    prop: 'amount'
                },
                {
                    label: '滞纳金(元)',
                    prop: 'lateFee'
                },

                {
                    label: '应收金额(元)',
                    prop: 'receivableAmount'
                },
                {
                    label: '缴费状态',
                    prop: 'chargeStatusDict'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            statusCols: [
                {
                    label: '订单号',
                    prop: 'billNumber'
                },
                {
                    label: '客户',
                    prop: 'residentName'
                },
                {
                    label: '租赁房屋',
                    prop: 'assets'
                },

                {
                    label: '费用名称',
                    prop: 'chargeName'
                },
                {
                    label: '计费周期',
                    prop: 'payBeginTime',
                    slot: 'payBeginTime',
                    width: '150'
                },
                {
                    label: '应收金额(元)',
                    prop: 'receivableAmount'
                },
                {
                    label: '实收金额(元)',
                    prop: 'receivedAmount'
                },
                {
                    label: '付款方式',
                    prop: 'payTypeDict'
                },
                {
                    label: '缴费状态',
                    prop: 'chargeStatusDict'
                },
                {
                    label: '缴费时间',
                    prop: 'chargeDate',
                    width: '150'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            chargeStatus: 1,
            chiData: {
                type: '',
                value: '',
                address: ''
            },
            mixins_post: 'post',
            selectRow: [],
            times: [],
            statusTable: true
        };
    },
    methods: {
        collections(todo, row) {
            new Promise((resolve) => {
                let title = '',
                    hideStar,
                    height = '230px',
                    width = '900px';
                if (todo == 'bulk') {
                    if (!this.selectRow.length) {
                        this.$message.error('您尚未选择要收款项，请选择后再操作批量');
                        return;
                    }
                    let tag = false;
                    this.selectRow.map((item) => {
                        if (this.selectRow[0].houseId == item.houseId) {
                            tag = true;
                        } else {
                            tag = false;
                        }
                    });
                    if (!tag) {
                        this.$message.error('选择同一房间后再操作批量');
                        return;
                    }

                    title = '批量收款';
                    hideStar = true;
                    height = '528px';
                    width = '900px';
                } else if (todo == 'single') {
                    title = '收款';
                    hideStar = true;
                    height = '614px';
                    width = '614px';
                }
                this.$store.dispatch('addPopup', {
                    url: '/payService/leaseBill/stepPage/' + todo + '.vue',
                    width: width,
                    height: height,
                    props: {
                        data: row,
                        selectRow: this.selectRow,
                        chiData: this.chiData,
                        tabList: todo,
                        communityId: this.mixins_query.communityId,
                        callback: resolve
                    },
                    hideStar: hideStar,
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        lookDetails(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/payService/leaseBill/stepPage/details.vue',
                    width: '615px',
                    height: '581px',
                    props: {
                        id: row.id,
                        callback: resolve
                    },
                    showConfirmButton: true,
                    showCancelButton: true,
                    hideStar: true,
                    title: '账单详情'
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        currentOrganId(data) {
            this.currentId = data || '';
        },
        changeRadio() {
            this.statusTable = false;
            this.$nextTick(() => {
                this.statusTable = true;
            });
            this.mixins_query.chargeStatus = this.chargeStatus;
            this.mixins_search();
        },
        exportExcel() {
            this.__exportExcel('/sc-charge/charge/bill/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];
        },
        selectable(row, index) {
            return true;
        },
        Object_Set(thisObj, val, editThisObj) {
            if (thisObj instanceof Array && val instanceof Array) {
                if (!!editThisObj) {
                    thisObj.map((item, index) => {
                        this[editThisObj][item] = val[index];
                    });
                } else {
                    thisObj.map((item, index) => {
                        this['mixins_query'][item] = val[index];
                    });
                }
            } else {
                if (!!editThisObj) {
                    this[editThisObj][thisObj] = val;
                } else {
                    this['mixins_query'][thisObj] = val;
                }
            }
        }
    },
    watch: {
        currentId(newValue, oldValue) {
            this.Object_Set(['communityId', 'buildingId', 'unitName', 'houseId'], ['', '', '', '']);
            if (newValue.type) {
                this.chiData.type = newValue.type;
                if (newValue.type === 'community') {
                    this.Object_Set(['communityId'], [newValue.communityId]);
                    this.Object_Set(['value', 'address'], [newValue.communityId, newValue.communityName], 'chiData');
                } else if (newValue.type === 'building') {
                    this.Object_Set(['communityId', 'buildingId'], [newValue.communityId, newValue.buildingId]);
                    this.Object_Set(
                        ['value', 'address'],
                        [newValue.buildingId, newValue.communityName + ' ' + newValue.buildingName],
                        'chiData'
                    );
                } else if (newValue.type === 'unit') {
                    this.Object_Set(
                        ['communityId', 'buildingId', 'unitName'],
                        [newValue.communityId, newValue.buildingId, newValue.unitId]
                    );
                    this.Object_Set(
                        ['value', 'address'],
                        [
                            newValue.buildingId + ':' + newValue.unitId,
                            newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName
                        ],
                        'chiData'
                    );
                } else if (newValue.type === 'room') {
                    this.Object_Set(
                        ['communityId', 'buildingId', 'unitName', 'houseId'],
                        [newValue.communityId, newValue.buildingId, newValue.unitId, newValue.houseId]
                    );
                    this.Object_Set(
                        ['value', 'address'],
                        [
                            newValue.houseId,
                            newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName + ' ' + newValue.houseName
                        ],
                        'chiData'
                    );
                }
            }
            this.mixins_search();
        }
    },
    created() {
        this.mixins_dataUrl = '/sc-charge/charge/bill/page'; // 分页查询接口
        this.mixins_query = {
            chargeStatus: this.chargeStatus,
            chargeType: '8',
             payType: ''
        };
    }
};
</script>
<style lang='scss' scoped >
@import '@assets/css/public-style.scss';
.search {
    .zz-tab-button {
        margin-right: 20px;
    }
    .width120 {
        width: rem(120);
    }
}
</style>