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="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'
                },
                {
                    label: '费用名称',
                    prop: 'chargeName'
                },
                {
                    label: '账期',
                    prop: 'paymentDays'
                },
                {
                    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',
                    // prop: 'chargeType',
                    // 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: 'paymentDays'
                },
                {
                    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 = '230px';
                    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);
        }
    },
    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>