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

<!-- card บุคคลที่สามารถติดต่อได้ -->
<template>
  <HeaderTop
    v-model:edit="edit"
    header="บุคคลที่สามารถติดต่อได้"
    icon="mdi-account-circle"
    :addData="true"
    :editOnly="false"
    :editData="false"
  />
  <q-form ref="myform">
    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
      <div class="col-xs-12 col-sm-3 col-md-2">
        <q-select
          :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="defaultContact.contactPrefixId"
          emit-value
          map-options
          option-label="name"
          :options="prefixOptions"
          option-value="id"
          :label="`${'คำนำหน้า'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultContact.contactFirstname"
          :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
          :label="`${'ชื่อ'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-3">
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultContact.contactLastname"
          :rules="[(val) => !!val || `${'กรุณากรอก นามสกุล'}`]"
          :label="`${'นามสกุล'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-4">
        <q-input
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          lazy-rules
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultContact.contactRelations"
          :rules="[(val) => !!val || `${'กรุณากรอกความสัมพันธ์'}`]"
          :label="`${'เกี่ยวข้องเป็น'}`"
        />
      </div>
      <div class="col-xs-12 col-sm-3 col-md-4">
        <q-input
          :outlined="status == 'checkRegister' || status == 'payment'"
          dense
          :counter="
            status == 'checkRegister' || status == 'payment' ? true : false
          "
          lazy-rules
          type="tel"
          mask="##########"
          maxlength="10"
          :class="getClass(status == 'checkRegister' || status == 'payment')"
          :readonly="!(status == 'checkRegister' || status == 'payment')"
          :borderless="!(status == 'checkRegister' || status == 'payment')"
          v-model="defaultContact.contactTel"
          :label="`${'โทรศัพท์'}`"
          :rules="[
            (val) => val.length == 10 || `${'กรุณากรอก โทรศัพท์'}`,
            (val) =>
              /^[0-9]*$/.test(val) || `${'กรุณากรอกข้อมูลโทรศัพท์ให้ถูกต้อง'}`,
          ]"
        />
      </div>
    </div>
  </q-form>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, PropType } from "vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
  Contact,
  DataOption,
} from "@/modules/03_recruiting/interface/index/Main";
import {
  defaultContact,
  changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";
import { useRoute } from "vue-router";

import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";

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

const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const edit = ref<boolean>(true);
const myform = ref<any>({});
const route = useRoute();
const candidateId = ref<string>(route.params.candidateId.toString());

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

watch(defaultContact, async (count: Contact, prevCount: Contact) => {
  await changeData("contact", count);
});

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

const fetchData = async () => {
  showLoader();
  await http
    .get(config.API.candidateContact(candidateId.value))
    .then((res) => {
      const data = res.data.result;
      if (data != null) {
        defaultContact.value.contactPrefixId = data.contactPrefixId;
        defaultContact.value.contactFirstname = data.contactFirstname;
        defaultContact.value.contactLastname = data.contactLastname;
        defaultContact.value.contactRelations = data.contactRelations;
        defaultContact.value.contactTel = data.contactTel;
      }
    })
    .catch((e) => {
      //   messageError($q, e)
    })
    .finally(() => {
      hideLoader();
    });
};

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