ต่อ 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>

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

@@ -96,12 +96,13 @@
         </div>
         <div class="col-3">
           <datepicker
-            :readonly="!(status == 'checkRegister' || status == 'payment')"
             v-model="defaultEducation.educationEndDate"
             :locale="'th'"
             autoApply
             :enableTimePicker="false"
             week-start="0"
+            :max-date="new Date()"
+            :disabled="!(status == 'checkRegister' || status == 'payment')"
           >
             <template #year="{ year }">
               {{ year + 543 }}
@@ -112,11 +113,16 @@
             <template #trigger>
               <q-input
                 class="q-pl-sm"
-                :class="getClass(edit)"
-                :outlined="edit"
+                :class="
+                  getClass(status == 'checkRegister' || status == 'payment')
+                "
+                :outlined="status == 'checkRegister' || status == 'payment'"
                 dense
                 lazy-rules
-                :borderless="!edit"
+                :readonly="!(status == 'checkRegister' || status == 'payment')"
+                :borderless="
+                  !(status == 'checkRegister' || status == 'payment')
+                "
                 :model-value="date2Thai(defaultEducation.educationEndDate)"
                 :rules="[
                   (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
@@ -129,7 +135,9 @@
                     name="event"
                     class="cursor-pointer"
                     :style="
-                      edit ? 'color: var(--q-primary)' : 'color: var(--q-grey)'
+                      status == 'checkRegister' || status == 'payment'
+                        ? 'color: var(--q-primary)'
+                        : 'color: var(--q-grey)'
                     "
                   >
                   </q-icon>

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

@@ -114,7 +114,7 @@
           วันหมดอายุบัญชีคัดเลือก
         </div>
         <div class="col-xs-8 col-sm-6 q-pr-xs">
-          {{ score_expired == null ? "" : date2Thai(score_expired) }}
+          {{ score_expired == null ? "-" : date2Thai(score_expired) }}
         </div>
       </div>
     </div>
@@ -188,7 +188,7 @@ const scoreSumFull = ref<number | null>(null);
 const scoreSum = ref<number | null>(null);
 const examResultinscore = ref<string>("");
 const avatar = ref<string>("");
-const score_expired = ref<Date>(new Date());
+const score_expired = ref<Date | null>(new Date());
 const reviewPoint = ref<number>();
 const review = ref<string>("-");
 
@@ -222,7 +222,8 @@ const fetchCard = async () => {
         parseInt(data.pointTotalC == null ? 0 : data.pointTotalC);
       examResultinscore.value = data.pass;
       avatar.value = data.avatar;
-      score_expired.value = new Date(data.announcementDate);
+      score_expired.value =
+        data.announcementDate == null ? null : new Date(data.announcementDate);
       number.value = data.number;
       reviewPoint.value = data.reviewPoint;
       review.value = data.review == null ? "-" : data.review;

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

@@ -47,6 +47,15 @@
     <Career :status="status" />
   </div>
 
+  <q-separator class="q-my-lg bg-gray" size="5px" />
+  <div class="q-px-sm">
+    <Contact
+      :status="status"
+      v-model:form="formContact"
+      :prefixOptions="prefixOptions"
+    />
+  </div>
+
   <!-- <q-separator class="q-my-lg bg-gray" size="5px" /> -->
   <!-- <div class="q-px-sm">
     <Document :status="status" />
@@ -61,6 +70,7 @@ import Information from "@/modules/03_recruiting/components/Information.vue";
 import Address from "@/modules/03_recruiting/components/Address.vue";
 import Family from "@/modules/03_recruiting/components/Family.vue";
 import Occupation from "@/modules/03_recruiting/components/Occupation.vue";
+import Contact from "@/modules/03_recruiting/components/Contact.vue";
 import Education from "@/modules/03_recruiting/components/Education.vue";
 import Career from "@/modules/03_recruiting/components/Career.vue";
 import Document from "@/modules/03_recruiting/components/Document.vue";
@@ -89,6 +99,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  formContact: {
+    type: Object,
+    required: true,
+  },
 });
 
 const $q = useQuasar();
@@ -101,6 +115,7 @@ const formInformation = ref<any>({});
 const formAddress = ref<any>({});
 const formEducation = ref<any>({});
 const formOccupation = ref<any>({});
+const formContact = ref<any>({});
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
 
@@ -109,6 +124,7 @@ const emit = defineEmits([
   "update:formAddress",
   "update:formEducation",
   "update:formOccupation",
+  "update:formContact",
 ]);
 
 watch(formInformation, async (count: Object, prevCount: Object) => {
@@ -127,6 +143,10 @@ watch(formOccupation, async (count: Object, prevCount: Object) => {
   emit("update:formOccupation", count);
 });
 
+watch(formContact, async (count: Object, prevCount: Object) => {
+  emit("update:formContact", count);
+});
+
 onMounted(() => {
   hideLoader();
   fetchPrefix();

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

@@ -1,6 +1,11 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <q-card bordered flat class="col-12 row q-py-sm items-center bg-grey-1" v-show="statusPayment">
+    <q-card
+      bordered
+      flat
+      class="col-12 row q-py-sm items-center bg-grey-1"
+      v-show="statusPayment"
+    >
       <div class="col-12 row q-col-gutter-sm">
         <span class="text-subtitle1">{{ titleText }}</span>
         <q-select
@@ -16,7 +21,6 @@
           emit-value
           @update:model-value="updateVisibleFilter"
           v-if="optionsFilter != undefined && optionsFilter.length > 0"
-         
         />
         <q-file
           v-model="files"
@@ -49,7 +53,7 @@
           emit-value
           @update:model-value="updateVisibleFilter"
           v-if="optionsFilter != undefined && optionsFilter.length > 0"
-          />
+        />
       </div>
       <div>
         <q-btn
@@ -62,24 +66,23 @@
           :disabled="
             attrs.rows.filter((r) => r.status == 'checkRegister').length == 0
           "
-          
         >
           <q-tooltip>ตรวจสอบข้อมูล</q-tooltip>
         </q-btn>
       </div>
-      <div> 
+      <div>
         <q-btn
-        size="md"
-        icon="mdi-upload"
-        round
-        flat
-        color="blue"
-        v-if="statusPayment"
-        @click="uploadFile"
-      >
-        <q-tooltip v-if="setSeat == false">อัปโหลดที่นั่งสอบ</q-tooltip>
-        <q-tooltip v-if="setSeat == true">อัปโหลดคะแนนสอบ</q-tooltip>
-      </q-btn>
+          size="md"
+          icon="mdi-upload"
+          round
+          flat
+          color="blue"
+          v-if="statusPayment"
+          @click="uploadFile"
+        >
+          <q-tooltip v-if="setSeat == false">อัปโหลดที่นั่งสอบ</q-tooltip>
+          <q-tooltip v-if="setSeat == true">อัปโหลดคะแนนสอบ</q-tooltip>
+        </q-btn>
       </div>
       <div>
         <q-btn icon="mdi-download" round color="green-6" flat>
@@ -87,35 +90,35 @@
           <q-menu>
             <q-list style="min-width: 100px">
               <q-item clickable v-close-popup @click="downloadFileDashboard">
-                <q-item-section
-                  >ดาวน์โหลดสรุปข้อมูลสมัครสอบ</q-item-section
-                >
+                <q-item-section>ดาวน์โหลดสรุปข้อมูลสมัครสอบ</q-item-section>
               </q-item>
-              <q-item clickable v-close-popup @click.stop.prevent="clickCandidateList()">
-                <q-item-section
-                  >ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-item-section
-                >
+              <q-item
+                clickable
+                v-close-popup
+                @click.stop.prevent="clickCandidateList()"
+              >
+                <q-item-section>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-item-section>
               </q-item>
-              <q-item clickable v-close-popup @click.stop.prevent="clickPassExam()">
+              <q-item
+                clickable
+                v-close-popup
+                @click.stop.prevent="clickPassExam()"
+              >
                 <q-item-section
                   >ดาวน์โหลดรายชื่อผู้สอบคัดเลือกได้</q-item-section
                 >
               </q-item>
               <q-item clickable v-close-popup @click="downloadFile()">
-                <q-item-section
-                  >ดาวน์โหลดจัดการรายชื่อผู้สมัคร</q-item-section
-                >
+                <q-item-section>ดาวน์โหลดจัดการรายชื่อผู้สมัคร</q-item-section>
               </q-item>
               <q-item clickable v-close-popup @click="downloadFileDetail()">
-                <q-item-section
-                  >ดาวน์โหลดข้อมูลผู้สมัคร</q-item-section
-                >
+                <q-item-section>ดาวน์โหลดข้อมูลผู้สมัคร</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
         </q-btn>
       </div>
-      <div> 
+      <div>
         <q-btn
           size="md"
           icon="mdi-content-save-move-outline"
@@ -190,7 +193,7 @@
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th auto-width>
-            <q-checkbox v-model="props.selected"/>
+            <q-checkbox v-model="props.selected" />
           </q-th>
           <q-th auto-width v-if="boss == true" />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -476,6 +479,7 @@ const checkCandidates = async () => {
     })
     .then((res) => {
       success($q, "ตรวจสอบข้อมูลสำเร็จ");
+      selected.value = [];
     })
     .catch((e) => {
       messageError($q, e);