From 49b57e7b40e467c8d4b00480b6f7a27de630134b Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 24 Feb 2026 15:11:07 +0700
Subject: [PATCH] feat(position-employee): HistoryPos

---
 src/api/02_organizational/api.organization.ts |   3 +-
 .../components/DialogHistoryPos.vue           | 152 ++++++++++++++----
 .../components/TableMain.vue                  |  25 ++-
 .../interface/response/organizational.ts      |   5 +-
 4 files changed, 144 insertions(+), 41 deletions(-)

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 5162b17e1..bcb7e54d9 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -53,6 +53,8 @@ export default {
   orgPosExecutiveById: (id: string) => `${orgPos}/executive/${id}`,
   orgPosHistory: (id: string) => `${orgPos}/history/${id}`,
   orgPosHistoryUpdate: (id: string) => `${orgPos}/history-update/${id}`,
+  orgPosHistoryUpdateEmp: (id: string) =>
+    `${orgEmployeePos}/history-update/${id}`,
 
   orgSalaryPosition: `${orgPos}/position?keyword=&type=ALL`,
 
@@ -180,7 +182,6 @@ export default {
   positionCondition: `${orgPos}/master/position-condition`,
   positionConditionEmp: `${organization}/employee/pos/master/position-condition`,
 
-
   keycloakLogSSO: `${organization}/keycloak/log/sso`,
 
   reportOrgByType: (type: string) => `${reportOrg}/registry-${type}`,
diff --git a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
index 48f5eac78..b41247633 100644
--- a/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
+++ b/src/modules/16_positionEmployee/components/DialogHistoryPos.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -7,36 +7,38 @@ import { usePositionEmp } from "@/modules/16_positionEmployee/store/organization
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-/**
- * importType
- */
+/** importType*/
 import type { QTableProps } from "quasar";
 import type { HistoryPos } from "@/modules/16_positionEmployee/interface/response/organizational";
 
-/**
- * importCompoonents
- */
+/** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/**
- * use
- */
+/** use*/
 const store = usePositionEmp();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const $q = useQuasar();
 
-/**
- * props
- */
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   rowId: {
     type: String,
   },
+  historyType: {
+    type: String,
+    default: "",
+  },
+});
+
+const title = computed(() => {
+  if (props.historyType === "HISTORY") return "ประวัติตำแหน่ง";
+  if (props.historyType === "OWNER_HISTORY") return "ประวัติคนครอง";
+  return "";
 });
 
 const rows = ref<HistoryPos[]>([]); //รายการแก้ไขประวัติ
-const columns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -47,30 +49,37 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "orgShortName",
+    name: "fullname",
+    align: "left",
+    label: "ชื่อคนครอง",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "shortName",
     align: "left",
     label: "อักษรย่อ",
     sortable: true,
-    field: "orgShortName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    field: (v) => date2Thai(v),
+    field: "shortName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posMasterNoPrefix",
     align: "left",
-    label: " Prefix ตำแหน่งเลขที่",
+    label: " Prefix เลขที่ตำแหน่ง",
     sortable: true,
     field: "posMasterNoPrefix",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posMasterNo",
@@ -80,18 +89,76 @@ const columns = ref<QTableProps["columns"]>([
     field: "posMasterNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a
+        .toString()
+        .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "posMasterNoSuffix",
     align: "left",
-    label: "Suffix ตำแหน่งเลขที่",
+    label: "Suffix เลขที่ตำแหน่ง",
     sortable: true,
     field: "posMasterNoSuffix",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "posType",
+    format(val, row) {
+      let name = "";
+      if (row.posType && row.position) {
+        name = `${row.posType} (${row.posLevel})`;
+      } else if (row.posType) {
+        name = `${row.posType}`;
+      } else if (row.posLevel) {
+        name = `(${row.posLevel})`;
+      } else name = "-";
+      return name;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    field: "lastUpdatedAt",
+    sortable: false,
+    format(val) {
+      return date2Thai(val, true, true);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
   },
 ]);
 
+const columns = computed(() =>
+  props.historyType === "HISTORY"
+    ? (baseColumns.value || []).filter((col: any) => col.name !== "fullname")
+    : baseColumns.value || []
+);
+
 /**
  *  function เรียกข้อมูลประวัติตำแหน่ง
  * @param id
@@ -99,10 +166,13 @@ const columns = ref<QTableProps["columns"]>([
 function fetchHistoryPos(id: string) {
   showLoader();
   http
-    .get(config.API.orgPosHistory(id))
+    .get(config.API.orgPosHistoryUpdateEmp(id))
     .then((res) => {
       const data: HistoryPos[] = res.data.result;
-      rows.value = data;
+      rows.value =
+        props.historyType === "HISTORY"
+          ? formatHistoryData(data)
+          : formatHistoryOwnerData(data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -112,9 +182,23 @@ function fetchHistoryPos(id: string) {
     });
 }
 
-/**
- * callback function ทำงานเมื่อ   modal === true
- */
+function formatHistoryOwnerData(data: HistoryPos[]) {
+  return data.map((item) => ({
+    ...item,
+    fullname: item.firstName
+      ? `${item.prefix}${item.firstName} ${item.lastName}`.trim()
+      : "ว่าง",
+  }));
+}
+
+function formatHistoryData(data: HistoryPos[]) {
+  return data.map((item) => ({
+    ...item,
+    shortName: item.orgShortName ?? "-",
+  }));
+}
+
+/** callback function ทำงานเมื่อ   modal === true*/
 watch(
   () => modal.value,
   () => {
@@ -124,9 +208,9 @@ watch(
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 700px; max-width: 80vw">
+    <q-card style="min-width: 80%">
       <Header
-        :tittle="'ประวัติตำแหน่ง'"
+        :tittle="title"
         :close="
           () => {
             modal = false;
@@ -167,7 +251,7 @@ watch(
                 </div>
 
                 <div v-else>
-                  {{ col.value }}
+                  {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
             </q-tr>
diff --git a/src/modules/16_positionEmployee/components/TableMain.vue b/src/modules/16_positionEmployee/components/TableMain.vue
index 765b1ca4e..f56a0ab4e 100644
--- a/src/modules/16_positionEmployee/components/TableMain.vue
+++ b/src/modules/16_positionEmployee/components/TableMain.vue
@@ -78,6 +78,7 @@ const modalDialogSuccession = ref<boolean>(false); // สืบทอดตำ
 const modalDialogHistoryPos = ref<boolean>(false); // ประวัติตำแหน่ง
 const modalCondition = ref<boolean>(false); // จัดการตำแหน่งติดเงื่อนไข
 const dataCondition = ref<DataPositionCondition>();
+const historyType = ref<string>(""); // ประวัติตำแหน่ง
 
 const rowId = ref<string>("");
 const actionType = ref<string>("");
@@ -107,6 +108,12 @@ const listMenu = ref<ListMenu[]>([
     type: "CONDITION",
     color: "deep-orange",
   },
+  {
+    label: "ประวัติคนครอง",
+    icon: "history",
+    type: "OWNER_HISTORY",
+    color: "deep-purple",
+  },
   {
     label: "ลบ",
     icon: "delete",
@@ -247,18 +254,20 @@ const typeMove = ref<string>("");
  * @param type ประเภท [ALL,SINGER]
  */
 function onClickMovePos(id: string, type: string) {
+  rowId.value = id;
   modalDialogMMove.value = !modalDialogMMove.value;
   typeMove.value = type;
-  rowId.value = id;
 }
 
 /**
  * function ดูประวัติตำแหน่ง
  * @param id ID ตำแหน่ง
+ * @param type ประเภท [ALL,SINGER]
  */
-function onClickHistoryPos(id: string) {
-  modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
+function onClickHistoryPos(id: string, type: string) {
   rowId.value = id;
+  historyType.value = type;
+  modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
 }
 
 /**
@@ -615,13 +624,15 @@ watch(
                         : item.type === 'MOVE'
                         ? onClickMovePos(props.row.id, 'SINGER')
                         : item.type === 'HISTORY'
-                        ? onClickHistoryPos(props.row.id)
+                        ? onClickHistoryPos(props.row.id, item.type)
                         : item.type === 'INHERIT'
                         ? onClickInherit(props.row.id)
                         : item.type === 'COPY'
                         ? onClickPosition('COPY', props.row.id)
                         : item.type === 'CONDITION'
                         ? onClickCodition(props.row)
+                        : item.type === 'OWNER_HISTORY'
+                        ? onClickHistoryPos(props.row.ancestorDNA, item.type)
                         : null
                     "
                   >
@@ -778,7 +789,11 @@ watch(
   />
 
   <!-- ประวัติตำแหน่ง -->
-  <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
+  <DialogHistoryPos
+    v-model:modal="modalDialogHistoryPos"
+    :rowId="rowId"
+    :historyType="historyType"
+  />
 
   <!-- เลือกคนครอง -->
   <DialogSelectPerson
diff --git a/src/modules/16_positionEmployee/interface/response/organizational.ts b/src/modules/16_positionEmployee/interface/response/organizational.ts
index 5400dcdc0..4038efbee 100644
--- a/src/modules/16_positionEmployee/interface/response/organizational.ts
+++ b/src/modules/16_positionEmployee/interface/response/organizational.ts
@@ -153,11 +153,14 @@ interface PosMaster2 {
 
 interface HistoryPos {
   id: string; //id node
-  orgShotName: string; //ชื่อย่อส่วนราชการ
+  orgShortName: string; //ชื่อย่อส่วนราชการ
   lastUpdatedAt: Date; //วันที่แก้ไข
   posMasterNoPrefix: string; //Prefix นำหน้าตำแหน่งเลขที่ เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
   posMasterNo: number; //ตำแหน่งเลขที่ เป็นตัวเลข
   posMasterNoSuffix: string; //Suffix หลังตำแหน่งเลขที่ เช่น ช.
+  prefix: string; //คำนำหน้าชื่อผู้ครองตำแหน่ง
+  firstName: string; //ชื่อผู้ครองตำแหน่ง
+  lastName: string; //นามสกุลผู้ครองตำแหน่ง
 }
 
 interface SelectPerson {