101 lines
2.1 KiB
Vue
101 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<v-card-subtitle
|
|
class="bg-grey-lighten-4 text-subtitle-2 font-weight-medium py-2"
|
|
>
|
|
KESEHATAN
|
|
</v-card-subtitle>
|
|
|
|
<v-card-text>
|
|
<v-row>
|
|
<!-- Golongan Darah -->
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="localData.golonganDarah"
|
|
label="Golongan Darah"
|
|
:items="golonganDarahOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Status Perokok -->
|
|
<v-col cols="12" md="6">
|
|
<v-select
|
|
v-model="localData.statusPerokok"
|
|
label="Status Perokok"
|
|
:items="statusPerokokOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
/>
|
|
</v-col>
|
|
|
|
<!-- Jenis Penyakit -->
|
|
<v-col cols="12">
|
|
<v-select
|
|
v-model="localData.jenisPenyakit"
|
|
label="Jenis Penyakit"
|
|
:items="jenisPenyakitOptions"
|
|
variant="outlined"
|
|
density="compact"
|
|
multiple
|
|
chips
|
|
closable-chips
|
|
placeholder="Pilih Jenis Penyakit"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from "vue";
|
|
|
|
const props = defineProps({
|
|
formData: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(["update:formData"]);
|
|
|
|
const localData = ref({ ...props.formData });
|
|
|
|
const golonganDarahOptions = [
|
|
{ title: "A", value: "A" },
|
|
{ title: "B", value: "B" },
|
|
{ title: "AB", value: "AB" },
|
|
{ title: "O", value: "O" }
|
|
];
|
|
|
|
const statusPerokokOptions = [
|
|
{ title: "Tidak Merokok", value: "tidak" },
|
|
{ title: "Perokok Aktif", value: "aktif" },
|
|
{ title: "Perokok Pasif", value: "pasif" },
|
|
{ title: "Mantan Perokok", value: "mantan" }
|
|
];
|
|
|
|
const jenisPenyakitOptions = [
|
|
"Diabetes",
|
|
"Hipertensi",
|
|
"Jantung",
|
|
"Asma",
|
|
"TBC",
|
|
"Hepatitis",
|
|
"HIV/AIDS",
|
|
"Kanker",
|
|
"Ginjal",
|
|
"Stroke"
|
|
];
|
|
|
|
watch(
|
|
localData,
|
|
(newVal) => {
|
|
emit("update:formData", newVal);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
</script>
|