Template
146 lines
3.9 KiB
Vue
146 lines
3.9 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<!-- Breadcrumb -->
|
|
<v-breadcrumbs :items="breadcrumbs" divider=">" class="pa-0 mb-4">
|
|
<template v-slot:item="{ item }">
|
|
<v-breadcrumbs-item :to="item.to" :disabled="item.disabled">
|
|
{{ item.title }}
|
|
</v-breadcrumbs-item>
|
|
</template>
|
|
</v-breadcrumbs>
|
|
|
|
<!-- Page Title -->
|
|
<h1 class="text-h5 mb-6">Buat Registrasi</h1>
|
|
|
|
<!-- Registration Form -->
|
|
<v-form ref="form" v-model="valid" lazy-validation>
|
|
<!-- Registration Type Section -->
|
|
<RegistrationType
|
|
v-model:registrationData="formData.registrationType"
|
|
@update="updateSection('registrationType')"
|
|
/>
|
|
|
|
<!-- Patient Data Section -->
|
|
<PatientData
|
|
v-model:patientData="formData.patient"
|
|
@update="updateSection('patient')"
|
|
class="mt-6"
|
|
/>
|
|
|
|
<!-- Appointment Schedule Section -->
|
|
<AppointmentSchedule
|
|
v-model:scheduleData="formData.schedule"
|
|
@update="updateSection('schedule')"
|
|
class="mt-6"
|
|
/>
|
|
|
|
<!-- Risk Assessment Section -->
|
|
<RiskAssessment
|
|
v-model:riskData="formData.riskAssessment"
|
|
@update="updateSection('riskAssessment')"
|
|
class="mt-6"
|
|
/>
|
|
|
|
<!-- Action Buttons -->
|
|
<v-row class="mt-8">
|
|
<v-col cols="12" class="d-flex justify-end gap-3">
|
|
<v-btn variant="outlined" color="primary" @click="resetForm">
|
|
Reset
|
|
</v-btn>
|
|
<v-btn color="primary" :loading="loading" @click="submitForm">
|
|
Simpan Registrasi
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
|
|
import RegistrationType from "~/components/apps/registration/form/RegistrationType.vue";
|
|
import PatientData from "~/components/apps/registration/form/PatientData.vue";
|
|
import AppointmentSchedule from "~/components/apps/registration/form/AppointmentSchedule.vue";
|
|
import RiskAssessment from "~/components/apps/registration/form/RiskAssessment.vue";
|
|
|
|
const router = useRouter();
|
|
const form = ref();
|
|
const valid = ref(true);
|
|
const loading = ref(false);
|
|
|
|
const breadcrumbs = [
|
|
{ title: "Rawat Jalan", to: "/appointment", disabled: false },
|
|
{ title: "Registrasi", to: "/appointment/registration", disabled: false },
|
|
{ title: "Buat Registrasi", to: "", disabled: true }
|
|
];
|
|
|
|
const formData = reactive({
|
|
registrationType: {
|
|
visitType: "",
|
|
treatmentType: "Rawat Jalan",
|
|
triage: ""
|
|
},
|
|
patient: {
|
|
name: "",
|
|
medicalRecordNumber: "",
|
|
category: "",
|
|
birthDate: "",
|
|
gender: "",
|
|
address: "",
|
|
phoneCode: "+62",
|
|
phoneNumber: "",
|
|
email: "",
|
|
identityType: "",
|
|
identityNumber: ""
|
|
},
|
|
schedule: {
|
|
paymentMethod: "Pribadi",
|
|
referralNumber: "",
|
|
polyclinicName: "",
|
|
doctorName: "",
|
|
consultationDate: "",
|
|
consultationTime: "",
|
|
slotAvailable: true
|
|
},
|
|
riskAssessment: {
|
|
walkingAbility: null,
|
|
supportWhileSitting: null,
|
|
score: 0
|
|
}
|
|
});
|
|
|
|
const updateSection = (section) => {
|
|
console.log(`Section ${section} updated:`, formData[section]);
|
|
};
|
|
|
|
const submitForm = async () => {
|
|
const { valid } = await form.value.validate();
|
|
|
|
if (valid) {
|
|
loading.value = true;
|
|
try {
|
|
// API call simulation
|
|
await new Promise((resolve) => setTimeout(resolve, 2000));
|
|
console.log("Form submitted:", formData);
|
|
|
|
// Navigate to success page or show notification
|
|
router.push("/appointment/registration");
|
|
} catch (error) {
|
|
console.error("Error submitting form:", error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
form.value.reset();
|
|
};
|
|
</script>
|