|
|
@@ -1,253 +1,224 @@
|
|
|
<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">
|
|
|
- <!-- item.slot == 'assetsArea' && -->
|
|
|
- <template v-if="thisItem['chargeType'] == 4">
|
|
|
- {{ !!thisItem['parkingDetail'] ? thisItem['parkingDetail'] : '--' }}
|
|
|
- </template>
|
|
|
- <template v-else-if="thisItem['chargeType'] == 2">
|
|
|
- {{thisItem.quantity}}
|
|
|
- </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>
|
|
|
+ <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 == 'assetsArea' && (thisItem['chargeType'] == 2 || thisItem['chargeType'] == 3)">
|
|
|
+ {{ !!thisItem['quantity'] ? thisItem['quantity'] : '--' }}
|
|
|
+ </template>
|
|
|
|
|
|
- {{ thisItem[item.prop] || '--' }}
|
|
|
+ <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>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </template>
|
|
|
- <div class="inline">
|
|
|
- <el-form-item
|
|
|
- label="支付方式"
|
|
|
- prop="payType"
|
|
|
- >
|
|
|
- <el-select v-model="formData.payType">
|
|
|
- <el-option
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- v-for="(item, index) in $publicArray.paymentType()"
|
|
|
- :key="index"
|
|
|
- ></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>
|
|
|
+ <div class="inline">
|
|
|
+ <el-form-item label="支付方式" prop="payType">
|
|
|
+ <el-select v-model="formData.payType">
|
|
|
+ <el-option
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ v-for="(item, index) in $publicArray.paymentType()"
|
|
|
+ :key="index"
|
|
|
+ ></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>
|
|
|
+ <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'
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- {
|
|
|
- label: '业主手机号:',
|
|
|
- prop: 'phone'
|
|
|
+ getDatali(id) {
|
|
|
+ this.$http
|
|
|
+ .get('/sc-charge/charge/bill/findUserBillDetail', { id: id })
|
|
|
+ .then(({ data, msg, status }) => {
|
|
|
+ if (status == 0) {
|
|
|
+ this.thisItem = data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
- {
|
|
|
- label: '账单计费日期:',
|
|
|
- prop: 'payEndTime',
|
|
|
- slot: 'payEndTime'
|
|
|
- }
|
|
|
- ],
|
|
|
- thisItem: {},
|
|
|
- chiData: {},
|
|
|
- formData: {
|
|
|
- payType: '',
|
|
|
- remark: '',
|
|
|
- amount: '',
|
|
|
- billList: [
|
|
|
- {
|
|
|
- amount: '',
|
|
|
- billId: ''
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- formRules: {
|
|
|
- payType: [this.$valid.selectRequired('支付方式')],
|
|
|
- amount: [this.$valid.inputRequired('实收金额')]
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
+ 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)}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- 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;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- 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() {
|
|
|
+ console.log(1);
|
|
|
+ this.getDatali(this.params.data.id);
|
|
|
+ this.chiData = this.params.data;
|
|
|
}
|
|
|
- },
|
|
|
- created () {
|
|
|
- console.log(1)
|
|
|
- this.getDatali(this.params.data.id);
|
|
|
- this.chiData = this.params.data;
|
|
|
- }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
Shannon_mu