first commit
This commit is contained in:
Yusron alamsyah
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title class="d-flex justify-space-between align-center">
|
||||
<span class="text-h6">DATA PASIEN</span>
|
||||
<v-btn variant="text" color="primary" size="small" @click="resetSection">
|
||||
Atur Ulang
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="localData.name"
|
||||
label="Nama Pasien"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
placeholder="Masukkan Nama Pasien"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="localData.medicalRecordNumber"
|
||||
label="No. Rekam medis"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
placeholder="MRN Pasien"
|
||||
:rules="[rules.required]"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="localData.category"
|
||||
:items="patientCategories"
|
||||
label="Kategori Pasien"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
placeholder="Pilih Kategori Pasien"
|
||||
append-inner-icon="mdi-chevron-down"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="localData.birthDate"
|
||||
label="Tanggal Lahir"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
type="date"
|
||||
placeholder="Tanggal Lahir (DD/MM/YYYY)"
|
||||
:rules="[rules.required]"
|
||||
>
|
||||
<template v-slot:label>
|
||||
Tanggal Lahir <span class="text-red">*</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="localData.gender"
|
||||
:items="genderOptions"
|
||||
label="Jenis Kelamin"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
placeholder="Pilih"
|
||||
:rules="[rules.required]"
|
||||
append-inner-icon="mdi-chevron-down"
|
||||
>
|
||||
<template v-slot:label>
|
||||
Jenis Kelamin <span class="text-red">*</span>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-textarea
|
||||
v-model="localData.address"
|
||||
label="Alamat"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
rows="3"
|
||||
placeholder="Alamat"
|
||||
:rules="[rules.required]"
|
||||
counter="100"
|
||||
>
|
||||
<template v-slot:label>
|
||||
Alamat <span class="text-red">*</span>
|
||||
</template>
|
||||
</v-textarea>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="2">
|
||||
<v-select
|
||||
v-model="localData.phoneCode"
|
||||
:items="phoneCodes"
|
||||
label="Kode"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
:rules="[rules.required]"
|
||||
>
|
||||
<template v-slot:label>
|
||||
Kode <span class="text-red">*</span>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="5">
|
||||
<v-text-field
|
||||
v-model="localData.phoneNumber"
|
||||
label="Nomor Telepon"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
placeholder="Nomor Telepon"
|
||||
:rules="[rules.required, rules.phone]"
|
||||
>
|
||||
<template v-slot:label>
|
||||
Nomor Telepon <span class="text-red">*</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="5">
|
||||
<v-text-field
|
||||
v-model="localData.email"
|
||||
label="Email"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
placeholder="Email"
|
||||
:rules="[rules.email]"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
v-model="localData.identityType"
|
||||
:items="identityTypes"
|
||||
label="Jenis Identitas"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
placeholder="Pilih"
|
||||
:rules="[rules.required]"
|
||||
append-inner-icon="mdi-chevron-down"
|
||||
>
|
||||
<template v-slot:label>
|
||||
Jenis Identitas <span class="text-red">*</span>
|
||||
</template>
|
||||
</v-select>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="localData.identityNumber"
|
||||
label="Nomor Identitas"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
placeholder="Nomor Identitas"
|
||||
:rules="[rules.required]"
|
||||
>
|
||||
<template v-slot:label>
|
||||
Nomor Identitas <span class="text-red">*</span>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
patientData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(["update:patientData", "update"]);
|
||||
|
||||
const localData = ref({ ...props.patientData });
|
||||
|
||||
const patientCategories = ["Umum", "BPJS", "Asuransi Lain"];
|
||||
|
||||
const genderOptions = [
|
||||
{ title: "Laki-laki", value: "L" },
|
||||
{ title: "Perempuan", value: "P" }
|
||||
];
|
||||
|
||||
const phoneCodes = ["+62", "+65", "+60", "+1"];
|
||||
|
||||
const identityTypes = [
|
||||
{ title: "KTP", value: "ktp" },
|
||||
{ title: "SIM", value: "sim" },
|
||||
{ title: "Paspor", value: "paspor" },
|
||||
{ title: "Kartu Pelajar", value: "kartu_pelajar" }
|
||||
];
|
||||
|
||||
const rules = {
|
||||
required: (value) => !!value || "Field ini wajib diisi",
|
||||
email: (value) => {
|
||||
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return !value || pattern.test(value) || "Email tidak valid";
|
||||
},
|
||||
phone: (value) => {
|
||||
const pattern = /^[0-9]{8,15}$/;
|
||||
return pattern.test(value) || "Nomor telepon tidak valid";
|
||||
}
|
||||
};
|
||||
|
||||
const resetSection = () => {
|
||||
localData.value = {
|
||||
name: "",
|
||||
medicalRecordNumber: "",
|
||||
category: "",
|
||||
birthDate: "",
|
||||
gender: "",
|
||||
address: "",
|
||||
phoneCode: "+62",
|
||||
phoneNumber: "",
|
||||
email: "",
|
||||
identityType: "",
|
||||
identityNumber: ""
|
||||
};
|
||||
};
|
||||
|
||||
watch(
|
||||
localData,
|
||||
(newVal) => {
|
||||
emit("update:patientData", newVal);
|
||||
emit("update");
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
Reference in New Issue
Block a user