From 8263697759c9fa1e0692176b7d89b0650dcd5ed3 Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Wed, 10 Sep 2025 11:08:18 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B8=AA=E0=B8=A3=E0=B8=A3=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=B2=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20pagin=20/?=
 =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA=E0=B8=A3=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=20=E0=B8=9B=E0=B8=B4=E0=B8=94=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A7=E0=B9=82=E0=B8=AB=E0=B8=A5=E0=B8=94=E0=B9=84?=
 =?UTF-8?q?=E0=B8=94=E0=B9=89=E0=B9=80=E0=B9=80=E0=B8=84=E0=B9=88=20root?=
 =?UTF-8?q?=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_organization/components/TableMain.vue  | 74 ++++++++-------
 .../03_recruiting/components/Table.vue        | 94 +++++++++++++++----
 .../03_recruiting/interface/index/Main.ts     |  1 +
 .../03_recruiting/views/01_compete/Detail.vue | 17 +++-
 .../03_recruiting/views/01_compete/Period.vue |  7 +-
 .../views/02_qualify/DisableDetail.vue        | 17 +++-
 .../views/02_qualify/DisableDetailEx.vue      |  4 +-
 .../views/02_qualify/DisablePeriod.vue        |  6 +-
 8 files changed, 162 insertions(+), 58 deletions(-)

diff --git a/src/modules/02_organization/components/TableMain.vue b/src/modules/02_organization/components/TableMain.vue
index 031840028..3fb3319d2 100644
--- a/src/modules/02_organization/components/TableMain.vue
+++ b/src/modules/02_organization/components/TableMain.vue
@@ -576,7 +576,9 @@ const dataCondition = ref<DataPositionCondition>();
 
 function onClickCodition(data: PosMaster2) {
   dataCondition.value = {
-    conditionReason: data.conditionReason,
+    conditionReason: data.conditionReason
+      ? data.conditionReason.replace(/ /g, " \n")
+      : "",
     id: data.id,
     isCondition: data.isCondition,
     orgShortname: data.orgShortname,
@@ -600,7 +602,7 @@ async function fetchDataCondition() {
 }
 
 function onClickAction(type: string, data: PosMaster2) {
-  console.log(data);
+
   switch (type) {
     case "EDIT":
       onClickPosition(type, data.id, data);
@@ -698,7 +700,14 @@ watch(
       </div>
 
       <!-- v-if="store.typeOrganizational === 'draft'" -->
-      <q-btn flat round dense color="deep-purple" icon="save_alt">
+      <q-btn
+        v-if="orgLevel == 0"
+        flat
+        round
+        dense
+        color="deep-purple"
+        icon="save_alt"
+      >
         <q-menu>
           <q-list
             dense
@@ -955,35 +964,36 @@ watch(
               }}
             </div>
             <div v-else-if="col.name == 'positionIsSelected'">
-              {{
-                props.row.positionIsSelected
-                  ? props.row.positionIsSelected
-                  : "-"
-              }}
-              {{
-                props.row.isCondition && props.row.conditionReason
-                  ? `(${props.row.conditionReason})`
-                  : ""
-              }}
-
-              <q-btn
-                v-if="props.row.positionIsSelected != 'ว่าง'"
-                size="12px"
-                dense
-                flat
-                icon="info"
-                color="info"
-                round
-                @click="
-                  (modalPerson = true),
-                    (personalId =
-                      store.typeOrganizational === 'draft'
-                        ? props.row.next_holderId
-                        : props.row.current_holderId)
-                "
-              >
-                <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
-              </q-btn>
+              <div class="row text-html items-center">
+                {{
+                  props.row.positionIsSelected
+                    ? props.row.positionIsSelected
+                    : "-"
+                }}
+                {{
+                  props.row.isCondition && props.row.conditionReason
+                    ? `(${props.row.conditionReason})`
+                    : ""
+                }}
+                <q-btn
+                  v-if="props.row.positionIsSelected != 'ว่าง'"
+                  size="12px"
+                  dense
+                  flat
+                  icon="info"
+                  color="info"
+                  round
+                  @click="
+                    (modalPerson = true),
+                      (personalId =
+                        store.typeOrganizational === 'draft'
+                          ? props.row.next_holderId
+                          : props.row.current_holderId)
+                  "
+                >
+                  <q-tooltip>ดูข้อมูลในทะเบียนประวัติ</q-tooltip>
+                </q-btn>
+              </div>
             </div>
             <div v-else>
               {{ col.value ? col.value : "-" }}
diff --git a/src/modules/03_recruiting/components/Table.vue b/src/modules/03_recruiting/components/Table.vue
index ab22dbae1..341ebe6ba 100644
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { checkPermission } from "@/utils/permissions";
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, watch } from "vue";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
 const attrs = ref<any>(useAttrs());
@@ -8,13 +8,17 @@ const table = ref<any>(null);
 const filterRef = ref<any>(null);
 
 const filter = defineModel<string>("filter", { required: true });
-const pagination = defineModel<Pagination>('pagination',{required:true})
+const pagination = defineModel<Pagination>("pagination", { required: true });
 
 const props = defineProps({
   onSearch: Function,
+  fetchData: Function,
   count: Number,
+  totalList: Number,
   pass: Number,
   notpass: Number,
+  missed_exam: Number,
+  other: Number,
 
   inputfilter: String,
   name: String,
@@ -44,9 +48,7 @@ const emit = defineEmits([
   "update:inputvisible",
   "update:editvisible",
 ]);
-const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
-};
+
 const updateVisible = (value: []) => {
   emit("update:inputvisible", value);
 };
@@ -66,11 +68,23 @@ function checkAdd() {
   props.add();
 }
 
-/** reset ฟิลเตอร์ ที่ ค้นหา */
-function resetFilter() {
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
+function updatePagination(newPagination: any) {
+  if (!props.nornmalData) {
+    pagination.value.page = 1;
+    pagination.value.rowsPerPage = newPagination.rowsPerPage;
+  }
 }
+
+function getList() {
+  props.fetchData?.();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getList();
+  }
+);
 </script>
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
@@ -96,8 +110,8 @@ function resetFilter() {
           <q-space />
           <q-badge
             color="white"
-            class="text-weight-bold text-subtitle1 text-primary"
-            :label="`${count}`"
+            class="text-weight-bold text-subtitle1 text-blue-7"
+            :label="`${count?.toLocaleString()}`"
             rounded
           />
         </div>
@@ -108,8 +122,8 @@ function resetFilter() {
           <q-space />
           <q-badge
             color="white"
-            class="text-weight-bold text-subtitle1 text-blue"
-            :label="`${pass}`"
+            class="text-weight-bold text-subtitle1 text-primary"
+            :label="`${pass?.toLocaleString()}`"
             rounded
           />
         </div>
@@ -122,7 +136,41 @@ function resetFilter() {
           <q-badge
             color="white"
             class="text-weight-bold text-subtitle1 text-pink"
-            :label="`${notpass}`"
+            :label="`${notpass?.toLocaleString()}`"
+            rounded
+          />
+        </div>
+      </q-card>
+      <q-card
+        v-if="missed_exam && missed_exam !== 0"
+        bordered
+        flat
+        class="q-px-md no-wrap row"
+      >
+        <div class="col-12 text-subtitle2 row items-center">
+          <span class="text-weight-medium text-dark">ขาดสอบ</span>
+          <q-space />
+          <q-badge
+            color="white"
+            class="text-weight-bold text-subtitle1 text-orange"
+            :label="`${missed_exam?.toLocaleString()}`"
+            rounded
+          />
+        </div>
+      </q-card>
+      <q-card
+        v-if="other && other !== 0"
+        bordered
+        flat
+        class="q-px-md no-wrap row"
+      >
+        <div class="col-12 text-subtitle2 row items-center">
+          <span class="text-weight-medium text-dark">อื่น ๆ</span>
+          <q-space />
+          <q-badge
+            color="white"
+            class="text-weight-bold text-subtitle1 text-info"
+            :label="`${other?.toLocaleString()}`"
             rounded
           />
         </div>
@@ -175,8 +223,8 @@ function resetFilter() {
     :virtual-scroll-sticky-size-start="48"
     dense
     :pagination-label="paginationLabel"
-    v-model:pagination="pagination"
-    :rows-per-page-options="[0]"
+    :rows-per-page-options="nornmalData ? [0] : [1, 25, 50, 100]"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -189,6 +237,20 @@ function resetFilter() {
     <template #body="props">
       <slot v-bind="props" name="columns"></slot>
     </template>
+    <template v-if="!nornmalData" v-slot:pagination="scope">
+      ทั้งหมด {{ props.count && props.count.toLocaleString() }} รายการ
+      <q-pagination
+        v-model="pagination.page"
+        active-color="primary"
+        color="dark"
+        :max="totalList"
+        size="sm"
+        boundary-links
+        direction-links
+        :max-pages="5"
+        @update:model-value="getList"
+      ></q-pagination>
+    </template>
   </d-table>
 </template>
 
diff --git a/src/modules/03_recruiting/interface/index/Main.ts b/src/modules/03_recruiting/interface/index/Main.ts
index 5fb358548..b9a332915 100644
--- a/src/modules/03_recruiting/interface/index/Main.ts
+++ b/src/modules/03_recruiting/interface/index/Main.ts
@@ -1,5 +1,6 @@
 import { ref } from "vue";
 interface Pagination {
+  page: number;
   rowsPerPage: number;
   sortBy?: string;
 }
diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index 52b28d411..3262c8fa8 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -22,15 +22,19 @@ const { messageError, success, showLoader, hideLoader, onSearchDataTable } =
   mixin;
 
 const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+  page:1,
+  rowsPerPage: 10,
   sortBy: "year",
 });
 const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
 const count = ref<number>(0);
+const totalList = ref<number>(0);
 const pass = ref<number>(0);
 const notpass = ref<number>(0);
+const missed_exam = ref<number>(0);
+const other = ref<number>(0);
 const rows = ref<any[]>([]);
 const rowsData = ref<any[]>([]);
 const importId = ref<string>(route.params.id as string); // Period Import Id
@@ -352,6 +356,8 @@ async function fetchData() {
     .post(config.API.getExamResultById(importId.value), {
       examAttribute: "",
       examResult: "",
+      page:initialPagination.value.page,
+      pageSize:initialPagination.value.rowsPerPage,
     })
     .then((res) => {
       let header = res.data.result.header;
@@ -359,6 +365,11 @@ async function fetchData() {
       count.value = header.count;
       pass.value = header.pass;
       notpass.value = header.notpass;
+      missed_exam.value = header.missed_exam;
+      other.value = header.other;
+      totalList.value = Math.ceil(
+        header.count / initialPagination.value.rowsPerPage
+      );
       if (period != null) {
         name.value = period.name;
         round.value = period.order;
@@ -483,6 +494,8 @@ onMounted(async () => {
         :count="count"
         :pass="pass"
         :notpass="notpass"
+        :missed_exam="missed_exam"
+        :other="other"
         :rows="rows"
         :columns="columns"
         v-model:filter="filter"
@@ -490,9 +503,11 @@ onMounted(async () => {
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
+        v-model:totalList="totalList"
         v-model:pagination="initialPagination"
         :nornmalData="false"
         :conclude="true"
+        :fetchData="fetchData"
       >
         <template #columns="props">
           <q-tr :props="props" class="cursor-pointer">
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index d37076187..189039415 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -64,6 +64,7 @@ const textTittleResult = ref<string>("");
 const rows = ref<ResponseRecruitPeriod[]>([]);
 const rowsData = ref<ResponseRecruitPeriod[]>([]);
 const initialPagination = ref<Pagination>({
+  page: 0,
   rowsPerPage: 0,
   sortBy: "year",
 });
@@ -646,7 +647,7 @@ onMounted(async () => {
                   <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
                 </q-btn>
                 <div v-else>
-                  {{ col.value }}
+                  {{ col.value.toLocaleString() }}
 
                   <q-btn
                     v-if="checkPermission($route)?.attrIsUpdate"
@@ -693,7 +694,7 @@ onMounted(async () => {
                   <q-tooltip>นำเข้าไฟล์บัญชีรวมคะแนน</q-tooltip>
                 </q-btn>
                 <div v-else>
-                  {{ props.row.score.scoreCount }}
+                  {{ props.row.score.scoreCount.toLocaleString() }}
                   <q-btn
                     :disable="props.row.examCount == 0"
                     flat
@@ -730,7 +731,7 @@ onMounted(async () => {
                   <q-tooltip>นำเข้าไฟล์ผลการสอบ (บัญชีรายชื่อ)</q-tooltip>
                 </q-btn>
                 <div v-else>
-                  {{ props.row.score.resultCount }}
+                  {{ props.row.score.resultCount.toLocaleString() }}
                   <q-btn
                     v-if="checkPermission($route)?.attrIsUpdate"
                     dense
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 0c6b9450d..274477101 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -26,6 +26,7 @@ const year = ref<string>("2566");
 const round = ref<string>("1");
 const name = ref<string>("");
 const initialPagination = ref<Pagination>({
+  page: 1,
   rowsPerPage: 0,
   sortBy: "examID",
 });
@@ -33,6 +34,10 @@ const initialPagination = ref<Pagination>({
 const count = ref<number>(0);
 const pass = ref<number>(0);
 const notpass = ref<number>(0);
+const missed_exam = ref<number>(0);
+const other = ref<number>(0);
+const totalList = ref<number>(0);
+
 const importId = ref<string>(route.params.id as string); // Period Import Id
 
 const filter = ref<string>(""); //search data table
@@ -293,6 +298,8 @@ async function fetchData() {
     .post(config.API.getDisableExamResultById(importId.value), {
       examAttribute: "",
       examResult: "",
+      page: initialPagination.value.page,
+      pageSize: initialPagination.value.rowsPerPage,
     })
     .then((res) => {
       var _data = res.data.result;
@@ -300,7 +307,11 @@ async function fetchData() {
       count.value = header.count;
       pass.value = header.pass;
       notpass.value = header.notpass;
-
+      missed_exam.value = header.missed_exam;
+      other.value = header.other;
+      totalList.value = Math.ceil(
+        header.count / initialPagination.value.rowsPerPage
+      );
       const data = res.data.result.data;
       let result: RecruitDetailResponse[] = [];
       if (data.length > 0) {
@@ -422,6 +433,9 @@ onMounted(async () => {
         :count="count"
         :pass="pass"
         :notpass="notpass"
+        :missed_exam="missed_exam"
+        :other="other"
+        v-model:totalList="totalList"
         :rows="rows"
         :columns="columns"
         v-model:filter="filter"
@@ -432,6 +446,7 @@ onMounted(async () => {
         v-model:inputvisible="visibleColumns"
         :nornmalData="false"
         :conclude="true"
+        :fetchData="fetchData"
       >
         <template #columns="props">
           <q-tr :props="props" class="cursor-pointer">
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
index 4e8f6b00b..6df0eeee9 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
@@ -50,7 +50,7 @@ async function fetchData() {
   await http
     .get(config.API.getDisableExamDetail(importId.value, examId.value))
     .then((res) => {
-      let data = res.data.result.data;
+      let data = res.data.result;
       if (data != null) {
         profile_id.value = data.profileID;
         examID.value = data.examID;
@@ -82,7 +82,7 @@ async function fetchData() {
           scoreD.value = data.scoreResult.scoreD;
         }
       } else {
-        dialogMessageNotify($q, "แข่งขัน ไม่พบข้อมูล");
+        dialogMessageNotify($q, "คัดเลือก ไม่พบข้อมูล");
       }
     })
     .catch((e) => {
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
index 71d8dd9c7..53368c744 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@@ -595,7 +595,7 @@ onMounted(async () => {
                   <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
                 </q-btn>
                 <div v-else>
-                  {{ col.value }}
+                  {{ col.value.toLocaleString() }}
 
                   <q-btn
                     v-if="checkPermission($route)?.attrIsUpdate"
@@ -642,7 +642,7 @@ onMounted(async () => {
                   <q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
                 </q-btn>
                 <div v-else>
-                  {{ col.value }}
+                  {{ props.row.score.scoreCount.toLocaleString() }}
                   <q-btn
                     v-if="checkPermission($route)?.attrIsUpdate"
                     dense
@@ -676,7 +676,7 @@ onMounted(async () => {
                   <q-tooltip>นำเข้าไฟล์ผลการสอบ (บัญชีรายชื่อ)</q-tooltip>
                 </q-btn>
                 <div v-else>
-                  {{ props.row.score.resultCount }}
+                  {{ props.row.score.resultCount.toLocaleString() }}
                   <q-btn
                     v-if="checkPermission($route)?.attrIsUpdate"
                     dense