โครงสร้างอัตรากำลัง => เพิ่ม permission

src/api/02_organizational/api.organization.ts

@@ -20,6 +20,7 @@ export default {
   orgSetDateTime: (id: string) => `${organization}/set/publish/${id}`,
   organizationHistoryNew: `${organization}/history`,
   organizationHistoryPostNew: `${organization}/history/publish`,
+  orgChart: (id: string) => `${organization}/org-chart/${id}`,
 
   /** position*/
   orgPosPosition: `${orgPos}/position`,

src/api/file/api.file.ts

@@ -16,8 +16,9 @@ export default {
   file: (name: string, group: string, id: string) =>
     `${url}/file/${name}/${group}/${id}`,
   KpiFile,
-  fileByPath: (name: string) =>
+  fileByPath: (name: string) => `${url}/file/${name}`,
-    `${url}/file/${name}`,
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
+
+  filefullPath: (path: string) => `${url}/file/${path}`,
 };

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

@@ -832,7 +832,7 @@ async function emitSearch(keyword: string, typeSelect: string) {
                         </q-tr>
                       </template>
                       <template v-slot:body="props">
-                        <q-tr :props="props">
+                        <q-tr :props="props" class="cursor-pointer">
                           <q-td auto-width>
                             <q-btn
                               flat

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

@@ -8,60 +8,36 @@ import config from "@/app.config";
 import { OrgChart } from "bma-org-chart";
 import "bma-org-chart/org-chart.css";
 import { useCounterMixin } from "@/stores/mixin";
-
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import avatar from "@/assets/avatar_user.jpg";
 import chartData from "@/assets/orgChartData";
 
 const mixin = useCounterMixin();
+const store = useOrganizational();
 const { showLoader, hideLoader, messageError } = mixin;
 const $q = useQuasar(); // show dialog
 
-const dataSource = ref(chartData);
+const dataSource = ref(chartData); // ข้อมูล Chart
-// const dataSource = ref() // ข้อมูล Chart
 
 const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
-const savePNG = () => {
-  chartRef.value.savePNG();
-};
-const savePDF = () => {
-  chartRef.value.savePDF();
-};
-
-onMounted(async () => {
-  await fetchTreeRoot();
-  await fetchOrgChart();
-});
 
 /**
- * อ่าน Root ของข้อมูลทั้งหมดก่อน
+ * fetch ข้อมูล Chart โครงสร้าง
  */
-const fetchTreeRoot = async () => {
+function fetchOrgChart() {
   showLoader();
-  let urlRequest = config.API.chartGetTreeRoot;
+  let urlRequest = config.API.orgChart(rootOrgID.value);
-  await http
+  http
     .get(urlRequest)
-    .then((response) => {
+    .then(async (response) => {
       if (response.data.result.length > 0) {
-        rootOrgID.value = response.data.result[0].organizationId;
+        const data = response.data.result;
-      }
+
-    })
+        const updatedData = await Promise.all(data.map(addAvatarToData));
-    .catch((e) => {
+        dataSource.value = updatedData[0];
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
 
-const fetchOrgChart = async () => {
-  showLoader();
-  let urlRequest = config.API.chartGetOrg(rootOrgID.value);
-  await http
-    .get(urlRequest)
-    .then((response) => {
-      if (response.data.result.length > 0) {
-        dataSource.value = response.data.result[0];
         if (dataSourceLock.value === undefined)
           dataSourceLock.value = dataSource.value;
       }
@@ -72,24 +48,79 @@ const fetchOrgChart = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
+
+/**
+ * map ข้อมูล Chart
+ * @param item  ข้อมูล Chart
+ */
+async function addAvatarToData(item: any) {
+  // เพิ่ม avatar ให้กับ item
+  const updatedItem = {
+    ...item,
+    avatar: item.avatar ? await fetchProfile(item.avatar) : avatar,
+    // ตรวจสอบว่า item มี children หรือไม่
+    children: item.children
+      ? await Promise.all(item.children.map(addAvatarToData))
+      : [],
+  };
+  return updatedItem;
+}
+
+/**
+ * fetch รูปโปรไฟล์ return ลิงค์ download ไฟล์
+ * @param path ไฟล์รูป
+ */
+async function fetchProfile(path: string) {
+  try {
+    const res = await http.get(config.API.filefullPath(path));
+    return res.data.downloadUrl; // คืนค่า URL ของ avatar
+  } catch (err) {
+    return avatar; // คืนค่า default avatar ถ้าเกิดข้อผิดพลาด
+  }
+}
 
 /**
  * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
  * @param data
  */
-const refreshChart = async (data: any) => {
+async function refreshChart(data: any) {
   if (data.value !== undefined) rootOrgID.value = data.value;
   else rootOrgID.value = data;
   if (rootOrgID.value !== 0) await fetchOrgChart();
   if (data.value !== undefined) data.value = 0;
-};
+}
+
+/**
+ * โหลด Chart รูป
+ */
+function savePNG() {
+  chartRef.value.savePNG();
+}
+
+/**
+ * โหลด Chart PDF
+ */
+function savePDF() {
+  chartRef.value.savePDF();
+}
+
+onMounted(async () => {
+  rootOrgID.value =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : store.historyId;
+
+  await fetchOrgChart();
+});
 </script>
 
 <template>
   <!-- <div class="toptitle text-dark col-12 row items-center">แผนภูมิองค์กร</div> -->
   <div class="text-dark">
-    <q-card flat bordered class="col-12 q-mt-sm">
+    <q-card class="col-12 q-mt-sm">
       <div class="q-pa-sm">
         <q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
           <q-tooltip> ดาวน์โหลด PNG </q-tooltip>

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

@@ -3,6 +3,7 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
 
 /** importType*/
 import type { ListMenu } from "@/modules/02_organization/interface/index/Main";
@@ -547,7 +548,7 @@ watch(
               </q-btn>
 
               <q-btn
-                v-else
+                v-else-if="checkPermission($route)?.attrIsGet"
                 flat
                 dense
                 color="grey-13"

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

@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import genreport from "@/plugins/genreportxlsx";
+import { checkPermission } from "@/utils/permissions";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -683,7 +684,7 @@ watch(
             </q-btn>
 
             <q-btn
-              v-else
+              v-else-if="checkPermission($route)?.attrIsGet"
               flat
               dense
               color="deep-purple"

src/modules/16_positionEmployee/components/DialogFormPosition.vue

@@ -477,7 +477,7 @@ watch(
                         </q-tr>
                       </template>
                       <template v-slot:body="props">
-                        <q-tr :props="props" class="cursor-pointer">
+                        <q-tr :props="props">
                           <q-td
                             v-for="col in props.cols"
                             :key="col.name"

src/modules/16_positionEmployee/components/DialogMovePos.vue

@@ -227,7 +227,7 @@ watch(
                   />
                 </template>
                 <template v-slot:body="props">
-                  <q-tr :props="props" class="cursor-pointer">
+                  <q-tr :props="props">
                     <q-td>
                       <q-checkbox
                         keep-color

src/modules/16_positionEmployee/components/TreeTable.vue

@@ -444,7 +444,7 @@ watch(
         </q-tr>
       </template>
       <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
+        <q-tr :props="props">
           <q-td>
             <q-btn
               v-if="