SmartCommunity/operationSupport/src/views/payService/propertyFee/actualReceipts.vue

<template>
    <div class="content main">
        <zz-table
            :settings="{ stripe: true }"
            :cols="cols"
            :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 class="item" effect="light" placement="bottom" content="详情">
                        <i class="zoniot_font zoniot-icon-xiangqing" @click="lookDetails(scope.row)"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" placement="bottom" content="打印收据">
                        <i class="zoniot_font zoniot-icon-xiangqing" @click="palys(scope.row.id)"></i>
                    </el-tooltip>
                    <el-tooltip v-if="scope.row.printStatus !== 0" class="item" effect="light" placement="bottom" content="收据作废">
                        <i class="zoniot_font zoniot-icon-shanchu redText" @click="deluserbyidFn(scope.row.id)"></i>
                    </el-tooltip>
                </div>
            </template>
        </zz-table>
    </div>
</template>

<script>
import list from '@/utils/list.js';
import { getLodop } from '@utils/LodopFuncs.js';
export default {
    mixins: [list],
    data() {
        return {
            mixins_querys: {
                chargeType: ''
            },
            cols: [
                {
                    label: '收据号',
                    prop: 'receiptNumber'
                },
                {
                    label: '地址',
                    prop: 'assets'
                },
                {
                    label: '业主',
                    prop: 'clientName',
                    width: '100'
                },
                {
                    label: '费用名称',
                    prop: 'chargeName',
                    width: '200'
                },
                {
                    label: '计费时间',
                    prop: 'paymentDays'
                },

                {
                    label: '应收金额(元)',
                    prop: 'receivableAmount'
                },
                {
                    label: '实收金额(元)',
                    prop: 'receivedAmount'
                },
                {
                    label: '付款方式',
                    prop: 'payTypeDict'
                },
                {
                    label: '缴费时间',
                    prop: 'chargeDate'
                },
                {
                    label: '打印状态',
                    prop: 'printStatus',
                    format(val) {
                        if (val == 0) {
                            return '<span class="redText">未打印</span>';
                        } else if (val == 1) {
                            return '<span class="greenText">已打印</span>';
                        }
                    }
                },
                {
                    label: '备注',
                    prop: 'remark'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'get'
        };
    },
    methods: {
        editAmount(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/payService/propertyFee/stepPage/editAmount.vue',
                    width: '550px',
                    height: '180px',
                    props: {
                        data: row,
                        callback: resolve
                    },
                    title: '修改应收金额'
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        effectiveDateToggle(va) {
            let arr = va;
            if (!arr) {
                arr = ['', ''];
            }
            this.mixins_query.startTime = arr[0];
            this.mixins_query.endTime = arr[1];
        },
        lookDetails(row) {
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/payService/propertyFee/stepPage/detailsTable.vue',
                    width: '1000px',
                    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 || '';
        },

        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;
        },
        getListData() {
            this.mixins_query.communityId = this.$parent.mixins_query.communityId;
            this.mixins_query.buildingId = this.$parent.mixins_query.buildingId;
            this.mixins_query.houseId = this.$parent.mixins_query.houseId;
            this.mixins_query.unitName = this.$parent.mixins_query.unitName;

            this.mixins_search();
        },
        palys(id) {
            this.$http.post('/sc-charge/charge/receipt/print?id=' + id).then(({ data, msg, status }) => {
                if (status == 0) {
                    var LODOP; //声明为全局变量
                    LODOP = getLodop();
                    LODOP.PRINT_INIT('凤凰天誉专用收据');
                    LODOP.ADD_PRINT_TABLE(30, 40, '90%', 200, data);
                    //LODOP.SET_PRINT_STYLEA(0,"Top2Offset",-40); //这句可让次页起点向上移
                    LODOP.SET_PRINT_PAGESIZE(1, 2410, 1000, '');

                    //LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
                    LODOP.PREVIEW();
                } else {
                    this.$message.error(msg);
                }
            });
        }
    },
    created() {
        this.mixins_dataUrl = '/sc-charge/charge/receipt/page'; // 分页查询接口
        this.mixins_query = {};
        this.mixins_search();
    }
};
</script>
<style lang='scss' scoped >
@import '@assets/css/public-style.scss';
.search {
    .zz-tab-button {
        margin-right: 20px;
    }
    .width120 {
        width: rem(120);
    }
}
</style>