Merge branch 'develop' into dev-tee

src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue

@@ -385,10 +385,8 @@
                         <template v-slot:option="scope">
                           <q-item v-bind="scope.itemProps">
                             <q-item-section>
-                              <q-item-label>{{
+                              <q-item-label>{{ scope.opt.name }}</q-item-label>
-                                scope.opt.positionName
+                              <!-- <q-item-label caption>
-                              }}</q-item-label>
-                              <q-item-label caption>
                                 <q-icon
                                   class="q-mr-sm"
                                   size="15px"
@@ -401,7 +399,7 @@
                                 {{
                                   scope.opt.positionExecutiveSide
                                 }}</q-item-label
-                              >
+                              > -->
                             </q-item-section>
                           </q-item>
                         </template>
@@ -412,9 +410,9 @@
                             square
                             class="q-my-none q-ml-xs q-mr-none"
                           >
-                            {{ scope.opt.positionName }}
+                            {{ scope.opt.name }}
                           </q-chip>
-                          <q-item-label caption>
+                          <!-- <q-item-label caption>
                             <q-icon
                               class="q-mr-sm"
                               size="15px"
@@ -425,7 +423,7 @@
                             {{ scope.opt.positionType }}
                             {{ scope.opt.positionExecutive }}
                             {{ scope.opt.positionExecutiveSide }}</q-item-label
-                          >
+                          > -->
                         </template>
                       </selector>
                     </q-td>
@@ -1021,8 +1019,8 @@ const myFormPayment = ref<any>();
 const myFormPosition = ref<any>();
 const positionPathOptions = ref<DataOption[]>([]);
 const governmentCodeOption = ref<DataOption[]>([]);
-const organizationShortName = ref<DataOption>({ id: "", name: "" });
+const organizationShortName = ref<DataOption>();
-const organizationName = ref<DataOption>({ id: "", name: "" });
+const organizationName = ref<DataOption>();
 const organizationNameOptions = ref<DataOption[]>([]);
 const examTypeOptions = [
   { name: "ทั่วไป", id: "normol" },
@@ -1221,14 +1219,18 @@ const fetchData = async () => {
         data.paymentStartDate != null && data.paymentEndDate != null
           ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
           : null;
-      organizationShortName.value = {
+      if (data.organizationCodeId != null) {
-        id: data.organizationCodeId,
+        organizationShortName.value = {
-        name: data.organizationCodeName,
+          id: data.organizationCodeId,
-      };
+          name: data.organizationCodeName,
-      organizationName.value = {
+        };
-        id: data.organizationId,
+      }
-        name: data.organizationName,
+      if (data.organizationId != null) {
-      };
+        organizationName.value = {
+          id: data.organizationId,
+          name: data.organizationName,
+        };
+      }
       rowsPosition.value = positionData;
       pay.value = data.paymentKrungThai;
       rowsPayment.value = bankData;
@@ -1369,7 +1371,7 @@ const sendData = () => {
       highDegree: r.highDegree ? true : false,
     });
   });
-  const valueData: RequestPeriodExam = {
+  const valueData: any = {
     announcementDate:
       dateAnnounce.value != null ? dateToISO(dateAnnounce.value) : null,
     announcementEndDate:

src/modules/05_placement/components/PersonalDetail/Information/Address.vue

@@ -1,6 +1,6 @@
 <!-- card ข้อมูลที่อยู่ -->
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -16,7 +16,8 @@ import type {
   AddressOps,
   Address as AddressType,
   optionData,
-} from "@/modules//05_placement/interface/index/Main";
+  AddressData,
+} from "@/modules/05_placement/interface/index/Main";
 import type { PropType } from "vue";
 
 const props = defineProps({
@@ -61,6 +62,20 @@ const OpsFilter = ref<AddressOps>({
   subdistrictCOps: [],
 });
 
+const registAddress = reactive<AddressData>({
+  subDistrictId: "",
+  zipCode: "",
+  districtId: "",
+  provinceId: "",
+})
+
+const currentAddress = reactive<AddressData>({
+  subDistrictId: "",
+  zipCode: "",
+  districtId: "",
+  provinceId: "",
+})
+
 onMounted(async () => {
   await getNewData();
   emit("update:statusEdit", false);
@@ -117,40 +132,37 @@ const refreshData = async () => {
 const getNewData = async () => {
   await props.fetch();
   await fetchProvince();
-  await fetchDistrict(addressData.value.registProvinceId, "1");
-  await fetchDistrict(addressData.value.currentProvinceId, "2");
-  await fetchSubDistrict(addressData.value.registDistrictId, "1");
-  await fetchSubDistrict(addressData.value.currentDistrictId, "2");
 };
 
+// บันทึกข้อมูล
 const editData = async () => {
   const body = {
     registrationSame: addressData.value.registSame == "1",
     registrationAddress: addressData.value.registAddress,
-    registrationSubDistrictId: addressData.value.registSubDistrictId,
+    registrationSubDistrictId: registAddress.subDistrictId,
-    registrationDistrictId: addressData.value.registDistrictId,
+    registrationDistrictId: registAddress.districtId,
-    registrationProvinceId: addressData.value.registProvinceId,
+    registrationProvinceId: registAddress.provinceId,
-    registrationZipCode: addressData.value.registZipCode,
+    registrationZipCode: registAddress.provinceId,
     currentAddress:
       addressData.value.registSame == "1"
         ? addressData.value.registAddress
         : addressData.value.currentAddress,
     currentSubDistrictId:
       addressData.value.registSame == "1"
-        ? addressData.value.registSubDistrictId
+        ? registAddress.subDistrictId
-        : addressData.value.currentSubDistrictId,
+        : currentAddress.subDistrictId,
     currentDistrictId:
       addressData.value.registSame == "1"
-        ? addressData.value.registDistrictId
+        ? registAddress.districtId
-        : addressData.value.currentDistrictId,
+        : currentAddress.districtId,
     currentProvinceId:
       addressData.value.registSame == "1"
-        ? addressData.value.registProvinceId
+        ? registAddress.provinceId
-        : addressData.value.currentProvinceId,
+        : currentAddress.provinceId,
     currentZipCode:
       addressData.value.registSame == "1"
-        ? addressData.value.registZipCode
+        ? registAddress.zipCode
-        : addressData.value.currentZipCode,
+        : currentAddress.zipCode,
   };
   showLoader();
   await http
@@ -171,63 +183,68 @@ const editData = async () => {
     });
 };
 
+// เช็คข้อมูลก่อนบันทึก
 const saveData = async () => {
-  await myform.value.validate().then(async (success: boolean) => {
+  myform.value.validate().then((success: boolean) => {
     if (success) {
-      await editData();
+      editData();
     }
   });
 };
 
+// เลือกข้อมูลจังหวัด
 const selectProvince = async (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
-      addressData.value.registDistrictId = "";
+      registAddress.subDistrictId = ""
-      addressData.value.registSubDistrictId = "";
+      registAddress.zipCode = ""
-      addressData.value.registZipCode = "";
+      registAddress.districtId = ""
     } else {
-      addressData.value.currentDistrictId = "";
+      currentAddress.subDistrictId = ""
-      addressData.value.currentSubDistrictId = "";
+      currentAddress.zipCode = ""
-      addressData.value.currentZipCode = "";
+      currentAddress.districtId = ""
     }
     myform.value.resetValidation();
     await fetchDistrict(e, name);
   }
 };
 
+// เลือกข้อมูลอำเภอ
 const selectDistrict = async (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
-      addressData.value.registSubDistrictId = "";
+      registAddress.subDistrictId = "";
-      addressData.value.registZipCode = "";
+      registAddress.zipCode = "";
     } else {
-      addressData.value.currentSubDistrictId = "";
+      currentAddress.subDistrictId = "";
-      addressData.value.currentZipCode = "";
+      currentAddress.zipCode = "";
     }
     myform.value.resetValidation();
     await fetchSubDistrict(e, name);
   }
 };
 
+// เลือกข้อมูลตำบล
 const selectSubDistrict = (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
       const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
       const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
-      addressData.value.registZipCode = namecode;
+      registAddress.zipCode = namecode;
     } else {
       const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
       const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
-      addressData.value.currentZipCode = namecode;
+      currentAddress.zipCode = namecode;
     }
   }
 };
 
+// ดึงข้อมูลจังหวัด
 const fetchProvince = async () => {
   showLoader();
   await http
     .get(config.API.province)
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       let option: optionData[] = [];
       data.map((r: any) => {
@@ -235,6 +252,40 @@ const fetchProvince = async () => {
       });
       Ops.value.provinceOps = option;
       OpsFilter.value.provinceOps = option;
+
+      const checkRegistProvinceId = await option.find((e: any) => e.id === addressData.value.registProvinceId)
+
+      // ที่อยู่ถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
+      if (addressData.value.registProvinceId == '' || addressData.value.registProvinceId == '00000000-0000-0000-0000-000000000000' || !checkRegistProvinceId) {
+        registAddress.subDistrictId = ""
+        registAddress.zipCode = ""
+        registAddress.districtId = ""
+      } else {
+        registAddress.provinceId = await addressData.value.registProvinceId
+        registAddress.zipCode = await addressData.value.registZipCode
+
+        await fetchDistrict(addressData.value.registProvinceId, "1");
+        if (addressData.value.registDistrictId != null && addressData.value.registDistrictId != '00000000-0000-0000-0000-000000000000') {
+          await fetchSubDistrict(addressData.value.registDistrictId, "1");
+        }
+      }
+
+      const checkCurrentProvinceId = await option.find((e: any) => e.id === addressData.value.currentProvinceId)
+
+      // ที่อยู่ปัจจุบันถ้า id จังหวัดว่างไม่ดึงค่าอำเภอ ตำบล และรหัสไปรษณีย์
+      if (addressData.value.currentProvinceId == '' || addressData.value.currentProvinceId == '00000000-0000-0000-0000-000000000000' || !checkCurrentProvinceId) {
+        currentAddress.subDistrictId = ""
+        currentAddress.zipCode = ""
+        currentAddress.districtId = ""
+      } else {
+        currentAddress.provinceId = addressData.value.currentProvinceId
+        currentAddress.zipCode = addressData.value.currentZipCode
+
+        await fetchDistrict(addressData.value.currentProvinceId, "2");
+        if (addressData.value.currentDistrictId != null && addressData.value.currentDistrictId != '00000000-0000-0000-0000-000000000000') {
+          await fetchSubDistrict(addressData.value.currentDistrictId, "2");
+        }
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -244,12 +295,13 @@ const fetchProvince = async () => {
     });
 };
 
+// ดึงข้อมูลอำเภอ
 const fetchDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
     showLoader();
     await http
       .get(config.API.listDistrict(id))
-      .then((res) => {
+      .then(async (res) => {
         const data = res.data.result;
         let option: optionData[] = [];
         data.map((r: any) => {
@@ -258,9 +310,22 @@ const fetchDistrict = async (id: string | null, position: string) => {
         if (position == "1") {
           Ops.value.districtOps = option;
           OpsFilter.value.districtOps = option;
+
+          // ที่อยู่ เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkRegistDistrictId = option.find((e: any) => e.id === addressData.value.registDistrictId)
+
+          if (checkRegistDistrictId) {
+            registAddress.districtId = addressData.value.registDistrictId
+          }
         } else {
           Ops.value.districtCOps = option;
           OpsFilter.value.districtCOps = option;
+
+          // ที่อยู่ปัจจุบัน เช็คอำเภอว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkCurrentDistrictId = await option.find((e: any) => e.id === addressData.value.currentDistrictId)
+          if (checkCurrentDistrictId) {
+            currentAddress.districtId = addressData.value.currentDistrictId
+          }
         }
       })
       .catch((e) => {
@@ -272,12 +337,13 @@ const fetchDistrict = async (id: string | null, position: string) => {
   }
 };
 
+// ดึงข้อมูลตำบล
 const fetchSubDistrict = async (id: string | null, position: string) => {
   if (id != null && id != "") {
     showLoader();
     await http
       .get(config.API.listSubDistrict(id))
-      .then((res) => {
+      .then(async (res) => {
         const data = res.data.result;
         let option: zipCodeOption[] = [];
         data.map((r: any) => {
@@ -290,9 +356,21 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
         if (position == "1") {
           Ops.value.subdistrictOps = option;
           OpsFilter.value.subdistrictOps = option;
+
+          // ที่อยู่ เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkRegistSubDistrictId = await option.find((e: any) => e.id === addressData.value.registSubDistrictId)
+          if (checkRegistSubDistrictId) {
+            registAddress.subDistrictId = addressData.value.registSubDistrictId
+          }
         } else {
           Ops.value.subdistrictCOps = option;
           OpsFilter.value.subdistrictCOps = option;
+
+          // ที่อยู่ปัจจุบัน เช็คตำบลว่ามี id ใน array ไหม ถ้ามีค่อยกำหนดค่าไปในตัวแปรใหม่เพิ่มแสดงผล
+          const checkCurrentSubDistrictId = await option.find((e: any) => e.id === addressData.value.currentSubDistrictId)
+          if (checkCurrentSubDistrictId) {
+            currentAddress.subDistrictId = addressData.value.currentSubDistrictId
+          }
         }
       })
       .catch((e) => {
@@ -324,270 +402,94 @@ const getClass = (val: boolean) => {
   };
 };
 </script>
+
 <template>
   <q-card class="col-12 q-px-lg q-py-md q-mt-md no-border">
-    <HeaderTop
+    <HeaderTop v-model:edit="edit" header="ข้อมูลที่อยู่" icon="mdi-map-marker" :save="saveData" :history="false"
-      v-model:edit="edit"
+      :changeBtn="changeBtn" :disable="statusEdit" :cancel="refreshData" />
-      header="ข้อมูลที่อยู่"
-      icon="mdi-map-marker"
-      :save="saveData"
-      :history="false"
-      :changeBtn="changeBtn"
-      :disable="statusEdit"
-      :cancel="refreshData"
-    />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
         <div class="col-xs-12">
-          <q-input
+          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules type="textarea" autogrow
-            :class="getClass(edit)"
+            :readonly="!edit" :borderless="!edit" v-model="addressData.registAddress"
-            hide-bottom-space
+            :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
-            :outlined="edit"
+            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`" />
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="addressData.registAddress"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
-            :label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
-          />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
-            :hide-dropdown-icon="!edit"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]" :outlined="edit" dense
-            hide-bottom-space
+            lazy-rules v-model="registAddress.provinceId" emit-value map-options option-label="name"
-            :class="getClass(edit)"
+            :options="Ops.provinceOps" option-value="id" :label="`${'จังหวัด'}`"
-            :readonly="!edit"
+            @update:model-value="(value: string) => selectProvince(value, '1')" use-input input-debounce="0" @filter="(inputValue: string,
-            :borderless="!edit"
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
+              )" />
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.registProvinceId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.provinceOps"
-            option-value="id"
-            :label="`${'จังหวัด'}`"
-            @update:model-value="(value:string) => selectProvince(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
-                      ) "
-          />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
-            :hide-dropdown-icon="!edit"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]" :outlined="edit" dense
-            hide-bottom-space
+            lazy-rules v-model="registAddress.districtId" emit-value map-options option-label="name"
-            :class="getClass(edit)"
+            :options="Ops.districtOps" option-value="id" :label="`${'เขต / อำเภอ'}`"
-            :readonly="!edit"
+            @update:model-value="(value: string) => selectDistrict(value, '1')" use-input input-debounce="0" @filter="(inputValue: string,
-            :borderless="!edit"
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'districtOps'
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
+              )" />
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.registDistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.districtOps"
-            option-value="id"
-            :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value:string) => selectDistrict(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
-                      ) "
-          />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <selector
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
-            :hide-dropdown-icon="!edit"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]" :outlined="edit" dense
-            hide-bottom-space
+            lazy-rules v-model="registAddress.subDistrictId" emit-value map-options option-label="name"
-            :class="getClass(edit)"
+            :options="Ops.subdistrictOps" option-value="id" :label="`${'แขวง / ตำบล '}`"
-            :readonly="!edit"
+            @update:model-value="(value: string) => selectSubDistrict(value, '1')" use-input input-debounce="0" @filter="(inputValue: string,
-            :borderless="!edit"
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictOps'
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
+              )" />
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.registSubDistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.subdistrictOps"
-            option-value="id"
-            :label="`${'แขวง / ตำบล '}`"
-            @update:model-value="(value:string) => selectSubDistrict(value, '1')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
-                      ) "
-          />
         </div>
         <div class="col-xs-6 col-sm-3 col-md-3">
-          <q-input
+          <q-input :class="getClass(edit)" hide-bottom-space dense lazy-rules readonly borderless
-            :class="getClass(edit)"
+            v-model="registAddress.zipCode" :style="!edit ? '' : 'padding:0 12px;'" :label="`${'รหัสไปรษณีย์'}`" />
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            v-model="addressData.registZipCode"
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :label="`${'รหัสไปรษณีย์'}`"
-          />
         </div>
         <div class="col-12 q-pt-lg"><q-separator /></div>
         <div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
-          <label class="text-bold"
+          <label class="text-bold">ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label>
-            >ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
+          <q-radio v-model="addressData.registSame" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1"
-          >
+            label="ใช่" dense :disable="!edit" />
-          <q-radio
+          <q-radio v-model="addressData.registSame" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="0"
-            v-model="addressData.registSame"
+            label="ไม่" dense :disable="!edit" />
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="ใช่"
-            dense
-            :disable="!edit"
-          />
-          <q-radio
-            v-model="addressData.registSame"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่"
-            dense
-            :disable="!edit"
-          />
         </div>
 
         <div class="col-xs-12" v-if="addressData.registSame == '0'">
-          <q-input
+          <q-input :class="getClass(edit)" hide-bottom-space :outlined="edit" dense lazy-rules type="textarea" autogrow
-            :class="getClass(edit)"
+            :readonly="!edit" :borderless="!edit" v-model="addressData.currentAddress"
-            hide-bottom-space
+            :rules="[(val: string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]" :label="`${'ที่อยู่ปัจจุบัน'}`" />
-            :outlined="edit"
-            dense
-            lazy-rules
-            type="textarea"
-            autogrow
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="addressData.currentAddress"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
-            :label="`${'ที่อยู่ปัจจุบัน'}`"
-          />
         </div>
-        <div
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.registSame == '0'">
-          class="col-xs-6 col-sm-3 col-md-3"
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
-          v-if="addressData.registSame == '0'"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก จังหวัด'}`]" :outlined="edit" dense
-        >
+            lazy-rules v-model="currentAddress.provinceId" emit-value map-options option-label="name"
-          <selector
+            :options="Ops.provinceOps" option-value="id" :label="`${'จังหวัด'}`"
-            :hide-dropdown-icon="!edit"
+            @update:model-value="(value: string) => selectProvince(value, '2')" use-input input-debounce="0" @filter="(inputValue: string,
-            hide-bottom-space
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'provinceOps'
-            :class="getClass(edit)"
+              )" />
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก จังหวัด'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.currentProvinceId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.provinceOps"
-            option-value="id"
-            :label="`${'จังหวัด'}`"
-            @update:model-value="(value:string) => selectProvince(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
-                      ) "
-          />
         </div>
-        <div
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.registSame == '0'">
-          class="col-xs-6 col-sm-3 col-md-3"
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
-          v-if="addressData.registSame == '0'"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]" :outlined="edit" dense
-        >
+            lazy-rules v-model="currentAddress.districtId" emit-value map-options option-label="name"
-          <selector
+            :options="Ops.districtCOps" option-value="id" :label="`${'เขต / อำเภอ'}`"
-            :hide-dropdown-icon="!edit"
+            @update:model-value="(value: string) => selectDistrict(value, '2')" use-input input-debounce="0" @filter="(inputValue: string,
-            hide-bottom-space
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'districtCOps'
-            :class="getClass(edit)"
+              )" />
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก เขต / อำเภอ'}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.currentDistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.districtCOps"
-            option-value="id"
-            :label="`${'เขต / อำเภอ'}`"
-            @update:model-value="(value:string) => selectDistrict(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
-                      ) "
-          />
         </div>
-        <div
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.registSame == '0'">
-          class="col-xs-6 col-sm-3 col-md-3"
+          <selector :hide-dropdown-icon="!edit" hide-bottom-space :class="getClass(edit)" :readonly="!edit"
-          v-if="addressData.registSame == '0'"
+            :borderless="!edit" :rules="[(val: string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]" :outlined="edit" dense
-        >
+            lazy-rules v-model="currentAddress.subDistrictId" emit-value map-options option-label="name"
-          <selector
+            :options="Ops.subdistrictCOps" option-value="id" :label="`${'แขวง / ตำบล '}`"
-            :hide-dropdown-icon="!edit"
+            @update:model-value="(value: string) => selectSubDistrict(value, '2')" use-input input-debounce="0" @filter="(inputValue: string,
-            hide-bottom-space
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'subdistrictCOps'
-            :class="getClass(edit)"
+              )" />
-            :readonly="!edit"
-            :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก แขวง / ตำบล '}`]"
-            :outlined="edit"
-            dense
-            lazy-rules
-            v-model="addressData.currentSubDistrictId"
-            emit-value
-            map-options
-            option-label="name"
-            :options="Ops.subdistrictCOps"
-            option-value="id"
-            :label="`${'แขวง / ตำบล '}`"
-            @update:model-value="(value:string) => selectSubDistrict(value, '2')"
-            use-input
-            input-debounce="0"
-            @filter="(inputValue:string,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
-                      ) "
-          />
         </div>
-        <div
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.registSame == '0'">
-          class="col-xs-6 col-sm-3 col-md-3"
+          <q-input :class="getClass(edit)" hide-bottom-space dense lazy-rules readonly borderless
-          v-if="addressData.registSame == '0'"
+            v-model="currentAddress.zipCode" :style="!edit ? '' : 'padding:0 12px;'" :label="`${'รหัสไปรษณีย์'}`" />
-        >
-          <q-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            dense
-            lazy-rules
-            readonly
-            borderless
-            v-model="addressData.currentZipCode"
-            :style="!edit ? '' : 'padding:0 12px;'"
-            :label="`${'รหัสไปรษณีย์'}`"
-          />
         </div>
       </div>
     </q-form>

src/modules/05_placement/components/PersonalList/OrgTree.vue

@@ -26,6 +26,8 @@ const myFormPosition = ref<any>();
 const selected = ref<string>("");
 const selectedFile = ref<string>("");
 const dataRespone = ref<any>();
+const search = ref<string>("");
+const filterRef = ref<any>(null);
 
 // Set form field
 let dataForm = reactive({
@@ -105,14 +107,6 @@ const fetchplacementPosition = async () => {
     });
 };
 
-const search = ref<string>("");
-//reset Tree Filter
-const filterRef = ref<any>(null);
-// const resetFilter = () => {
-//   search.value = "";
-//   filterRef.value.focus();
-// };
-
 const props = defineProps({
   personalId: String,
   modal: Boolean,
@@ -122,10 +116,9 @@ const props = defineProps({
   },
   personal: Object,
 });
-
+// filter หน่วยงาน
 const myFilterMethod = (node: any, filter: string) => {
   const filt = filter;
-
   return (
     // ((node.name && node.name == null) || !node.name) &&
     (node.name && node.name.indexOf(filt) > -1) ||
@@ -156,7 +149,7 @@ const validateData = async () => {
     }
   });
 };
-
+// ยืนยันการเลือกหน่วยงาน
 const saveAppoint = async () => {
   myFormPosition.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -170,31 +163,29 @@ const saveAppoint = async () => {
         positionPathSideId: dataForm.positionPathSideId,
         positionTypeId: dataForm.positionTypeId,
       };
-
+      dialogConfirm($q, async () => {
-      showLoader();
+        showLoader();
-      await http
+        await http
-        .post(config.API.placementPass(), dataAppoint)
+          .post(config.API.placementPass(), dataAppoint)
-        .then(() => {
+          .then(() => {
-          success($q, "บันทึกสำเร็จ");
+            success($q, "บันทึกสำเร็จ");
-        })
+          })
-        .catch((e) => {
+          .catch((e) => {
-          messageError($q, e);
+            messageError($q, e);
-        })
+          })
-        .finally(async () => {
+          .finally(async () => {
-          await closeAndClear();
+            await closeAndClear();
-          await fetchPublishFile();
+            await fetchPublishFile();
-          await loadTreeData();
+            await loadTreeData();
-          await fetchplacementPosition();
+            await fetchplacementPosition();
-          hideLoader();
+            hideLoader();
-        });
+          });
+      });
     }
   });
 };
 
 const editDataStatus = ref<boolean>(false);
-const clickEditRow = () => {
-  editDataStatus.value = true;
-};
 
 const closeModal = () => {
   if (editDataStatus.value == true) {
@@ -221,7 +212,6 @@ const closeAndClear = async () => {
   dataForm.positionLineId = "";
   dataForm.positionPathSideId = "";
   dataForm.positionTypeId = "";
-  editDataStatus.value = false;
 };
 // ตำแหน่งเลขที่
 const posNoOptions = ref<Object[]>([
@@ -265,7 +255,7 @@ const positionLevelOptions = ref<Object[]>([
     value: "",
   },
 ]);
-
+// เลือกหน่วยงาน
 const selectedPosition = async (data: any) => {
   if (data.name == null && selected.value != data.keyId) {
     editDataStatus.value = true;
@@ -366,7 +356,6 @@ watch(props, () => {
       personal.value = data;
     });
   }
-
   if (
     personal.value &&
     personal.value.draft === false &&
@@ -385,7 +374,7 @@ watch(props, () => {
     });
   }
 });
-
+// หาตำหน่วยงานที่เลือก
 function findByPerson(element: any): any {
   if (
     element.positionNumId &&
@@ -406,6 +395,7 @@ function findByPerson(element: any): any {
   }
   return null;
 }
+// ยืนยันการคืนตำแหน่ง
 const clearPosition = () => {
   dialogConfirm(
     $q,
@@ -414,6 +404,7 @@ const clearPosition = () => {
     "ต้องการยืนยันการคืนตำแหน่งนี้ใช่หรือไม่ ?"
   );
 };
+// คืนตำแหน่ง
 const postClearPosition = async () => {
   showLoader();
   await http
@@ -421,7 +412,6 @@ const postClearPosition = async () => {
     .then(() => {
       success($q, "คืนตำแหน่งสำเร็จ");
     })
-
     .catch((e: Object) => {
       messageError($q, e);
     })

src/modules/05_placement/components/PersonalList/Table.vue

@@ -172,7 +172,7 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
+// แปลงสถานะพนักงาน
 const convertBmaOfficer = (val: string) => {
   switch (val) {
     case "OFFICER":
@@ -185,6 +185,7 @@ const convertBmaOfficer = (val: string) => {
       return "บุคคลภายนอก";
   }
 };
+// แปลงสถานะบรรจุ
 const convertContainStatus = (val: string) => {
   switch (val) {
     case "UN-CONTAIN":
@@ -199,6 +200,7 @@ const convertContainStatus = (val: string) => {
       return "-";
   }
 };
+// แปลงสถานะการส่งรายชื่อ
 const convertDraft = (val: boolean) => {
   switch (val) {
     case false:
@@ -209,7 +211,7 @@ const convertDraft = (val: boolean) => {
       return "-";
   }
 };
-
+// เรียกข้อมูลรายชื่อผู้สอบผ่าย
 const getTable = async () => {
   showLoader();
   await http
@@ -253,10 +255,11 @@ const getTable = async () => {
           rowsAll.value.push(rowData);
         });
 
-      rows.value = roleAdmin
+      // ราชชื่อทั้งหมด
+      rows.value = roleAdmin.value
         ? rowsAll.value
-        : rowsAll.value.filter((x: any) => x.statusId != "CONTAIN");
+        : rowsAll.value.filter((x: any) => x.statusId !== "CONTAIN");
-
+      // รายชื่อไปยังหน่วยงาน
       rowsFilter.value = rows.value.filter(
         (e: any) =>
           e.draft == "รอส่งตัว" &&
@@ -273,6 +276,7 @@ const getTable = async () => {
 };
 
 const appointModal = ref<boolean>(false);
+// ยืนยันการผ่อนผัน
 const saveDeferment = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -285,6 +289,7 @@ const saveDeferment = async () => {
     }
   });
 };
+//  post ผ่อนผัน
 const postDeferment = async () => {
   const formData = new FormData();
   formData.append("personalId", personalId.value);
@@ -307,7 +312,7 @@ const postDeferment = async () => {
       hideLoader();
     });
 };
-
+// ยืนยันการสละสิทธิ์
 const saveDisclaim = async () => {
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
@@ -320,6 +325,7 @@ const saveDisclaim = async () => {
     }
   });
 };
+// post การสละสิทธิ์
 const postDisclaimf = async () => {
   const dataPost = {
     note: userNote.value,
@@ -353,7 +359,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
-
+// เรียกดูรายละเอียดข้อมูล
 const selectData = (pid: string) => {
   if (roleAdmin.value === true) {
     personalId.value = pid;
@@ -367,7 +373,7 @@ const dataInfo = reactive({
   reason: "",
   reliefDoc: "",
 });
-
+//แก้ไขข้อมูล 
 const editDetail = (
   props: PartialTableName,
   action: "disclaim" | "deferment" | "defermentInfo" | "disclaimInfo"
@@ -446,7 +452,6 @@ const clickCloseSendModal = () => {
 
 const clickClose = async () => {
   userNote.value = "";
-
   if (editRow.value == true) {
     dialogConfirm(
       $q,
@@ -501,6 +506,7 @@ const selected = ref<any>([]);
 const personal_selected = ref<any>([]);
 const filterlistAdd = ref<string>("");
 const paging = ref<boolean>(true);
+// ยืนยันส่งราชชื่อไปหน่วยงาน
 const savelist = () => {
   selected.value.map((e: any) => {
     personal_selected.value.push(e.personalId);
@@ -528,16 +534,17 @@ const savelist = () => {
     );
   }
 };
+// เปิด popup ส่งรายชื่อไปยังหน่วยงาน
 const handleModalAddListUpdate = (val: boolean) => {
   modaladdlist.value = val;
   (selected.value = []), (personal_selected.value = []);
 };
+// เช็ตสถานะการเลือกคนไปยังหน่วยงาน
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
   }
 });
-
 const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;

src/modules/05_placement/components/PersonalList/TableDetail.vue

@@ -2,7 +2,6 @@
 import { ref, watch } from "vue";
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useQuasar } from "quasar";
-import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogFooter.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";

src/modules/05_placement/components/PersonalList/TableView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
-import { useQuasar } from "quasar";
+import { QTooltip, useQuasar } from "quasar";
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
@@ -106,10 +106,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
   else return start + "-" + end + " ใน " + total;
 };
 const refresh = () => props.refresh();
-const initialPagination = ref<any>({
-  //   descending: false,
-  rowsPerPage: props.paging == true ? 25 : 0,
-});
 
 const emit = defineEmits([
   "update:inputfilter",
@@ -161,7 +157,9 @@ const updateModaladdlist = () => {
           icon="mdi-account-arrow-right"
           @click="updateModaladdlist"
           v-if="displayAdd"
-        />
+        >
+          <q-tooltip>ส่งรายชื่อไปยังหน่วยงาน</q-tooltip>
+        </q-btn>
       </div>
       <q-space />
       <div class="items-center" style="display: flex">

src/modules/05_placement/interface/index/Main.ts

@@ -141,6 +141,13 @@ interface Address {
   registSame: string;
 }
 
+interface AddressData {
+  subDistrictId: string;
+  zipCode: string;
+  districtId: string;
+  provinceId: string;
+}
+
 interface Certificate {
   id: string;
   certificateNo: string;
@@ -223,6 +230,7 @@ export type {
   optionData,
   Certificate,
   Assign,
+  AddressData,
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };

src/modules/07_insignia/components/2_Manage/Tab1.vue

@@ -255,9 +255,11 @@ const changtypeOc = () => {
 };
 // เพิ่มราชชื่อ
 const clickmodalAdd = () => {
+  let ocId = DataStore.typeOc ? DataStore.typeOc : DataStore.agency;
   showLoader();
   fecthInsignia();
-  fecthlistperson(DataStore.typeOc);
+  fecthlistperson(ocId);
+
   insigniaType.value = "";
 };
 // เรียกรายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม
@@ -303,10 +305,10 @@ const clickAdd = async (id: string) => {
       async () => {
         await addlistperson(id);
       },
-      "ยืนยันการเพิ่มรายชื่อขอพระราชทานเครื่องราชฯ",
+      "ยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ",
-      "ต้องการยืนยันการเพิ่มรายชื่อขอพระราชทานเครื่องราชฯ นี้หรือไม่ ?"
+      "ต้องการยืนยันการเพิ่มรายชื่อคนที่ยื่นขอพระราชทานเครื่องราชฯ นี้หรือไม่?"
     );
-  } else dialogMessageNotify($q, "กรุณาเลือกรายชื่อขอพระราชทานเครื่องราชฯ");
+  } else dialogMessageNotify($q, "กรุณาเลือกประเภทเครื่องราชฯ");
 };
 //เพิ่มราชชื่อข้าราชการ
 const addlistperson = async (id: string) => {
@@ -421,17 +423,12 @@ const closemodelPopupReject = () => {
 };
 // ยืนยัน การไม่ยืนขอ
 const savaReasonReject = (reason: string) => {
-  dialogConfirm(
+  dialogConfirm($q, async () => {
-    $q,
+    await listreject(rowid.value, reason);
-    async () => {
+    if (props.fecthStat) {
-      await listreject(rowid.value, reason);
+      await props.fecthStat(DataStore.roundId);
-      if (props.fecthStat) {
+    }
-        await props.fecthStat(DataStore.roundId);
+  });
-      }
-    },
-    "ยืนยันการย้ายข้อมูล",
-    "ต้องการยืนยันการย้ายข้อมูลนี้หรือไม่ ?"
-  );
 };
 // ยืนยัน การไม่ยืนขอ API
 const listreject = async (profileId: string, reason: string) => {
@@ -580,7 +577,7 @@ const closeModalEdit = () => {
         />
         <q-select
           v-model="DataStore.typeinsignia"
-          label="ปรเภทเครื่องราชฯ ที่ยืนขอ"
+          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
           dense
           emit-value
           map-options
@@ -790,10 +787,7 @@ const closeModalEdit = () => {
                 >
                   <q-menu transition-show="jump-down" transition-hide="jump-up">
                     <q-list dense style="min-width: 250px">
-                      <q-item
+                      <q-item clickable @click.stop="clickmodalEdit(props.row)">
-                        clickable
-                        @click.stop="clickmodalEdit(props.row)"
-                      >
                         <q-item-section
                           style="min-width: 0px"
                           avatar
@@ -806,10 +800,7 @@ const closeModalEdit = () => {
                           >แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section
                         >
                       </q-item>
-                      <q-item
+                      <q-item clickable @click.stop="clickReject(props.row.id)">
-                        clickable
-                        @click.stop="clickReject(props.row.id)"
-                      >
                         <q-item-section
                           style="min-width: 0px"
                           avatar
@@ -824,10 +815,7 @@ const closeModalEdit = () => {
                         </q-item-section>
                         <q-item-section>ไม่ยื่นขอ</q-item-section>
                       </q-item>
-                      <q-item
+                      <q-item clickable @click.stop="clickDelete(props.row.id)">
-                        clickable
-                        @click.stop="clickDelete(props.row.id)"
-                      >
                         <q-item-section
                           style="min-width: 0px"
                           avatar
@@ -892,7 +880,7 @@ const closeModalEdit = () => {
         <q-toolbar style="padding: 0">
           <q-select
             v-model="insigniaType"
-            label="ปรเภทเครื่องราชฯ"
+            label="ประเภทเครื่องราชฯ"
             dense
             emit-value
             map-options
@@ -1037,7 +1025,7 @@ const closeModalEdit = () => {
   <!-- popup เหตุผลไม่ยื่นขอ -->
   <DialogPopupReason
     :modal="modelPopupReject"
-    title="เหตุผลไม่ยื่นขอ"
+    title="เหตุผลการไม่ยื่นขอ"
     label="หมายเหตุ"
     :click-close="closemodelPopupReject"
     :savaForm="savaReasonReject"
@@ -1045,7 +1033,7 @@ const closeModalEdit = () => {
   <!--  เหตุผลที่ลบออก -->
   <DialogPopupReason
     :modal="modelPopupDelete"
-    title="เหตุผลที่ลบออก"
+    title="เหตุผลการลบออก"
     label="หมายเหตุ"
     :click-close="closemodelPopupDelete"
     :savaForm="savaReasonDelete"

src/modules/07_insignia/components/2_Manage/Tab2.vue

@@ -199,7 +199,7 @@ const dialogNote = ref<boolean>(false);
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
 const showReson = (name: string, requestNote: string) => {
-  dialogTitle.value = "หมายเหตุของ" + name;
+  dialogTitle.value = "เหตุผลการไม่ยื่นขอ " + name;
   dialogDesc.value = requestNote;
   dialogNote.value = true;
 };
@@ -233,7 +233,7 @@ const closeReson = () => {
         />
         <q-select
           v-model="DataStore.typeinsignia"
-          label="ปรเภทเครื่องราชฯ ที่ยืนขอ"
+          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
           dense
           emit-value
           map-options

src/modules/07_insignia/components/2_Manage/Tab3.vue

@@ -199,7 +199,7 @@ const note = ref<string>("");
 const noteTitle = ref<string>("");
 const showNote = (row: any) => {
   note.value = row.requestNote;
-  noteTitle.value = "เหตุผลกรลบออกของ" + " " + row.name;
+  noteTitle.value = "เหตุผลการลบออก " + " " + row.name;
   dialogNote.value = true;
 };
 const closeReson = () => {
@@ -231,7 +231,7 @@ const closeReson = () => {
         />
         <q-select
           v-model="DataStore.typeinsignia"
-          label="ปรเภทเครื่องราชฯ ที่ยืนขอ"
+          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
           dense
           emit-value
           map-options
@@ -386,7 +386,7 @@ const closeReson = () => {
                   @click.stop="showNote(props.row)"
                   icon="mdi-information-outline"
                 >
-                  <q-tooltip>เหตุผลการลบ</q-tooltip>
+                  <q-tooltip>เหตุผลการลบออก</q-tooltip>
                 </q-btn>
               </q-td>
             </q-tr>

src/modules/07_insignia/components/5_Borrow/Main.vue

@@ -91,7 +91,7 @@ const fecthInsignia = async () => {
       );
     });
 };
-//ระดีบเครื่องราชฯ Tab
+//ระดับเครื่องราชฯ Tab
 const fecthInsigniaType = async () => {
   await http(config.API.insigniaType)
     .then(async (res) => {
@@ -138,6 +138,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "ลำดับ",
     field: "no",
     sortable: false,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
   {
     name: "citizenId",
@@ -145,8 +147,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "เลขประจำตัวประชาชน",
     field: "citizenId",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "name",
@@ -154,8 +156,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "ชื่อ - นามสกุล",
     field: "name",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "employeeType",
@@ -163,8 +165,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "สถานภาพ",
     field: "employeeType",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "type",
@@ -172,8 +174,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "ประเภทเครื่องราชฯ",
     field: "type",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "dateReceive",
@@ -181,8 +183,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่ได้รับพระราชทาน",
     field: "dateReceive",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
 
   {
@@ -191,8 +193,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่ในราชกิจนุเบกษา",
     field: "date",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "volumeNo",
@@ -200,8 +202,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "เล่มที่ในราชกิจนุเบกษา",
     field: "volumeNo",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "section",
@@ -209,8 +211,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "ตอนที่ในราชกิจนุเบกษา",
     field: "section",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "page",
@@ -218,8 +220,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "หน้าในราชกิจนุเบกษา",
     field: "page",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "number",
@@ -227,8 +229,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "ลำดับที่ในราชกิจจานุเบกษา",
     field: "number",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "vatnumber",
@@ -236,8 +238,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "หมายเลขใบกำกับ",
     field: "vatnumber",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "datepay",
@@ -245,8 +247,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่จ่ายใบกำกับฯ",
     field: "datepay",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "typepay",
@@ -254,8 +256,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "รูปแบบการจ่าย",
     field: "typepay",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "address",
@@ -263,8 +265,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "ที่อยู่ที่จ่าย",
     field: "address",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "borrowOrganization",
@@ -272,8 +274,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "หน่วยงานที่ยืม",
     field: "borrowOrganization",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "borrowDate",
@@ -281,8 +283,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่ยืม",
     field: "borrowDate",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "returnOrganization",
@@ -290,8 +292,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "หน่วยงานที่คืน",
     field: "returnOrganization",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "returnDate",
@@ -299,8 +301,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่คืน",
     field: "returnDate",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "returnReason",
@@ -308,8 +310,8 @@ const columns = ref<QTableProps["columns"]>([
     label: "เหตุผลการคืน",
     field: "returnReason",
     sortable: true,
-    sort: (a: string, b: string) =>
+    headerStyle: "font-size: 14px",
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    style: "font-size: 14px",
   },
   {
     name: "action",
@@ -328,6 +330,7 @@ watch(tab, async () => {
 });
 
 const yearRound = ref<number>();
+// เลือกรอบ
 const selectorRound = async (round: number) => {
   roundYear.value = round;
   await fecthlistInsignia();
@@ -549,9 +552,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
             :columns="columns"
             :visible-columns="visibleColumns"
             :filter="filter"
-            row-key="name"
+            row-key="id"
             :pagination-label="paginationLabel"
             v-model:pagination="pagination"
+            :paging="true"
           >
             <template v-slot:body-cell="props">
               <q-td :props="props">

src/modules/08_registryEmployee/components/AddEmployee/Main.vue

@@ -256,11 +256,6 @@ const calculateMaxDate = () => {
 };
 
 // เช็คเรื่องการเกษียณ
-const handleDate = async (modelData: Date) => {
-  informaData.value.birthDate = modelData;
-  await calRetire(modelData);
-};
-
 const calRetire = async (birth: Date) => {
   const body = {
     birthDate: dateToISO(birth),
@@ -272,6 +267,7 @@ const calRetire = async (birth: Date) => {
       .then((res: any) => {
         const data = res.data.result;
         informaData.value.age = data.age;
+        informaData.value.birthDate = birth;
         changeRetireText(data.retireDate);
         dateBefore.value = birth;
       })
@@ -390,7 +386,7 @@ const clickBack = () => {
         <div class="row col-12 q-col-gutter-x-sm q-mb-xs">
           <div class="col-xs-6 col-sm-2 col-md-2">
             <datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
-              :max-date="calculateMaxDate()" @update:model-value="handleDate">
+              :max-date="calculateMaxDate()" @update:model-value="calRetire">
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>

src/views/MainLayout.vue

@@ -565,7 +565,7 @@ const clickDelete = (id: string) => {
               <div v-if="role.includes(menuItem.role)">
                 <q-item clickable v-ripple :active="link === menuItem.label" @click="link = menuItem.label"
                   active-class="text-primary menuActiveMini text-weight-medium"
-                  v-if="menuItem.key == 3 || menuItem.key == 5">
+                  v-if="menuItem.key == 3 || menuItem.key == 5 || menuItem.key == 6 || menuItem.key == 7 || menuItem.key == 8">
                   <div class="row items-center no-wrap">
                     <q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
                     <q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />