74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { FormErrors } from '~/types/error'
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import { Form } from '~/components/pub/ui/form'
|
|
import InputBase from '~/components/pub/my-ui/form/input-base.vue'
|
|
import * as DE from '~/components/pub/my-ui/doc-entry'
|
|
import FileField from '~/components/pub/my-ui/form/file-field.vue'
|
|
import SelectDocType from './_common/select-doc-type.vue'
|
|
import Separator from '~/components/pub/ui/separator/Separator.vue'
|
|
|
|
const props = defineProps<{
|
|
schema: any
|
|
initialValues?: any
|
|
errors?: FormErrors
|
|
}>()
|
|
|
|
const formSchema = toTypedSchema(props.schema)
|
|
const formRef = ref()
|
|
|
|
defineExpose({
|
|
validate: () => formRef.value?.validate(),
|
|
resetForm: () => formRef.value?.resetForm(),
|
|
setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
|
|
values: computed(() => formRef.value?.values),
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Form
|
|
ref="formRef"
|
|
v-slot="{ values }"
|
|
as=""
|
|
keep-values
|
|
:validation-schema="formSchema"
|
|
:validate-on-mount="false"
|
|
validation-mode="onSubmit"
|
|
:initial-values="initialValues ? initialValues : {}"
|
|
>
|
|
<DE.Block :col-count="2" :cell-flex="false">
|
|
<InputBase
|
|
field-name="officer"
|
|
label="Petugas Upload"
|
|
placeholder="Masukkan Petugas Upload"
|
|
:is-disabled="true"
|
|
/>
|
|
<DE.Cell :col-span="2">
|
|
<Separator class="w-full my-4"/>
|
|
<DE.Block :col-count="3" :cell-flex="false">
|
|
<InputBase
|
|
field-name="name"
|
|
label="Nama Dokumen"
|
|
placeholder="Maukkan Nama Dokumen"
|
|
/>
|
|
<SelectDocType
|
|
field-name="type_code"
|
|
label="Tipe Dokumen"
|
|
placeholder="Pilih Jenis Dokumen"
|
|
:errors="errors"
|
|
is-required
|
|
/>
|
|
<FileField
|
|
field-name="content"
|
|
label="Upload Dokumen"
|
|
placeholder="Unggah dokumen"
|
|
:errors="errors"
|
|
:accept="['pdf', 'jpg', 'png']"
|
|
:max-size-mb="1"
|
|
/>
|
|
</DE.Block>
|
|
</DE.Cell>
|
|
</DE.Block>
|
|
</Form>
|
|
</template>
|