From 9b47bfa2cc65963b487035772db15eccebab9b54 Mon Sep 17 00:00:00 2001
From: yxh <172933527@qq.com>
Date: 星期二, 15 九月 2026 23:38:41 +0800
Subject: [PATCH] 优化了科室选择页面布局
---
src/components/RoomBedSelect/src/RoomBedSelect.vue | 185 ++++++++++++++++++++++++++++------------------
1 files changed, 113 insertions(+), 72 deletions(-)
diff --git a/src/components/RoomBedSelect/src/RoomBedSelect.vue b/src/components/RoomBedSelect/src/RoomBedSelect.vue
index 174ba64..d53c21d 100644
--- a/src/components/RoomBedSelect/src/RoomBedSelect.vue
+++ b/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>
--
Gitblit v1.9.3