hrms-mgt/src/modules/03_recruiting/components/Family.vue

<!-- card ข้อมูลครอบครัว -->
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import type { PropType } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import type {
  Family,
  DataOption,
} from "@/modules/03_recruiting/interface/index/Main";

import {
  defaultFamily,
  changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/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 $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;

const edit = ref<boolean>(true);
const myform = ref<object | null>(null);
const candidateId = ref<string>(route.params.candidateId.toString());

const emit = defineEmits(["update:form"]);

async function fetchData() {
  showLoader();
  await http
    .get(config.API.candidateFamily(candidateId.value))
    .then((res) => {
      const data = res.data.result;
      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(() => {
      hideLoader();
    });
}

function getClass(val: boolean) {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
}

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();
});
</script>
<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-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 == 'checkRegister' || status == 'payment')"
        />
        <q-radio
          v-model="defaultFamily.same"
          checked-icon="task_alt"
          unchecked-icon="panorama_fish_eye"
          val="0"
          label="ไม่มี"
          color="grey-9"
          dense
          :disable="!(status == 'checkRegister' || status == 'payment')"
        />
      </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 == 'checkRegister' || status == 'payment')"
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
          :outlined="status == 'checkRegister' || status == 'payment'"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultFamily.occupationC"
          :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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultFamily.nationalityC"
          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
          :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 == 'checkRegister' || status == 'payment')"
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
          :outlined="status == 'checkRegister' || status == 'payment'"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultFamily.occupationM"
          :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
          :label="`${'อาชีพ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2">
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultFamily.nationalityM"
          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
          :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 == 'checkRegister' || status == 'payment')"
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
          :outlined="status == 'checkRegister' || status == 'payment'"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          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 == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultFamily.occupationF"
          :rules="[(val) => !!val || `${'กรุณากรอก อาชีพ'}`]"
          :label="`${'อาชีพ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2">
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          hide-bottom-space
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultFamily.nationalityF"
          :rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
          :label="`${'สัญชาติ'}`"
        />
      </div>
    </div>
  </q-form>
</template>