realty/virgo.wzfrontend/console/src/views/work/space/reservation.vue

<template>
	<div class="hui-flex hui-content">
		<div class="hui-content-title">
			<div class="hui-title-item active">预约列表</div>
		</div>
		<div class="hui-flex-box hui-table">
			<el-table :data="tableData" row-key="id" border height="100%">
				<el-table-column label="序号" width="50">
					<template slot-scope="scope">
						<div style="text-align: center;">{{scope.$index + 1}}</div>
					</template>
				</el-table-column>
				<el-table-column label="预约人" prop="userName"></el-table-column>
				<el-table-column label="预约时间" prop="date"></el-table-column>
				<el-table-column label="预约房源" width="150">
					<template slot-scope="scope">
						<div class="hui-table-operation">
							<span class="table-operation" @click="look(scope.row)">详情</span>
						</div>
					</template>
				</el-table-column>
				<template slot="empty">
					<empty description="暂无数据"></empty>
				</template>
			</el-table>
		</div>
		<el-drawer title="房源详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<detail v-if="drawer" :detailId="detailId"></detail>
		</el-drawer>
	</div>
</template>

<script>
	import {
		getReservationList
	} from '@/httpApi/space'
	import detail from '@/components/work/space/house/detail'
	export default {
		data() {
			return {
				tableData: [],
				detailId: '',
				drawer: false
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				getReservationList({
					userId: 20,
					projectId: this.$store.getters.project.id
				}).then(res => {
					if (res.state) {
						this.tableData = res.data;
					}
				})
			},
			look(val) {
				this.detailId = val.projectItemTargetRoomId;
				this.drawer = true;
			}
		},
		components: {
			detail
		},
	}
</script>

<style lang="scss"></style>