Abizrh
147 lines
3.6 KiB
Vue
147 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 { genBase } from '~/models/_base'
|
|
|
|
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 })
|
|
|
|
const [subjective, subjectiveAttrs] = defineField('subjective')
|
|
const [objective, objectiveAttrs] = defineField('objective')
|
|
const [assesment, assesmentAttrs] = defineField('assesment')
|
|
const [plan, planAttrs] = defineField('plan')
|
|
const [review, reviewAttrs] = defineField('review')
|
|
|
|
const validate = async () => {
|
|
const result = await _validate()
|
|
console.log('Component validate() result:', result)
|
|
|
|
return {
|
|
valid: true,
|
|
data: result.values,
|
|
errors: result.errors,
|
|
}
|
|
}
|
|
|
|
defineExpose({ validate })
|
|
</script>
|
|
|
|
<template>
|
|
<form id="entry-form">
|
|
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
|
<div class="my-2">
|
|
<h1 class="font-semibold">Data Petugas</h1>
|
|
</div>
|
|
|
|
<div class="my-2 rounded-md border border-slate-300 p-4">
|
|
<Block :colCount="2">
|
|
<Cell>
|
|
<Label dynamic>PPA</Label>
|
|
<Field>
|
|
<Input disabled />
|
|
</Field>
|
|
</Cell>
|
|
|
|
<Cell>
|
|
<Label dynamic>Nama PPA</Label>
|
|
<Field>
|
|
<Input disabled />
|
|
</Field>
|
|
</Cell>
|
|
</Block>
|
|
</div>
|
|
|
|
<div class="my-2">
|
|
<h1 class="font-semibold">Data S.O.A.P</h1>
|
|
</div>
|
|
|
|
<div class="my-2 rounded-md border border-slate-300 p-4">
|
|
<Block :colCount="2">
|
|
<Cell>
|
|
<Label dynamic>Subjektif</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="subjective"
|
|
v-bind="subjectiveAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
|
|
<Cell>
|
|
<Label dynamic>Objektif</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="objective"
|
|
v-bind="objectiveAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
</Block>
|
|
<Block :colCount="2">
|
|
<Cell>
|
|
<Label dynamic>Assesmen</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="assesment"
|
|
v-bind="assesmentAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
|
|
<Cell>
|
|
<Label dynamic>Plan</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="plan"
|
|
v-bind="planAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
</Block>
|
|
<Block>
|
|
<Cell>
|
|
<Label dynamic>Review</Label>
|
|
<Field>
|
|
<Textarea
|
|
v-model="review"
|
|
v-bind="reviewAttrs"
|
|
/>
|
|
</Field>
|
|
</Cell>
|
|
</Block>
|
|
</div>
|
|
<Separator class="mt-8" />
|
|
</div>
|
|
</form>
|
|
</template>
|