<template>
|
<div>
|
<template v-if='model.type == 0'>
|
<div class='room solid' :style='`width: ${basic_width * 1.5}px; height: ${basic_height* 1.2}px;background-color:${data.bgColor}`' @contextmenu.prevent="onContextmenu($event,data)">
|
<div class='room-item flex justify-between flex2'>
|
<div :class="{ 'item-left': data.no !=null }">{{data.no}}</div>
|
<div class='item-right' v-if='data.position'>{{ data.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div style='white-space: pre-wrap;' v-html='data.name'></div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2' >
|
<div>{{findDataBySeat(data.userList,1,'realname')}}</div>
|
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{findDataBySeat(data.userList,1,'seatPhone')}}</div>
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
</template>
|
<template v-else-if='model.type == 1'>
|
<div class='room solid' :style='`width: ${basic_width * 1.2}px; height: ${basic_height* 1.2}px;background-color:${data.bgColor}`' @contextmenu.prevent="onContextmenu($event,data)">
|
<div class='room-item flex justify-between flex2'>
|
<div :class="{ 'item-left': data.no !=null }">{{data.no}}</div>
|
<div class='item-right' v-if='data.position'>{{ data.position }}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex3'>
|
<div style='white-space: pre-wrap;' v-html='data.name'></div>
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{findDataBySeat(data.userList,1,'realname')}}</div>
|
</div>
|
<div class='room-item flex justify-center align-center flex2'>
|
<div>{{findDataBySeat(data.userList,1,'seatPhone')}}</div>
|
|
</div>
|
<div class='flex1'>
|
<div></div>
|
|
</div>
|
</div>
|
|
</template>
|
|
<template v-else-if='model.type == 2'>
|
<div class='room flex flex-direction solid' :style='`width: ${basic_width *1.2 }px; height: ${basic_height *1.2}px;background-color:${data.bgColor}`' @contextmenu.prevent="onContextmenu($event,data)">
|
|
<div class='room-item flex justify-between flex2'>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(data.userList,1,'realname') }}</div>
|
<div>{{ findDataBySeat(data.userList,1,'seatPhone') }}</div>
|
</div>
|
<div>{{ data.no }}</div>
|
<div>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(data.userList,2,'realname') }}</div>
|
<div>{{ findDataBySeat(data.userList,2,'seatPhone') }}</div>
|
</div>
|
|
</div>
|
</div>
|
<div class='flex align-center justify-center flex3'>
|
<div style='white-space: pre-wrap;' v-html='data.name'></div>
|
|
</div>
|
<div class='room-item flex justify-between flex2'>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(data.userList,3,'realname') }}</div>
|
<div>{{ findDataBySeat(data.userList,3,'seatPhone') }}</div>
|
</div>
|
<div style='font-size: 10px;'>
|
<div>{{ findDataBySeat(data.userList,4,'realname') }}</div>
|
<div>{{ findDataBySeat(data.userList,4,'seatPhone') }}</div>
|
</div>
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
</template>
|
|
<script>
|
import get from 'lodash.get'
|
export default {
|
name: 'RoomBlock',
|
props:{
|
model:{
|
type:Object,
|
required: true
|
},
|
data:{
|
type:Object,
|
default() {
|
return {}; // 或者 []
|
},
|
required: false
|
}
|
},
|
data() {
|
return {
|
basic_width: 100,
|
basic_height: 100
|
}
|
},
|
methods:{
|
findDataBySeat(userList,seatNo,colmun){
|
if(userList){
|
const res = userList.find(item=>item.seatNo == seatNo)
|
return res ? res[colmun] : "";
|
}
|
},
|
onContextmenu(event,data) {
|
this.$contextmenu({
|
items: [
|
{
|
label: "编辑",
|
divided: true,
|
icon:"el-icon-edit",
|
onClick: () => {
|
this.$emit("edit",data)
|
}
|
},
|
{ label: "重新加载(R)", icon: "el-icon-refresh" },
|
|
],
|
event,
|
//x: event.clientX,
|
//y: event.clientY,
|
customClass: "custom-class",
|
zIndex: 3,
|
minWidth: 230
|
});
|
return false;
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
@import "seat";
|
|
|
</style>
|
