From 23bac0373e04c50b05e50fdf499660a052ad2045 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 3 Apr 2024 17:12:04 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9D=E0=B8=B6=E0=B8=81?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1/=E0=B8=94=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=87=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=81=E0=B8=A3=E0=B8=B8=E0=B8=87=E0=B9=80=E0=B8=97?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=A1=E0=B8=AB=E0=B8=B2=E0=B8=99=E0=B8=84=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B2=E0=B8=A1=E0=B8=B1=E0=B8=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/15_development/api.development.ts     |   6 +
 .../salaryEmployeeChart/TabStructure.vue      |   2 +-
 .../components/history/AddPage.vue            | 170 +++++++++------
 .../components/history/DialogGov.vue          | 163 ++++++++------
 .../components/history/DialogProject.vue      | 199 ++++++++++++------
 .../15_development/interface/index/Main.ts    |  16 +-
 .../15_development/interface/request/Main.ts  |  71 ++++---
 src/modules/15_development/router.ts          |  11 +
 .../store/developmentStoreHistory.ts          |  19 ++
 src/modules/15_development/views/History.vue  | 199 +++++++++++++-----
 10 files changed, 590 insertions(+), 266 deletions(-)
 create mode 100644 src/modules/15_development/store/developmentStoreHistory.ts

diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index da7c97e9e..af9adb121 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -3,4 +3,10 @@ const development = `${env.API_URI}/development`;
 
 export default {
   development,
+
+
+  /** history */
+  developmentHistoryList: (type:string) => `${development}/history/${type}/`,
+  developmentHistoryAdd: (type:string) => `${development}/history/${type}`,
+  developmentProjectSearch: () => `${development}/main/search`,
 };
diff --git a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
index d2c45c331..15b2b79f9 100644
--- a/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
+++ b/src/modules/13_salary/components/salaryEmployeeChart/TabStructure.vue
@@ -239,7 +239,7 @@ onMounted(() => {
       outlined
       v-model="formFilter.keyword"
       placeholder="ค้นหา"
-      @keydown.enter.pervrnt="filterFn"
+      @keydown.enter.prevent="filterFn"
     >
       <template v-slot:append>
         <q-icon name="search" />
diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index 9d8a44009..545b542f3 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -5,41 +5,53 @@ import type {
   FormAddHistory,
   FormAddHistoryProject,
 } from "@/modules/15_development/interface/request/Main";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import DialogGov from "@/modules/15_development/components/history/DialogGov.vue"
+import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
 import DialogProject from "@/modules/15_development/components/history/DialogProject.vue";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
-import config from '@/app.config'
+import config from "@/app.config";
 
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const { dialogConfirm,showLoader,hideLoader,messageError } = mixin
 const router = useRouter();
-const store = useDevelopmentDataStore();
+const route = useRoute()
+
+const id = ref<string>(route.params.id as string);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError,date2Thai } = mixin;
+const store = useDevelopmentDataStoreHistory();
 const modalDialogGov = ref<boolean>(false);
 const modalDialogProject = ref<boolean>(false);
 
+const dateOrder = ref<Date | null>(null);
 const order = ref<string>("");
-const dateOrder = ref<string>("");
 
 /** ตัวแปรข้อมูลข้าราชการ */
 const formMain = reactive<FormAddHistory>({
-  citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
-  name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
-  position: "นักบริหาร", //ตําแหน่ง
-  type: "บริหาร", //ประเภทตําแหน่ง
-  level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
-  positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
-  oc: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่สังกัด
+  id: "",
+  name: "", //ชื่อ - นามสกุล
+  prefix: "", //คำนำหน้าชื่อ
+  rank: "", //ยศ
+  firstName: "", //ชื่อ
+  lastName: "", //นามสกุล
+  citizenId: "", //เลขประจําตัวประชาชน
+  level: "", //ระดับตําแหน่ง
+  type: "", //ประเภทตําแหน่ง
+  posLevelId: "", //id ระดับตําแหน่ง
+  posTypeId: "", //id ประเภทตําแหน่ง
+  position: "", //ตําแหน่ง
+  positionSide: "", //ตําแหน่งทางการบริหาร
+  posNo: "", //เลขที่ตำแหน่ง
+  oc: "", //หน่วยงานที่สังกัด
 });
 
 /** ตัวแปรข้อมูลโครงสร้าง */
 const formMainProject = reactive<FormAddHistoryProject>({
+  id: "",
   project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
   year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
   trainingStart: "", //วันเริ่มต้นการฝึกอบรม
@@ -201,43 +213,56 @@ function getClass() {
 }
 /** save */
 function onSubmit() {
-//   const body = {
-// citizenId:formMain.citizenId,
-// name:formMain.name,
-// position:formMain.position,
-// type:formMain.type,
-// level:formMain.level,
-// positionSide:formMain.positionSide,
-// oc:formMain.oc,
+  const body = {
+  rank:null,
+  prefix:formMain.prefix,
+  firstName:formMain.firstName,
+  lastName:formMain.lastName,
+  citizenId:formMain.citizenId,
+  position:formMain.position,
+  posExecutive:formMain.positionSide,
+  posLevelId:formMain.posLevelId,
+  posTypeId:formMain.posTypeId,
 
-// project:formMainProject.project,
-// year:formMainProject.year,
-// trainingStart:formMainProject.trainingStart,
-// trainingEnd:formMainProject.trainingEnd,
-// totalTraining:formMainProject.totalTraining,
-// location:formMainProject.location,
-// topic:formMainProject.topic,
-// studyStart:formMainProject.studyStart,
-// studyEnd:formMainProject.studyEnd,
-// organizingTraining:formMainProject.organizingTraining,
+  developmentId:formMainProject.id,
+  order:order.value,
+  dateOrder:dateOrder.value
+    }
+    dialogConfirm($q,()=>{
+      showLoader()
+      http
+      .post(config.API.developmentHistoryAdd('officer'),body)
+      .then((res)=>{
+        console.log(res)
+        router.push(`/development/history`)
+      }).catch((e)=>{
+        messageError($q,e)
+      }).finally(()=>{
+        hideLoader()
+      })
+    })
 
-// order:order.value,
-// dateOrder:dateOrder.value,
-//   }
-//   dialogConfirm($q,()=>{
-//     showLoader()
-//     http
-//     .post(config.API.,body)
-//     .then((res)=>{
+}
 
-//     }).catch((e)=>{
-//       messageError($q,e)
-//     }).finally(()=>{
-//       hideLoader()
-//     })
-//   })
+function upDate(data: FormAddHistory) {
+  formMain.id = data.id;
+  formMain.citizenId = data.citizenId;
+  formMain.name = data.name;
+  formMain.prefix = data.prefix;
+  formMain.firstName = data.firstName;
+  formMain.lastName = data.lastName;
+  formMain.position = data.position;
+  formMain.posLevelId = data.posLevelId;
+  formMain.posTypeId = data.posTypeId;
+  formMain.type = data.type;
+  formMain.level = data.level;
+  formMain.positionSide = data.positionSide;
+}
 
-router.push(`/development/history`)
+function upDateProject(data: any) {
+  formMainProject.id = data.id;
+  formMainProject.project = data.project;
+  formMainProject.year = data.year;
 }
 </script>
 <template>
@@ -252,8 +277,7 @@ router.push(`/development/history`)
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    <span class=""
-      >เพิ่มประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ</span
+    <span>{{ id ? `แก้ไขประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`:`เพิ่มประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`}}</span
     >
   </div>
   <q-card flat bordered>
@@ -383,15 +407,41 @@ router.push(`/development/history`)
             />
           </div>
           <div class="col-3">
-            <q-input
-              label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
+            <datepicker
+              menu-class-name="modalfix"
               v-model="dateOrder"
-              dense
-              outlined
-              :class="getClass()"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
-            />
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :model-value="dateOrder != null ? date2Thai(dateOrder) : null"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
+                  label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
           </div>
         </div>
       </q-card-section>
@@ -412,6 +462,6 @@ router.push(`/development/history`)
     </q-form>
   </q-card>
 
-  <DialogGov v-model:modal="modalDialogGov" />
-  <DialogProject v-model:modal="modalDialogProject" />
+  <DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
+  <DialogProject v-model:modal="modalDialogProject" :up-date="upDateProject" />
 </template>
diff --git a/src/modules/15_development/components/history/DialogGov.vue b/src/modules/15_development/components/history/DialogGov.vue
index 1519ac083..d5471ca8a 100644
--- a/src/modules/15_development/components/history/DialogGov.vue
+++ b/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>
diff --git a/src/modules/15_development/components/history/DialogProject.vue b/src/modules/15_development/components/history/DialogProject.vue
index a57dfa8e7..a13e741bc 100644
--- a/src/modules/15_development/components/history/DialogProject.vue
+++ b/src/modules/15_development/components/history/DialogProject.vue
@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, 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 year = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -18,27 +26,47 @@ const {
   showLoader,
   hideLoader,
 } = mixin;
-const store = useDevelopmentDataStore();
+const store = useDevelopmentDataStoreHistory();
 
 const modal = defineModel<boolean>("modal", { required: true });
 
+const maxPage = ref<number>(1);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const formFilter = reactive<FormFilter>({
+  page: 1,
+  pageSize: 20,
+  keyword: "",
+  type: "",
+  year: new Date().getFullYear(),
+  posType: "",
+  posLevel: "",
+  retireYear: "",
+  rangeYear: { min: 0, max: 60 },
+  isShowRetire: null,
+  isProbation: null,
+});
+
 const selected = ref<any[]>([]);
-const search = ref<string>("ID1");
+const search = ref<string>("projectName");
 const inputSearch = ref<string>("");
 
 const projectOp = ref<DataOption[]>([
   {
-    id: "ID1",
+    id: "projectName",
     name: "ชื่อโครงการ",
   },
   {
-    id: "ID2",
+    id: "year",
     name: "ปีงบประมาณ",
   },
-  {
-    id: "ID3",
-    name: "ชื่อหน่วยงานที่รับผิดชอบ",
-  },
+  // {
+  //   id: "ID3",
+  //   name: "ชื่อหน่วยงานที่รับผิดชอบ",
+  // },
 ]);
 
 /** save ข้อมูล */
@@ -49,12 +77,17 @@ function onSubmit() {
     dialogConfirm($q, () => {
       const data = selected.value[0];
       const body = {
-        project: data.project,
-        year: data.year,
-        organizingTraining: data.organizingTraining,
+        id:data.id,
+        year:data.year,
+        project:data.project,
+        dateStart:data.dateStart,
+        dateEnd:data.dateEnd,
+        totalDate:data.totalDate,
+        addressAcademic:data.addressAcademic,
+        topicAcademic:data.topicAcademic,
       };
-      closeDialog()
-
+      props.upDate?.(body)
+      closeDialog();
     });
   }
 }
@@ -72,52 +105,41 @@ function getClass() {
 }
 
 function searchFilter() {
-  const dataTestGov = [
-    {
-      id: "ID1",
-      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
-      name: "นางสาวรัชภรณ์ ภักดี", //ชื่อ - นามสกุล
-      position: "นักบริหาร", //ตําแหน่ง
-      type: "บริหาร", //ประเภทตําแหน่ง
-      level: "ชำนาญการพิเศษ", //ระดับตําแหน่ง
-      positionSide: "นักบริหาร", //ตําแหน่งทางการบริหาร
-    },
-    {
-      id: "ID2",
-      citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
-      name: "นางสาวภาพรรณ ลออ", //ชื่อ - นามสกุล
-      position: "นักจัดการงานทั่วไป", //ตําแหน่ง
-      type: "บริหาร", //ประเภทตําแหน่ง
-      level: "วิชาการ", //ระดับตําแหน่ง
-      positionSide: "ชำนาญงาน", //ตําแหน่งทางการบริหาร
-    },
-  ];
-  const dataTest = [
-    {
-      id: "ID1",
-      project: "โครงการฝึกอบรมที่หน่วยงานของกรุงเทพมหานคร", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
-      year: "2567", //ปีงบประมาณที่เข้ารับการฝึกอบรม
-      organizingTraining: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่รับผิดชอบจัดการอบรม
-    },
-    {
-      id: "ID2",
-      project: "กิจกรรมฝึกอบรมที่หน่วยงานของกรุงเทพมหานคร", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
-      year: "2567", //ปีงบประมาณที่เข้ารับการฝึกอบรม
-      organizingTraining: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่รับผิดชอบจัดการอบรม
-    },
-  ];
-
-  store.rows = dataTest;
+  let queryParams: any = {
+    page: formFilter.page,
+    pageSize: formFilter.pageSize,
+    searchField: search.value,
+    searchKeyword: search.value == "year" ? year.value : inputSearch.value,
+  };
+  showLoader();
+  http
+    .get(config.API.developmentProjectSearch(), { params: queryParams })
+    .then((res) => {
+      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,
+        year: item.year ? item.year : null,
+        project: item.projectName ? item.projectName : null,
+        dateStart: item.dateStart ? item.dateStart : null,
+        dateEnd: item.dateEnd ? item.dateEnd : null,
+        totalDate: item.totalDate ? item.totalDate : null,
+        addressAcademic: item.addressAcademic ? item.addressAcademic : null,
+        topicAcademic: item.topicAcademic ? item.topicAcademic : 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>
@@ -136,7 +158,48 @@ function searchFilter() {
               :class="getClass()"
             />
           </div>
-          <div class="col-8">
+          <div v-if="search == 'year'" class="col-3">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="year"
+              class="col-2"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  :model-value="year === '' ? null : Number(year) + 543"
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-if="year" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="year = ''"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div v-else class="col-8">
             <q-input
               dense
               outlined
@@ -145,6 +208,7 @@ function searchFilter() {
               :class="getClass()"
             />
           </div>
+          <q-space v-if="search == 'year'" />
           <div class="col-2">
             <q-btn
               label="ค้นหา"
@@ -170,7 +234,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>
@@ -190,7 +268,10 @@ function searchFilter() {
                   />
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div class="table_ellipsis">
+                  <div v-if="col.name == 'year'">
+                    {{ col.value ? col.value + 543 : "-" }}
+                  </div>
+                  <div v-else class="table_ellipsis">
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index 9eb2758ed..74059f40b 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -8,4 +8,18 @@ interface DataOptionCheckBox {
   value: string;
 }
 
-export type { DataOption, DataOptionCheckBox };
+interface FormFilter {
+  page: number;
+  pageSize: number;
+  keyword: string;
+  type: string;
+  year:number
+  posType: string;
+  posLevel: string;
+  retireYear: string | null;
+  rangeYear: { min: number; max: number };
+  isShowRetire: boolean | null;
+  isProbation: boolean | null;
+}
+
+export type { DataOption, DataOptionCheckBox,FormFilter };
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index fcc87379e..b8c73e96e 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -45,42 +45,51 @@ interface FormFollowOther {
   address: string;
   province: string;
   budget: string;
-  accept: number|null;
-  receive: number|null;
-  approved: number|null;
-  budgetPay: number|null;
-  issues:string
-  chance:string
-  effects:string
-  riskLevel:string
-  riskManagement:string
-  benefits:string
-  topicsIssues:string
-  trainingStudy:string
+  accept: number | null;
+  receive: number | null;
+  approved: number | null;
+  budgetPay: number | null;
+  issues: string;
+  chance: string;
+  effects: string;
+  riskLevel: string;
+  riskManagement: string;
+  benefits: string;
+  topicsIssues: string;
+  trainingStudy: string;
 }
 
-interface FormAddHistory{
-  citizenId:string
-  name:string
-  position:string
-  type:string
-  level:string
-  positionSide:string
-  oc:string
+interface FormAddHistory {
+  id: string;
+  name: string;
+  prefix: string;
+  rank: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  level: string;
+  type: string;
+  posLevelId: string;
+  posTypeId: string;
+  position: string;
+  positionSide: string;
+  posNo: string;
+  oc: string;
   [key: string]: any;
 }
 
-interface FormAddHistoryProject{
-  project:string
-  year:string
-  trainingStart:string
-  trainingEnd:string
-  totalTraining:string
-  location:string
-  topic:string
-  studyStart:string
-  studyEnd:string
-  organizingTraining:string
+interface FormAddHistoryProject {
+  id:string
+  project: string;
+  year: string;
+  trainingStart: string;
+  trainingEnd: string;
+  totalTraining: string;
+  location: string;
+  topic: string;
+  studyStart: string;
+  studyEnd: string;
+  organizingTraining: string;
   [key: string]: any;
 }
 
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index c8956b51a..a3c5062b7 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -8,6 +8,7 @@ const employeeHistory = () =>
 const Scholarship = () =>
   import("@/modules/15_development/views/Scholarship.vue");
 const historyAdd = () => import('@/modules/15_development/components/history/AddPage.vue')
+const historyEdit = () => import('@/modules/15_development/components/history/AddPage.vue')
 const historyEmployeeAdd = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
 const ScholarshipDetail = () =>
   import("@/modules/15_development/components/scholarship/DetailView.vue");
@@ -104,6 +105,16 @@ export default [
       Role: "development",
     },
   },
+  {
+    path: "/development/history/:id",
+    name: "developmentHistoryEdit",
+    component: historyEdit,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
   {
     path: "/development/employee-history/add",
     name: "developmentEmployeeHistoryAdd",
diff --git a/src/modules/15_development/store/developmentStoreHistory.ts b/src/modules/15_development/store/developmentStoreHistory.ts
new file mode 100644
index 000000000..e6e725e8e
--- /dev/null
+++ b/src/modules/15_development/store/developmentStoreHistory.ts
@@ -0,0 +1,19 @@
+import { defineStore } from "pinia";
+import { reactive } from "vue";
+import { ref } from 'vue'
+import type { QTableProps } from "quasar";
+
+// store
+export const useDevelopmentDataStoreHistory = defineStore(
+  "developmentDataStoreHistory",
+  () => {
+    const visibleColumns = ref<string[]>([]);
+    const columns = ref<QTableProps["columns"]>([]);
+    const rows = ref<any[]>([])
+    return {
+      visibleColumns,
+      columns,
+      rows,
+    };
+  }
+);
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index db8c99e49..b849ac3f9 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -1,18 +1,44 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import type { DataOption } from "@/modules/15_development/interface/index/Main";
+import type {
+  DataOption,
+  FormFilter,
+} from "@/modules/15_development/interface/index/Main";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
+const maxPage = ref<number>(1);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+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,
+});
+
 /** use*/
-const router = useRouter()
+const router = useRouter();
 const store = useDevelopmentDataStore();
 const $q = useQuasar();
-const { showLoader, hideLoader } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const rows = ref<any>([]);
 const agency = ref<string>("");
@@ -108,17 +134,58 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onAdd(){
-    router.push(`/development/history/add`)
-
+function onAdd() {
+  router.push(`/development/history/add`);
 }
-function onDownload(){
+function onDownload() {}
 
+function onEdit(id:string) {
+  router.push(`/development/history/${id}`);
 }
 
-function onEdit(){
+function getData() {
+  let queryParams: any = {
+    page: formFilter.page,
+    pageSize: formFilter.pageSize,
+    keyword: formFilter.keyword,
+    year: formFilter.year,
+  };
 
+  showLoader();
+  http
+    .get(config.API.developmentHistoryList("officer"), { params: queryParams })
+    .then((res) => {
+      console.log(res.data.result.data);
+      const data = res.data.result.data
+      rows.value = data.map((item:any)=>({
+        id:item.id ? item.id : null,
+        citizenId:item.citizenId ? item.citizenId :null,
+        name:item.firstName ? `${item.prefix}${item.firstName} ${item.lastName}` :null,
+        prefix:item.prefix ? item.prefix : null,
+        firstName:item.firstName ? item.firstName : null,
+        lastName:item.lastName ? item.lastName : null,
+        position:item.position ? item.position :null,
+        type:item.type ? item.type :null,
+        level:item.level ? item.level :null,
+        positionSide:item.posExecutive ? item.posExecutive :null,
+        projectName:item.projectName ? item.projectName :null,
+      }))
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
+
+function yearAll() {
+  formFilter.year = 0;
+  getData();
+}
+onMounted(() => {
+  getData();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -129,11 +196,12 @@ function onEdit(){
       <div class="row q-gutter-sm">
         <datepicker
           menu-class-name="modalfix"
-          v-model="store.formFilter.year"
+          v-model="formFilter.year"
           :locale="'th'"
           autoApply
           year-picker
           :enableTimePicker="false"
+          @update:model-value="getData()"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -144,9 +212,20 @@ function onEdit(){
               dense
               lazy-rules
               outlined
-              :model-value="Number(store.formFilter.year) + 543"
+              :model-value="
+                formFilter.year === 0
+                  ? null
+                  : Number(formFilter.year) + 543
+              "
               :label="`${'ปีงบประมาณ'}`"
             >
+              <template v-if="formFilter.year" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="yearAll"
+                  class="cursor-pointer"
+                />
+              </template>
               <template v-slot:prepend>
                 <q-icon
                   name="event"
@@ -170,14 +249,7 @@ function onEdit(){
         />
       </div>
 
-      <q-btn
-        flat
-        round
-        dense
-        icon="add"
-        color="primary"
-        @click="onAdd()"
-      >
+      <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
         <q-tooltip>เพิ่ม</q-tooltip>
       </q-btn>
       <q-space />
@@ -191,42 +263,45 @@ function onEdit(){
       >
         <q-tooltip>ดาวน์โหลด</q-tooltip>
       </q-btn>
-      <div class="row q-gutter-sm">
-        <q-input
-          standout
-          dense
-          v-model="store.formFilter.keyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon v-if="store.formFilter.keyword == ''" name="search" />
-            <q-icon
-              v-if="store.formFilter.keyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="store.formFilter.keyword = ''"
-            />
-          </template>
-        </q-input>
 
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
-      </div>
+      <q-input
+        standout
+        dense
+        v-model="formFilter.keyword"
+        ref="filterRef"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+        @keydown.enter.prevent="getData()"
+      >
+        <template v-slot:append>
+          <q-icon v-if="formFilter.keyword == ''" name="search" />
+          <q-icon
+            v-if="formFilter.keyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="
+              formFilter.keyword = '';
+              getData();
+            "
+          />
+        </template>
+      </q-input>
+
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
     </q-toolbar>
 
     <div class="col-12">
@@ -241,7 +316,21 @@ function onEdit(){
         dense
         class="custom-header-table"
         :visible-columns="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 v-for="col in props.cols" :key="col.name" :props="props">
@@ -255,7 +344,7 @@ function onEdit(){
               v-for="col in props.cols"
               :key="col.name"
               :props="props"
-              @click="onEdit()"
+              @click="onEdit(props.row.id)"
             >
               <div class="table_ellipsis">
                 {{ col.value ? col.value : "-" }}