<template>
|
<GlobalWindow :title="'账单详情'" :visible.sync="visible" :confirm-working="isWorking" @close="close"
|
@confirm="confirm">
|
<div class="home_title">
|
<div class="left">
|
<span class="mr10">付款方：xxx</span>
|
<span class="status">status</span>
|
</div>
|
<el-button plain type="primary">新建收支流水</el-button>
|
</div>
|
<div class="remark">
|
<div class="item">
|
<div class="la">账单状态</div>
|
<div class="val">已结清</div>
|
</div>
|
</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">
|
<div class="title">基础信息</div>
|
<div class="list">
|
<div class="item">
|
<div class="la">账单类型</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">计费周期</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">账单金额(元)</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">账单编号</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">合同编号</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">创建时间</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">付款方</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">经办人</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">所属公司</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">账单备注</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
</div>
|
<div class="title">房源信息</div>
|
<div class="list">
|
<div class="item">
|
<div class="la">项目名称</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">楼宇名称</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">楼层/房号</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">面积</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
</div>
|
<div class="title">租客信息</div>
|
<div class="list">
|
<div class="item">
|
<div class="la">租客</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">经办人</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
</div>
|
<div class="title">租赁条款</div>
|
<div class="list">
|
<div class="item">
|
<div class="la">押金金额</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">付款方式</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
<div class="item">
|
<div class="la">免租期</div>
|
<div class="val">{{ info.aaa }}</div>
|
</div>
|
</div>
|
<el-table :data="info.list" stripe>
|
<el-table-column prop="" label="开始日期" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="" label="结束日期" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="" label="合同单价" min-width="100" show-overflow-tooltip />
|
<el-table-column prop="" label="付款提前天数" min-width="100" show-overflow-tooltip />
|
</el-table>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
export default {
|
components: {
|
GlobalWindow
|
},
|
extends: BaseOpera,
|
data() {
|
return {
|
id: '',
|
visible: true,
|
activeTabs: '',
|
info: {}
|
}
|
},
|
methods: {
|
tabsClick(val) {
|
this.activeTabs = val
|
},
|
getDetail() {
|
|
}
|
}
|
}
|
</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-top: 2px;
|
}
|
}
|
}
|
}
|
</style>
|
