From 69b6ad3a6c45c1a9dbfb058c85b1981120eb16c9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 22 Feb 2024 16:51:16 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
 =?UTF-8?q?=20=3D>=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=B9=E0=B9=89=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   1 +
 .../components/probation/MainProbation.vue    | 128 +++++++++++++++---
 2 files changed, 108 insertions(+), 21 deletions(-)

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index bde8568bc..5bec17793 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -55,4 +55,5 @@ export default {
   /** บรรจุแต่งตั้ง*/
   orgPosPlacement: `${orgPos}/placement/search`,
   orgPosFind: `${organization}/find/node`,
+  orgProfileProbation: `${organization}/profile/probation`,
 };
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 6fe63e94b..fe8f0f544 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted } from "vue";
+import { ref, useAttrs, onMounted, reactive, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useTransferDataStore } from "@/modules/05_placement/store";
@@ -171,11 +171,11 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "posLevelName",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "level",
+    field: "posLevelName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -218,7 +218,7 @@ function ProbationMainFilter() {
 }
 
 /**
- * อัพเดท rows ตาม status 
+ * อัพเดท rows ตาม status
  * @param body {id:? , value: ?}
  */
 function updateRows(body: any) {
@@ -261,6 +261,43 @@ async function getpersonalList() {
     });
 }
 
+const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
+const maxPage = ref<number>(1);
+
+async function onclickAddProbation() {
+  modal.value = true;
+  modal.value && showLoader();
+  await http
+    .post(config.API.orgProfileProbation, formProbation)
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / formProbation.pageSize);
+      rows2.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch([() => formProbation.page, () => formProbation.pageSize], () => {
+  onclickAddProbation();
+});
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formProbation.page = 1;
+  formProbation.pageSize = newPagination.rowsPerPage;
+}
+
+async function filterKeyword2Fn(page: number) {
+  page !== 1 ? (formProbation.page = 1) : await onclickAddProbation();
+}
+
 /** fecth profile */
 async function fecthlistPersonal() {
   showLoader();
@@ -335,18 +372,18 @@ async function findlist(id: string) {
 
 /**
  * เพิ่มข้อมูล ผู้ทดลองปฏิบัติหน้าที่ราชการ
- * @param id personal id 
+ * @param id personal id
  */
-function clickAdd(id: string) {
+function clickAdd(data: any) {
   dialogConfirm(
     $q,
     async () => {
       showLoader();
-      const postData = {
-        personal_id: id,
-      };
+      // const postData = {
+      //   personal_id: id,
+      // };
       await http
-        .post(config.API.personalAdd(), postData)
+        .post(config.API.personalAdd(), data)
         .then(() => {
           getpersonalList();
           success($q, "เพิ่มข้อมูลสำเร็จ");
@@ -456,7 +493,7 @@ onMounted(async () => {
 
             <div>
               <q-btn
-                @click="fecthlistPersonal"
+                @click="onclickAddProbation"
                 size="12px"
                 flat
                 round
@@ -469,7 +506,7 @@ onMounted(async () => {
           </div>
         </div>
         <q-space />
-        
+
         <q-input
           class="col-xs-12 col-sm-3 col-md-2"
           standout
@@ -577,11 +614,12 @@ onMounted(async () => {
             class="col-12"
             standout
             dense
-            v-model="filterKeyword2"
+            v-model="formProbation.keyword"
             ref="filterRef2"
             outlined
             debounce="300"
             placeholder="ค้นหา"
+            @keydown.enter.prevent="filterKeyword2Fn(formProbation.page)"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
@@ -598,7 +636,6 @@ onMounted(async () => {
               ref="table2"
               :columns="columns2"
               :rows="rows2"
-              :filter="filterKeyword2"
               row-key="Order"
               flat
               bordered
@@ -608,6 +645,8 @@ onMounted(async () => {
               v-bind="attrs"
               :pagination-label="paginationLabel2"
               v-model:pagination="pagination2"
+              @update:pagination="updatePagination"
+              :rows-per-page-options="[10, 25, 50, 100]"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -629,18 +668,66 @@ onMounted(async () => {
                     :props="props"
                   >
                     <div v-if="col.name == 'no'">
-                      {{ props.rowIndex + 1 }}
+                      {{
+                        (formProbation.page - 1) * formProbation.pageSize +
+                        props.rowIndex +
+                        1
+                      }}
+                    </div>
+
+                    <div v-else-if="col.name == 'fullname'">
+                      {{
+                        props.row.prefix +
+                        props.row.firstName +
+                        "  " +
+                        props.row.lastName
+                      }}
                     </div>
                     <div v-else-if="col.name == 'status'" class="text-center">
                       <q-icon
-                        v-if="col.value === true"
+                        v-if="props.row.isProbation === true"
                         name="mdi-check"
                         color="positive"
                         size="sm"
                       />
                     </div>
+                    <div
+                      v-else-if="col.name == 'organizationOrganization'"
+                      class="table_ellipsis"
+                    >
+                      <div
+                        v-if="
+                          props.row.orgChild4Name === null &&
+                          props.row.orgChild3Name === null &&
+                          props.row.orgChild2Name === null &&
+                          props.row.orgChild1Name === null &&
+                          props.row.orgRootName === null
+                        "
+                      >
+                        -
+                      </div>
+                      {{
+                        `${
+                          props.row.orgChild4Name
+                            ? props.row.orgChild4Name + "/"
+                            : ""
+                        }${
+                          props.row.orgChild3Name
+                            ? props.row.orgChild3Name + "/"
+                            : ""
+                        }${
+                          props.row.orgChild2Name
+                            ? props.row.orgChild2Name + "-"
+                            : ""
+                        }${
+                          props.row.orgChild1Name
+                            ? props.row.orgChild1Name + "/"
+                            : ""
+                        }${props.row.orgRootName ? props.row.orgRootName : ""}`
+                      }}
+                    </div>
                     <div v-else>
-                      {{ col.value }}
+                      {{ col.value ? col.value : "-" }}
                     </div>
                   </q-td>
                   <q-td auto-width>
@@ -650,7 +737,7 @@ onMounted(async () => {
                       outline
                       color="primary"
                       label="เพิ่ม"
-                      @click="clickAdd(props.row.id)"
+                      @click="clickAdd(props.row)"
                     >
                     </q-btn>
                   </q-td>
@@ -658,11 +745,10 @@ onMounted(async () => {
               </template>
               <template v-slot:pagination="scope">
                 <q-pagination
-                  v-model="pagination2.page"
+                  v-model="formProbation.page"
                   active-color="primary"
                   color="dark"
-                  :max="scope.pagesNumber"
-                  :max-pages="5"
+                  :max="maxPage"
                   size="sm"
                   boundary-links
                   direction-links