yxh
2026-10-18 1446994d504819c367e1ff667360eadb314f9ac6
src/components/RoomBedSelect/src/RoomBedSelect.vue
@@ -30,7 +30,20 @@
})
// 该床位是否已由当前医生入座
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
@@ -77,6 +90,17 @@
      {{ 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) }}
@@ -86,7 +110,20 @@
    </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>
@@ -192,6 +229,26 @@
    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;