ต่อ api บุคคลที่สามารถติดต่อได้

src/modules/03_recruiting/components/Contact.vue

@@ -0,0 +1,178 @@
+<!-- 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>