SmartCommunity/operationSupport/src/views/payService/leaseBill/stepPage/bulk.vue

<template>
    <div>
        <div class="formContent-item_title marginNone">
            客户名称：{{ chiData.residentName || '--' }} <br />租赁房屋： {{ chiData.address || '--' }}
        </div>
        <div class="formContent-item_title noneBef">{{ assets }}</div>
        <zz-table :settings="{ showIndex: true, stripe: true, hidePagination: true }" :cols="cols" :data="tabList">
            <template slot-scope="scope" slot="payBeginTime">
                {{ typeTimeTransition(scope.row.payBeginTime, scope.row.payEndTime) }}
            </template>
        </zz-table>
        <el-form ref="form" :model="formData" :rules="formRules" label-width="110px">
            <div class="inline">
                <el-form-item label="支付方式:" prop="payType">
                    <el-select placeholder="选择支付方式" v-model="formData.payType">
                        <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="6"></el-option>
                        <el-option label="其他" :value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应收金额(元):"> {{ fiterSum(tabList, 'receivableAmount') }}</el-form-item>
                <el-form-item label="实收金额(元):" required="true"> {{ fiterSum(tabList, 'receivableAmount') }} </el-form-item>
            </div>
            <el-form-item label="备注信息:" placeholder="请输入备注信息">
                <el-input type="textarea" maxlength="100" show-word-limit resize="none" rows="3" v-model="formData.remark"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            cols: [
                {
                    label: '订单号',
                    prop: 'billNumber'
                },
                {
                    label: '费用名称',
                    prop: 'chargeName'
                },
                {
                    label: '计费周期',
                    prop: 'payBeginTime',
                    slot: 'payBeginTime',
                    width: '200'
                },
                {
                    label: '费用金额(元)',
                    prop: 'amount'
                },
                {
                    label: '滞纳金(元)',
                    prop: 'lateFee'
                },

                {
                    label: '应收金额(元)',
                    prop: 'receivableAmount'
                }
            ],
            tabList: [],
            chiData: {},
            formData: {
                payType: '',
                remark: '',
                amount: '',
                billList: [
                    {
                        amount: '',
                        billId: ''
                    }
                ]
            },
            formRules: {
                payType: [this.$valid.selectRequired('支付方式')]
            }
        };
    },
    methods: {
        fiterSum(arr, val) {
            let v = null;
            arr.forEach((item) => {
                v += Number(item[val]);
            });
            return Math.floor(v * 100) / 100;
            // v.toFixed(2)
        },
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let billList = this.tabList.map((item, index) => {
                        return {
                            amount: item.amount,
                            billId: item.id
                        };
                    });
                    let installData = {
                        payType: this.formData.payType,
                        remark: this.formData.remark,
                        billList: billList
                    };
                    var loading = this.$loading();
                    this.$http
                        .post('/sc-charge/charge/bill/payee', installData)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.params.callback();
                                this.$emit('close');
                            } else {
                                this.$message.error(msg);
                            }
                            loading.close();
                        })
                        .catch(() => {
                            loading.close();
                        });
                }
            });
        },
        getTable(list) {
            let ids = [];
            list.map((item) => {
                ids.push(item.id);
            });
            this.$http
                .post('/sc-charge/charge/bill/findUserBillDetailList', ids)
                .then((res) => {
                    this.tabList = res;
                })
                .catch(() => {
                    loading.close();
                });
        },
        typeTimeTransition(start, end) {
            let text = '';
            if (!!end) {
                let f = start.slice(5, 7),
                    l = end.slice(5, 7);
                if (Number(f) == Number(l)) {
                    text = start;
                } else {
                    text = `${start.slice(0, 8)}-${end.slice(0, 8)}`;
                }
            }

            return text;
        }
    },
    created() {
        if (this.params.selectRow.length) {
            this.getTable(this.params.selectRow);
        }

        this.chiData = this.params.chiData;
    }
};
</script>
<style lang="scss" scoped>
.formContent-item_title {
    font-weight: 600;
}
.marginNone {
    margin-bottom: 0;
}
.zz-table {
    margin-bottom: 20px;
}
.noneBef {
    margin-top: 5px;
    &::before {
        content: none;
    }
}
.inline {
    display: flex;
    justify-content: space-between;
}
</style>