Project-Annex/operationSupport/src/views/payService/propertyFee/stepPage/single.vue

<template>
    <div class="lookDetail">
        <div class="formContent-item_title">{{ chiData.assets }}</div>
        <el-form ref="form" :model="formData" :rules="formRules" label-width="110px">
            <template v-for="(item, index) in formLook">
                <el-col :span="12" :key="index">
                    <el-form-item :label="labelType(item.label, item.prop)">
                        <template v-if="item.slot">
                            <template v-if="item.slot == 'assetsArea' && thisItem['chargeType'] == 4">
                                {{ !!thisItem['parkingDetail'] ? thisItem['parkingDetail'] : '--' }}
                            </template>
                            <template v-else-if="item.slot == 'chargeMode'">
                                {{ !!chargeModeValue[thisItem[item.prop]] ? chargeModeValue[thisItem[item.prop]] : '--' }}
                            </template>
                            <template v-else-if="item.slot == 'chargeStatus'">
                                <span class="redText">未缴费</span>
                            </template>
                            <template v-else-if="item.slot === 'payEndTime'">
                                <div style="white-space: nowrap">{{ typeTimeTransition(thisItem.payBeginTime, thisItem.payEndTime) }}</div>
                            </template>
                            <template v-else>
                                {{ thisItem[item.prop] || '--' }}
                            </template>
                        </template>
                        <template v-else>
                            {{ thisItem[item.prop] || '--' }}
                        </template>
                    </el-form-item>
                </el-col>
            </template>
            <div class="inline">
                <el-form-item label="支付方式" prop="payType">
                    <el-select 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="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="应收金额(元)"
                    ><div style="white-space: nowrap">{{ thisItem.receivableAmount }}</div></el-form-item
                >
                <el-form-item label="实收金额(元)" required
                    ><el-input oninput="value=value.replace(/[^0-9.]/g,'')" disabled v-model="thisItem.amount"></el-input
                ></el-form-item>
            </div>

            <el-form-item label="备注信息" placeholder="请输入备注信息">
                <el-input type="textarea" maxlength="100" v-model="formData.remark" show-word-limit resize="none" rows="3"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            chargeModeValue: {
                1: '固定收费',
                2: '价格*面积收费',
                4: '单价*用量'
            },
            formLook: [
                {
                    label: '费用名称:',
                    prop: 'chargeName'
                },
                {
                    label: '计费方式:',
                    prop: 'chargeMode',
                    slot: 'chargeMode'
                },
                {
                    label: '面积(㎡):',
                    prop: 'assetsArea',
                    slot: 'assetsArea'
                },
                {
                    label: '价格(元/月):',
                    prop: 'chargePrice'
                },
                {
                    label: '费用金额(元):',
                    prop: 'amount'
                },
                {
                    label: '账期:',
                    prop: 'paymentDays'
                },
                {
                    label: '滞纳金(元):',
                    prop: 'lateFee'
                },
                {
                    label: '缴费状态:',
                    prop: 'chargeStatus',
                    slot: 'chargeStatus'
                },
                {
                    label: '业主:',
                    prop: 'residentName'
                },
                {
                    label: '业主手机号:',
                    prop: 'phone'
                },
                {
                    label: '账单计费日期:',
                    prop: 'payEndTime',
                    slot: 'payEndTime'
                }
            ],
            thisItem: {},
            chiData: {},
            formData: {
                payType: '',
                remark: '',
                amount: '',
                billList: [
                    {
                        amount: '',
                        billId: ''
                    }
                ]
            },
            formRules: {
                payType: [this.$valid.selectRequired('支付方式')],
                amount: [this.$valid.inputRequired('实收金额')]
            }
        };
    },

    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    var loading = this.$loading();
                    let installData = {
                        payType: this.formData.payType,
                        remark: this.formData.remark,
                        billList: [
                            {
                                amount: this.thisItem.amount,
                                billId: this.thisItem.id
                            }
                        ]
                    };
                    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();
                        });
                }
            });
        },
        getDatali(id) {
            this.$http
                .get('/sc-charge/charge/bill/findUserBillDetail', { id: id })
                .then(({ data, msg, status }) => {
                    if (status == 0) {
                        this.thisItem = data;
                    }
                })
                .catch(() => {});
        },
        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;
        },
        labelType(lab, val) {
            let type = this.thisItem['chargeType'];
            if (val == 'assetsArea') {
                if (type == 2) {
                    lab = '用量(吨):';
                } else if (type == 3) {
                    lab = '用量(度):';
                } else if (type == 4) {
                    lab = '车位:';
                }
            } else if (val == 'chargePrice') {
                if (type == 2) {
                    lab = '价格(元/吨):';
                } else if (type == 3) {
                    lab = '价格(元/度):';
                }
            }
            return lab;
        }
    },
    created() {
        this.getDatali(this.params.data.id);
        this.chiData = this.params.data;
    }
};
</script>
<style lang="scss" scoped>
.lookDetail {
    /deep/ .el-form-item__label,
    /deep/.el-form-item__content {
        font-size: 12px;
        white-space: nowrap;
    }
}
.inline {
    clear: left;
    display: flex;
    justify-content: space-between;
}
</style>