160 lines
4.7 KiB
Vue
160 lines
4.7 KiB
Vue
<template>
|
|
<v-card>
|
|
<v-card-title class="d-flex justify-space-between align-center">
|
|
<div class="d-flex align-center gap-2">
|
|
<span class="text-h6">SKALA RISIKO JATUH (OPSIONAL)</span>
|
|
<v-icon color="warning" size="small">mdi-alert-box</v-icon>
|
|
</div>
|
|
<v-btn variant="text" color="primary" size="small" @click="resetSection">
|
|
Atur Ulang
|
|
</v-btn>
|
|
</v-card-title>
|
|
|
|
<v-expansion-panels v-model="panel" class="mt-2">
|
|
<v-expansion-panel>
|
|
<v-expansion-panel-title>
|
|
<span class="font-weight-medium"
|
|
>SKALA RISIKO JATUH - GET UP AND GO</span
|
|
>
|
|
</v-expansion-panel-title>
|
|
<v-expansion-panel-text>
|
|
<v-card flat>
|
|
<v-card-text>
|
|
<!-- Walking Ability Question -->
|
|
<div class="mb-6">
|
|
<div class="mb-3">
|
|
<p class="text-subtitle-1 font-weight-medium mb-1">
|
|
Cara berjalan pasien:
|
|
</p>
|
|
<ul class="ml-4">
|
|
<li>Jalan tidak seimbang, sempoyongan, atau limbung</li>
|
|
<li>
|
|
Menggunakan alat bantu (kruk, tripot, kursi roda, orang
|
|
lain)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<v-radio-group
|
|
v-model="localData.walkingAbility"
|
|
inline
|
|
@update:modelValue="calculateScore"
|
|
>
|
|
<v-radio label="Ya" :value="true" />
|
|
<v-radio label="Tidak" :value="false" />
|
|
</v-radio-group>
|
|
</div>
|
|
|
|
<!-- Sitting Support Question -->
|
|
<div class="mb-6">
|
|
<div class="mb-3">
|
|
<p class="text-subtitle-1 font-weight-medium mb-1">
|
|
Menopang saat akan duduk
|
|
</p>
|
|
<p class="text-body-2 text-grey-darken-1">
|
|
Tampak memegang sandaran kursi atau meja / benda lain
|
|
sebagai penopang saat akan duduk
|
|
</p>
|
|
</div>
|
|
<v-radio-group
|
|
v-model="localData.supportWhileSitting"
|
|
inline
|
|
@update:modelValue="calculateScore"
|
|
>
|
|
<v-radio label="Ya" :value="true" />
|
|
<v-radio label="Tidak" :value="false" />
|
|
</v-radio-group>
|
|
</div>
|
|
|
|
<!-- Score Display -->
|
|
<v-divider class="my-4" />
|
|
<div class="d-flex justify-space-between align-center">
|
|
<span class="text-subtitle-1 font-weight-medium">Skor</span>
|
|
<v-chip :color="scoreColor" variant="tonal" size="large">
|
|
{{ localData.score }}
|
|
</v-chip>
|
|
</div>
|
|
|
|
<!-- Risk Level Alert -->
|
|
<v-alert
|
|
v-if="riskLevel"
|
|
:type="riskLevel.type"
|
|
variant="tonal"
|
|
density="compact"
|
|
class="mt-4"
|
|
>
|
|
{{ riskLevel.message }}
|
|
</v-alert>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-expansion-panel-text>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
riskData: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(["update:riskData", "update"]);
|
|
|
|
const localData = ref({ ...props.riskData });
|
|
const panel = ref(0);
|
|
|
|
const calculateScore = () => {
|
|
let score = 0;
|
|
if (localData.value.walkingAbility === true) score += 1;
|
|
if (localData.value.supportWhileSitting === true) score += 1;
|
|
localData.value.score = score;
|
|
};
|
|
|
|
const scoreColor = computed(() => {
|
|
if (localData.value.score === 0) return "success";
|
|
if (localData.value.score === 1) return "warning";
|
|
return "error";
|
|
});
|
|
|
|
const riskLevel = computed(() => {
|
|
if (localData.value.score === 0) {
|
|
return {
|
|
type: "success",
|
|
message: "Risiko Rendah: Tidak berisiko jatuh"
|
|
};
|
|
} else if (localData.value.score === 1) {
|
|
return {
|
|
type: "warning",
|
|
message: "Risiko Sedang: Memerlukan pengawasan"
|
|
};
|
|
} else if (localData.value.score === 2) {
|
|
return {
|
|
type: "error",
|
|
message: "Risiko Tinggi: Memerlukan bantuan dan pengawasan ketat"
|
|
};
|
|
}
|
|
return null;
|
|
});
|
|
|
|
const resetSection = () => {
|
|
localData.value = {
|
|
walkingAbility: null,
|
|
supportWhileSitting: null,
|
|
score: 0
|
|
};
|
|
};
|
|
|
|
watch(
|
|
localData,
|
|
(newVal) => {
|
|
emit("update:riskData", newVal);
|
|
emit("update");
|
|
},
|
|
{ deep: true }
|
|
);
|
|
</script>
|