simrsx-fe/app/components/app/therapy-protocol/entry-form.vue

<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'

// components
import { Form } from '~/components/pub/ui/form'
import * as DE from '~/components/pub/my-ui/doc-entry'
import Separator from '~/components/pub/ui/separator/Separator.vue'

// form field components
import { BaseTextarea, RadioRelations, SelectExaminationDate, RadioWorkDisease } from './field'

// #region Props & Emits
interface Props {
  schema: any
  initialValues?: any
  patientId: number
}
const props = defineProps<Props>()

const emit = defineEmits<{}>()
// #endregion

// #region State & Computed
// #endregion

// #region Lifecycle Hooks
// #endregion

// #region Functions
// #endregion region

// #region Utilities & event handlers
// #endregion

// #region Watchers
// #endregion
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 : {}"
  >
    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Anamnesa dan Riwayat Pasien</p>
    <DE.Block
      :col-count="3"
      :cell-flex="false"
    >
      <SelectExaminationDate
        field-name="examinationDate"
        label="Tanggal Pemeriksaan"
      />
      <RadioRelations
        field-name="relationshipToInsured"
        label="Hubungan Dengan Tertanggung"
        :col-span="2"
      />
      <BaseTextarea
        field-name="anamnesis"
        label="Anamnesa"
      />
      <BaseTextarea
        field-name="medicalHistory"
        label="Riwayat Penyakit"
      />
      <BaseTextarea
        field-name="medicationHistory"
        label="Riwayat Obat"
      />
    </DE.Block>

    <div class="h-6">
      <Separator />
    </div>

    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Pemeriksaan Penunjang</p>
    <DE.Block
      :col-count="2"
      :cell-flex="false"
    >
      <BaseTextarea
        field-name="supportDiagnosis"
        label="Diagnosa (ICD-X)"
      />
      <BaseTextarea
        field-name="functionalDiagnosis"
        label="Diagnosa Fungsional (ICD-X)"
      />
      <BaseTextarea
        field-name="treatmentDiagnosis"
        label="Diagnosa Tata Laksana (ICD-IX)"
      />
      <BaseTextarea
        field-name="supportExamination"
        label="Pemeriksaan Penunjang"
      />
    </DE.Block>

    <div class="h-6">
      <Separator />
    </div>

    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Anjuran dan Evaluasi</p>
    <DE.Block
      :col-count="3"
      :cell-flex="false"
    >
      <BaseTextarea
        field-name="recommendation"
        label="Anjuran"
      />
      <BaseTextarea
        field-name="evaluation"
        label="Evaluasi"
      />
      <RadioWorkDisease
        field-name="isWorkRelatedDisease"
        label="Suspek Penyakit Akibat Kerja"
      />
    </DE.Block>
  </Form>
</template>