รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ

src/modules/15_development/components/history/DialogGov.vue

@@ -1,14 +1,41 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed,reactive } from "vue";
 import Header from "@/components/DialogHeader.vue";
-import type { DataOption } from "@/modules/15_development/interface/index/Main";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import type { DataOption,FormFilter } from "@/modules/15_development/interface/index/Main";
+import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+
+
+const props = defineProps({
+  upDate: { type: Function },
+});
+
+const maxPage = ref<number>(1);
+
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 20,
+  keyword: "",
+  year: new Date().getFullYear(),
+  type: "",
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: null,
+  isProbation: null,
+});
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -18,44 +45,28 @@ const {
   showLoader,
   hideLoader,
 } = mixin;
-const store = useDevelopmentDataStore();
+const store = useDevelopmentDataStoreHistory();
 
 const modal = defineModel<boolean>("modal", { required: true });
 
 const selected = ref<any[]>([]);
 const search = ref<string>("citizenId");
-const inputSearch = ref<string>("");
+const inputSearch = ref<any>("");
 
+const inputType = computed(() => {
+  return search.value === "citizenId" ? "number" : "text";
+});
 const govOp = ref<DataOption[]>([
   {
     id: "citizenId",
     name: "เลขประจำตัวประชาชน",
   },
-  {
-    id: "prefix",
-    name: "คำนำหน้า",
-  },
   {
     id: "fullName",
     name: "ชื่อ - นามสกุล",
   },
 ]);
 
-const projectOp = ref<DataOption[]>([
-  {
-    id: "ID1",
-    name: "ชื่อโครงการ",
-  },
-  {
-    id: "ID2",
-    name: "ปีงบประมาณ",
-  },
-  {
-    id: "ID3",
-    name: "ชื่อหน่วยงานที่รับผิดชอบ",
-  },
-]);
-
 /** save ข้อมูล */
 function onSubmit() {
   if (selected.value?.length == 0) {
@@ -64,15 +75,23 @@ function onSubmit() {
     dialogConfirm($q, () => {
       const data = selected.value[0];
       const body = {
-        citizenId: data.citizenId,
-        name: data.name,
-        position: data.position,
-        type: data.type,
-        level: data.level,
-        positionSide: data.positionSide,
+        id:data.id,
+        name:data.name,
+        prefix:data.prefix,
+        rank:data.rank,
+        firstName:data.firstName,
+        lastName:data.lastName,
+        citizenId:data.citizenId,
+        level:data.level,
+        type:data.type,
+        posLevelId:data.posLevelId,
+        posTypeId:data.posTypeId,
+        position:data.position,
+        positionSide:data.positionSide,
+        posNo:data.posNo,
       };
-      closeDialog()
-
+      props.upDate?.(body)
+      closeDialog();
     });
   }
 }
@@ -90,37 +109,45 @@ function getClass() {
 }
 
 function searchFilter() {
-  const dataTest = [
-    {
-      id: "ID1",
-      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
-      name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
-      position: "นักบริหาร", //ตําแหน่ง
-      type: "บริหาร", //ประเภทตําแหน่ง
-      level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
-      positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
-    },
-    {
-      id: "ID2",
-      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
-      name: "นางสาวภาพรรณ ลออ", //ชื่อ - นามสกุล
-      position: "นักจัดการงานทั่วไป", //ตําแหน่ง
-      type: "บริหาร", //ประเภทตําแหน่ง
-      level: "วิชาการ", //ระดับตําแหน่ง
-      positionSide: "ชำนาญงาน", //ตําแหน่งทางการบริหาร
-    },
-  ];
-
-  store.rows = dataTest;
+  showLoader();
+  http
+    .get(
+      config.API.registryNew +
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&searchField=${search.value}&searchKeyword=${inputSearch.value}`
+    )
+    .then((res) => {
+      console.log(res.data.result.data);
+      const data = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      store.rows = data.map((item: any) => ({
+        id:item.id ? item.id : null,
+        name: item.firstName ? `${item.prefix}${item.firstName} ${item.lastName}` : null,
+        prefix:item.prefix ? item.prefix : null,
+        rank:item.rank ? item.rank : null,
+        firstName:item.firstName ? item.firstName : null,
+        lastName:item.lastName ? item.lastName : null,
+        citizenId:item.citizenId ? item.citizenId : null,
+        level:item.posLevel ? item.posLevel : null,
+        type:item.posType ? item.posType : null,
+        posLevelId:item.posLevelId ? item.posLevelId : null,
+        posTypeId:item.posTypeId ? item.posTypeId : null,
+        position:item.position ? item.position : null,
+        positionSide:item.posExecutive ? item.posExecutive : null,
+        posNo:item.posNo ? item.posNo : null,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 60%">
-      <Header
-        :tittle="'เลือกข้าราชการ'"
-        :close="closeDialog"
-      />
+      <Header :tittle="'เลือกข้าราชการ'" :close="closeDialog" />
       <q-separator />
 
       <q-card-section>
@@ -137,6 +164,7 @@ function searchFilter() {
               map-options
               emit-value
               :class="getClass()"
+              @update:model-value="inputSearch = ''"
             />
           </div>
           <div class="col-8">
@@ -146,6 +174,7 @@ function searchFilter() {
               label="ค้นหา"
               v-model="inputSearch"
               :class="getClass()"
+              :mask="search === 'citizenId' ? '#############' : undefined"
             />
           </div>
           <div class="col-2">
@@ -161,6 +190,8 @@ function searchFilter() {
         </div>
         <div class="q-mt-sm">
           <d-table
+            style="max-height: 70vh"
+            virtual-scroll
             selection="single"
             v-model:selected="selected"
             for="table"
@@ -173,7 +204,21 @@ function searchFilter() {
             dense
             class="custom-header-table"
             :visible-columns="store.visibleColumns"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[10, 25, 50, 100]"
           >
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="formFilter.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(maxPage)"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th class="text-center"> </q-th>
@@ -193,7 +238,7 @@ function searchFilter() {
                   />
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div class="table_ellipsis">
+                  <div>
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>