Project-Annex/operationSupport/src/views/payService/propertyFee/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.chargeName"
                ></el-input>
                <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-linshishoukuan" @click="collections('temporary')"></i>
                    </el-tooltip>
                    <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"
                @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: 'assets'
                },
                {
                    label: '业主',
                    prop: 'residentName',
                    width: '100'
                },
                {
                    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: 'assets'
                },
                {
                    label: '住户',
                    prop: 'residentName'
                },
                {
                    label: '费用名称',
                    prop: 'chargeName',
                    width: '200'
                },
                {
                    label: '计费日期',
                    prop: 'payBeginTime',
                    slot: 'payBeginTime',
                    width: '150'
                },
                {
                    label: '费用金额(元)',
                    prop: 'amount'
                },
                {
                    label: '滞纳金(元)',
                    prop: 'lateFee'
                },

                {
                    label: '应收金额(元)',
                    prop: 'receivableAmount'
                },
                {
                    label: '实收金额(元)',
                    prop: 'receivedAmount'
                },
                {
                    label: '付款方式',
                    prop: 'payTypeDict'
                },
                {
                    label: '缴费状态',
                    prop: 'chargeStatusDict'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            chargeStatus: 1,
            chiData: {
                type: '',
                value: '',
                address: ''
            },
            mixins_post: 'post',
            selectRow: [],
            statusTable: true
        };
    },
    methods: {
        collections(todo, row) {
            new Promise((resolve) => {
                let title = '',
                    hideStar,
                    height = '230px',
                    width = '900px';
                if (todo == 'temporary') {
                    title = '设置收费项目';
                    hideStar = false;
                    height = '270px';
                    width = '550px';
                } else if (todo == 'bulk') {
                    if (!this.selectRow.length) {
                        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/propertyFee/stepPage/' + todo + '.vue',
                    // url: '/payService/propertyFee/stepPage/single.vue',
                    width: width,
                    height: height,
                    props: {
                        data: row,
                        selectRow: this.selectRow,
                        chiData: this.chiData,
                        tabList: todo,
                        callback: resolve
                    },
                    hideStar: hideStar,
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        lookDetails(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/payService/propertyFee/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/report/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;
        }
    },
    watch: {
        currentId(newValue, oldValue) {
            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/charge/bill/page'; // 分页查询接口
        this.mixins_query = {
            chargeStatus: this.chargeStatus
            // chargeType: 1
        };
    }
};
</script>
<style lang='scss' scoped >
@import '@assets/css/public-style.scss';
.search {
    .zz-tab-button {
        margin-right: 20px;
    }
}
</style>