| | |
| | | @confirm="confirm"> |
| | | <div class="main"> |
| | | <div class="main_head"> |
| | | <span>租客:乒乓球俱乐部</span> |
| | | <span>合同编号: 2024-04-001-202405-0019</span> |
| | | <span>租客:{{info.renterName}}</span> |
| | | <span>合同编号: {{info.code}}</span> |
| | | </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 label="楼层/房号" show-overflow-tooltip> |
| | | <template slot-scope="{row}"> |
| | | {{row.floorName}}{{row.roomNum}} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="area" label="面积" show-overflow-tooltip></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div class="title">退租信息</div> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="la">退租类型</div> |
| | | <div class="val">{{ info.code }}</div> |
| | | <div class="val" v-if="info.btType === 0">到期退租</div> |
| | | <div class="val" v-if="info.btType === 1">换房退租</div> |
| | | <div class="val" v-if="info.btType === 2">违约退租</div> |
| | | <div class="val" v-if="info.btType === 3">协商退租</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">退租日期</div> |
| | | <div class="val">{{ info.userName }}</div> |
| | | <div class="val">{{ info.btDate }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">经办人</div> |
| | | <div class="val">{{ info.creatorName }}</div> |
| | | <div class="val">{{ info.userName }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">协议签订日期</div> |
| | | <div class="val">{{ info.totalArea }}㎡</div> |
| | | <div class="val">{{ info.signDate }}㎡</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div class="la">退租原因</div> |
| | | <div class="val">{{ info.companyName }}</div> |
| | | <div class="val">{{ info.btInfo }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="title">房源信息</div> |
| | | <div class="list"> |
| | | <el-table :data="roomList" stripe> |
| | | <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip /> |
| | | <el-table-column prop="buildingName" label="楼宇名称" show-overflow-tooltip /> |
| | | <el-table-column prop="buildingName" label="楼层/房号" show-overflow-tooltip></el-table-column> |
| | | <el-table-column prop="area" label="面积" show-overflow-tooltip></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | </GlobalWindow> |
| | |
| | | <script> |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import { getById } from '@/api/contract' |
| | | export default { |
| | | name: "terminationAgreement", |
| | | components: { |
| | |
| | | extends: BaseOpera, |
| | | data() { |
| | | return { |
| | | roomList: [], |
| | | id: null, |
| | | info: {} |
| | | } |
| | | }, |
| | | methods: { |
| | | |
| | | open (title, id) { |
| | | this.title = title |
| | | this.id = id |
| | | this.getData() |
| | | }, |
| | | getData () { |
| | | getById(this.id) |
| | | .then(res => { |
| | | this.info = res |
| | | this.visible = true |
| | | }) |
| | | }, |
| | | } |
| | | } |
| | | </script> |