Merge branch 'develop' into devTee

2024-04-18 18:09:47 +07:00 · 2024-04-18 18:09:47 +07:00 · ad593b4551
commit ad593b4551
parent eedb90d155 d267da5438
9 changed files with 338 additions and 419 deletions
--- 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) =>
--- 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>
--- 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 () => {
--- 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,114 +47,22 @@ 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.developmentHistoryList("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.developmentHistoryList("officer") + `${id.value}`)
+    .get(config.API.developmentHistoryListByid("officer", id.value))
    .then((res) => {
      const data = res.data.result;
      formMain.id = 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>
--- 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;
--- 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>
--- 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;
--- 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>

--- 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);