优化了科室选择页面布局

yxh

2026-09-15 9b47bfa2cc65963b487035772db15eccebab9b54

 src/components/RoomBedSelect/src/RoomBedSelect.vue

@@ -1,9 +1,11 @@
<script lang="ts" setup>
import { RoomVO } from '@/api/ecg/room'
import { PropType } from "vue";
import { useCheckTypeStore } from "@/store/modules/checkType";
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'])

@@ -12,13 +14,9 @@
})

const props = defineProps({
  // defineProps({
  title: {
    type: Number,
    required: true
  },
  bedList: {
    type: Array as PropType<RoomVO[]>,
  // 一个床位一张卡片
  bed: {
    type: Object as PropType<RoomVO>,
    required: true
  },
  curBed: {
@@ -31,86 +29,129 @@
  }
})

const checkTypeStore = useCheckTypeStore();
// 该床位是否已由当前医生入座
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 = (newItem: RoomVO) => {
  emit('event-haveseat', newItem)
const onHaveSeatclick = (bed: RoomVO) => {
  emit('event-haveseat', bed)
}
const onLeaveSeatclick = (curItem: RoomVO) => {
  emit('event-leaveseat', curItem)
const onLeaveSeatclick = (bed: RoomVO) => {
  emit('event-leaveseat', bed)
}
const onSetCurSeatclick = (curItem: RoomVO) => {
  emit('event-setcurseat', curItem)
const onSetCurSeatclick = (bed: RoomVO) => {
  emit('event-setcurseat', bed)
}

/** 初始化 **/
onMounted(() => {
  console.info(props.bedList)
})

</script>

<template>
  <el-card style="width: 200px" shadow="hover">
    <template #header>{{ bedList[0].roomName }}</template>
    <div v-for="(bedItem, index) in bedList" :key="index">
      <div class="deskwarp">
  <el-card class="bed-card" shadow="hover" :body-style="{ padding: '10px' }">
    <template #header>
      <div class="bed-card__title">{{ bed.roomName }}</div>
    </template>

        <div v-for="(checkType, subIndex) in bedItem.checkTypes" :key="subIndex">
          {{ getCheckTypeName(checkType) }}
        </div>
        <div>
          {{ bedItem.opType === 1 ? "领用" : "" }}
          {{ bedItem.opType === 2 ? "安装" : "" }}
        </div>
    <img
      class="bed-card__img"
      :src="bed.docId === null ? openImg : doctorImg"
      :alt="bed.docId === null ? '无医生' : '有医生'"
    />

        <img v-if="bedItem.docId === null" src="@/assets/room/open.jpg" style="width: 100%" alt="无医生" />
        <img v-else src="@/assets/room/desk-doctor.jpg" style="width: 100%" alt="有医生" />
        <div>{{ bedItem.bedNo }} {{ bedItem.docName }} {{ bedItem.status === 30 ? "-暂停" : "" }}</div>
        <el-button v-if="bedItem.docId == null || bedItem.docId != curUser.id" @click="onHaveSeatclick(bedItem)">
          入座
        </el-button>
        <div v-if="bedItem.docId === curUser.id">
          <el-button @click=onLeaveSeatclick(bedItem)>
            离座
          </el-button>
          <span v-if="bedItem.roomId === curBed.roomId && bedItem.bedNo === curBed.bedNo">
            当前
          </span>
          <el-button v-else @click=onSetCurSeatclick(bedItem)>
            设为当前
          </el-button>
        </div>
        <el-divider />
      </div>
    <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">
.card-title {
  font-size: 14px;
  font-weight: 600;

  &::before {
    position: relative;
    top: 8px;
    left: -5px;
    display: inline-block;
    width: 3px;
    height: 14px;
    //background-color: #105cfb;
    background: var(--el-color-primary);
    border-radius: 5px;
    content: '';
    transform: translateY(-50%);
  }
}

.deskwarp {
.bed-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /*height: 260px;*/
  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>