From da98c579fc3ae7e5c5c4abe6ea9afac4e7e06ce2 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 29 Aug 2025 15:09:15 +0700
Subject: [PATCH] =?UTF-8?q?fix=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=84=E0=B8=99=E0=B8=84=E0=B8=A3=E0=B8=AD=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |  1 +
 .../components/DialogHistoryPos.vue           | 67 ++++++++++-------
 .../02_organization/components/TableMain.vue  | 75 +++++++++++++------
 .../interface/response/organizational.ts      |  1 +
 4 files changed, 94 insertions(+), 50 deletions(-)

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 34030c278..da0d26cc9 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -52,6 +52,7 @@ export default {
 
   orgPosExecutiveById: (id: string) => `${orgPos}/executive/${id}`,
   orgPosHistory: (id: string) => `${orgPos}/history/${id}`,
+  orgPosHistoryUpdate: (id: string) => `${orgPos}/history-update/${id}`,
 
   orgSalaryPosition: `${orgPos}/position?keyword=&type=ALL`,
 
diff --git a/src/modules/02_organization/components/DialogHistoryPos.vue b/src/modules/02_organization/components/DialogHistoryPos.vue
index 26f053d4c..530597dfa 100644
--- a/src/modules/02_organization/components/DialogHistoryPos.vue
+++ b/src/modules/02_organization/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 http from "@/plugins/http";
@@ -13,9 +13,7 @@ import { useOrganizational } from "@/modules/02_organization/store/organizationa
 import type { QTableProps } from "quasar";
 import type { HistoryPos } from "@/modules/02_organization/interface/response/organizational";
 
-/**
- * import Components
- */
+/** import Components*/
 import Header from "@/components/DialogHeader.vue";
 
 /** Use*/
@@ -23,21 +21,20 @@ const $q = useQuasar();
 const store = useOrganizational();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
-/**
- * props
- */
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
+  historyType: {
+    type: String,
+    default: "HISTORY",
+  },
   rowId: {
     type: String,
   },
 });
 
-/**
- * ข้อมูล Table
- */
 const rows = ref<HistoryPos[]>([]); //ข้อมูลรายการประวัติตำแหน่ง
-const columns = ref<QTableProps["columns"]>([
+const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -47,17 +44,17 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  // {
-  //   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: "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: "orgShortName",
     align: "left",
@@ -165,15 +162,33 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const pagination = ref<QTableProps["pagination"]>({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const columns = computed(() =>
+  props.historyType === "HISTORY"
+    ? (baseColumns.value || []).filter((col: any) => col.name !== "fullname")
+    : baseColumns.value || []
+);
+
+const titleName = computed(() =>
+  props.historyType === "HISTORY" ? "ประวัติตำแหน่ง" : "ประวัติคนครอง"
+);
 
 /**
  *  function เรียกข้อมูลประวัติตำแหน่ง
  * @param id
  */
-function fetchHistoryPos(id: string) {
+async function fetchHistoryPos(id: string) {
   showLoader();
-  http
-    .get(config.API.orgPosHistory(id))
+  const pathAPI =
+    props.historyType === "HISTORY"
+      ? config.API.orgPosHistory(id)
+      : config.API.orgPosHistoryUpdate(id);
+  await http
+    .get(pathAPI)
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
@@ -198,7 +213,7 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 80%">
       <Header
-        :tittle="'ประวัติตำแหน่ง'"
+        :tittle="titleName"
         :close="
           () => {
             modal = false;
diff --git a/src/modules/02_organization/components/TableMain.vue b/src/modules/02_organization/components/TableMain.vue
index fd4294361..f54a78f80 100644
--- a/src/modules/02_organization/components/TableMain.vue
+++ b/src/modules/02_organization/components/TableMain.vue
@@ -119,6 +119,12 @@ const listMenu = ref<ListMenu[]>([
     type: "CONDITION",
     color: "deep-orange",
   },
+  {
+    label: "ประวัติคนครอง",
+    icon: "history",
+    type: "OWNER_HISTORY",
+    color: "deep-purple",
+  },
   {
     label: "ประวัติตำแหน่ง",
     icon: "history",
@@ -367,12 +373,12 @@ function onClickCopyPosition(
 }
 
 const dialogDetail = ref<boolean>(false); //ดูรายละเอียดประวัติตำแหน่ง
-const dataDetailPos = ref<DataPosition[]>([]); //รายละเอียดตำแหน่ง
+const dataDetailPos = ref<PosMaster2>(); //รายละเอียดตำแหน่ง
 /**
  * function ดูรายละเอียดประวัติตำแหน่ง
  * @param data ข้อมูล ประวัติตำแหน่ง
  */
-function onClickViewDetail(data: DataPosition[]) {
+function onClickViewDetail(data: PosMaster2) {
   dialogDetail.value = !dialogDetail.value;
   dataDetailPos.value = data;
 }
@@ -432,13 +438,15 @@ function onClickMovePos(id: string, type: string) {
 }
 
 const modalDialogHistoryPos = ref<boolean>(false);
+const historyType = ref<string>("HISTORY");
 /**
  * function ดูประวัติตำแหน่ง
  * @param id ID ตำแหน่ง
  */
-function onClickHistoryPos(id: string) {
+function onClickHistoryPos(id: string, type: string = "HISTORY") {
   modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
   rowId.value = id;
+  historyType.value = type;
 }
 
 /**
@@ -454,7 +462,7 @@ function updatePagination(newPagination: NewPagination) {
  * function เปิด pop เลือกตนครอง
  * @param data  ข้อมูลตำแหน่งที่ต้องการเพิ่มคนครอง
  */
-function openSelectPerson(data: DataPosition[]) {
+function openSelectPerson(data: PosMaster2) {
   modalSelectPerson.value = true;
   dataDetailPos.value = data;
 }
@@ -591,6 +599,39 @@ async function fetchDataCondition() {
   );
 }
 
+function onClickAction(type: string, data: PosMaster2) {
+  console.log(data);
+  switch (type) {
+    case "EDIT":
+      onClickPosition(type, data.id, data);
+      break;
+    case "COPY":
+      onClickCopyPosition(type, data.id, data);
+      break;
+    case "DEL":
+      onClickDelete(data.id || "");
+      break;
+    case "MOVE":
+      onClickMovePos(data.id || "", "SINGER");
+      break;
+    case "INHERIT":
+      onClickInherit(data.id || "");
+      break;
+    case "CONDITION":
+      onClickCodition(data);
+      break;
+    case "OWNER_HISTORY":
+      onClickHistoryPos(data.ancestorDNA || "", type);
+      break;
+    case "HISTORY":
+      onClickHistoryPos(data.id || "");
+      break;
+    case "VIEW":
+      onClickViewDetail(data);
+      break;
+  }
+}
+
 const pagination = ref({
   page: reqMaster.value.page,
   rowsPerPage: reqMaster.value.pageSize,
@@ -789,25 +830,7 @@ watch(
                     :key="index"
                     clickable
                     v-close-popup
-                    @click="
-                      item.type === 'EDIT'
-                        ? onClickPosition('EDIT', props.row.id, props.row)
-                        : item.type === 'DEL'
-                        ? onClickDelete(props.row.id)
-                        : item.type === 'MOVE'
-                        ? onClickMovePos(props.row.id, 'SINGER')
-                        : item.type === 'HISTORY'
-                        ? onClickHistoryPos(props.row.id)
-                        : item.type === 'INHERIT'
-                        ? onClickInherit(props.row.id)
-                        : item.type === 'COPY'
-                        ? onClickCopyPosition('COPY', props.row.id, props.row)
-                        : item.type === 'CONDITION'
-                        ? onClickCodition(props.row)
-                        : item.type === 'VIEW'
-                        ? onClickViewDetail(props.row)
-                        : null
-                    "
+                    @click="onClickAction(item.type, props.row)"
                   >
                     <q-item-section>
                       <div class="row items-center">
@@ -1077,7 +1100,11 @@ watch(
   />
 
   <!-- ประวัติตำแหน่ง -->
-  <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
+  <DialogHistoryPos
+    v-model:modal="modalDialogHistoryPos"
+    :rowId="rowId"
+    :history-type="historyType"
+  />
 
   <!-- เลือกคนครอง -->
   <DialogSelectPerson
diff --git a/src/modules/02_organization/interface/response/organizational.ts b/src/modules/02_organization/interface/response/organizational.ts
index 6055735ee..b5162ef01 100644
--- a/src/modules/02_organization/interface/response/organizational.ts
+++ b/src/modules/02_organization/interface/response/organizational.ts
@@ -162,6 +162,7 @@ interface PosMaster2 {
   current_holderId?: string;
   next_holderId?: string;
   isSit?: boolean;
+  ancestorDNA: string;
 }
 
 interface HistoryPos {