| | |
| | | }) |
| | | |
| | | // 该床位是否已由当前医生入座 |
| | | const isMine = computed(() => props.bed.docId != null && props.bed.docId === props.curUser.id) |
| | | // 注:用字符串比较,避免后端返回 number / 前端 userId 为 string 时误判("1" !== 1) |
| | | const isMine = computed( |
| | | () => props.bed.docId != null && String(props.bed.docId) === String(props.curUser.id) |
| | | ) |
| | | // 该床位是否**被别人**占用:此时不允许入座(不挤掉正在操作的人) |
| | | const occupiedByOther = computed( |
| | | () => props.bed.docId != null && String(props.bed.docId) !== String(props.curUser.id) |
| | | ) |
| | | // 占用情况文案:空闲 / 我的工位 / 已入座:张三(拿不到姓名时显示编号) |
| | | const seatStateText = computed(() => { |
| | | if (props.bed.docId == null) return '空闲' |
| | | if (isMine.value) return '我的工位' |
| | | return props.bed.docName ? `已入座:${props.bed.docName}` : `已入座(编号 ${props.bed.docId})` |
| | | }) |
| | | // 该床位是否就是当前会话使用中的工位 |
| | | const isCurSeat = computed( |
| | | () => props.bed.roomId === props.curBed.roomId && props.bed.bedNo === props.curBed.bedNo |
| | |
| | | {{ bed.bedNo }} {{ bed.docName }} {{ bed.status === 30 ? "-暂停" : "" }} |
| | | </div> |
| | | |
| | | <!-- |
| | | 占用情况(本次需求):一眼看出这个工位是"空闲 / 我的 / 别人的"。 |
| | | 原来卡片只在图片与姓名上体现,别人占了也看不出来,会出现"点了入座却被后端拒绝"的困惑。 |
| | | --> |
| | | <div |
| | | class="bed-card__seat" |
| | | :class="occupiedByOther ? 'is-occupied' : isMine ? 'is-mine' : 'is-free'" |
| | | > |
| | | {{ seatStateText }} |
| | | </div> |
| | | |
| | | <div class="bed-card__meta"> |
| | | <span v-for="(checkType, subIndex) in bed.checkTypes" :key="subIndex"> |
| | | {{ getCheckTypeName(checkType) }} |
| | |
| | | </div> |
| | | |
| | | <div class="bed-card__actions"> |
| | | <el-button v-if="!isMine" @click="onHaveSeatclick(bed)"> 入座 </el-button> |
| | | <!-- 已被**别人**占用时禁用「入座」(不挤掉正在操作的人),并用 tooltip 说明原因 --> |
| | | <el-tooltip |
| | | v-if="!isMine" |
| | | :content=" |
| | | occupiedByOther |
| | | ? `该工位由「${bed.docName || '其他医生'}」操作中,不能入座(不挤掉正在操作的人)` |
| | | : '入座到该工位' |
| | | " |
| | | placement="top" |
| | | > |
| | | <span> |
| | | <el-button :disabled="occupiedByOther" @click="onHaveSeatclick(bed)"> 入座 </el-button> |
| | | </span> |
| | | </el-tooltip> |
| | | <template v-else> |
| | | <el-button @click="onLeaveSeatclick(bed)"> 离座 </el-button> |
| | | <span v-if="isCurSeat" class="bed-card__current">当前</span> |
| | |
| | | text-align: center; |
| | | } |
| | | |
| | | /* 占用情况:空闲=绿、我的=主色、被别人占=橙(配合禁用入座按钮) */ |
| | | &__seat { |
| | | font-size: 13px; |
| | | font-weight: 600; |
| | | line-height: 1.3; |
| | | text-align: center; |
| | | |
| | | &.is-free { |
| | | color: var(--el-color-success); |
| | | } |
| | | |
| | | &.is-occupied { |
| | | color: var(--el-color-warning); |
| | | } |
| | | |
| | | &.is-mine { |
| | | color: var(--el-color-primary); |
| | | } |
| | | } |
| | | |
| | | &__actions { |
| | | display: flex; |
| | | flex-wrap: wrap; |