hrms-recruit/src/modules/01_exam/components/Form/Family.vue

<!-- card ข้อมูลครอบครัว -->
<template>
  <HeaderTop
    v-model:edit="edit"
    header="ข้อมูลครอบครัว"
    icon="mdi-account-group"
    :addData="true"
    :editOnly="false"
    :editData="false"
  />
  <q-form ref="myform" class="col-12">
    <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
      <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
        <label class="text-weight-bold">• คู่สมรส</label>
        <q-radio
          v-model="defaultFamily.same"
          checked-icon="task_alt"
          unchecked-icon="panorama_fish_eye"
          val="1"
          label="มี"
          dense
          :disable="!(status == 'register' || status == 'rejectRegister')"
        />
        <q-radio
          v-model="defaultFamily.same"
          checked-icon="task_alt"
          unchecked-icon="panorama_fish_eye"
          val="0"
          label="ไม่มี"
          dense
          :disable="!(status == 'register' || status == 'rejectRegister')"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
        <q-select
          hide-bottom-space
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          v-model="defaultFamily.prefixIdC"
          emit-value
          map-options
          option-label="name"
          :options="prefixOptions"
          option-value="id"
          :label="`${'คำนำหน้า'}`"
        />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.firstnameC"
          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
          :label="`${'ชื่อ'}`"
        />
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3" v-if="defaultFamily.same == '1'">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.lastnameC"
          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
          :label="`${'นามสกุล'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.occupationC"
          :label="`${'อาชีพ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2" v-if="defaultFamily.same == '1'">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.nationalityC"
          :label="`${'สัญชาติ'}`"
        />
      </div>

      <div class="col-xs-12 text-weight-bold">• บิดา</div>
      <div class="col-xs-12 col-sm-2 col-md-2">
        <q-select
          hide-bottom-space
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          v-model="defaultFamily.prefixIdM"
          emit-value
          map-options
          option-label="name"
          :options="prefixOptions"
          option-value="id"
          :label="`${'คำนำหน้า'}`"
        />
      </div>

      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.firstnameM"
          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
          :label="`${'ชื่อ'}`"
        />
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.lastnameM"
          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
          :label="`${'นามสกุล'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.occupationM"
          :label="`${'อาชีพ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.nationalityM"
          :label="`${'สัญชาติ'}`"
        />
      </div>

      <div class="col-xs-12 text-weight-bold">• มารดา</div>
      <div class="col-xs-12 col-sm-2 col-md-2">
        <q-select
          hide-bottom-space
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          v-model="defaultFamily.prefixIdF"
          emit-value
          map-options
          option-label="name"
          :options="prefixOptions"
          option-value="id"
          :label="`${'คำนำหน้า'}`"
        />
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.firstnameF"
          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
          :label="`${'ชื่อ'}`"
        />
      </div>
      <div class="col-xs-6 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.lastnameF"
          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
          :label="`${'นามสกุล'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.occupationF"
          :label="`${'อาชีพ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2">
        <q-input
          :class="getClass(status == 'register' || status == 'rejectRegister')"
          hide-bottom-space
          :outlined="status == 'register' || status == 'rejectRegister'"
          dense
          lazy-rules
          :readonly="!(status == 'register' || status == 'rejectRegister')"
          :borderless="!(status == 'register' || status == 'rejectRegister')"
          v-model="defaultFamily.nationalityF"
          :label="`${'สัญชาติ'}`"
        />
      </div>
    </div>
  </q-form>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import type { PropType } from 'vue'
import http from '@/plugins/http'
import config from '@/app.config'
import { useCounterMixin } from '@/stores/mixin'
import { useDataStore } from '@/stores/data'
import { useRoute } from 'vue-router'
import { useQuasar } from 'quasar'
import type { Family, DataOption } from '@/modules/01_exam/interface/index/Main'
import { defaultFamily, changeData } from '@/modules/01_exam/interface/index/Main'
import HeaderTop from '@/components/top.vue'

const props = defineProps({
  prefixOptions: {
    type: Array as PropType<DataOption[]>,
    required: true
  },
  status: {
    type: String,
    required: true
  },
  form: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:form'])

const $q = useQuasar()
const dataStore = useDataStore()
const { loaderPage } = dataStore
const mixin = useCounterMixin()
const { messageError } = mixin
const edit = ref<boolean>(true)
const myform = ref<any>({})
const route = useRoute()
const examId = ref<string>(route.params.id.toString())
const positionId = ref<string>(route.params.positionId.toString())

watch(myform, async (count: any, prevCount: any) => {
  emit('update:form', count)
})

watch(defaultFamily, async (count: Family, prevCount: Family) => {
  await changeData('family', count)
})

onMounted(async () => {
  await fetchData()
})

const fetchData = async () => {
  loaderPage(true)
  await http
    .get(config.API.candidateFamily(examId.value, positionId.value))
    .then((res) => {
      const data = res.data.result
      if (data != null) {
        defaultFamily.value.prefixIdC = data.marryPrefixId
        defaultFamily.value.firstnameC = data.marryFirstName
        defaultFamily.value.lastnameC = data.marryLastName
        defaultFamily.value.occupationC = data.marryOccupation
        defaultFamily.value.nationalityC = data.marryNationality
        defaultFamily.value.prefixIdM = data.fatherPrefixId
        defaultFamily.value.firstnameM = data.fatherFirstName
        defaultFamily.value.lastnameM = data.fatherLastName
        defaultFamily.value.occupationM = data.fatherOccupation
        defaultFamily.value.nationalityM = data.fatherNationality
        defaultFamily.value.prefixIdF = data.motherPrefixId
        defaultFamily.value.firstnameF = data.motherFirstName
        defaultFamily.value.lastnameF = data.motherLastName
        defaultFamily.value.occupationF = data.motherOccupation
        defaultFamily.value.nationalityF = data.motherNationality
        defaultFamily.value.same = data.marry == true ? '1' : data.marry == false ? '0' : null
      }
    })
    .catch((e) => {
      messageError($q, e)
    })
    .finally(() => {
      loaderPage(false)
    })
}

const getClass = (val: boolean) => {
  return {
    'full-width inputgreen cursor-pointer': val,
    'full-width cursor-pointer': !val
  }
}
</script>