Abizrh
148 lines
3.6 KiB
Vue
148 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import Block from '~/components/pub/my-ui/doc-entry/block.vue'
|
|
import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
|
|
import Field from '~/components/pub/my-ui/doc-entry/field.vue'
|
|
import Label from '~/components/pub/my-ui/doc-entry/label.vue'
|
|
// Helpers
|
|
import type z from 'zod'
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import { useForm } from 'vee-validate'
|
|
// import { ref, watch, inject } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
modelValue: any
|
|
schema: z.ZodSchema<any>
|
|
excludeFields?: string[]
|
|
isReadonly?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', val: any): void
|
|
(e: 'submit', val: any): void
|
|
}>()
|
|
|
|
// Setup form
|
|
const {
|
|
validate: _validate,
|
|
defineField,
|
|
handleSubmit,
|
|
errors,
|
|
values,
|
|
} = useForm({
|
|
validationSchema: toTypedSchema(props.schema),
|
|
initialValues: props.modelValue,
|
|
})
|
|
|
|
watch(values, (val) => emit('update:modelValue', val), { deep: true })
|
|
|
|
// Define form fields
|
|
// const [relatives, relativesAttrs] = defineField('relatives')
|
|
const [date, dateAttrs] = defineField('date')
|
|
const [doctor, doctorAttrs] = defineField('doctor')
|
|
const [diagnosis, diagnosisAttrs] = defineField('diagnosis')
|
|
const [essay, essayAttrs] = defineField('essay')
|
|
const [plan, planAttrs] = defineField('plan')
|
|
const [note, noteAttrs] = defineField('note')
|
|
|
|
const tanggal = ref('')
|
|
const tanggalAttrs = ref({
|
|
type: 'date',
|
|
required: true,
|
|
disabled: props.isReadonly,
|
|
})
|
|
|
|
// Relatives list handling
|
|
const addRelative = () => {
|
|
relatives.value = [...(relatives.value || []), { name: '', phone: '' }]
|
|
}
|
|
|
|
const removeRelative = (index: number) => {
|
|
relatives.value = relatives.value.filter((_: any, i: number) => i !== index)
|
|
}
|
|
|
|
const validate = async () => {
|
|
const result = await _validate()
|
|
return {
|
|
valid: true,
|
|
data: result.values,
|
|
errors: result.errors,
|
|
}
|
|
}
|
|
|
|
defineExpose({ validate })
|
|
|
|
const icdPreview = inject('icdPreview')
|
|
|
|
const isExcluded = (key: string) => props.excludeFields?.includes(key)
|
|
</script>
|
|
|
|
<template>
|
|
<form id="entry-form">
|
|
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
|
<Block :colCount="2">
|
|
<Cell>
|
|
<Label dynamic>Tanggal</Label>
|
|
<Field>
|
|
<Input
|
|
v-model="date"
|
|
v-bind="dateAttrs"
|
|
type="date"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
<Cell>
|
|
<Label dynamic>Dokter</Label>
|
|
<Field>
|
|
<Input
|
|
v-model="doctor"
|
|
v-bind="doctorAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
</Block>
|
|
<Block :colCount="2">
|
|
<Cell>
|
|
<Label dynamic>Diagnosis Penting</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="diagnosis"
|
|
v-bind="diagnosisAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
<Cell>
|
|
<Label dynamic>Uraian Klinik Penting</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="essay"
|
|
v-bind="essayAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
</Block>
|
|
<Block :colCount="2">
|
|
<Cell>
|
|
<Label dynamic>Rencana Penting</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="plan"
|
|
v-bind="planAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
<Cell>
|
|
<Label dynamic>Catatan</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="note"
|
|
v-bind="noteAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
</Block>
|
|
|
|
<Separator class="mt-8" />
|
|
</div>
|
|
</form>
|
|
</template>
|