Merge branch 'nice' into develop

2024-08-20 10:37:29 +07:00 · 2024-08-20 10:37:29 +07:00 · af56b950b1
commit af56b950b1
parent 0a67bb00b7 0cc0b224c4
9 changed files with 84 additions and 49 deletions
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@ -21,6 +21,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`,
--- a/src/api/file/api.file.ts
+++ b/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) =>
-    `${url}/file/${name}`,
+  fileByPath: (name: string) => `${url}/file/${name}`,
  fileByFile: (name: string, group: string, id: string, fileName: string) =>
    `${url}/file/${name}/${group}/${id}/${fileName}`,
+
+  filefullPath: (path: string) => `${url}/file/${path}`,
 };
--- a/src/modules/02_organization/components/DialogFormPosition.vue
+++ b/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
--- a/src/modules/02_organization/components/StructureOrgMain.vue
+++ b/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() // ข้อมูล Chart
+const dataSource = ref(chartData); // ข้อมูล 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;
-  await http
+  let urlRequest = config.API.orgChart(rootOrgID.value);
+  http
    .get(urlRequest)
-    .then((response) => {
+    .then(async (response) => {
      if (response.data.result.length > 0) {
-        rootOrgID.value = response.data.result[0].organizationId;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
+        const data = response.data.result;
+
+        const updatedData = await Promise.all(data.map(addAvatarToData));
+        dataSource.value = updatedData[0];

-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>
--- a/src/modules/02_organization/components/TreeMain.vue
+++ b/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"
--- a/src/modules/02_organization/components/TreeTable.vue
+++ b/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"
--- a/src/modules/16_positionEmployee/components/DialogFormPosition.vue
+++ b/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"
--- a/src/modules/16_positionEmployee/components/DialogMovePos.vue
+++ b/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
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/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="