feat(FE) : new pages and validation form pasien

2025-12-02 13:18:28 +07:00
parent bbc6346057
commit 632d575ffa
6 changed files with 939 additions and 66 deletions
--- a/pages/pendaftaran/index.vue
+++ b/pages/pendaftaran/index.vue
@@ -0,0 +1,140 @@
+
+<script setup lang="ts">
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import Heading from "@/components/style-components/typography/Heading.vue";
+import Default from "@/components/style-components/typography/DefaultText.vue";
+import axios from "axios";
+import { ref } from 'vue'
+import { useField, useForm } from 'vee-validate'
+
+
+let listPenjamin = ref([]);
+
+function fetchGuarantor(){
+  isLoading = true;
+  axios.get("http://10.10.123.135:8083/api/v1/guarantor-payment")
+    .then(res => {
+      listPenjamin = res.data;
+      console.dir(res.data)
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+
+
+
+  const { handleSubmit, handleReset } = useForm({
+    validationSchema: {
+      name (value) {
+        if (value?.length >= 2) return true
+
+        return 'Name needs to be at least 2 characters.'
+      },
+      phone (value) {
+        if (/^[0-9-]{10,}$/.test(value)) return true
+
+        return 'Phone number needs to be at least 10 digits.'
+      },
+      nomor_bpjs (value) {
+        if (/^[0-9-]{13,}$/.test(value)) return true
+
+        return 'Nomor BPJS needs to be at least 13 digits.'
+      },
+      penjamin (value) {
+        if (value) return true
+
+        return 'Penjamin required.'
+      },
+      alamat (value) {
+        if (value) return true
+
+        return 'Alamat required.'
+      },
+    },
+  })
+  const alamat = useField('alamat')
+  const name = useField('name')
+  const phone = useField('phone')
+  const nomor_bpjs = useField('nomor_bpjs')
+  const tipe_pasien = useField('tipe_pasien')
+  const penjamin = useField('penjamin')
+
+  const items = ref([
+    'Item 1',
+    'Item 2',
+    'Item 3',
+    'Item 4',
+  ])
+
+  const submit = handleSubmit(values => {
+    alert(JSON.stringify(values, null, 2))
+  })
+</script>
+<template>
+  <div>
+  <v-row>
+        <v-col cols="12" md="12">
+            <UiParentCard title="Form Pendaftaran">
+  <form @submit.prevent="submit">
+  <p>Tipe pasien: {{ radios }}</p>
+    <v-radio-group v-model="tipe_pasien.value.value">
+      <v-radio label="Lama" value="lama"></v-radio>
+      <v-radio label="Baru" value="baru"></v-radio>
+    </v-radio-group>
+
+     <v-autocomplete
+     label="Pencarian Nomor Rekam Medis"
+      v-model="newTag"
+      :items="entries"
+      :search-input.sync="search"
+    ></v-autocomplete>
+
+    <v-text-field
+      v-model="name.value.value"
+      :counter="10"
+      :error-messages="name.errorMessage.value"
+      label="Nama Pasien"
+    ></v-text-field>
+
+    <v-text-field
+      v-model="alamat.value.value"
+      :counter="10"
+      :error-messages="alamat.errorMessage.value"
+      label="Alamat"
+    ></v-text-field>
+
+
+    <v-text-field
+      v-model="phone.value.value"
+      :counter="7"
+      :error-messages="phone.errorMessage.value"
+      label="Nomor Telp"
+    ></v-text-field>
+
+     <v-select
+      v-model="penjamin.value.value"
+      :error-messages="penjamin.errorMessage.value"
+      label="Penjamin"
+      :items="listPenjamin"
+       :item-title="name"
+       item-value="name"
+        @update:modelValue="fetchGuarantor()"
+    ></v-select>
+
+    <v-text-field
+      v-model="nomor_bpjs.value.value"
+      :error-messages="nomor_bpjs.errorMessage.value"
+      label="Nomor BPJS"
+    ></v-text-field>
+
+    <v-btn color="#5865f2" class="me-4" type="submit"> submit </v-btn>
+
+    <v-btn  @click="handleReset"> clear </v-btn>
+  </form>
+            </UiParentCard>
+        </v-col>
+    </v-row>
+
+   </div>
+</template>