<template>
|
<GlobalWindow
|
width="100%"
|
:title="title"
|
:withFooter="false"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm">
|
<div class="zd">
|
<div class="zd_list">
|
<div class="zd_list_row">
|
<span>待收款账单数</span>
|
<span>{{info.inAmount || 0}}</span>
|
</div>
|
<div class="zd_list_row">
|
<span>待收款金额</span>
|
<span>￥{{info.inFee || 0}}</span>
|
</div>
|
<div class="zd_list_row">
|
<span>待付款账单数</span>
|
<span>{{info.payAmount || 0}}</span>
|
</div>
|
<div class="zd_list_row">
|
<span>待付款金额</span>
|
<span>￥{{info.payFee || 0}}</span>
|
</div>
|
</div>
|
<div class="zd_content">
|
<div class="zd_content_label">
|
<span>账单</span>
|
</div>
|
<el-table
|
:data="info.ywContractBillList"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="账单编号">
|
</el-table-column>
|
<el-table-column
|
label="费用类型">
|
<template slot-scope="{row}">
|
<span v-if="row.costType === 0">租赁费</span>
|
<span v-if="row.costType === 1">物业费</span>
|
<span v-if="row.costType === 2">租赁押金</span>
|
<span v-if="row.costType === 3">物业押金</span>
|
<span v-if="row.costType === 4">水电费</span>
|
<span v-if="row.costType === 5">杂项费</span>
|
<span v-if="row.costType === 6">其他</span>
|
<span v-if="row.costType === 7">保证金</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="计费周期">
|
<template slot-scope="{row}">
|
{{row.startDate}}~{{row.endDate}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="receivableFee"
|
label="应收付金额/原始应收付">
|
</el-table-column>
|
<el-table-column
|
prop="actReceivableFee"
|
label="实收/付金额">
|
</el-table-column>
|
<el-table-column
|
label="需收/付金额">
|
<template slot-scope="{row}">
|
<div style="display: flex; align-items: center;">
|
<el-tag type="success" v-if="row.needReceivableFee > 0">收</el-tag>
|
<el-tag type="warning" v-if="row.needReceivableFee < 0">付</el-tag>
|
<span>{{Math.abs(row.needReceivableFee)}}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="actPayDate"
|
label="应收/付日期">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import { getWaitDealList } from '@/api/ywContractBill'
|
export default {
|
name: 'pendingBills',
|
components: {
|
GlobalWindow
|
},
|
extends: BaseOpera,
|
data () {
|
return {
|
info: []
|
}
|
},
|
methods: {
|
open (title, contractId) {
|
this.title = title
|
getWaitDealList(contractId)
|
.then(res => {
|
this.info = res
|
this.visible = true
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.zd {
|
width: 100%;
|
.zd_list {
|
width: 100%;
|
background: #f2f2f2;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 20px;
|
padding: 20px;
|
box-sizing: border-box;
|
border-radius: 10px;
|
.zd_list_row {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
span {
|
&:nth-child(1) {
|
font-size: 14px;
|
color: #333333;
|
}
|
&:nth-child(2) {
|
font-size: 20px;
|
color: #333333;
|
margin-top: 10px;
|
}
|
}
|
}
|
}
|
.zd_content {
|
width: 100%;
|
margin-top: 20px;
|
.zd_content_label {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
span {
|
font-weight: 500;
|
font-size: 18px;
|
color: #2080f7;
|
}
|
}
|
}
|
}
|
</style>
|
