From 9b47bfa2cc65963b487035772db15eccebab9b54 Mon Sep 17 00:00:00 2001
From: yxh <172933527@qq.com>
Date: 星期二, 15 九月 2026 23:38:41 +0800
Subject: [PATCH] 优化了科室选择页面布局
---
src/views/ecg/room/RoomLoginSelect.vue | 74 ++++++++++++--
src/components/RoomBedSelect/src/RoomBedSelect.vue | 185 ++++++++++++++++++++++--------------
.env.prod | 2
3 files changed, 179 insertions(+), 82 deletions(-)
diff --git a/.env.prod b/.env.prod
index 65868c2..0587f14 100644
--- a/.env.prod
+++ b/.env.prod
@@ -5,11 +5,13 @@
# 璇锋眰璺緞
VITE_BASE_URL='http://10.0.2.193'
+# VITE_BASE_URL='http://localhost'
# 鏂囦欢涓婁紶绫诲瀷锛歴erver - 鍚庣涓婁紶锛� client - 鍓嶇鐩磋繛涓婁紶锛屼粎鏀寔S3鏈嶅姟
VITE_UPLOAD_TYPE=server
# 涓婁紶璺緞
VITE_UPLOAD_URL='http://10.0.2.193/admin-api/infra/file/upload'
+# VITE_UPLOAD_URL='http://localhost/admin-api/infra/file/upload'
# 鎺ュ彛鍦板潃
VITE_API_URL=/admin-api
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>
diff --git a/src/views/ecg/room/RoomLoginSelect.vue b/src/views/ecg/room/RoomLoginSelect.vue
index 0602391..9922457 100644
--- a/src/views/ecg/room/RoomLoginSelect.vue
+++ b/src/views/ecg/room/RoomLoginSelect.vue
@@ -1,14 +1,16 @@
<template>
- <div style="display: flex; flex-direction: column; align-items: center; height: 100vh; overflow-y: auto;">
- <div style="display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px">
- <div class=roomwrap v-for="(value, key) in bedMap" :key="key">
- <RoomBedSelect :title="key" :bedList="value" :curBed="curSel" :curUser='curUser' @event-haveseat="haveSeat" @event-leaveseat="leaveSeat" @event-setcurseat="setCurSeat"/>
+ <div class="room-select">
+ <div class="room-select__scroll">
+ <div class="room-select__list">
+ <div class="room-select__item" v-for="(bed, index) in bedList" :key="`${bed.roomId}-${bed.bedNo}-${index}`">
+ <RoomBedSelect :bed="bed" :curBed="curSel" :curUser='curUser' @event-haveseat="haveSeat" @event-leaveseat="leaveSeat" @event-setcurseat="setCurSeat"/>
+ </div>
+ <el-empty v-if="isEmptyOpeningBed" class="room-select__empty" description="宸ヤ綅娌℃湁寮�鏀�"/>
</div>
- <el-empty v-if="isEmptyOpeningBed" description="宸ヤ綅娌℃湁寮�鏀�"/>
</div>
- <div>
- <el-button @click="confirmCurSel">纭</el-button>
- <el-button @click="resetPage">閲嶇疆</el-button>
+ <div class="room-select__actions">
+ <el-button type="primary" size="large" @click="confirmCurSel">纭</el-button>
+ <el-button size="large" @click="resetPage">閲嶇疆</el-button>
</div>
</div>
</template>
@@ -44,6 +46,22 @@
ip: "",
checkTypes: [],
opType: 0
+})
+
+// 涓�涓簥浣嶄竴涓崱鐗囷細鎶� {璇婂鍚�: 搴婁綅[]} 鎷嶅钩鎴愬簥浣嶅垪琛�
+const bedList = computed<RoomVO[]>(() => {
+ const list: RoomVO[] = []
+ const map = bedMap.value
+ if (!map) {
+ return list
+ }
+ for (const key in map) {
+ const beds = map[key] as RoomVO[]
+ if (beds && beds.length > 0) {
+ list.push(...beds)
+ }
+ }
+ return list
})
/** 鍒濆鍖� **/
@@ -289,7 +307,43 @@
</script>
<style scoped lang="scss">
-.roomwrap {
- margin-right: 20px;
+// 搴婁綅澶氭椂鍏ㄩ儴鍘嬬缉鍦ㄤ竴灞忓唴鏄剧ず锛屼笉鍑虹幇椤甸潰婊氬姩鏉�
+.room-select {
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
+ height: 100vh;
+ padding: 15px;
+ overflow: hidden;
+
+ // 楂樺害闅忓崱鐗囨暟閲忚嚜閫傚簲锛涘崱鐗囧鍒拌涓嶄笅鏃舵墠鍐呴儴婊氬姩锛堥〉闈㈡湰韬缁堜笉婊氬姩锛�
+ &__scroll {
+ flex: 0 1 auto;
+ min-height: 0;
+ overflow-y: auto;
+ }
+
+ &__list {
+ display: grid;
+ // 鍥哄畾鍒楀锛氬崱鐗囦笉浼氳鎷変几鍙樺舰锛屼粠宸﹀埌鍙炽�佷粠涓婂線涓嬫帓鍒�
+ grid-template-columns: repeat(auto-fit, 188px);
+ justify-content: center;
+ gap: 12px;
+ }
+
+ &__item {
+ min-width: 0;
+ }
+
+ // 绌虹姸鎬佽法婊℃暣琛岋紝閬垮厤琚尋鍒板崟鐙竴鍒楅噷
+ &__empty {
+ grid-column: 1 / -1;
+ }
+
+ &__actions {
+ flex: none;
+ padding-top: 12px;
+ text-align: center;
+ }
}
</style>
--
Gitblit v1.9.3