<template>
|
<GlobalWindow :title="'账单详情'" :withFooter="false" :visible.sync="visible" :confirm-working="isWorking" @close="close"
|
@confirm="confirm">
|
<div style="width: 100%; position: sticky; top: 0; left: 0; z-index: 999; background: #ffffff;">
|
<div class="home_title">
|
<div class="left">
|
<span class="mr10">{{info.billType === 0 ? '收款方' : '付款方'}}：{{info.customerName}}</span>
|
<el-tag type="success" v-if="info.status === 0">开启</el-tag>
|
<el-tag type="info" v-if="info.status === 1">关闭</el-tag>
|
</div>
|
<el-button plain type="primary" v-if="![1].includes(info.payStatus)" @click="$refs.flowingWater.open('创建收支流水', {
|
billType: returnBillType(),
|
billId: info.id,
|
costType: info.costType,
|
receivableFee: Math.abs(info.needReceivableFee),
|
costTypeName: returnText(info.costType),
|
contractCode: info.contractCode,
|
contractId: info.contractId,
|
startDate: info.startDate,
|
endDate: info.endDate,
|
multifileList: [],
|
date: `${info.startDate} ~ ${info.endDate}`,
|
companyId: info.companyId,
|
companyName: info.companyName,
|
actReceivableFee: Math.abs(info.needReceivableFee),
|
needReceivableFeeCopy: info.needReceivableFee
|
})">新建收支流水</el-button>
|
</div>
|
<div class="line"></div>
|
<div class="main">
|
<div class="list" style="background: rgba(0,0,0,0); padding: 0; margin-bottom: 0;">
|
<div class="item" style="flex: 1;">
|
<div class="la">结清状态</div>
|
<div class="val" style="margin-top: 10px;" v-if="info.payStatus === 0">待收款</div>
|
<div class="val" style="margin-top: 10px;" v-if="info.payStatus === 1">已结清</div>
|
<div class="val" style="margin-top: 10px;" v-if="info.payStatus === 2">部分结清</div>
|
<div class="val" style="margin-top: 10px;" v-if="info.payStatus === 3">待付款</div>
|
<div class="val" style="margin-top: 10px;" v-if="info.payStatus === 4">待退款</div>
|
<div class="val" style="margin-top: 10px;" v-if="info.payStatus === 5">已关闭</div>
|
</div>
|
<div class="item" style="flex: 1;">
|
<div class="la">应{{info.billType === 0 ? '收' : '付'}}金额（元）</div>
|
<div class="val" style="margin-top: 10px;">{{info.receivableFee}}</div>
|
</div>
|
<div class="item" style="flex: 1;">
|
<div class="la">实{{info.billType === 0 ? '收' : '付'}}金额（元）</div>
|
<div class="val" style="margin-top: 10px;">{{info.actReceivableFee}}</div>
|
</div>
|
<div class="item" style="flex: 1;">
|
<template v-if="info.billType === 1">
|
<div class="la">需付金额（元）</div>
|
</template>
|
<div class="la" v-else>需{{info.needReceivableFee > 0 ? '收' : '付'}}金额（元）</div>
|
<div class="val" style="margin-top: 10px;">{{Math.abs(info.needReceivableFee)}}</div>
|
</div>
|
<div class="item" style="flex: 1;">
|
<div class="la">应{{info.billType === 0 ? '收' : '付'}}日期</div>
|
<div class="val" style="margin-top: 10px;">{{info.planPayDate}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="tabs">
|
<div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">基础信息</div>
|
<div class="tab" :class="{ active: activeTabs == 2 }" @click="tabsClick(2)">收支流水</div>
|
</div>
|
</div>
|
<div class="main">
|
<div class="title">基础信息</div>
|
<div class="list" style="background: rgba(0,0,0,0); padding: 0;">
|
<div class="item">
|
<div class="la">费用类型</div>
|
<div class="val">{{returnText(info.costType)}}</div>
|
</div>
|
<div class="item">
|
<div class="la">计费周期</div>
|
<div class="val">{{info.startDate}} ~ {{info.endDate}}</div>
|
</div>
|
<div class="item">
|
<div class="la">账单金额(元)</div>
|
<div class="val">{{info.totleFee}}</div>
|
</div>
|
<div class="item">
|
<div class="la">账单编号</div>
|
<div class="val">{{info.code}}</div>
|
</div>
|
<div class="item">
|
<div class="la">合同编号</div>
|
<div class="val" style="color: #2080f7; cursor: pointer;" @click="handleDetail(info.contractId)">{{info.contractCode}}</div>
|
</div>
|
<div class="item">
|
<div class="la">创建时间</div>
|
<div class="val">{{info.createDate}}</div>
|
</div>
|
<div class="item">
|
<div class="la">付款方</div>
|
<div class="val">{{info.customerName}}</div>
|
</div>
|
<div class="item">
|
<div class="la">经办人</div>
|
<div class="val">{{info.realname}}</div>
|
</div>
|
<div class="item">
|
<div class="la">所属公司</div>
|
<div class="val">{{info.companyName}}</div>
|
</div>
|
<div class="item">
|
<div class="la">账单备注</div>
|
<div class="val">{{info.remark}}</div>
|
</div>
|
<div class="item"></div>
|
<div class="item"></div>
|
</div>
|
<div class="title">房源信息</div>
|
<div class="list" style="background: rgba(0,0,0,0); padding: 0;">
|
<el-table
|
:data="info.ywContractRoomList"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="projectName"
|
label="项目名称">
|
</el-table-column>
|
<el-table-column
|
prop="floorName"
|
label="楼宇名称">
|
</el-table-column>
|
<el-table-column
|
label="楼层/房号">
|
<template slot-scope="{row}">
|
{{row.buildingName}}/{{row.roomName}}
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="面积">
|
<template slot-scope="{row}">
|
{{row.area}}㎡
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="title">收支流水</div>
|
<div class="list" style="background: rgba(0,0,0,0); padding: 0;">
|
<el-table
|
:data="info.ywContractRevenueList"
|
border
|
style="width: 100%">
|
<el-table-column
|
label="流水类型">
|
<template slot-scope="{row}">
|
<span v-if="row.revenueType === 0">收入</span>
|
<span v-if="row.revenueType === 1">支出</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="customerName"
|
label="对方单位名称">
|
</el-table-column>
|
<el-table-column
|
label="费用类型">
|
<template slot-scope="{row}">
|
<span v-if="row.payType === 0">现金</span>
|
<span v-if="row.payType === 1">网银转账</span>
|
<span v-if="row.payType === 2">POS机</span>
|
<span v-if="row.payType === 3">支付宝</span>
|
<span v-if="row.payType === 4">微信</span>
|
<span v-if="row.payType === 5">转账支票</span>
|
<span v-if="row.payType === 6">其他</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="actPayDate"
|
label="入账日期">
|
</el-table-column>
|
<el-table-column
|
prop="actReceivableFee"
|
label="发生额">
|
</el-table-column>
|
<el-table-column
|
prop="createDate"
|
label="创建时间">
|
</el-table-column>
|
<el-table-column
|
prop="remark"
|
label="备注">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<!-- 创建流水 -->
|
<FlowingWater ref="flowingWater" @success="getDetails" @refresh="Refresh" />
|
<!-- 合同详情 -->
|
<ContractDetail ref="ContractDetailRef" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import FlowingWater from './flowingWater'
|
import ContractDetail from '../../contract/components/contractDetail'
|
import { getYwContractBillById } from '@/api/contract'
|
export default {
|
components: {
|
GlobalWindow,
|
FlowingWater,
|
ContractDetail
|
},
|
extends: BaseOpera,
|
data() {
|
return {
|
id: '',
|
visible: false,
|
activeTabs: '',
|
info: {},
|
tableData: []
|
}
|
},
|
methods: {
|
open (title, id) {
|
this.title = title
|
this.id = id
|
this.getDetails()
|
},
|
handleDetail (id) {
|
this.$refs.ContractDetailRef.open('合同详情', id)
|
},
|
getDetails () {
|
getYwContractBillById(this.id)
|
.then(res => {
|
this.info = res
|
this.visible = true
|
})
|
},
|
returnBillType () {
|
if (this.info.payStatus === 0) {
|
return 0
|
} else if (this.info.payStatus === 2) {
|
return this.info.billType
|
} else if ([3,4].includes(this.info.payStatus)) {
|
return 1
|
}
|
},
|
Refresh () {
|
this.$emit('success')
|
},
|
tabsClick(val) {
|
this.activeTabs = val
|
},
|
returnText (e) {
|
if (e === 0) {
|
return '租赁费'
|
} else if (e === 1) {
|
return '物业费'
|
} else if (e === 2) {
|
return '租赁押金'
|
} else if (e === 3) {
|
return '物业押金'
|
} else if (e === 4) {
|
return '水电费'
|
} else if (e === 5) {
|
return '杂项费'
|
} else if (e === 6) {
|
return '其他'
|
} else if (e === 7) {
|
return '保证金'
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
.home_title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.left {
|
font-weight: 500;
|
font-size: 16px;
|
margin-right: 10px;
|
display: flex;
|
align-items: center;
|
|
.status {
|
padding: 0 6px;
|
height: 22px;
|
line-height: 22px;
|
border-radius: 2px;
|
border: 1px solid #00BA92;
|
color: #00BA92;
|
font-weight: 400;
|
font-size: 12px;
|
color: #00BA92;
|
}
|
}
|
}
|
|
.remark {
|
background: #E8EBF7;
|
border-radius: 2px;
|
padding: 10px 20px;
|
font-size: 16px;
|
margin: 20px 0
|
}
|
|
.tabs {
|
border-bottom: 1px solid #DFE2E8;
|
display: flex;
|
margin-bottom: 20px;
|
.tab {
|
height: 58px;
|
line-height: 58px;
|
font-size: 16px;
|
color: #666666;
|
margin-right: 30px;
|
cursor: pointer;
|
}
|
|
.active {
|
font-weight: 500;
|
color: $primary-color;
|
border-bottom: 2px solid $primary-color;
|
}
|
}
|
|
.line {
|
width: 100%;
|
margin: 15px 0;
|
border-bottom: 1px dashed #eaeaea;
|
}
|
|
.main {
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: $primary-color;
|
margin-bottom: 15px;
|
}
|
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
/*background: #F7F7F7;*/
|
border-radius: 2px;
|
padding: 0 20px;
|
margin-bottom: 20px;
|
|
.item {
|
flex: 25%;
|
margin-bottom: 20px;
|
|
.la {
|
color: #7f7f7f;
|
margin-bottom: 5px;
|
}
|
}
|
}
|
}
|
</style>
|
