140 lines
3.4 KiB
Vue
140 lines
3.4 KiB
Vue
|
|
<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> |