Merge branch 'develop' into devTee

src/modules/02_organization/components/StructureMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, nextTick } from "vue";
 import { useQuasar } from "quasar";
 import { StructChart } from "structure-chart";
 import "structure-chart/structure-chart.css";
@@ -19,19 +19,22 @@ const rootOrgID = ref(); // org id ของ root ตัวปัจจุบั
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
 const loader = ref<boolean>(false); // Loader
+const scrollContainer = ref<HTMLElement | null>(null);
 
-/**
- * function ดาวน์โหลดไฟล์โครงสร้าง PNG
- */
-function savePNG() {
-  chartRef.value.savePNG();
+/** function ดาวน์โหลดไฟล์โครงสร้าง PNG*/
+async function savePNG() {
+  showLoader();
+  await scrollToCenter();
+  await chartRef.value.savePNG();
+  hideLoader();
 }
 
-/**
- * function ดาวน์โหลดไฟล์โครงสร้าง PDF
- */
-function savePDF() {
-  chartRef.value.savePDF();
+/** function ดาวน์โหลดไฟล์โครงสร้าง PDF*/
+async function savePDF() {
+  showLoader();
+  await scrollToCenter();
+  await chartRef.value.savePDF();
+  hideLoader();
 }
 
 /**
@@ -178,6 +181,26 @@ watch(
   }
 );
 
+/** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
+async function scrollToCenter() {
+  const container = scrollContainer.value;
+  if (container) {
+    container.scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
+  }
+}
+
+// Watch เมื่อข้อมูลใน dataSource เปลี่ยนแปลง
+watch(
+  dataSource,
+  () => {
+    // ใช้ nextTick เพื่อให้ DOM อัปเดตเสร็จก่อนค่อยเลื่อน scroll
+    nextTick(() => {
+      scrollToCenter();
+    });
+  },
+  { deep: true } // ตรวจจับการเปลี่ยนแปลงภายในข้อมูล
+);
+
 onMounted(async () => {
   const id =
     store.typeOrganizational === "current"
@@ -221,7 +244,16 @@ onMounted(async () => {
       </div>
     </div>
     <q-separator />
-    <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+    <div
+      ref="scrollContainer"
+      style="
+        overflow-x: auto;
+        overflow-y: auto;
+        height: 70vh;
+        position: relative;
+      "
+      class="q-pt-md"
+    >
       <StructChart
         style="height: 70vh"
         ref="chartRef"

src/modules/02_organization/components/StructureOrgMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, onBeforeMount } from "vue";
+import { ref, onMounted, watch, onBeforeMount, nextTick } from "vue";
 import { useQuasar } from "quasar";
 import { OrgChart } from "bma-org-chart";
 import "bma-org-chart/org-chart.css";
@@ -24,10 +24,9 @@ const dataSource = ref(chartData); // ข้อมูล Chart
 const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
+const scrollContainer = ref<HTMLElement | null>(null);
 
-/**
- * fetch ข้อมูล Chart โครงสร้าง
- */
+/** fetch ข้อมูล Chart โครงสร้าง*/
 async function fetchOrgChart() {
   if (rootOrgID.value) {
     showLoader();
@@ -97,18 +96,20 @@ async function refreshChart(data: any) {
   if (data.value !== undefined) data.value = 0;
 }
 
-/**
- * โหลด Chart รูป
- */
-function savePNG() {
-  chartRef.value.savePNG();
+/** โหลด Chart รูป*/
+async function savePNG() {
+  showLoader();
+  await scrollToCenter();
+  await chartRef.value.savePNG();
+  hideLoader();
 }
 
-/**
- * โหลด Chart PDF
- */
-function savePDF() {
-  chartRef.value.savePDF();
+/** โหลด Chart PDF*/
+async function savePDF() {
+  showLoader();
+  await scrollToCenter();
+  await chartRef.value.savePDF();
+  hideLoader();
 }
 
 watch(
@@ -129,6 +130,14 @@ watch(
   }
 );
 
+/** ฟังก์ชันเลื่อน scroll ไปที่กึ่งกลาง*/
+async function scrollToCenter() {
+  const container = scrollContainer.value;
+  if (container) {
+    container.scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
+  }
+}
+
 onMounted(async () => {
   rootOrgID.value =
     store.typeOrganizational === "current"
@@ -137,7 +146,8 @@ onMounted(async () => {
       ? store.draftId
       : store.historyId;
 
-  fetchOrgChart();
+  await fetchOrgChart();
+  await scrollToCenter();
 });
 
 onBeforeMount(() => {
@@ -164,7 +174,16 @@ onBeforeMount(() => {
         </q-btn>
       </div>
       <q-separator />
-      <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+      <div
+        ref="scrollContainer"
+        style="
+          overflow-x: auto;
+          overflow-y: auto;
+          height: 70vh;
+          position: relative;
+        "
+        class="q-pt-md"
+      >
         <OrgChart
           v-if="storeOrg.dataSource"
           style="height: 70vh"

src/modules/08_registryEmployee/components/DialogSelectPos.vue

@@ -115,6 +115,18 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "positionIsSelected",
+    align: "left",
+    label: "คนครอง",
+    sortable: true,
+    field: "positionIsSelected",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return val ? row.fullNameCurrentHolder : "-";
+    },
+  },
 ]);
 const columnsPostition = ref<QTableProps["columns"]>([
   {
@@ -197,6 +209,7 @@ const visibleColumns = ref<string[]>([
   "positionName",
   "posTypeName",
   "posLevelName",
+  "positionIsSelected",
 ]);
 
 /** Position*/
@@ -241,6 +254,7 @@ function updateSelected(data: TreeMain) {
 
   nodeId.value = data.orgTreeId ? data.orgTreeId : "";
   nodeLevel.value = data.orgLevel;
+
   fetchDataTable(data.orgTreeId, data.orgLevel);
 }
 
@@ -283,6 +297,7 @@ async function fetchDataTable(id: string, level: number = 0) {
           dataMain.push(data);
         }
       });
+
       positionNo.value = dataMain;
       positionNoMain.value = dataMain;
     })
@@ -440,6 +455,8 @@ watch(
       await clearData();
       if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
         await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
+        nodeLevel.value = props?.dataRow?.node;
+        nodeId.value = props.dataRow?.nodeId;
       } else {
         expanded.value = [];
       }