API structure chart

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

@@ -44,4 +44,8 @@ export default {
 
   /** report*/
   orgReport: (report: string) => `${organization}/report/${report}`,
+
+  /** struct-chart*/
+  orgStructChart: (id: string, type: string) =>
+    `${organization}/struct-chart/${id}/${type}`,
 };

src/modules/02_organizationalNew/components/DialogNewStructure.vue

@@ -100,6 +100,7 @@ function onSubmit() {
           status.value = true;
           store.typeOrganizational = "draft";
           store.draftId = res.data.result.id;
+          store.statusView = "list";
           success($q, "บันทึกข้อมูลสำเร็จ");
           // props.fetchActive?.();
         })

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "@vue/runtime-core";
+import { ref, onMounted, watch } from "vue";
-import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -9,8 +8,10 @@ import config from "@/app.config";
 import { StructChart } from "structure-chart";
 import "structure-chart/structure-chart.css";
 import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
 const mixin = useCounterMixin();
+const store = useOrganizational();
 const { showLoader, hideLoader, messageError } = mixin;
 const $q = useQuasar(); // show dialog
 
@@ -30,66 +31,111 @@ const savePDF = () => {
 const loader = ref<boolean>(false); // Loader
 
 onMounted(async () => {
-  await fetchTreeRoot();
+  // await fetchTreeRoot();
-  await fetchStructChart();
+  const id =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : "";
+
+  id && (await fetchStructChart(id, "0"));
 });
 
-/**
+async function fetchStructChart(id: string, type: string) {
- * อ่าน Root ของข้อมูลทั้งหมดจาก ​​API ต้องทำเป็นอันดับแรก เพื่อจะได้รู้รากของข้อมูล
- */
-const fetchTreeRoot = async () => {
   showLoader();
-  let urlRequest = config.API.chartGetTreeRoot;
   await http
-    .get(urlRequest)
+    .get(config.API.orgStructChart(id, type))
-    .then((response) => {
+    .then((res) => {
-      if (response.data.result.length > 0) {
+      if (res.data.result.length > 0) {
-        rootOrgID.value = response.data.result[0].organizationId;
+        const data = res.data.result[0];
-      }
+        const struct = [];
-    })
+        struct.push({ ...data, officer: [], heads: [] });
-    .catch((e) => {
+        dataSource.value = struct[0];
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-/**
- * อ่านข้อมูล organization id ปัจจุบันจาก API ข้อมูลที่ได้เอามาสร้าง Structure Chart
- */
-const fetchStructChart = async () => {
-  showLoader();
-  let urlRequest = config.API.chartGetStructure(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;
         breadcrumbsGen();
       }
     })
-    .catch((e) => {
+    .catch((err) => {
-      messageError($q, e);
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
     });
-};
+}
+
+/**
+ * อ่าน Root ของข้อมูลทั้งหมดจาก ​​API ต้องทำเป็นอันดับแรก เพื่อจะได้รู้รากของข้อมูล
+ */
+// const fetchTreeRoot = async () => {
+//   showLoader();
+//   let urlRequest = config.API.chartGetTreeRoot;
+//   await http
+//     .get(urlRequest)
+//     .then((response) => {
+//       if (response.data.result.length > 0) {
+//         rootOrgID.value = response.data.result[0].organizationId;
+//       }
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
+
+/**
+ * อ่านข้อมูล organization id ปัจจุบันจาก API ข้อมูลที่ได้เอามาสร้าง Structure Chart
+ */
+// const fetchStructChart = async () => {
+//   showLoader();
+//   let urlRequest = config.API.chartGetStructure(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;
+//         breadcrumbsGen();
+//       }
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
 
 /**
  * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
  * @param data
  */
-const refreshChart = async (data: any) => {
+const refreshChart = async (data: any, type: number) => {
-  if (data.value !== undefined) rootOrgID.value = data.value;
+  console.log(data, type);
-  else rootOrgID.value = data;
+
-  if (rootOrgID.value !== 0) await fetchStructChart();
+  if (data.value === undefined) {
-  if (data.value !== undefined) data.value = 0;
+    fetchStructChart(data, type.toString());
+    rootOrgID.value = data;
+  } else {
+    searchAndReplace(dataSource.value, data.value);
+  }
 };
 
+function searchAndReplace(data: any, id: string) {
+  if (data.deptID === id) {
+    fetchStructChart(data.deptID, data.type.toString());
+    rootOrgID.value = data.deptID;
+  } else if (data.children) {
+    for (const child of data.children) {
+      searchAndReplace(child, id);
+    }
+  }
+}
+
 /**
  * === กระบวนการสร้าง Path ===
  */
@@ -105,6 +151,7 @@ const chartTraverse = (id: any, chart: any): any => {
       _returnPath.push({
         label: child.departmentName,
         id: child.deptID,
+        type: child.type,
       });
       return _returnPath;
     } else {
@@ -118,6 +165,7 @@ const chartTraverse = (id: any, chart: any): any => {
           _returnPath.push({
             label: child.departmentName,
             id: child.deptID,
+            type: child.type,
           });
           return [..._returnPath, ...(_result ?? [])];
         }
@@ -131,7 +179,10 @@ const findPath = (id: any) => {
   _path.push({
     label: dataSourceLock.value.departmentName,
     id: dataSourceLock.value.deptID,
+    type: dataSourceLock.value.type,
   });
+  console.log(_path);
+
   if (dataSourceLock.value.deptID === id) return _path;
   if (dataSourceLock.value.children.length > 0) {
     let _returnPath = chartTraverse(id, dataSourceLock.value.children);
@@ -150,6 +201,28 @@ const breadcrumbsGen = () => {
     theBreadcrumb.value = newPath;
   }
 };
+
+watch(
+  () => store.typeOrganizational,
+  async () => {
+    store.historyId = "";
+    const id =
+      store.typeOrganizational === "current"
+        ? store.activeId
+        : store.typeOrganizational === "draft"
+        ? store.draftId
+        : "";
+
+    id && (await fetchStructChart(id, "0"));
+  }
+);
+
+watch(
+  () => store.historyId,
+  async () => {
+    store.historyId && (await fetchStructChart(store.historyId, "0"));
+  }
+);
 </script>
 
 <template>
@@ -175,7 +248,7 @@ const breadcrumbsGen = () => {
           <template v-for="link in theBreadcrumb" :key="link.id">
             <q-breadcrumbs-el
               :label="link.label"
-              @click="refreshChart(link.id)"
+              @click="refreshChart(link.id, link.type)"
               class="breadcrumbs-link"
             />
           </template>

src/modules/02_organizationalNew/components/TreeView.vue

@@ -186,6 +186,7 @@ watch(
       store.typeOrganizational === "current" ? store.activeId : store.draftId;
     id && store.typeOrganizational !== "old" && fetchDataTree(id);
     nodeId.value = "";
+    store.treeId = "";
   }
 );
 

src/modules/02_organizationalNew/store/organizational.ts

@@ -15,6 +15,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
   const dataActive = ref<DataActive>();
   const activeId = ref<string>();
   const draftId = ref<string>();
+  const historyId = ref<string>();
   const treeId = ref<string>();
   const level = ref<number>();
   const isPublic = ref<boolean>(false);
@@ -126,6 +127,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
     convertType,
     draftId,
     activeId,
+    historyId,
     treeId,
     level,
     isPublic,

src/modules/02_organizationalNew/views/main.vue

@@ -136,6 +136,7 @@ function onClickDateTime() {
  */
 function onClickHistory(id: string, name: string) {
   historyId.value = id;
+  store.historyId = id;
   labelHistory.value = name;
   count.value++;
 }