<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:withFooter="false"
|
:confirm-working="isWorking"
|
@close="close"
|
@confirm="confirm">
|
<div class="home_title" v-if="info">
|
<div class="left">
|
<span class="mr10">单位名称：{{info.renterName}}</span>
|
<el-tag type="success" v-if="info.status === 0">待执行</el-tag>
|
<el-tag type="success" v-if="info.status === 1">正常执行中</el-tag>
|
<el-tag type="info" v-if="info.status === 2">已到期</el-tag>
|
<el-tag type="info" v-if="info.status === 3">退租结算中</el-tag>
|
<el-tag type="info" v-if="info.status === 4">已退租</el-tag>
|
</div>
|
<el-button plain type="danger" v-if="[0, 1, 2].includes(info.status)" @click="refund">退租</el-button>
|
</div>
|
<div class="remark" v-if="info">{{info.remark}}</div>
|
<div class="tabs">
|
<div class="tab" :class="{ active: activeTabs === 0 }" @click="tabsClick(0)">合同信息</div>
|
<div class="tab" :class="{ active: activeTabs === 1 }" @click="tabsClick(1)">关联账单</div>
|
<div class="tab" :class="{ active: activeTabs === 2 }" @click="tabsClick(2)">操作记录</div>
|
</div>
|
<div class="main" v-if="activeTabs === 0 && info">
|
<div class="title">基础信息</div>
|
<div class="list">
|
<div class="item">
|
<div class="la">合同编号</div>
|
<div class="val">{{ info.code }}</div>
|
</div>
|
<div class="item">
|
<div class="la">经办人</div>
|
<div class="val">{{ info.userName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">创建人</div>
|
<div class="val">{{ info.creatorName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">合同租赁数</div>
|
<div class="val">{{ info.totalArea }}</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.signDate }}</div>
|
</div>
|
<div class="item">
|
<div class="la">开始日期</div>
|
<div class="val">{{ info.startDate }}</div>
|
</div>
|
<div class="item">
|
<div class="la">结束日期</div>
|
<div class="val">{{ info.endDate }}</div>
|
</div>
|
<div class="item">
|
<div class="la">所属项目</div>
|
<div class="val">{{ info.projectName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">结果取整(四舍五入)</div>
|
<div class="val">{{ info.roundedUp === 1 ? '是' : '否' }}</div>
|
</div>
|
</div>
|
<div class="title">房源信息</div>
|
<div class="list">
|
<el-table :data="info.roomList" stripe>
|
<el-table-column prop="projectName" label="项目名称" show-overflow-tooltip />
|
<el-table-column prop="buildingName" label="楼宇名称" show-overflow-tooltip />
|
<el-table-column prop="" label="楼层/房号" show-overflow-tooltip>
|
<template slot-scope="{row}">
|
{{row.floorName}}/{{row.code}}
|
</template>
|
</el-table-column>
|
<el-table-column prop="area" label="面积" show-overflow-tooltip>
|
<template slot-scope="{row}">
|
{{row.area}}㎡
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="title">租客信息</div>
|
<div class="list">
|
<div class="item">
|
<div class="la">租客</div>
|
<div class="val">{{ info.renterName }}</div>
|
</div>
|
<div class="item">
|
<div class="la">经办人</div>
|
<div class="val">{{ info.userName }}</div>
|
</div>
|
</div>
|
<div class="title" v-if="info.type === 2 || info.type === 0">租赁条款</div>
|
<div class="list" style="background: #F7F7F7; padding: 15px 20px;" v-if="info.type === 2 || info.type === 0">
|
<div class="item">
|
<div class="la">押金金额</div>
|
<div class="val">{{ info.zlDeposit }}</div>
|
</div>
|
<div class="item">
|
<div class="la">付款方式</div>
|
<div class="val" v-if="info.zlPayType === 0">一次性付款</div>
|
<div class="val" v-if="info.zlPayType === 1">每三个月一付</div>
|
<div class="val" v-if="info.zlPayType === 2">六个月一付</div>
|
<div class="val" v-if="info.zlPayType === 3">一年一付</div>
|
</div>
|
<div class="item">
|
<div class="la">免租期</div>
|
<div class="val">{{ info.zlFreeStartDate }} ~ {{ info.zlFreeEndDate }}</div>
|
</div>
|
</div>
|
<el-table :data="info.zlDetailList" stripe style="margin-bottom: 20px;" v-if="info.type === 2 || info.type === 0">
|
<el-table-column prop="startDate" label="开始日期" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="endDate" label="结束日期" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="price" label="合同单价" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="advanceDays" label="付款提前天数" min-width="100" show-overflow-tooltip />
|
</el-table>
|
<div class="title" v-if="info.type === 1 || info.type === 0">物业费条款</div>
|
<div class="list" style="background: #F7F7F7; padding: 15px 20px;" v-if="info.type === 1 || info.type === 0">
|
<div class="item">
|
<div class="la">押金金额</div>
|
<div class="val">{{ info.wyDeposit }}</div>
|
</div>
|
<div class="item">
|
<div class="la">付款方式</div>
|
<div class="val" v-if="info.wyPayType === 0">一次性付款</div>
|
<div class="val" v-if="info.wyPayType === 1">每三个月一付</div>
|
<div class="val" v-if="info.wyPayType === 2">六个月一付</div>
|
<div class="val" v-if="info.wyPayType === 3">一年一付</div>
|
</div>
|
<div class="item">
|
<div class="la">免租期</div>
|
<div class="val">{{ info.wyFreeStartDate }} ~ {{ info.wyFreeEndDate }}</div>
|
</div>
|
</div>
|
<el-table :data="info.wyDetailList" stripe style="margin-bottom: 20px;" v-if="info.type === 1 || info.type === 0">
|
<el-table-column prop="startDate" label="开始日期" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="endDate" label="结束日期" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="price" label="合同单价" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="advanceDays" label="付款提前天数" min-width="100" show-overflow-tooltip />
|
</el-table>
|
<div class="title">合同附件</div>
|
<div class="list">
|
<el-table :data="info.fileList" stripe>
|
<el-table-column prop="name" label="附件名称" show-overflow-tooltip />
|
<el-table-column prop="userName" label="操作人" show-overflow-tooltip />
|
<el-table-column prop="createDate" label="操作时间" show-overflow-tooltip />
|
</el-table>
|
</div>
|
</div>
|
<div class="main" v-if="activeTabs === 1 && info">
|
<el-radio-group v-model="type" @change="changeType" style="margin-bottom: 20px;">
|
<el-radio-button :label="0">收款账单</el-radio-button>
|
<el-radio-button :label="1">付款账单</el-radio-button>
|
</el-radio-group>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<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
|
prop="totleFee"
|
label="账单金额">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="receivableFee"
|
label="应收金额">
|
</el-table-column>
|
<el-table-column
|
prop="actReceivableFee"
|
label="实收金额">
|
</el-table-column>
|
<el-table-column
|
prop="needReceivableFee"
|
label="需收金额">
|
<template slot-scope="{row}">
|
<el-tag type="success" v-if="row.needReceivableFee > 0">收</el-tag>
|
<el-tag type="warning" v-else>付</el-tag>
|
<span style="margin-left: 10px;">{{Math.abs(row.needReceivableFee)}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="账单来源">
|
<template slot-scope="{row}">
|
<span v-if="row.type === 0">合同账单</span>
|
<span v-if="row.type === 1">自建账单</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="planPayDate"
|
label="应收日期">
|
</el-table-column>
|
<el-table-column
|
label="是否逾期">
|
<template slot-scope="{row}">
|
<span v-if="row.isOverdue === 0">否</span>
|
<span v-if="row.isOverdue === 1">是</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="状态">
|
<template slot-scope="{row}">
|
<span v-if="row.payStatus === 0">待收款</span>
|
<span v-if="row.payStatus === 1">已结清</span>
|
<span v-if="row.payStatus === 2">部分结清</span>
|
<span v-if="row.payStatus === 3">待付款</span>
|
<span v-if="row.payStatus === 4">待退款</span>
|
<span v-if="row.payStatus === 5">已关闭</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 15, 20, 25]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<div class="main" v-if="activeTabs === 2 && info">
|
<div class="title">操作记录</div>
|
<el-table
|
:data="info.logList"
|
border
|
style="width: 100%">
|
<el-table-column
|
:key="Date.now()"
|
width="200"
|
prop="param1"
|
label="操作人">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
width="200"
|
prop="createDate"
|
label="操作时间">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
width="150"
|
label="操作">
|
<template slot-scope="{row}">
|
<span v-if="row.objType === 0">工单创建</span>
|
<span v-if="row.objType === 1">指派</span>
|
<span v-if="row.objType === 2">处理</span>
|
<span v-if="row.objType === 3">合同创建</span>
|
<span v-if="row.objType === 4">合同变更</span>
|
<span v-if="row.objType === 5">合同退租</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="content"
|
label="操作内容">
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 退租 -->
|
<TerminateLease ref="terminateLease" @success="getData" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import TerminateLease from './terminateLease'
|
import { getById } from '@/api/contract'
|
import { fetchList } from '@/api/bill'
|
export default {
|
components: {
|
GlobalWindow,
|
TerminateLease
|
},
|
extends: BaseOpera,
|
data() {
|
return {
|
id: '',
|
visible: false,
|
activeTabs: 0,
|
type: 0,
|
info: null,
|
pageSize: 10,
|
page: 1,
|
total: 0,
|
tableData: [],
|
|
loading: false
|
}
|
},
|
methods: {
|
open (title, id) {
|
this.title = title
|
this.activeTabs = 0
|
this.type = 0
|
this.page = 1
|
this.pageSize = 10
|
this.tableData = []
|
this.id = id
|
this.getData()
|
},
|
getData () {
|
getById(this.id)
|
.then(res => {
|
this.info = res
|
this.getList()
|
this.visible = true
|
})
|
},
|
refund () {
|
this.$refs.terminateLease.open('新建退租协议', JSON.parse(JSON.stringify(this.info)))
|
},
|
getList () {
|
this.loading = true
|
fetchList({
|
capacity: this.pageSize,
|
page: this.page,
|
model: {
|
billType: this.type,
|
contractId: this.info.id
|
}
|
}).then(res => {
|
this.loading = false
|
this.tableData = res.records
|
this.total = res.total
|
})
|
},
|
changeType (e) {
|
console.log(e)
|
this.type = e
|
this.page = 1
|
this.pageSize = 10
|
this.tableData = []
|
this.getList()
|
},
|
tabsClick(val) {
|
this.activeTabs = val
|
},
|
getDetail() {
|
|
},
|
handleSizeChange (e) {
|
this.pageSize = e
|
this.getList()
|
},
|
handleCurrentChange (e) {
|
this.page = e
|
this.getList()
|
}
|
}
|
}
|
</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;
|
}
|
}
|
|
.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: 15px 20px;*/
|
margin-bottom: 20px;
|
|
.item {
|
width: 25%;
|
margin-bottom: 16px;
|
|
.la {
|
color: #7f7f7f;
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
</style>
|
