<script lang="ts" setup>
|
import { RoomVO } from '@/api/ecg/room'
|
import { PropType } from "vue";
|
import { UserVO } from "@/store/modules/user";
|
import { getCheckTypeName } from "../../../utils/checkTypeFormatter";
|
// 动态 :src 不会被 Vite 自动处理，需要显式 import
|
import openImg from '@/assets/room/open.jpg'
|
import doctorImg from '@/assets/room/desk-doctor.jpg'
|
|
const emit = defineEmits(['event-haveseat', 'event-leaveseat', 'event-setcurseat'])
|
|
defineComponent({
|
name: 'RoomBedSelect'
|
})
|
|
const props = defineProps({
|
// 一个床位一张卡片
|
bed: {
|
type: Object as PropType<RoomVO>,
|
required: true
|
},
|
curBed: {
|
type: Object as PropType<RoomVO>,
|
required: true
|
},
|
curUser: {
|
type: Object as PropType<UserVO>,
|
required: true
|
}
|
})
|
|
// 该床位是否已由当前医生入座
|
const isMine = computed(() => props.bed.docId != null && props.bed.docId === props.curUser.id)
|
// 该床位是否就是当前会话使用中的工位
|
const isCurSeat = computed(
|
() => props.bed.roomId === props.curBed.roomId && props.bed.bedNo === props.curBed.bedNo
|
)
|
|
const onHaveSeatclick = (bed: RoomVO) => {
|
emit('event-haveseat', bed)
|
}
|
const onLeaveSeatclick = (bed: RoomVO) => {
|
emit('event-leaveseat', bed)
|
}
|
const onSetCurSeatclick = (bed: RoomVO) => {
|
emit('event-setcurseat', bed)
|
}
|
|
</script>
|
|
<template>
|
<el-card class="bed-card" shadow="hover" :body-style="{ padding: '10px' }">
|
<template #header>
|
<div class="bed-card__title">{{ bed.roomName }}</div>
|
</template>
|
|
<img
|
class="bed-card__img"
|
:src="bed.docId === null ? openImg : doctorImg"
|
:alt="bed.docId === null ? '无医生' : '有医生'"
|
/>
|
|
<div class="bed-card__label">
|
{{ bed.bedNo }} {{ bed.docName }} {{ bed.status === 30 ? "-暂停" : "" }}
|
</div>
|
|
<div class="bed-card__meta">
|
<span v-for="(checkType, subIndex) in bed.checkTypes" :key="subIndex">
|
{{ getCheckTypeName(checkType) }}
|
</span>
|
<span v-if="bed.opType === 1">领用</span>
|
<span v-if="bed.opType === 2">安装</span>
|
</div>
|
|
<div class="bed-card__actions">
|
<el-button v-if="!isMine" @click="onHaveSeatclick(bed)"> 入座 </el-button>
|
<template v-else>
|
<el-button @click="onLeaveSeatclick(bed)"> 离座 </el-button>
|
<span v-if="isCurSeat" class="bed-card__current">当前</span>
|
<el-button v-else @click="onSetCurSeatclick(bed)"> 设为当前 </el-button>
|
</template>
|
</div>
|
</el-card>
|
</template>
|
|
<style scoped lang="scss">
|
.bed-card {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
overflow: hidden;
|
|
// 卡片头（诊室名）紧凑化
|
:deep(.el-card__header) {
|
flex: none;
|
padding: 6px 10px;
|
text-align: center;
|
}
|
|
// 卡片体：纵向排列、水平居中
|
:deep(.el-card__body) {
|
display: flex;
|
flex: 1;
|
flex-direction: column;
|
align-items: center;
|
gap: 4px;
|
}
|
|
&__title {
|
font-size: 16px;
|
font-weight: 600;
|
line-height: 1.2;
|
}
|
|
// 图片固定小尺寸，不再随卡片宽度放大
|
&__img {
|
flex: none;
|
width: 80px;
|
height: 64px;
|
object-fit: contain;
|
}
|
|
&__label {
|
font-size: 15px;
|
font-weight: 600;
|
line-height: 1.3;
|
// 列宽固定，允许换行避免溢出卡片
|
text-align: center;
|
}
|
|
&__meta {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 0 5px;
|
justify-content: center;
|
font-size: 14px;
|
line-height: 1.3;
|
color: var(--el-text-color-secondary);
|
text-align: center;
|
}
|
|
&__actions {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 5px;
|
align-items: center;
|
justify-content: center;
|
margin-top: 3px;
|
}
|
|
&__current {
|
font-size: 15px;
|
font-weight: 600;
|
color: var(--el-color-primary);
|
}
|
}
|
</style>
|
