From a62294d9c80313ae1114b7a955f80afeb16d600f Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 18 Apr 2024 16:26:34 +0700
Subject: [PATCH 1/4] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=82?=
 =?UTF-8?q?=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../15_development/components/scholarship/DetailView.vue  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index c7c17ac50..c90fcdb8e 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -2330,11 +2330,11 @@ onMounted(() => {
                             ? date2Thai(formBody.startDate)
                             : null
                         "
-                        :label="`${'วันเริ่มต้นการฝึกอบรม'}`"
+                        :label="`${'วันเริ่มต้น'}`"
                         hide-bottom-space
                         :rules="[
                           (val: string) =>
-                            !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
+                            !!val || `${'กรุณาเลือกวันเริ่มต้น'}`,
                         ]"
                       >
                         <template v-slot:prepend>
@@ -2371,11 +2371,11 @@ onMounted(() => {
                         :model-value="
                           formBody.endDate ? date2Thai(formBody.endDate) : null
                         "
-                        :label="`${'วันสิ้นสุดการฝึกอบรม'}`"
+                        :label="`${'วันสิ้นสุด'}`"
                         hide-bottom-space
                         :rules="[
                           (val: string) =>
-                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
+                            !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
                         ]"
                       >
                         <template v-slot:prepend>

From 53ceea9588614686889f13c6722bec170d04de5d Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Thu, 18 Apr 2024 16:44:06 +0700
Subject: [PATCH 2/4] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9E=E0=B8=A4=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1=20=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=89=E0=B8=84=E0=B8=B3=E0=B8=9C=E0=B8=B4=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/competency/05ListDetail.vue    | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/modules/14_KPI/components/competency/05ListDetail.vue b/src/modules/14_KPI/components/competency/05ListDetail.vue
index 14a260f3c..5252f11aa 100644
--- a/src/modules/14_KPI/components/competency/05ListDetail.vue
+++ b/src/modules/14_KPI/components/competency/05ListDetail.vue
@@ -60,7 +60,7 @@
         <div class="row">
           <div class="col-3 q-pa-sm">
             <div class="text-bold">สมรรถนะหลัก</div>
-            <div>(๕ สมรรถนะ)</div>
+            <div>(5 สมรรถนะ)</div>
           </div>
           <div class="col-5 column">
             <div class="row col-grow">
@@ -92,7 +92,7 @@
         <div class="row">
           <div class="col-3 q-pa-sm">
             <div class="text-bold">สมรรถนะประจำกลุ่มงาน</div>
-            <div>(๓ สมรรถนะ ตามกลุ่มงาน)</div>
+            <div>(3 สมรรถนะ ตามกลุ่มงาน)</div>
           </div>
           <div class="col-5 column">
             <div class="row col-grow">
@@ -116,7 +116,7 @@
         <div class="row">
           <div class="col-3 q-pa-sm">
             <div class="text-bold">สมรรถนะประจำผู้บริหารกรุงเทพมหานคร</div>
-            <div>(๗ สมรรถนะ)</div>
+            <div>(7 สมรรถนะ)</div>
           </div>
           <div class="col-5 column">
             <div class="row col-grow">
@@ -140,7 +140,7 @@
         <div class="row">
           <div class="col-3 q-pa-sm">
             <div class="text-bold">สมรรถนะเฉพาะสำหรับตำแหน่งผู้อำนวยการเขต</div>
-            <div>(ู๔ สมรรถนะ)</div>
+            <div>(4 สมรรถนะ)</div>
           </div>
           <div class="col-5 column">
             <div class="row col-grow">
@@ -164,7 +164,7 @@
             <div class="text-bold">
               สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการกรุงเทพมหานครและผู้ตรวจราชการ
             </div>
-            <div>(ู๒ สมรรถนะ)</div>
+            <div>(2 สมรรถนะ)</div>
           </div>
           <div class="col-5 column">
             <div class="row col-grow">
@@ -189,16 +189,16 @@
           </div>
           <div class="col-5 column">
             <div class="row col-grow">
-              <div class="col-3 flex justify-center items-center">๘</div>
-              <div class="col-3 flex justify-center items-center">๘</div>
-              <div class="col-3 flex justify-center items-center">๑๒</div>
-              <div class="col-3 flex justify-center items-center">๑๒</div>
+              <div class="col-3 flex justify-center items-center">8</div>
+              <div class="col-3 flex justify-center items-center">8</div>
+              <div class="col-3 flex justify-center items-center">12</div>
+              <div class="col-3 flex justify-center items-center">12</div>
             </div>
           </div>
           <div class="col-4 column">
             <div class="row col-grow">
-              <div class="col-6 flex justify-center items-center">๗</div>
-              <div class="col-6 flex justify-center items-center">๙</div>
+              <div class="col-6 flex justify-center items-center">7</div>
+              <div class="col-6 flex justify-center items-center">9</div>
             </div>
           </div>
         </div>
@@ -232,11 +232,11 @@
           <div class="col-6">
             <div class="row">
               <div class="col-6">สูง</div>
-              <div class="col-6">๕</div>
+              <div class="col-6">5</div>
             </div>
             <div class="row">
               <div class="col-6">ต้น</div>
-              <div class="col-6">๔</div>
+              <div class="col-6">4</div>
             </div>
           </div>
           <div class="col-3" style="background-color: #bcbcc4"></div>
@@ -246,11 +246,11 @@
           <div class="col-6">
             <div class="row">
               <div class="col-6">สูง</div>
-              <div class="col-6">๔</div>
+              <div class="col-6">4</div>
             </div>
             <div class="row">
               <div class="col-6">ต้น</div>
-              <div class="col-6">๓</div>
+              <div class="col-6">3</div>
             </div>
           </div>
           <div class="col-3" style="background-color: #bcbcc4"></div>
@@ -260,28 +260,28 @@
           <div class="col-9">
             <div class="row">
               <div class="col-4">ทรงคุณวุฒิ</div>
-              <div class="col-4">๕</div>
-              <div class="col-4">๕</div>
+              <div class="col-4">5</div>
+              <div class="col-4">5</div>
             </div>
             <div class="row">
               <div class="col-4">เชี่ยวชาญ</div>
-              <div class="col-4">๔</div>
-              <div class="col-4">๔</div>
+              <div class="col-4">4</div>
+              <div class="col-4">4</div>
             </div>
             <div class="row">
               <div class="col-4">ชำนาญการพิเศษ</div>
-              <div class="col-4">๓</div>
-              <div class="col-4">๔</div>
+              <div class="col-4">3</div>
+              <div class="col-4">4</div>
             </div>
             <div class="row">
               <div class="col-4">ชำนาญการ</div>
-              <div class="col-4">๒</div>
-              <div class="col-4">๓</div>
+              <div class="col-4">2</div>
+              <div class="col-4">3</div>
             </div>
             <div class="row">
               <div class="col-4">ปฏิบัติการ</div>
-              <div class="col-4">๑</div>
-              <div class="col-4">๒</div>
+              <div class="col-4">1</div>
+              <div class="col-4">2</div>
             </div>
           </div>
         </div>
@@ -290,23 +290,23 @@
           <div class="col-9">
             <div class="row">
               <div class="col-4">ทักษะพิเศษ</div>
-              <div class="col-4">๔</div>
-              <div class="col-4">๔</div>
+              <div class="col-4">4</div>
+              <div class="col-4">4</div>
             </div>
             <div class="row">
               <div class="col-4">อาวุโส</div>
-              <div class="col-4">๓</div>
-              <div class="col-4">๓</div>
+              <div class="col-4">3</div>
+              <div class="col-4">3</div>
             </div>
             <div class="row">
               <div class="col-4">ชำนาญงาน</div>
-              <div class="col-4">๒</div>
-              <div class="col-4">๒</div>
+              <div class="col-4">2</div>
+              <div class="col-4">2</div>
             </div>
             <div class="row">
               <div class="col-4">ปฏิบัติงาน</div>
-              <div class="col-4">๑</div>
-              <div class="col-4">๑</div>
+              <div class="col-4">1</div>
+              <div class="col-4">1</div>
             </div>
           </div>
         </div>

From 3e625962cfd598b8071cab0ccf1305c78f82a5bd Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 18 Apr 2024 16:56:11 +0700
Subject: [PATCH 3/4] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=9D=E0=B8=B6=E0=B8=81=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=A3=E0=B8=A1/=E0=B8=94=E0=B8=B9=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/15_development/api.development.ts     |   2 +
 .../15_development/components/BasicInfo.vue   |  28 ++---
 .../components/history/AddPage.vue            |   4 +-
 .../components/historyEmployee/AddPage.vue    |   6 +-
 .../15_development/views/EmployeeHistory.vue  | 100 ++++++++----------
 5 files changed, 69 insertions(+), 71 deletions(-)

diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index c0e3329e7..f7649aa45 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -9,6 +9,8 @@ export default {
   /** history */
   developmentHistoryList: (type: string) =>
     `${development}/history/${type}/filter`,
+  developmentHistoryListByid: (type: string, id: string) =>
+    `${development}/history/${type}/${id}`,
   developmentHistoryAdd: (type: string) => `${development}/history/${type}`,
   developmentProjectSearch: () => `${development}/main/search`,
   developmentHistoryListOrg: (type: string, year: number) =>
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 187812b5b..0ae8749a7 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -43,9 +43,9 @@ const node = ref<any>([]);
 const filter = ref<string>("");
 const expanded = ref<any>([]);
 
-async function fetchData(id: string) {
+function fetchData(id: string) {
   showLoader();
-  await http
+  http
     .get(config.API.developmentMainTab("tab1", id))
     .then(async (res) => {
       const data = res.data.result;
@@ -60,8 +60,8 @@ async function fetchData(id: string) {
         if (nodeTree) {
           expanded.value = [];
           const parts = nodeTree?.orgName.split("/");
-          for (let i = 0; i < parts.length; i++) {
-            const arrangedParts = parts[i - 1];
+          for (let i = 1; i < parts.length; i++) {
+            const arrangedParts = parts[i];
             expanded.value.push(arrangedParts);
           }
           updateSelected(nodeTree);
@@ -137,17 +137,19 @@ function updateSelected(data: any) {
   formData.orgRevisionId = data.orgRevisionId;
 }
 
-function searchAndReplace(orgTreeData: any, treeId: string | null) {
-  for (let orgTree of orgTreeData) {
-    if (orgTree.orgTreeId === treeId) {
-      return orgTree;
-    }
-    let foundOrg: any = searchAndReplace(orgTree.children, treeId);
-    if (foundOrg) {
-      return foundOrg;
+async function searchAndReplace(orgTreeData: any, treeId: string | null) {
+  if (orgTreeData) {
+    for (let orgTree of orgTreeData) {
+      if (orgTree.orgTreeId === treeId) {
+        return orgTree;
+      }
+      let foundOrg: any = await searchAndReplace(orgTree.children, treeId);
+      if (foundOrg) {
+        return foundOrg;
+      }
     }
+    return false;
   }
-  return null;
 }
 
 onMounted(async () => {
diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index a58694bfe..fd0edabba 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -95,7 +95,7 @@ function getClass() {
 /** save */
 function onSubmit() {
   const url = id.value
-    ? config.API.developmentHistoryList("officer") + `${id.value}`
+    ? config.API.developmentHistoryListByid("officer", id.value)
     : config.API.developmentHistoryAdd("officer");
 
   const body = {
@@ -162,7 +162,7 @@ function upDateProject(data: any) {
 function getDataEdit() {
   showLoader();
   http
-    .get(config.API.developmentHistoryList("officer") + `${id.value}`)
+    .get(config.API.developmentHistoryListByid("officer", id.value))
     .then((res) => {
       const data = res.data.result;
       formMain.id = id.value;
diff --git a/src/modules/15_development/components/historyEmployee/AddPage.vue b/src/modules/15_development/components/historyEmployee/AddPage.vue
index 90a7776df..bdc937a19 100644
--- a/src/modules/15_development/components/historyEmployee/AddPage.vue
+++ b/src/modules/15_development/components/historyEmployee/AddPage.vue
@@ -94,7 +94,7 @@ function getClass() {
 /** save */
 function onSubmit() {
   const url = id.value
-    ? config.API.developmentHistoryList("employee") + `${id.value}`
+    ? config.API.developmentHistoryListByid("employee", id.value)
     : config.API.developmentHistoryAdd("employee");
 
   const body = {
@@ -115,7 +115,7 @@ function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
     http[id.value ? "put" : "post"](url, body)
-      .then((res) => {
+      .then(() => {
         router.push(`/development/employee-history`);
       })
       .catch((e) => {
@@ -150,7 +150,7 @@ function upDateProject(data: any) {
 function getDataEdit() {
   showLoader();
   http
-    .get(config.API.developmentHistoryList("employee") + `${id.value}`)
+    .get(config.API.developmentHistoryListByid("employee", id.value))
     .then((res) => {
       const data = res.data.result;
       formMain.id = id.value;
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index a18007bd0..9e1305eac 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -1,40 +1,19 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReportXLSX from "@/plugins/genreportxlsx";
+import { useRouter } from "vue-router";
+
 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";
-
-import genReportXLSX from "@/plugins/genreportxlsx";
-
-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();
@@ -42,22 +21,22 @@ const store = useDevelopmentDataStore();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+const maxPage = ref<number>(1);
+const formFilter = reactive({
+  root: "",
+  page: 1,
+  pageSize: 20,
+  keyword: "",
+  year: new Date().getFullYear(),
+});
+
 const rows = ref<any>([]);
 const agency = ref<string>("");
-const agencyOp = ref<DataOption[]>([
-  {
-    id: "id1",
-    name: "name1",
-  },
-  {
-    id: "id2",
-    name: "name2",
-  },
-  {
-    id: "id3",
-    name: "name3",
-  },
-]);
+const agencyOp = ref<[]>([]);
 
 const visibleColumns = ref<string[]>([
   "citizenId",
@@ -127,17 +106,29 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-// function onAdd() {
-//   store.statusEdit = false;
-//   router.push(`/development/employee-history/add`);
-// }
+function fetchListOrg() {
+  showLoader();
+  http
+    .get(config.API.developmentHistoryListOrg("employee", formFilter.year))
+    .then((res) => {
+      formFilter.root = "";
+      rows.value = [];
+      agencyOp.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 function onDownload() {
   showLoader();
   http
     .post(config.API.developmentReportHistoryOfficer(), {
       year: formFilter.year,
-      root: agency.value,
+      root: formFilter.root,
     })
     .then((res) => {
       const dataList = res.data.result;
@@ -162,12 +153,12 @@ function getData() {
     pageSize: formFilter.pageSize,
     keyword: formFilter.keyword,
     year: formFilter.year,
-    root: agency.value,
+    root: formFilter.root,
   };
 
   showLoader();
   http
-    .get(config.API.developmentHistoryList("employee"), { params: queryParams })
+    .post(config.API.developmentHistoryList("employee"), formFilter)
     .then((res) => {
       console.log(res.data.result.data);
       const data = res.data.result.data;
@@ -195,10 +186,10 @@ function getData() {
 
 function yearAll() {
   formFilter.year = 0;
-  getData();
+  // getData();
 }
 onMounted(() => {
-  getData();
+  fetchListOrg();
 });
 </script>
 
@@ -217,7 +208,7 @@ onMounted(() => {
             autoApply
             year-picker
             :enableTimePicker="false"
-            @update:model-value="getData()"
+            @update:model-value="fetchListOrg()"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -229,14 +220,16 @@ onMounted(() => {
                 lazy-rules
                 outlined
                 :model-value="
-                  formFilter.year === 0 ? null : Number(formFilter.year) + 543
+                  formFilter.year === 0
+                    ? 'ทั้งหมด'
+                    : Number(formFilter.year) + 543
                 "
                 :label="`${'ปีงบประมาณ'}`"
               >
                 <template v-if="formFilter.year" v-slot:append>
                   <q-icon
                     name="cancel"
-                    @click.stop.prevent="yearAll"
+                    @click.stop.prevent="(formFilter.year = 0), fetchListOrg()"
                     class="cursor-pointer"
                   />
                 </template>
@@ -258,10 +251,11 @@ onMounted(() => {
             dense
             outlined
             label="หน่วยงาน"
-            v-model="agency"
+            v-model="formFilter.root"
             :options="agencyOp"
             option-value="id"
             option-label="name"
+            @update:model-value="(formFilter.page = 1), getData()"
           />
         </div>
 

From d267da5438deda65c77e2db80ecef9ffb1560612 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 18 Apr 2024 18:00:55 +0700
Subject: [PATCH 4/4] =?UTF-8?q?=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=AD=E0=B8=9A=E0=B8=A3=E0=B8=A1?=
 =?UTF-8?q?/=E0=B8=94=E0=B8=B9=E0=B8=87=E0=B8=B2=E0=B8=99=20=E0=B8=82?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=81.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/history/AddPage.vue            | 536 ++++++++----------
 .../15_development/interface/request/Main.ts  |   4 +-
 src/modules/15_development/views/History.vue  |   5 +-
 3 files changed, 233 insertions(+), 312 deletions(-)

diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index fd0edabba..824e7e155 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -1,32 +1,24 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   FormAddHistory,
   FormAddHistoryProject,
 } from "@/modules/15_development/interface/request/Main";
-import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 
 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 { useQuasar, type QTableProps } from "quasar";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-
 const router = useRouter();
 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 = useDevelopmentDataStore();
-const modalDialogGov = ref<boolean>(false);
-const modalDialogProject = ref<boolean>(false);
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+
+const id = ref<string>(route.params.id as string);
 
 const dateOrder = ref<Date | null>(null);
 const order = ref<string>("");
@@ -55,111 +47,19 @@ const formMainProject = reactive<FormAddHistoryProject>({
   id: "",
   project: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
   year: "", //ปีงบประมาณที่เข้ารับการฝึกอบรม
-  trainingStart: "", //วันเริ่มต้นการฝึกอบรม
-  trainingEnd: "", //วันสิ้นสุดการฝึกอบรม
+  trainingStart: null, //วันเริ่มต้นการฝึกอบรม
+  trainingEnd: null, //วันสิ้นสุดการฝึกอบรม
   totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
   location: "", //สถานที่ไปศึกษาดูงาน
   topic: "", //หัวข้อการไปศึกษาดูงาน
-  // studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
-  // studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
   organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
 });
 
-const fieldLabels = {
-  citizenId: "เลขประจําตัวประชาชน",
-  name: "ชื่อ - นามสกุล",
-  position: "ตําแหน่ง",
-  type: "ประเภทตําแหน่ง",
-
-  level: "ระดับตําแหน่ง",
-  positionSide: "ตําแหน่งทางการบริหาร",
-  oc: "หน่วยงานที่สังกัด",
-};
-
-const fieldLabelsProject = {
-  project: "ชื่อโครงการ/หลักสูตรการฝึกอบรม",
-  year: "ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน",
-  topic: "หัวข้อการไปฝึกอบรม/ศึกษาดูงาน",
-  location: "สถานที่ไปฝึกอบรม/ศึกษาดูงาน",
-  trainingStart: "วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน",
-  trainingEnd: "วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน",
-  totalTraining: "รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน",
-  // studyStart: "วันเริ่มต้นการศึกษาดูงาน",
-  // studyEnd: "วันสิ้นสุดการศึกษาดูงาน",
-  organizingTraining: "หน่วยงานที่รับผิดชอบ",
-};
-
 function getClass() {
   return "inputgreen";
 }
-/** save */
-function onSubmit() {
-  const url = id.value
-    ? config.API.developmentHistoryListByid("officer", id.value)
-    : config.API.developmentHistoryAdd("officer");
 
-  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,
-
-    developmentId: formMainProject.id,
-    order: order.value,
-    dateOrder: dateOrder.value,
-  };
-  dialogConfirm($q, () => {
-    showLoader();
-    http[id.value ? "put" : "post"](url, body)
-      .then((res) => {
-        router.push(`/development/history`);
-      })
-      .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;
-}
-
-function upDateProject(data: any) {
-  formMainProject.id = data.id ? data.id : null;
-  formMainProject.project = data.project ? data.project : null;
-  formMainProject.year = data.year ? data.year : null;
-  formMainProject.trainingStart = data.dateStart ? data.dateStart : null;
-  formMainProject.trainingEnd = data.dateEnd ? data.dateEnd : null;
-  formMainProject.totalTraining = data.totalDate ? data.totalDate : null;
-  formMainProject.location = data.addressAcademic ? data.addressAcademic : null;
-  formMainProject.topic = data.topicAcademic ? data.topicAcademic : null;
-  // formMainProject.studyStart = data.studyStart ? data.studyStart : null;
-  // formMainProject.studyEnd = data.studyEnd ? data.studyEnd : null;
-  formMainProject.organizingTraining = data.organizingTraining
-    ? data.organizingTraining
-    : null;
-}
-
-function getDataEdit() {
+function fetchData() {
   showLoader();
   http
     .get(config.API.developmentHistoryListByid("officer", id.value))
@@ -173,7 +73,6 @@ function getDataEdit() {
       formMain.prefix = data.prefix ? data.prefix : null;
       formMain.firstName = data.firstName ? data.firstName : null;
       formMain.lastName = data.lastName ? data.lastName : null;
-
       formMain.position = data.position ? data.position : null;
       formMain.posLevelId = data.posLevelId ? data.posLevelId : null;
       formMain.posTypeId = data.posTypeId ? data.posTypeId : null;
@@ -182,17 +81,17 @@ function getDataEdit() {
       formMain.positionSide = data.posExecutive ? data.posExecutive : null;
       formMain.oc = data.org ? data.org : null;
 
-      formMainProject.id = data.developmentId;
-      formMainProject.project = data.projectName;
-      formMainProject.year = data.year;
-      formMainProject.trainingStart = data.dateStart;
-      formMainProject.trainingEnd = data.dateEnd;
-      formMainProject.totalTraining = data.totalDate;
-      formMainProject.location = data.addressAcademic;
-      formMainProject.topic = data.topicAcademic;
+      formMainProject.id = data.developmentId ? data.developmentId : null;
+      formMainProject.project = data.projectName ? data.projectName : null;
+      formMainProject.year = data.year ? data.year : null;
+      formMainProject.trainingStart = data.dateStart ? data.dateStart : null;
+      formMainProject.trainingEnd = data.dateEnd ? data.dateEnd : null;
+      formMainProject.totalTraining = data.totalDate ? data.totalDate : null;
+      formMainProject.location = data.addressAcademic ? data.addressAcademic : null;
+      formMainProject.topic = data.topicAcademic ? data.topicAcademic : null;
       // formMainProject.studyStart = data.dateStudyStart;
       // formMainProject.studyEnd = data.dateStudyEnd;
-      formMainProject.organizingTraining = data.org;
+      formMainProject.organizingTraining = data.org? data.org : null;
 
       dateOrder.value = data.dateOrder;
       order.value = data.order;
@@ -207,7 +106,7 @@ function getDataEdit() {
 
 onMounted(() => {
   if (id.value) {
-    getDataEdit();
+    fetchData();
   }
 });
 </script>
@@ -224,206 +123,227 @@ onMounted(() => {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    <span>{{
-      id
-        ? `แก้ไขประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`
-        : `เพิ่มประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ`
-    }}</span>
+    <span> ประวัติการฝึกอบรม / ดูงานของข้าราชการกรุงเทพมหานครสามัญ </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="เลือกข้าราชการฯ"
-              icon="add"
-              @click="modalDialogGov = true"
-            /> -->
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row q-col-gutter-md q-pa-md">
-            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-              <div
-                class="row"
-                v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
-                :key="index"
-              >
-                <div class="col-12 col-sm-12 col-md-4">
-                  <span class="text-grey-6 text-weight-medium">{{
-                    fieldLabels[field as keyof typeof fieldLabels]
-                  }}</span>
-                </div>
-                <div class="col-12 col-sm-12 col-md-8">
-                  <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
-                </div>
-              </div>
+    <q-card-section>
+      <!-- Card ข้อมูลข้าราชการฯ -->
+      <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">
+          ข้อมูลข้าราชการฯ
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              เลขประจําตัวประชาชน
             </div>
 
-            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-              <div
-                class="row"
-                v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
-                :key="index"
-              >
-                <div class="col-12 col-sm-12 col-md-4">
-                  <span class="text-grey-6 text-weight-medium">{{
-                    fieldLabels[field as keyof typeof fieldLabels]
-                  }}</span>
-                </div>
-                <div class="col-12 col-sm-12 col-md-8">
-                  <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
-                </div>
-              </div>
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.citizenId ?? "-" }}
             </div>
           </div>
-        </q-card>
-
-        <q-card flat bordered class="q-mt-md" 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="เลือกโครงการ"
-              icon="add"
-              @click="modalDialogProject = true"
-            /> -->
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row q-col-gutter-md q-pa-md">
-            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-              <div
-                class="row"
-                v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
-                  0,
-                  4
-                )"
-                :key="index"
-              >
-                <div class="col-12 col-sm-12 col-md-5">
-                  <span class="text-grey-6 text-weight-medium">{{
-                    fieldLabelsProject[field as keyof typeof fieldLabelsProject]
-                  }}</span>
-                </div>
-                <div class="col-12 col-sm-12 col-md-7">
-                  <span v-if="index == 1">{{
-                    formMainProject[field] ? formMainProject[field] + 543 : "-"
-                  }}</span>
-                  <span v-else-if="index == 2 || index == 3">{{
-                    formMainProject[field]
-                      ? date2Thai(formMainProject[field])
-                      : "-"
-                  }}</span>
-                  <span v-else>{{
-                    formMainProject[field] ? formMainProject[field] : "-"
-                  }}</span>
-                </div>
-              </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ระดับตําแหน่ง
             </div>
 
-            <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-              <div
-                class="row"
-                v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
-                  4,
-                  10
-                )"
-                :key="index"
-              >
-                <div class="col-12 col-sm-12 col-md-4">
-                  <span class="text-grey-6 text-weight-medium">{{
-                    fieldLabelsProject[field as keyof typeof fieldLabelsProject]
-                  }}</span>
-                </div>
-                <div class="col-12 col-sm-12 col-md-8">
-                  <span>{{
-                    formMainProject[field] ? formMainProject[field] : "-"
-                  }}</span>
-                </div>
-              </div>
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.level ?? "-" }}
             </div>
           </div>
-        </q-card>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ชื่อ - นามสกุล
+            </div>
 
-        <div class="row q-col-gutter-sm q-mt-md">
-          <div class="col-3">
-            <q-input
-              readonly
-              label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
-              v-model="order"
-              dense
-              outlined
-              :class="getClass()"
-              hide-bottom-space
-              :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
-            />
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.name ?? "-" }}
+            </div>
           </div>
-          <div class="col-3">
-            <datepicker
-              readonly
-              menu-class-name="modalfix"
-              v-model="dateOrder"
-              :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
-                  readonly
-                  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 class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ตําแหน่งทางการบริหาร
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.positionSide ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ตําแหน่ง
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.position ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              หน่วยงานที่สังกัด
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.oc ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ประเภทตําแหน่ง
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMain.type ?? "-" }}
+            </div>
           </div>
         </div>
-      </q-card-section>
-      <!-- <q-separator /> -->
-      <!-- <div class="text-right q-pa-sm">
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          id="onSubmit"
-          type="submit"
-          color="public"
-          class="q-px-md"
-        >
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
-      </div> -->
-    </q-form>
-  </q-card>
+      </q-card>
 
-  <DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
-  <DialogProject v-model:modal="modalDialogProject" :up-date="upDateProject" />
+      <!-- Card ข้อมูลโครงการ -->
+      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+          ข้อมูลโครงการ
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ชื่อโครงการ/หลักสูตรการฝึกอบรม
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.project ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              วันเริ่มต้นการฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{
+                formMainProject.trainingStart
+                  ? date2Thai(formMainProject.trainingStart)
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              ปีงบประมาณที่เข้ารับการฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.year ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              วันสิ้นสุดการฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{
+                formMainProject.trainingEnd
+                  ? date2Thai(formMainProject?.trainingEnd)
+                  : "-"
+              }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.topic ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              รวมระยะเวลาในการฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.totalTraining ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              สถานที่ไปฝึกอบรม/ศึกษาดูงาน
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.location ?? "-" }}
+            </div>
+          </div>
+          <div class="row col-6">
+            <div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+              หน่วยงานที่รับผิดชอบ
+            </div>
+
+            <div class="col-12 col-sm-12 col-md-7">
+              {{ formMainProject.organizingTraining ?? "-" }}
+            </div>
+          </div>
+        </div>
+      </q-card>
+
+      <div class="row q-col-gutter-sm q-mt-md">
+        <div class="col-3">
+          <q-input
+            readonly
+            label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+            v-model="order"
+            dense
+            outlined
+            :class="getClass()"
+            hide-bottom-space
+            :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
+          />
+        </div>
+        <div class="col-3">
+          <datepicker
+            readonly
+            menu-class-name="modalfix"
+            v-model="dateOrder"
+            :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
+                readonly
+                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>
+  </q-card>
 </template>
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
index ddb7eade0..ca9d103e4 100644
--- a/src/modules/15_development/interface/request/Main.ts
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -133,8 +133,8 @@ interface FormAddHistoryProject {
   id: string;
   project: string;
   year: string;
-  trainingStart: string;
-  trainingEnd: string;
+  trainingStart: null | Date;
+  trainingEnd: null | Date;
   totalTraining: string;
   location: string;
   topic: string;
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index 46d9b8064..63d321182 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -16,7 +16,7 @@ const pagination = ref({
 });
 
 const formFilter = reactive({
-  root: "",
+  root: null,
   page: 1,
   pageSize: 20,
   keyword: "",
@@ -115,8 +115,9 @@ function fetchListOrg() {
   http
     .get(config.API.developmentHistoryListOrg("officer", formFilter.year))
     .then((res) => {
-      formFilter.root = "";
+      formFilter.root = null;
       agencyOp.value = res.data.result;
+      getData();
     })
     .catch((err) => {
       messageError($q, err);