From b130568ef46ac749c3732463655e4dd4755ecbfe Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 4 Apr 2024 12:38:48 +0700
Subject: [PATCH] no message

---
 src/api/15_development/api.development.ts     |   8 +-
 .../components/history/AddPage.vue            |  42 ++-
 .../components/history/DialogGov.vue          |  29 +-
 .../components/history/DialogProject.vue      |  26 +-
 .../components/historyEmployee/AddPage.vue    | 232 +++++++-----
 .../components/historyEmployee/DialogGov.vue  | 232 ++++++++----
 .../historyEmployee/DialogProject.vue         | 220 ++++++++----
 .../15_development/interface/request/Main.ts  |  20 ++
 src/modules/15_development/router.ts          |  11 +
 .../store/developmentStoreHistory.ts          |   3 +
 .../15_development/views/EmployeeHistory.vue  | 333 +++++++++++-------
 src/modules/15_development/views/History.vue  | 254 ++++++-------
 12 files changed, 938 insertions(+), 472 deletions(-)

diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index 44567255a..f5a2b8efd 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -1,14 +1,16 @@
 import env from "../index";
 const development = `${env.API_URI}/development`;
-
+const developmentOrg = `${env.API_URI}/org`
 export default {
   development,
-
-
   /** history */
   developmentHistoryList: (type:string) => `${development}/history/${type}/`,
   developmentHistoryAdd: (type:string) => `${development}/history/${type}`,
   developmentProjectSearch: () => `${development}/main/search`,
+
+  /** history employee */
+  developmentProjectSearchEmployee:()=>`${developmentOrg}/profile-employee/`,
+  
   /** รายการโครงการ*/
   developmentMain: `${development}/main`,
 };
diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index 545b542f3..aaeb99267 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive,onMounted} from "vue";
 import { useRoute, useRouter } from "vue-router";
 import type {
   FormAddHistory,
@@ -213,6 +213,10 @@ function getClass() {
 }
 /** save */
 function onSubmit() {
+  const url = store.status
+      ? config.API.developmentHistoryList('officer')+`${id.value}`
+      : config.API.developmentHistoryAdd('officer')
+
   const body = {
   rank:null,
   prefix:formMain.prefix,
@@ -230,12 +234,11 @@ function onSubmit() {
     }
     dialogConfirm($q,()=>{
       showLoader()
-      http
-      .post(config.API.developmentHistoryAdd('officer'),body)
+      http[store.status ? 'put':'post'](url,body)
       .then((res)=>{
         console.log(res)
         router.push(`/development/history`)
-      }).catch((e)=>{
+              }).catch((e)=>{
         messageError($q,e)
       }).finally(()=>{
         hideLoader()
@@ -264,6 +267,26 @@ function upDateProject(data: any) {
   formMainProject.project = data.project;
   formMainProject.year = data.year;
 }
+
+function getDataEdit(){
+  showLoader()
+  http
+  .get(config.API.developmentHistoryList('officer')+`${id.value}`)
+  .then((res)=>{
+    console.log(res)
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+    hideLoader()
+  })
+}
+
+onMounted(()=>{
+  if(store.status == true){
+    console.log(1)
+    // getDataEdit()
+  }
+})
 </script>
 <template>
   <div class="toptitle text-dark">
@@ -277,7 +300,7 @@ function upDateProject(data: any) {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    <span>{{ id ? `แก้ไขประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`:`เพิ่มประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`}}</span
+    <span>{{ store.status ? `แก้ไขประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`:`เพิ่มประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`}}</span
     >
   </div>
   <q-card flat bordered>
@@ -285,13 +308,13 @@ function upDateProject(data: any) {
       <q-card-section>
         <q-card flat bordered style="border: 1px solid #d6dee1">
           <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
-            ข้อมูลข้าราชการ
+            ข้อมูลข้าราชการฯ
 
             <q-btn
               flat
               class="btn-fixed-width"
               color="teal"
-              label="เลือกข้าราชการ"
+              label="เลือกข้าราชการฯ"
               icon="add"
               @click="openDialogGov()"
             />
@@ -363,9 +386,8 @@ function upDateProject(data: any) {
                   }}</span>
                 </div>
                 <div class="col-12 col-sm-12 col-md-8">
-                  <span>{{
-                    formMainProject[field] ? formMainProject[field] : "-"
-                  }}</span>
+                  <span v-if='index == 1 '>{{ formMainProject[field] ? formMainProject[field] + 543 : "-" }}</span>
+                  <span v-else>{{ formMainProject[field] ? formMainProject[field] : "-" }}</span>
                 </div>
               </div>
             </div>
diff --git a/src/modules/15_development/components/history/DialogGov.vue b/src/modules/15_development/components/history/DialogGov.vue
index d5471ca8a..663b87d3b 100644
--- a/src/modules/15_development/components/history/DialogGov.vue
+++ b/src/modules/15_development/components/history/DialogGov.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed,reactive } from "vue";
 import Header from "@/components/DialogHeader.vue";
-import type { DataOption,FormFilter } from "@/modules/15_development/interface/index/Main";
+import type { DataOption,FormFilter,NewPagination } from "@/modules/15_development/interface/index/Main";
 import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -33,7 +33,7 @@ const formFilter = reactive<FormFilter>({
 
 const pagination = ref({
   page: 1,
-  rowsPerPage: 10,
+  rowsPerPage: 20,
 });
 
 const $q = useQuasar();
@@ -143,11 +143,28 @@ function searchFilter() {
       hideLoader();
     });
 }
+
+function updatePage(val:number){
+  formFilter.page = val;
+  searchFilter();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    searchFilter();
+  }
+);
 </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>
@@ -180,7 +197,7 @@ function searchFilter() {
           <div class="col-2">
             <q-btn
               label="ค้นหา"
-              class="full-width full-height"
+              class="full-width"
               unelevated
               color="teal"
               @click="searchFilter()"
@@ -205,7 +222,8 @@ function searchFilter() {
             class="custom-header-table"
             :visible-columns="store.visibleColumns"
             v-model:pagination="pagination"
-            :rows-per-page-options="[10, 25, 50, 100]"
+            :rows-per-page-options="[20, 25, 50, 100]"
+            @update:pagination="updatePageSize"
           >
             <template v-slot:pagination="scope">
               <q-pagination
@@ -217,6 +235,7 @@ function searchFilter() {
                 size="sm"
                 boundary-links
                 direction-links
+                @update:model-value="updatePage"
               ></q-pagination>
             </template>
             <template v-slot:header="props">
diff --git a/src/modules/15_development/components/history/DialogProject.vue b/src/modules/15_development/components/history/DialogProject.vue
index a13e741bc..a5e8e820a 100644
--- a/src/modules/15_development/components/history/DialogProject.vue
+++ b/src/modules/15_development/components/history/DialogProject.vue
@@ -4,6 +4,7 @@ import Header from "@/components/DialogHeader.vue";
 import type {
   DataOption,
   FormFilter,
+  NewPagination,
 } from "@/modules/15_development/interface/index/Main";
 import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
 import { useCounterMixin } from "@/stores/mixin";
@@ -33,7 +34,7 @@ const modal = defineModel<boolean>("modal", { required: true });
 const maxPage = ref<number>(1);
 const pagination = ref({
   page: 1,
-  rowsPerPage: 10,
+  rowsPerPage: 20,
 });
 
 const formFilter = reactive<FormFilter>({
@@ -135,6 +136,23 @@ function searchFilter() {
       hideLoader();
     });
 }
+
+function updatePage(val:number){
+  formFilter.page = val;
+  searchFilter();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    searchFilter();
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -212,7 +230,7 @@ function searchFilter() {
           <div class="col-2">
             <q-btn
               label="ค้นหา"
-              class="full-width full-height"
+              class="full-width"
               unelevated
               color="teal"
               @click="searchFilter()"
@@ -235,7 +253,8 @@ function searchFilter() {
             class="custom-header-table"
             :visible-columns="store.visibleColumns"
             v-model:pagination="pagination"
-            :rows-per-page-options="[10, 25, 50, 100]"
+            :rows-per-page-options="[20, 25, 50, 100]"
+            @update:pagination="updatePageSize"
           >
             <template v-slot:pagination="scope">
               <q-pagination
@@ -247,6 +266,7 @@ function searchFilter() {
                 size="sm"
                 boundary-links
                 direction-links
+                @update:model-value="updatePage"
               ></q-pagination>
             </template>
             <template v-slot:header="props">
diff --git a/src/modules/15_development/components/historyEmployee/AddPage.vue b/src/modules/15_development/components/historyEmployee/AddPage.vue
index fa34dd966..c981d1f75 100644
--- a/src/modules/15_development/components/historyEmployee/AddPage.vue
+++ b/src/modules/15_development/components/historyEmployee/AddPage.vue
@@ -1,45 +1,57 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import type {
-  FormAddHistory,
+  FormAddHistoryEmployee,
   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 DialogProject from "@/modules/15_development/components/history/DialogProject.vue";
+import DialogGov from "@/modules/15_development/components/historyEmployee/DialogGov.vue";
+import DialogProject from "@/modules/15_development/components/historyEmployee/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: "กลุ่มงานช่วยนักบริหาร", //หน่วยงานที่สังกัด
+const formMain = reactive<FormAddHistoryEmployee>({
+  id: "",
+  name: "", //ชื่อ - นามสกุล
+  prefix: "", //คำนำหน้าชื่อ
+  rank: "", //ยศ
+  firstName: "", //ชื่อ
+  lastName: "", //นามสกุล
+  citizenId: "", //เลขประจําตัวประชาชน
+  level: "", //ระดับตําแหน่ง
+  type: "", //ประเภทตําแหน่ง
+  posLevelId: "", //id ระดับตําแหน่ง
+  posTypeId: "", //id ประเภทตําแหน่ง
+  position: "", //ตําแหน่ง
+  posNo: "", //เลขที่ตำแหน่ง
+  oc: "", //หน่วยงานที่สังกัด
 });
 
 /** ตัวแปรข้อมูลโครงสร้าง */
 const formMainProject = reactive<FormAddHistoryProject>({
+  id: "",
   project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
   year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
   trainingStart: "", //วันเริ่มต้นการฝึกอบรม
@@ -59,7 +71,6 @@ const fieldLabels = {
   type: "กลุ่มงาน",
 
   level: "ระดับชั้นงาน",
-  positionSide: "ตําแหน่งทางการบริหาร",
   oc: "หน่วยงานที่สังกัด",
 };
 
@@ -139,15 +150,6 @@ const columnsGov = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "positionSide",
-    align: "left",
-    label: "ตําแหน่งทางการบริหาร",
-    sortable: true,
-    field: "positionSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
 ]);
 
 const columnsProject = ref<QTableProps["columns"]>([
@@ -201,44 +203,82 @@ 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 url = store.status
+    ? config.API.developmentHistoryList("employee") + `${id.value}`
+    : config.API.developmentHistoryAdd("employee");
 
-// 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,
+  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,
 
-// order:order.value,
-// dateOrder:dateOrder.value,
-//   }
-//   dialogConfirm($q,()=>{
-//     showLoader()
-//     http
-//     .post(config.API.,body)
-//     .then((res)=>{
-
-//     }).catch((e)=>{
-//       messageError($q,e)
-//     }).finally(()=>{
-//       hideLoader()
-//     })
-//   })
-
-router.push(`/development/employee-history`)
+    developmentId: formMainProject.id,
+    order: order.value,
+    dateOrder: dateOrder.value,
+  };
+  dialogConfirm($q, () => {
+    showLoader();
+    http[store.status ? "put" : "post"](url, body)
+      .then((res) => {
+        console.log(res);
+        router.push(`/development/history`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
+
+function upDate(data: FormAddHistoryEmployee) {
+  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;
+}
+
+function upDateProject(data: any) {
+  formMainProject.id = data.id;
+  formMainProject.project = data.project;
+  formMainProject.year = data.year;
+}
+
+function getDataEdit() {
+  showLoader();
+  http
+    .get(config.API.developmentHistoryList("officer") + `${id.value}`)
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  if (store.status == true) {
+    console.log(1);
+    // getDataEdit()
+  }
+});
 </script>
 <template>
   <div class="toptitle text-dark">
@@ -252,22 +292,24 @@ router.push(`/development/employee-history`)
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    <span class=""
-      >เพิ่มประวัติฝึกอบรม/ดูงานลูกจ้าง</span
-    >
+    <span>{{
+      store.status
+        ? `แก้ไขประวัติฝึกอบรม/ดูงานลูกจ้าง`
+        : `เพิ่มประวัติฝึกอบรม/ดูงานลูกจ้าง`
+    }}</span>
   </div>
   <q-card flat bordered>
     <q-form greedy @submit.prevent @validation-success="onSubmit">
       <q-card-section>
         <q-card flat bordered style="border: 1px solid #d6dee1">
           <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
-            ข้อมูลข้าราชการ
+            ข้อมูลลูกจ้าง
 
             <q-btn
               flat
               class="btn-fixed-width"
               color="teal"
-              label="เลือกข้าราชการ"
+              label="เลือกลูกจ้าง"
               icon="add"
               @click="openDialogGov()"
             />
@@ -339,7 +381,10 @@ router.push(`/development/employee-history`)
                   }}</span>
                 </div>
                 <div class="col-12 col-sm-12 col-md-8">
-                  <span>{{
+                  <span v-if="index == 1">{{
+                    formMainProject[field] ? formMainProject[field] + 543 : "-"
+                  }}</span>
+                  <span v-else>{{
                     formMainProject[field] ? formMainProject[field] : "-"
                   }}</span>
                 </div>
@@ -383,15 +428,42 @@ router.push(`/development/employee-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
+                  :class="getClass()"
+                  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 +484,6 @@ router.push(`/development/employee-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/historyEmployee/DialogGov.vue b/src/modules/15_development/components/historyEmployee/DialogGov.vue
index 8654c6598..dc7b1e1fa 100644
--- a/src/modules/15_development/components/historyEmployee/DialogGov.vue
+++ b/src/modules/15_development/components/historyEmployee/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,NewPagination } 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: 20,
+});
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -18,61 +45,53 @@ 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) {
+  if (selected.value?.length == 0) {
     dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
   } else {
     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();
     });
   }
 }
@@ -88,44 +107,106 @@ function closeDialog() {
 function getClass() {
   return "inputgreen";
 }
-
 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;
+  let queryParams: any = {
+    page: formFilter.page,
+    pageSize: formFilter.pageSize,
+    searchField: search.value,
+    searchKeyword: inputSearch.value,
+  };
+  showLoader();
+  http
+    .get(config.API.developmentProjectSearchEmployee(), { 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,
+        prefix:item.prefix ? item.prefix:null,
+        rank:item.rank ? item.rank:null,
+        name:item.firstName ?`${item.prefix}${item.firstName} ${item.lastName}`: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,
+        posTypeShortName:item.posTypeShortName ? item.posTypeShortName:null,
+        posLevelId:item.posLevelId ? item.posLevelId:null,
+        posTypeId:item.posTypeId ? item.posTypeId:null,
+        position:item.position ? item.position:null,
+        posNo:item.posNo ? item.posNo:null,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e``);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
+
+// function searchFilter() {
+//   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();
+//     });
+// }
+
+function updatePage(val:number){
+  formFilter.page = val;
+  searchFilter();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    searchFilter();
+  }
+);
 </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>
         <div class="row q-col-gutter-x-sm">
-          <div class="col-2">
+          <div class="col-3">
             <q-select
               dense
               outlined
@@ -137,21 +218,23 @@ function searchFilter() {
               map-options
               emit-value
               :class="getClass()"
+              @update:model-value="inputSearch = ''"
             />
           </div>
-          <div class="col-8">
+          <div class="col-7">
             <q-input
               dense
               outlined
               label="ค้นหา"
               v-model="inputSearch"
               :class="getClass()"
+              :mask="search === 'citizenId' ? '#############' : undefined"
             />
           </div>
           <div class="col-2">
             <q-btn
               label="ค้นหา"
-              class="full-width full-height"
+              class="full-width"
               unelevated
               color="teal"
               @click="searchFilter()"
@@ -161,6 +244,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 +258,23 @@ function searchFilter() {
             dense
             class="custom-header-table"
             :visible-columns="store.visibleColumns"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[20, 25, 50, 100]"
+            @update:pagination="updatePageSize"
           >
+            <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
+                @update:model-value="updatePage"
+              ></q-pagination>
+            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th class="text-center"> </q-th>
@@ -193,7 +294,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 == 'type'">
+                    {{ col.value ? col.value : "-" }}{{ props.row.posTypeShortName ?`(${props.row.posTypeShortName})`:''  }}
+                  </div>
+                  <div v-else>
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
diff --git a/src/modules/15_development/components/historyEmployee/DialogProject.vue b/src/modules/15_development/components/historyEmployee/DialogProject.vue
index a57dfa8e7..c77c287f0 100644
--- a/src/modules/15_development/components/historyEmployee/DialogProject.vue
+++ b/src/modules/15_development/components/historyEmployee/DialogProject.vue
@@ -1,14 +1,23 @@
 <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,
+  NewPagination,
+} 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 +27,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: 20,
+});
+
+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 +78,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();
     });
   }
 }
@@ -70,54 +104,59 @@ function closeDialog() {
 function getClass() {
   return "inputgreen";
 }
-
 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();
+    });
 }
 
+function updatePage(val:number){
+  formFilter.page = val;
+  searchFilter();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    searchFilter();
+  }
+);
 </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 +175,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,10 +225,11 @@ function searchFilter() {
               :class="getClass()"
             />
           </div>
+          <q-space v-if="search == 'year'" />
           <div class="col-2">
             <q-btn
               label="ค้นหา"
-              class="full-width full-height"
+              class="full-width"
               unelevated
               color="teal"
               @click="searchFilter()"
@@ -170,7 +251,23 @@ function searchFilter() {
             dense
             class="custom-header-table"
             :visible-columns="store.visibleColumns"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[20, 25, 50, 100]"
+            @update:pagination="updatePageSize"
           >
+            <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
+                @update:model-value="updatePage"
+              ></q-pagination>
+            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th class="text-center"> </q-th>
@@ -190,7 +287,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/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index d2cb34abf..b48ed3463 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -80,6 +80,25 @@ interface FormAddHistory {
   [key: string]: any;
 }
 
+interface FormAddHistoryEmployee {
+  id: string;
+  name: string;
+  prefix: string;
+  rank: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  level: string;
+  type: string;
+  posLevelId: string;
+  posTypeId: string;
+  position: string;
+
+  posNo: string;
+  oc: string;
+  [key: string]: any;
+}
+
 interface FormAddHistoryProject {
   id:string
   project: string;
@@ -104,4 +123,5 @@ export type {
   FormFollowOther,
   FormAddHistory,
   FormAddHistoryProject,
+  FormAddHistoryEmployee,
 };
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index a3c5062b7..af63439cc 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -10,6 +10,7 @@ const Scholarship = () =>
 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 historyEmployeeEdit = () => import('@/modules/15_development/components/historyEmployee/AddPage.vue')
 const ScholarshipDetail = () =>
   import("@/modules/15_development/components/scholarship/DetailView.vue");
 // const historyAdd = () =>
@@ -125,4 +126,14 @@ export default [
       Role: "development",
     },
   },
+  {
+    path: "/development/employee-history/:id",
+    name: "developmentEmployeeHistoryEdit",
+    component: historyEmployeeEdit,
+    meta: {
+      Auth: true,
+      Key: [1.6],
+      Role: "development",
+    },
+  },
 ];
diff --git a/src/modules/15_development/store/developmentStoreHistory.ts b/src/modules/15_development/store/developmentStoreHistory.ts
index e6e725e8e..b58c75b65 100644
--- a/src/modules/15_development/store/developmentStoreHistory.ts
+++ b/src/modules/15_development/store/developmentStoreHistory.ts
@@ -10,10 +10,13 @@ export const useDevelopmentDataStoreHistory = defineStore(
     const visibleColumns = ref<string[]>([]);
     const columns = ref<QTableProps["columns"]>([]);
     const rows = ref<any[]>([])
+
+    const status = ref<boolean>(false)
     return {
       visibleColumns,
       columns,
       rows,
+      status,
     };
   }
 );
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index 21b91338f..cd8997179 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.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 { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
 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 store = useDevelopmentDataStore();
+const router = useRouter();
+const store = useDevelopmentDataStoreHistory();
 const $q = useQuasar();
-const { showLoader, hideLoader } = useCounterMixin();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
 const rows = ref<any>([]);
 const agency = ref<string>("");
@@ -88,15 +114,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "positionSide",
-    align: "left",
-    label: "ตําแหน่งทางการบริหาร",
-    sortable: true,
-    field: "positionSide",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
   {
     name: "projectName",
     align: "left",
@@ -108,126 +125,184 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onAdd(){
-    router.push(`/development/employee-history/add`)
-
+function onAdd() {
+  store.status = false;
+  router.push(`/development/employee-history/add`);
 }
-function onDownload(){
+function onDownload() {}
 
+function onEdit(id: string) {
+  store.status = true;
+  router.push(`/development/employee-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("employee"), { 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">
-    ประวัติฝึกอบรม/ดูงานลูกจ้าง
+    รายการประวัติฝึกอบรม/ดูงานลูกจ้าง
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0px">
-      <div class="row q-gutter-sm">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="store.formFilter.year"
-          :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="Number(store.formFilter.year) + 543"
-              :label="`${'ปีงบประมาณ'}`"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-select
-          dense
-          outlined
-          label="หน่วยงาน"
-          v-model="agency"
-          :options="agencyOp"
-          option-value="id"
-          option-label="name"
-          style="width: 200px"
-        />
-      </div>
+    <div class="row no-wrap shadow-1 justify-between">
+      <q-toolbar class="row col-8 q-pa-none q-gutter-x-sm">
+        <div class="col-3">
+          <datepicker
+            menu-class-name="modalfix"
+            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 }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                lazy-rules
+                outlined
+                :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"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
 
-      <q-btn
-        flat
-        round
-        dense
-        icon="add"
-        color="primary"
-        @click="onAdd()"
-      >
-        <q-tooltip>เพิ่ม</q-tooltip>
-      </q-btn>
-      <q-space />
-      <q-btn
-        flat
-        round
-        dense
-        icon="mdi-arrow-down-bold-circle-outline"
-        color="blue"
-        @click="onAdd()"
-      >
-        <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>
+        <div class="col-3">
+          <q-select
+            dense
+            outlined
+            label="หน่วยงาน"
+            v-model="agency"
+            :options="agencyOp"
+            option-value="id"
+            option-label="name"
+          />
+        </div>
 
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
+        <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
+          <q-tooltip>เพิ่ม</q-tooltip>
+        </q-btn>
+      </q-toolbar>
+      <q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
+        <q-space />
+        <q-btn
+          flat
+          round
           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-toolbar>
+          icon="mdi-arrow-down-bold-circle-outline"
+          color="blue"
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip>
+        </q-btn>
+        <div class="col-4">
+          <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>
+        </div>
+
+        <div class="col-4">
+          <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
+          />
+        </div>
+      </q-toolbar>
+    </div>
 
     <div class="col-12">
       <d-table
@@ -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 : "-" }}
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index b849ac3f9..9b572a66e 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -10,7 +10,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importStore*/
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
+import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
@@ -36,7 +36,7 @@ const formFilter = reactive<FormFilter>({
 
 /** use*/
 const router = useRouter();
-const store = useDevelopmentDataStore();
+const store = useDevelopmentDataStoreHistory();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
@@ -135,11 +135,13 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 function onAdd() {
+  store.status = false;
   router.push(`/development/history/add`);
 }
 function onDownload() {}
 
-function onEdit(id:string) {
+function onEdit(id: string) {
+  store.status = true;
   router.push(`/development/history/${id}`);
 }
 
@@ -156,20 +158,17 @@ function getData() {
     .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,
-      }))
+      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.fullName ? item.fullName : null,
+        position: item.position ? item.position : null,
+        type: item.posType ? item.posType : null,
+        level: item.posLevel ? item.posLevel : null,
+        projectName: item.projectName ? item.projectName : null,
+        positionSide: item.posExecutive ? item.posExecutive : null,
+      }));
     })
     .catch((e) => {
       messageError($q, e);
@@ -192,118 +191,123 @@ onMounted(() => {
     รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0px">
-      <div class="row q-gutter-sm">
-        <datepicker
-          menu-class-name="modalfix"
-          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 }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              lazy-rules
-              outlined
-              :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"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-select
-          dense
-          outlined
-          label="หน่วยงาน"
-          v-model="agency"
-          :options="agencyOp"
-          option-value="id"
-          option-label="name"
-          style="width: 200px"
-        />
-      </div>
+    <div class="row no-wrap shadow-1 justify-between">
+      <q-toolbar class="row col-8 q-pa-none q-gutter-x-sm">
+        <div class="col-3">
+          <datepicker
+            menu-class-name="modalfix"
+            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 }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                lazy-rules
+                outlined
+                :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"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
 
-      <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
-        <q-tooltip>เพิ่ม</q-tooltip>
-      </q-btn>
-      <q-space />
-      <q-btn
-        flat
-        round
-        dense
-        icon="mdi-arrow-down-bold-circle-outline"
-        color="blue"
-        @click="onAdd()"
-      >
-        <q-tooltip>ดาวน์โหลด</q-tooltip>
-      </q-btn>
-
-      <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();
-            "
+        <div class="col-3">
+          <q-select
+            dense
+            outlined
+            label="หน่วยงาน"
+            v-model="agency"
+            :options="agencyOp"
+            option-value="id"
+            option-label="name"
           />
-        </template>
-      </q-input>
+        </div>
 
-      <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>
+        <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
+          <q-tooltip>เพิ่ม</q-tooltip>
+        </q-btn>
+      </q-toolbar>
+      <q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
+        <q-space />
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-arrow-down-bold-circle-outline"
+          color="blue"
+        >
+          <q-tooltip>ดาวน์โหลด</q-tooltip>
+        </q-btn>
+        <div class="col-4">
+          <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>
+        </div>
+<div class="col-4">
+  <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
 
+        />
+</div>
+
+      </q-toolbar>
+    </div>
     <div class="col-12">
       <d-table
         for="table"