<!--
|
系统顶栏「当前工位 / 围观对象」标签（主/围观模型）
|
|
显示三种状态：
|
· 我在看自己的工位 → 绿色 `诊室：1号门诊 · A1` （可操作）
|
· 我在围观别人的工位 → 橙色 `围观：2号门诊 · B1（主人 张三）` （只读）
|
· 尚未选择工位 → 灰色 `未选择工位`
|
|
交互：**点击**（不论哪种状态）→ 打开「诊室工位选择」页。
|
数据以后端为准（`GET /clinic/room/my-seat` 取"我入座的工位"），刷新/新标签页也准确。
|
-->
|
<script setup lang="ts">
|
import { computed, onMounted } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { useRoomStore } from '@/store/modules/room'
|
|
defineOptions({ name: 'CurrentRoomTag' })
|
|
const roomStore = useRoomStore()
|
const router = useRouter()
|
|
/** 我是否正在看自己入座的工位（= 可操作） */
|
const canOperate = computed(() => roomStore.getCanOperate)
|
/** 是否选择了要看的工位 */
|
const hasView = computed(() => roomStore.getIsSetRoom && !!roomStore.getViewText)
|
|
const tagType = computed(() => {
|
if (!hasView.value) return 'info'
|
return canOperate.value ? 'success' : 'warning'
|
})
|
|
const tagText = computed(() => {
|
// 【本需求】顶栏统一显示「当前工位：+ 实际工位」，替代原来的「诊室：…」/「围观：…」前缀
|
if (!hasView.value) return '当前工位：未选择'
|
// 【本需求·一人多工位】占多个工位时补一个数量提示，便于知道"我还在别的岗位"
|
const seatCount = roomStore.getMySeatCount
|
const countSuffix = seatCount > 1 ? `（我的工位 ${seatCount} 个）` : ''
|
if (canOperate.value) return `当前工位：${roomStore.getViewText}${countSuffix}`
|
const owner = roomStore.viewOwnerName
|
return `当前工位：${roomStore.getViewText}（围观${owner ? `，主人 ${owner}` : '，只读'}）`
|
})
|
|
const tooltip = computed(() => {
|
if (!hasView.value) return '尚未选择工位，点击选择要查看/入座的工位'
|
const seats = roomStore.getMySeats || []
|
const seatListText =
|
seats.length > 0
|
? '我的工位：' + seats.map((s) => `${s.roomName || '诊室' + (s.roomId ?? '')} · ${s.bedNo ?? ''}`).join('、')
|
: ''
|
if (canOperate.value) {
|
return `当前工位：${roomStore.getViewText}（点击切换工位）` + (seatListText ? `；${seatListText}` : '')
|
}
|
const mine = roomStore.getSeatText
|
return `围观模式（只读）：正在查看「${roomStore.getViewText}」`
|
+ (roomStore.viewOwnerName ? `，主人 ${roomStore.viewOwnerName}` : '')
|
+ (seatListText ? `；${seatListText}` : (mine ? `；我入座的工位：${mine}` : '；我还没有入座'))
|
+ '。点击可切换工位'
|
})
|
|
/** 点击 → 打开「诊室工位选择」页（未选=去选；已选=去切换） */
|
const onClick = () => {
|
router.push({ path: '/roomselect' })
|
}
|
|
onMounted(async () => {
|
// 查询一次：已入座则补齐"我入座的工位"（并把 room 对齐到我的工位），未入座则显示"未选择工位"
|
await roomStore.fetchMySeat()
|
})
|
</script>
|
|
<template>
|
<el-tooltip :content="tooltip" placement="bottom">
|
<el-tag class="current-room-tag" :type="tagType" :effect="canOperate ? 'light' : 'plain'" @click="onClick">
|
<Icon :icon="canOperate ? 'ep:office-building' : 'ep:view'" class="mr-4px" />
|
{{ tagText }}
|
</el-tag>
|
</el-tooltip>
|
</template>
|
|
<style scoped lang="scss">
|
.current-room-tag {
|
margin-right: 12px;
|
max-width: 360px;
|
font-weight: 600;
|
cursor: pointer;
|
/* 【本次需求】顶栏"当前工位"信息字号加大：原来继承 el-tag 默认 12px 偏小 */
|
font-size: 15px;
|
height: 30px;
|
line-height: 28px;
|
padding: 0 10px;
|
}
|
|
/* 图标同步放大（el-tag 内的 Icon 默认跟随字号，这里显式指定更稳） */
|
.current-room-tag :deep(.el-icon) {
|
font-size: 16px;
|
margin-right: 5px;
|
}
|
</style>
|
