|
|
<template>
|
|
|
<div>
|
|
|
<div class="cardTitle">账单明细</div>
|
|
|
<div class="search-form">
|
|
|
<a-form-model style="margin-left: 32px" layout='inline'>
|
|
|
<a-form-model-item label="流水号">
|
|
|
<a-select style="width: 150px" v-model="form.type" placeholder="请选择">
|
|
|
<a-select-option :value="1">
|
|
|
手动生成
|
|
|
</a-select-option>
|
|
|
<a-select-option :value="2">
|
|
|
自动生成
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-model-item>
|
|
|
<a-form-model-item style="margin-left: 32px" label="关联房屋" >
|
|
|
<a-cascader v-model="casVal" @change="chooseHouse" :field-names="{label: 'name', value: 'id', children: 'childList' }" :options="houseInfo" style="width: 200px" placeholder="请选择">
|
|
|
</a-cascader>
|
|
|
</a-form-model-item>
|
|
|
<a-form-model-item style="margin-left: 32px" label="收费标准">
|
|
|
<a-select v-model="chargesVal" style="width: 150px" @change="chargeChoose">
|
|
|
<a-select-option v-for="(item) in chargeInfo" :key="item.id" :value="item.id">
|
|
|
{{item.name}}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-model-item>
|
|
|
</a-form-model>
|
|
|
<div class="btn-box"><a-button type="primary" @click="search"> 查询 </a-button>
|
|
|
<a-button style="margin-left: 10px" @click="resetForm"> 重置 </a-button></div>
|
|
|
</div>
|
|
|
<!-- <searchForm :formItem="formItem" @getSearch="search($event)"></searchForm> -->
|
|
|
<a-table :columns="columns" :data-source="tableData" :pagination="pagination" :scroll="{x: 1900}" @change="handlerPage">
|
|
|
<template slot="unitName" slot-scope="text, record">
|
|
|
{{record.buildingName}}/{{record.unitName}}/{{record.estateName}}
|
|
|
</template>
|
|
|
<template slot="billDateStart" slot-scope="text, record">
|
|
|
{{record.billDateStart}} 至 {{record.billDateEnd}}
|
|
|
</template>
|
|
|
<template slot="action" slot-scope="text, record">
|
|
|
<a v-if="record.status != 4" @click="billPay(record)">支付</a>
|
|
|
<a v-if="record.status != 4" style="margin-left: 8px;color: red" @click="billOff(record)">废除</a>
|
|
|
<a v-if="record.status == 4" @click="billRecover(record)">恢复</a>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
<a-drawer title="账单详情"
|
|
|
:width="720"
|
|
|
:visible="billShow"
|
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
|
@close="billClose">
|
|
|
<div class="drawer-content">
|
|
|
<div style="padding: 16px">
|
|
|
<span class="billTitle">{{12786127846}}</span><a-tag style="margin-left: 24px">{{offDetail.status==1?'未缴纳':2?'部分缴纳':'已缴纳'}}</a-tag>
|
|
|
<span style="float: right">剩余未缴</span>
|
|
|
</div>
|
|
|
<div style="padding: 16px">
|
|
|
<span>{{offDetail.buildingName}}/{{offDetail.unitName}}/{{offDetail.estateName}}</span>
|
|
|
<span style="float: right;color: #D53131">¥{{offDetail.amountReceivable}}</span>
|
|
|
</div>
|
|
|
<a-divider></a-divider>
|
|
|
<div style="padding: 16px">
|
|
|
<a-descriptions layout="vertical">
|
|
|
<a-descriptions-item label="应收金额">
|
|
|
{{(offDetail.amountReceivable*1).toFixed(2)}}
|
|
|
</a-descriptions-item>
|
|
|
<a-descriptions-item label="实收金额">
|
|
|
{{(offDetail.amountReceived*1).toFixed(2)}}
|
|
|
</a-descriptions-item>
|
|
|
<a-descriptions-item label="计费周期">
|
|
|
{{offDetail.billDateStart}} 至 {{offDetail.billDateEnd}}
|
|
|
</a-descriptions-item>
|
|
|
<a-descriptions-item label="剩余应收">
|
|
|
{{(offDetail.amountReceivable*1 - offDetail.amountReceived*1).toFixed(2)}}
|
|
|
</a-descriptions-item>
|
|
|
<a-descriptions-item label="违约金">
|
|
|
{{(offDetail.defaultAmount * 1).toFixed(2)}}
|
|
|
</a-descriptions-item>
|
|
|
<a-descriptions-item label="创建时间">
|
|
|
|
|
|
</a-descriptions-item>
|
|
|
</a-descriptions>
|
|
|
</div>
|
|
|
<div class="tableTitle">缴费记录</div>
|
|
|
<a-divider></a-divider>
|
|
|
<a-table :columns="billColumns" :data-source="billDetail" :pagination="false">
|
|
|
</a-table>
|
|
|
</div>
|
|
|
<div class="drawer-footer">
|
|
|
<a-button :style="{ marginRight: '8px' }" @click="billClose">
|
|
|
关闭
|
|
|
</a-button>
|
|
|
<a-button type="primary" @click="billPayment"> 支付 </a-button>
|
|
|
</div>
|
|
|
</a-drawer>
|
|
|
<a-modal title="账单废除确认" :visible="offShow" @ok="offComfirm" @cancel="offCancel">
|
|
|
<div>房屋号：{{offDetail.buildingName}}/{{offDetail.unitName}}/{{offDetail.estateName}}</div>
|
|
|
<div>收费标准：{{offDetail.chargesName}}</div>
|
|
|
<div>剩余应收：<span style="color: #D53131">{{offDetail.amountReceivable}}</span></div>
|
|
|
<div>创建时间：{{offDetail.billDateStart}}</div>
|
|
|
<h4 style="margin-top: 32px">请确认是否废除该账单？</h4>
|
|
|
</a-modal>
|
|
|
<a-modal title="账单结清" :visible="paymentShow" @ok="paymentConfirm" @cancel="paymentCancel">
|
|
|
<div style="padding: 24px 0px 24px 0px">总计金额：<span style="color: #D53131">{{(offDetail.amountReceivable*1).toFixed(2)}}</span></div>
|
|
|
<div>房屋号：{{offDetail.buildingName}}/{{offDetail.unitName}}/{{offDetail.estateName}}</div>
|
|
|
<div>剩余应收：<span>{{(offDetail.amountReceivable*1 - offDetail.amountReceived*1).toFixed(2)}}</span></div>
|
|
|
<div>违约金：{{(offDetail.defaultAmount * 1).toFixed(2)}}</div>
|
|
|
<div>创建时间：{{offDetail.billDateStart}}</div>
|
|
|
<h4 style="margin-top: 32px">请确认是否结清该账单？</h4>
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { formItem, columns, pagination } from "./depend/config"
|
|
|
import { getBillList, abolition, recover, findBillOrderList, offlinePayments } from "@/api/payment/billManagement"
|
|
|
import {findEstateCascade} from "@/api/basic/estate"
|
|
|
import {chargesList} from "@/api/payment/chargeStandardManage"
|
|
|
export default {
|
|
|
name: 'payInfo',
|
|
|
data() {
|
|
|
return {
|
|
|
form: {
|
|
|
type: undefined,
|
|
|
estateId: undefined,
|
|
|
chargesIds: []
|
|
|
},
|
|
|
casVal: [],
|
|
|
chargesVal: undefined,
|
|
|
/////
|
|
|
tableData:[],
|
|
|
formItem,
|
|
|
columns,
|
|
|
pagination,
|
|
|
billShow: false,
|
|
|
offShow: false,
|
|
|
billColumns: [
|
|
|
{
|
|
|
title: "操作人",
|
|
|
dataIndex: "createName"
|
|
|
},
|
|
|
{
|
|
|
title: "身份类型",
|
|
|
dataIndex: "identity",
|
|
|
customRender:function(identity){
|
|
|
switch (identity) {
|
|
|
case 1: return '物业'
|
|
|
case 2: return '业主'
|
|
|
case 3: return '租户'
|
|
|
case 4: return '业主亲属'
|
|
|
case 5: return '租户亲属'
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
title: "实缴金额",
|
|
|
dataIndex: "payAmount"
|
|
|
},
|
|
|
{
|
|
|
title: "支付类型",
|
|
|
dataIndex: "payType",
|
|
|
customRender:function(payType){
|
|
|
switch (payType) {
|
|
|
case 1: return '自动扣费'
|
|
|
case 2: return '线下支付'
|
|
|
case 3: return '支付宝支付'
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
],
|
|
|
//详情
|
|
|
currentId: undefined,
|
|
|
billDetail: [],
|
|
|
offDetail: {},
|
|
|
//支付
|
|
|
paymentShow: false,
|
|
|
//房屋信息
|
|
|
houseInfo: [],
|
|
|
//收费标准信息
|
|
|
chargeInfo: []
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getApi()
|
|
|
this.getData()
|
|
|
},
|
|
|
methods: {
|
|
|
getApi() {
|
|
|
findEstateCascade().then(res => {
|
|
|
let data = res.data;
|
|
|
this.houseInfo = data;
|
|
|
})
|
|
|
chargesList({pageNum:1,size:1000}).then(res => {
|
|
|
let data = res.data;
|
|
|
this.chargeInfo = data.rows
|
|
|
})
|
|
|
},
|
|
|
getData() {
|
|
|
let obj = Object.assign({pageNum: this.pagination.current, size: this.pagination.pageSize},this.form)
|
|
|
getBillList(obj).then(res => {
|
|
|
let data = res.data;
|
|
|
this.tableData = data.rows;
|
|
|
this.pagination.total = data.total
|
|
|
})
|
|
|
},
|
|
|
search() {
|
|
|
this.getData()
|
|
|
},
|
|
|
resetForm() {
|
|
|
this.form = {
|
|
|
type: undefined,
|
|
|
estateId: undefined,
|
|
|
chargesIds: undefined
|
|
|
};
|
|
|
this.casVal = [];
|
|
|
this.chargesVal = undefined;
|
|
|
this.getData();
|
|
|
},
|
|
|
chooseHouse(val) {
|
|
|
let v = val;
|
|
|
let index = val.length
|
|
|
this.form.estateId = v[index-1]
|
|
|
},
|
|
|
chargeChoose(val) {
|
|
|
this.form.chargesIds = [val]
|
|
|
},
|
|
|
handlerPage(val) {
|
|
|
this.pagination.current = val.current;
|
|
|
this.pagination.pageSize = val.pageSize;
|
|
|
this.getData()
|
|
|
},
|
|
|
//支付
|
|
|
billPay(record) {
|
|
|
this.currentId = record.id
|
|
|
this.offDetail = record;
|
|
|
let obj = {billId: record.id}
|
|
|
findBillOrderList(obj).then(res => {
|
|
|
let data = res.data
|
|
|
this.billDetail = data;
|
|
|
})
|
|
|
this.billShow = true
|
|
|
},
|
|
|
//支付结清
|
|
|
billPayment() {
|
|
|
this.paymentShow = true;
|
|
|
},
|
|
|
paymentConfirm() {
|
|
|
let obj = {billId: this.currentId, payAmount: (this.offDetail.amountReceivable - this.offDetail.amountReceived)*1.00}
|
|
|
offlinePayments(obj).then(res => {
|
|
|
if (res.code === 200) {
|
|
|
this.$message.success(res.msg);
|
|
|
this.paymentShow = false;
|
|
|
this.billShow = false;
|
|
|
this.getData();
|
|
|
} else {
|
|
|
this.$message.error(res.msg);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
paymentCancel() {
|
|
|
this.paymentShow = false;
|
|
|
},
|
|
|
//废除
|
|
|
billOff(record) {
|
|
|
this.currentId = record.id
|
|
|
this.offDetail = record;
|
|
|
this.offShow = true;
|
|
|
},
|
|
|
offComfirm() {
|
|
|
abolition({billId: this.currentId}).then(res => {
|
|
|
if (res.code === 200) {
|
|
|
this.$message.success(res.msg);
|
|
|
this.offShow = false;
|
|
|
this.getData();
|
|
|
} else {
|
|
|
this.$message.error(res.msg);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//恢复
|
|
|
billRecover(record) {
|
|
|
let obj = {billId : record.id}
|
|
|
this.$confirm({
|
|
|
title: "是否恢复?",
|
|
|
icon: "redo",
|
|
|
onOk: () => {
|
|
|
recover(obj).then(
|
|
|
(res) => {
|
|
|
if (res.code === 200) {
|
|
|
this.$message.success(res.msg);
|
|
|
this.getData();
|
|
|
} else {
|
|
|
this.$message.error(res.msg);
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
//抽屉
|
|
|
billClose() {
|
|
|
this.billShow = false
|
|
|
},
|
|
|
offCancel() {
|
|
|
this.offShow = false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.search-form {
|
|
|
text-align: left;
|
|
|
background: #f9f9f9;
|
|
|
padding-top: 25px;
|
|
|
padding-bottom: 1px;
|
|
|
}
|
|
|
.btn-box{
|
|
|
margin:10px 0 15px 100px;
|
|
|
}
|
|
|
.billTitle {
|
|
|
font-family: 'PingFang SC';
|
|
|
font-style: normal;
|
|
|
font-weight: 600;
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
.tableTitle {
|
|
|
padding-left: 16px;
|
|
|
font-family: 'PingFang SC';
|
|
|
font-style: normal;
|
|
|
font-weight: 500;
|
|
|
font-size: 16px;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
</style> |
