From 08455521f2eae9a488ca9546299cb39cb22b81bf Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Sun, 30 Jun 2024 21:12:26 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=20=3D>?=
 =?UTF-8?q?=20fix=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/2_Manage/Tab1.vue  | 216 +++++++++++++-----
 .../07_insignia/components/2_Manage/Tab2.vue  |   2 +-
 .../07_insignia/components/2_Manage/Tab3.vue  |   2 +-
 .../components/3_result/DialogForm.vue        |  89 +++++---
 .../components/3_result/Dialogbody.vue        |  46 ++--
 .../components/5_Borrow/DialogForm.vue        |  40 ++--
 6 files changed, 262 insertions(+), 133 deletions(-)

diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index ef92517d2..2c83ecc79 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, computed, reactive } from "vue";
+import { onMounted, ref, computed, reactive, watch } from "vue";
 
 import { useQuasar, QForm } from "quasar";
 import http from "@/plugins/http";
@@ -275,52 +275,111 @@ function changtypeOc() {
 /** function เพิ่มรายชื่อ*/
 async function clickmodalAdd() {
   let ocId = DataStore.typeOc ? DataStore.typeOc : DataStore.agency;
-  showLoader();
+  // showLoader();
   await fecthInsignia();
   await fecthlistperson(ocId);
   clearForm();
 }
 
+const maxPage = ref<number>(0);
+const total = ref<number>(0);
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  searchField: "citizenId",
+  searchKeyword: "",
+});
+const filterOption = ref<any[]>([
+  {
+    id: "citizenId",
+    name: "เลขประจำตัวประชาชน",
+  },
+  {
+    id: "fullName",
+    name: "ชื่อ - นามสกุล",
+  },
+]);
+
 /**
  * function เรียกรายชื่อข้าราชการตามหน่วยงานที่จะเพิ่ม
  * @param id  หน่วยงาน
  */
-async function fecthlistperson(id: string) {
-  let data = [{}];
-  data = [
-    {
-      criteriaType: "is_retire",
-      criteriaValue: "false",
-    },
-    {
-      criteriaType: "is_probation",
-      criteriaValue: "false",
-    },
-  ];
-  await http
-    .post(config.API.profileSearchNewOcIdType(id, "officer"), {
-      criterias: data,
-    })
+async function fecthlistperson(id: string = "") {
+  showLoader();
+
+  http
+    .get(config.API.registryNew(""), { params: formFilter })
     .then((res) => {
-      let data = res.data.result.map((e: any) => ({
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      total.value = res.data.result.total;
+      let data = res.data.result.data.map((e: any) => ({
         id: e.id,
+        rootId: e.rootId,
         citizenId: e.citizenId,
-        fullname: e.fullname == null ? "-" : e.fullname,
-        position: e.position == null ? "-" : e.position,
-        level: e.positionEmployeeLevel == null ? "-" : e.positionEmployeeLevel,
-        organizationOrganization: e.oc == null ? "-" : e.oc,
+        fullname: `${e.prefix}${e.firstName} ${e.lastName}`,
+        position: e.position,
+        level: e.posLevel,
+        organizationOrganization: e.root,
       }));
       modalAdd.value = true;
       rows2.value = data;
     })
-    .catch((e) => {
-      messageError($q, e);
+    .catch((err) => {
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
     });
+
+  // let data = [{}];
+  // data = [
+  //   {
+  //     criteriaType: "is_retire",
+  //     criteriaValue: "false",
+  //   },
+  //   {
+  //     criteriaType: "is_probation",
+  //     criteriaValue: "false",
+  //   },
+  // ];
+  // await http
+  //   .post(config.API.profileSearchNewOcIdType(id, "officer"), {
+  //     criterias: data,
+  //   })
+  //   .then((res) => {
+  //     let data = res.data.result.map((e: any) => ({
+  //       id: e.id,
+  //       citizenId: e.citizenId,
+  //       fullname: e.fullname == null ? "-" : e.fullname,
+  //       position: e.position == null ? "-" : e.position,
+  //       level: e.positionEmployeeLevel == null ? "-" : e.positionEmployeeLevel,
+  //       organizationOrganization: e.oc == null ? "-" : e.oc,
+  //     }));
+  //     modalAdd.value = true;
+  //     rows2.value = data;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
 }
 
+/** update ค่า เเถวข้อมูล */
+function updatePageSize(newPagination: any) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
+watch(
+  () => formFilter.pageSize,
+  () => {
+    fecthlistperson();
+  }
+);
+
 /** function ยืนยันการเพิ่มรายชื่อ*/
 async function clickAdd() {
   dataPerson.id
@@ -350,17 +409,11 @@ async function addlistperson(id: string) {
     insigniaId: insigniaType.value,
     insigniaPeriodId: props.roundId,
     reason: reason.value,
+    ocId: dataPerson.rootId,
   };
   await http
     .post(config.API.insigniaCreate(), data)
     .then(() => {
-      success($q, "เพิ่มรายชื่อสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      modalAdd.value = false;
       if (props.fecthInsigniaByOc) {
         props.fecthInsigniaByOc(
           props.roundId,
@@ -369,6 +422,11 @@ async function addlistperson(id: string) {
           props.tab
         );
       }
+      modalAdd.value = false;
+      success($q, "เพิ่มรายชื่อสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
       hideLoader();
     });
 }
@@ -579,6 +637,7 @@ const dataPerson = reactive({
   position: "",
   organizationOrganization: "",
   level: "",
+  rootId: "",
 });
 const reason = ref<string>("");
 
@@ -591,6 +650,7 @@ function selectPerson(person: any) {
   dataPerson.position = person.position;
   dataPerson.organizationOrganization = person.organizationOrganization;
   dataPerson.level = person.level;
+  dataPerson.rootId = person.rootId;
 }
 
 /** function clearFormData*/
@@ -605,15 +665,20 @@ function clearForm() {
 }
 
 const insignia = ref<string>("");
-const insigniaOptions = ref<any>([]);
+const insigniaOptions = ref<any[]>([]);
 const insigniaType = ref<string>("");
 
 /** function เรียกประเภทเครื่องราช*/
 async function fecthInsignia() {
   await http
-    .get(config.API.insignia)
+    .get(config.API.insigniaOrg)
     .then((res) => {
-      insigniaOptions.value = res.data.result;
+      const listtype = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.name + `(${e.shortName})`,
+      }));
+
+      insigniaOptions.value = listtype;
     })
     .catch((e) => {
       messageError($q, e);
@@ -625,7 +690,7 @@ async function fecthInsignia() {
  * @param id profileId
  */
 function nextPage(id: string) {
-  router.push(`/registry/${id}`);
+  router.push(`/registry-new/${id}`);
 }
 
 /** ค้นหาข้อมุล table*/
@@ -922,7 +987,10 @@ onMounted(async () => {
           <q-space />
           <div>
             <q-btn
-              :disable="DataStore.employeeClass === 'all'|| DataStore.typeinsignia === 'all'"
+              :disable="
+                DataStore.employeeClass === 'all' ||
+                DataStore.typeinsignia === 'all'
+              "
               size="md"
               icon="mdi-download"
               flat
@@ -1158,7 +1226,7 @@ onMounted(async () => {
   </div>
   <!-- add -->
   <q-dialog v-model="modalAdd">
-    <q-card style="width: 800px; max-width: 80vw">
+    <q-card style="width: 900px; max-width: 80vw">
       <q-toolbar class="q-py-md">
         <q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
 
@@ -1167,7 +1235,13 @@ onMounted(async () => {
           unelevated
           round
           dense
-          @click="modalAdd = false"
+          @click="
+            (modalAdd = false),
+              (formFilter.page = 1),
+              (formFilter.pageSize = 10),
+              (formFilter.searchField = 'citizenId'),
+              (formFilter.searchKeyword = '')
+          "
           style="color: #ff8080; background-color: #ffdede"
         />
       </q-toolbar>
@@ -1178,18 +1252,33 @@ onMounted(async () => {
             <q-card flat bordered class="fit q-pa-sm">
               <q-toolbar style="padding: 0">
                 <q-space />
-                <q-input
-                  borderless
-                  outlined
-                  dense
-                  debounce="300"
-                  placeholder="ค้นหา"
-                  v-model="filterKeyword2"
-                >
-                  <template v-slot:append>
-                    <q-icon name="search" />
-                  </template>
-                </q-input>
+                <div class="row q-col-gutter-sm">
+                  <q-select
+                    dense
+                    outlined
+                    label="ค้นหาจาก"
+                    v-model="formFilter.searchField"
+                    option-label="name"
+                    option-value="id"
+                    :options="filterOption"
+                    map-options
+                    emit-value
+                    @update:model-value="formFilter.searchKeyword = ''"
+                  />
+                  <q-input
+                    borderless
+                    outlined
+                    dense
+                    debounce="300"
+                    placeholder="ค้นหา"
+                    v-model="formFilter.searchKeyword"
+                    @keydown.enter="(formFilter.page = 1), fecthlistperson()"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="search" />
+                    </template>
+                  </q-input>
+                </div>
               </q-toolbar>
               <d-table
                 flat
@@ -1197,10 +1286,11 @@ onMounted(async () => {
                 dense
                 :rows="rows2"
                 :columns="columns2"
-                :filter="filterKeyword2"
                 row-key="fullname"
                 class="custom-header-table"
                 v-model:pagination="pagination2"
+                :rows-per-page-options="[20, 25, 50, 100]"
+                @update:pagination="updatePageSize"
               >
                 <template v-slot:header="props">
                   <q-tr :props="props">
@@ -1220,7 +1310,13 @@ onMounted(async () => {
                     :class="{ 'text-primary': props.row.id === dataPerson.id }"
                     @click="selectPerson(props.row)"
                   >
-                    <q-td style="width: 75px">{{ props.rowIndex + 1 }}</q-td>
+                    <q-td style="width: 75px">
+                      {{
+                        (formFilter.page - 1) * formFilter.pageSize +
+                        props.rowIndex +
+                        1
+                      }}</q-td
+                    >
                     <q-td style="width: 250px" key="citizenId" :props="props">
                       {{ props.row.citizenId }}
                     </q-td>
@@ -1229,6 +1325,20 @@ onMounted(async () => {
                     </q-td>
                   </q-tr>
                 </template>
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="formFilter.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(maxPage)"
+                    :max-pages="5"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    @update:model-value="fecthlistperson()"
+                  ></q-pagination>
+                </template>
               </d-table>
             </q-card>
           </div>
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index fa33249f2..2cf81a9d4 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -172,7 +172,7 @@ function changtypeOc() {
  * @param id profileId
  */
 function nextPage(id: string) {
-  router.push(`/registry/${id}`);
+  router.push(`/registry-new/${id}`);
 }
 
 /** filter table*/
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index b70a4751b..e3bb846ed 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -172,7 +172,7 @@ async function changtypeOc() {
  * @param id profileId
  */
 function nextPage(id: string) {
-  router.push(`/registry/${id}`);
+  router.push(`/registry-new/${id}`);
 }
 
 /** ข้อมูล Table*/
diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index b35fd7729..54734215d 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -1,6 +1,5 @@
-divdiv
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { ref, watch, computed, reactive } from "vue";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -132,7 +131,7 @@ const disbleStatus = computed(() => {
 
 /** function เลือกประเภทลูกจ้าง */
 async function selectType() {
-  showLoader();
+  // showLoader();
   cardid.value = "";
   fullName.value = "";
   position.value = "";
@@ -149,53 +148,73 @@ async function selectType() {
   announced.value = "";
   invoiceDate.value = null;
   payment.value = "";
-  await fecthlistPerson();
+  // await fecthlistPerson();
 }
 
 /** function เรียกหน่วยงาน*/
-async function fecthlistPerson() {
-  await http
-    .get(config.API.profileOrganizRoot)
-    .then((res) => {
-      const id = res.data.result[0].id;
-      if (id !== "") {
-        findlist(id); // id หน่วยงานไปเรียกรายชื่อ
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-}
+// async function fecthlistPerson() {
+//   await http
+//     .get(config.API.profileOrganizRoot)
+//     .then((res) => {
+//       const id = res.data.result[0].id;
+//       if (id !== "") {
+//         findlist(id); // id หน่วยงานไปเรียกรายชื่อ
+//       }
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     });
+// }
+
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  searchField: "citizenId",
+  searchKeyword: "",
+});
 
 /**
  *  function เรียกรายชื่อลูกจ้างตาม id หน่วยงาน
  * @param id id หน่วยงาน
  */
 async function findlist(id: string) {
-  let data = [{}];
-  //  ข้าราชการ
-  if (employeeClass.value === "officer") {
-    data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
-    // ลูกจ้างประจำ
-  } else if (employeeClass.value === "employee") {
-    data = [
-      { criteriaType: "is_retire", criteriaValue: "false" },
-      { criteriaType: "employee_class", criteriaValue: "perm" },
-    ];
-  }
-  await http
-    .post(config.API.profileSearchNewOcIdType(id, employeeClass.value), {
-      criterias: data,
-    })
+  showLoader();
+
+  http
+    .get(config.API.registryNew(""), { params: formFilter })
     .then((res) => {
-      listPerson.value = res.data.result;
+      console.log();
     })
-    .catch((e) => {
-      messageError($q, e);
+    .catch((err) => {
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
     });
+  // let data = [{}];
+  // //  ข้าราชการ
+  // if (employeeClass.value === "officer") {
+  //   data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
+  //   // ลูกจ้างประจำ
+  // } else if (employeeClass.value === "employee") {
+  //   data = [
+  //     { criteriaType: "is_retire", criteriaValue: "false" },
+  //     { criteriaType: "employee_class", criteriaValue: "perm" },
+  //   ];
+  // }
+  // await http
+  //   .post(config.API.profileSearchNewOcIdType(id, employeeClass.value), {
+  //     criterias: data,
+  //   })
+  //   .then((res) => {
+  //     listPerson.value = res.data.result;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
 }
 
 /**
diff --git a/src/modules/07_insignia/components/3_result/Dialogbody.vue b/src/modules/07_insignia/components/3_result/Dialogbody.vue
index 90261dac5..3afb42a4a 100644
--- a/src/modules/07_insignia/components/3_result/Dialogbody.vue
+++ b/src/modules/07_insignia/components/3_result/Dialogbody.vue
@@ -112,29 +112,29 @@ async function onSubmit(type: string, id: string) {
 
 /** function เรียกหน่วยงาน*/
 async function fetchOrgList() {
-  showLoader();
-  await http
-    .get(config.API.typeOc())
-    .then(async (response: any) => {
-      const orgArr = response.data.result.map((e: any) => ({
-        id: e.organizationId,
-        name: e.organizationName,
-      }));
-      OrgList.value = orgArr;
-      OrgList2.value = [
-        {
-          id: "00000000-0000-0000-0000-000000000000",
-          name: "สำนักนายกรัฐมนตรี",
-        },
-        ...orgArr,
-      ];
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  // showLoader();
+  // await http
+  //   .get(config.API.typeOc())
+  //   .then(async (response: any) => {
+  //     const orgArr = response.data.result.map((e: any) => ({
+  //       id: e.organizationId,
+  //       name: e.organizationName,
+  //     }));
+  //     OrgList.value = orgArr;
+  //     OrgList2.value = [
+  //       {
+  //         id: "00000000-0000-0000-0000-000000000000",
+  //         name: "สำนักนายกรัฐมนตรี",
+  //       },
+  //       ...orgArr,
+  //     ];
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
 }
 
 /** hook*/
diff --git a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
index 4b4017692..ca078b437 100644
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
@@ -124,25 +124,25 @@ async function fecthlistInsignia() {
 }
 
 /** function ดึงข้อมูลรายการหน่วยงาน */
-async function fetchOrgList() {
-  showLoader();
-  await http
-    .get(config.API.typeOc())
-    .then(async (response: any) => {
-      const orgArr = response.data.result.map((e: any) => ({
-        id: e.organizationId,
-        name: e.organizationName,
-      }));
-      OrgList.value = orgArr;
-      filterOrgList.value = OrgList.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+// async function fetchOrgList() {
+//   showLoader();
+//   await http
+//     .get(config.API.typeOc())
+//     .then(async (response: any) => {
+//       const orgArr = response.data.result.map((e: any) => ({
+//         id: e.organizationId,
+//         name: e.organizationName,
+//       }));
+//       OrgList.value = orgArr;
+//       filterOrgList.value = OrgList.value;
+//     })
+//     .catch((err) => {
+//       messageError($q, err);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// }
 
 // ดึงข้อมูลการยืม-คืนมาแสดงเก็บไว้ก่อนเผื่อต้องเอาข้อมูลมาแสดงเพิ่ม
 // const fetchData = async () => {
@@ -287,7 +287,7 @@ watch(props, () => {
   if (props.modal == true && props.roundId != "all") {
     roundNo.value = props.roundId;
     fecthlistInsignia();
-    fetchOrgList();
+    // fetchOrgList();
   }
 });
 </script>