136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<template>
|
|
<div class="gp-current-patient">
|
|
<div class="header-row">
|
|
<span class="label">SEDANG DIPROSES</span>
|
|
<div class="badges">
|
|
<button class="action-badge" @click="$emit('action-pending')"><GpStatusBadge status="PENDING" /></button>
|
|
<button class="action-badge ml-1" @click="$emit('action-selesai')"><GpStatusBadge status="SELESAI" /></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="patient-big-info">
|
|
<div class="queue-number">{{ queueNumber || '-' }}</div>
|
|
<div class="room-indicator" v-if="roomName">{{ roomName }}</div>
|
|
</div>
|
|
|
|
<div class="action-section">
|
|
<label class="input-label">Tujukan ke ruang*</label>
|
|
<v-select
|
|
v-model="selectedRoom"
|
|
:items="roomOptions"
|
|
item-title="namaRuang"
|
|
item-value="nomorRuang"
|
|
placeholder="Pilih Ruang Pemeriksaan"
|
|
density="compact"
|
|
variant="outlined"
|
|
hide-details
|
|
class="room-select mb-3"
|
|
></v-select>
|
|
|
|
<div class="action-buttons">
|
|
<v-btn
|
|
color="#3F51B5"
|
|
variant="flat"
|
|
class="flex-1 text-white text-none font-weight-bold"
|
|
size="small"
|
|
@click="$emit('pemeriksaan-awal')"
|
|
>
|
|
<v-icon start size="16">mdi-stethoscope</v-icon>
|
|
Pemeriksaan Awal
|
|
</v-btn>
|
|
<v-btn
|
|
color="#3F51B5"
|
|
variant="flat"
|
|
class="flex-1 text-white text-none font-weight-bold ml-2"
|
|
size="small"
|
|
@click="$emit('panggil-pemeriksaan')"
|
|
>
|
|
<v-icon start size="16">mdi-bullhorn</v-icon>
|
|
Panggil Pemeriksaan
|
|
</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
import GpStatusBadge from './GpStatusBadge.vue';
|
|
|
|
const props = defineProps({
|
|
queueNumber: { type: String, default: '' },
|
|
roomName: { type: String, default: '' },
|
|
roomOptions: { type: Array, default: () => [] }
|
|
});
|
|
|
|
const emit = defineEmits(['pemeriksaan-awal', 'panggil-pemeriksaan', 'action-pending', 'action-selesai', 'update:selectedRoom']);
|
|
|
|
const selectedRoom = ref(props.roomOptions?.[0]?.nomorRuang || null);
|
|
watch(selectedRoom, (newVal) => {
|
|
emit('update:selectedRoom', newVal);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gp-current-patient {
|
|
background: white;
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--gp-border, #e5e7eb);
|
|
}
|
|
.header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
.label {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: var(--gp-text-secondary, #6b7280);
|
|
}
|
|
.patient-big-info {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
}
|
|
.queue-number {
|
|
font-size: 36px;
|
|
font-weight: 800;
|
|
color: var(--gp-text-primary, #1f2937);
|
|
line-height: 1.2;
|
|
}
|
|
.room-indicator {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--gp-room-number, #F97316);
|
|
margin-top: 4px;
|
|
text-transform: uppercase;
|
|
}
|
|
.input-label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--gp-text-secondary, #6b7280);
|
|
margin-bottom: 4px;
|
|
}
|
|
.room-select {
|
|
/* vuetify default is fine */
|
|
}
|
|
.action-buttons {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
.action-badge {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
.action-badge:hover {
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|