โครงสร้างอัตรากำลัง => structure org

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

@@ -46,8 +46,6 @@ async function fetchStructChart(
   type: string,
   status: boolean = false
 ) {
-  console.log(status);
-
   showLoader();
   await http
     .get(config.API.orgStructChart(id, type))
@@ -70,58 +68,11 @@ async function fetchStructChart(
     });
 }
 
-/**
- * อ่าน 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, type: number) => {
-  console.log(data, type);
-
   if (data.value === undefined) {
     fetchStructChart(data, type.toString());
     rootOrgID.value = data;

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

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { OrgChart } from "bma-org-chart";
+import "bma-org-chart/org-chart.css";
+import { useCounterMixin } from "@/stores/mixin";
+
+import chartData from "@/assets/orgChartData";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+const $q = useQuasar(); // show dialog
+
+const dataSource = ref(chartData);
+// 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 ของข้อมูลทั้งหมดก่อน
+ */
+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();
+    });
+};
+
+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;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
+ * @param data
+ */
+const refreshChart = async (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;
+};
+</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">
+      <div class="q-pa-sm">
+        <q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
+          <q-tooltip> ดาวน์โหลด PNG </q-tooltip>
+        </q-btn>
+        <q-btn
+          flat
+          round
+          color="red-7"
+          @click="savePDF()"
+          icon="mdi-file-pdf-box"
+        >
+          <q-tooltip> ดาวน์โหลด PDF </q-tooltip>
+        </q-btn>
+      </div>
+      <q-separator />
+      <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+        <OrgChart
+          style="height: 70vh"
+          ref="chartRef"
+          class="org"
+          :dataSource="dataSource"
+          @onElementClick="refreshChart"
+        />
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style>
+.org .section-list {
+  padding: 15px !important;
+}
+
+.org .section-list .column-content .header {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 500 !important;
+}
+.org .section-list .column-content .subheader {
+  font-weight: 500 !important;
+}
+
+.org .section-list .column-content .caption {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  font-weight: 400 !important;
+}
+
+.org .element-container .column-content p {
+  padding-top: 3px !important;
+}
+
+.org .element-container .column-side .side-button {
+  background-size: 14px;
+}
+</style>

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

@@ -16,6 +16,7 @@ import type { OrgRevision } from "@/modules/02_organization/interface/response/o
  */
 import TreeView from "@/modules/02_organization/components/TreeView.vue";
 import StructureView from "@/modules/02_organization/components/StructureMain.vue";
+import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
 import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
 
@@ -323,6 +324,14 @@ onMounted(async () => {
               :color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
               @click="store.statusView = 'tree'"
             />
+            <q-separator inset vertical />
+            <q-btn
+              flat
+              dense
+              icon="mdi-account-group"
+              :color="store.statusView === 'org' ? 'grey-7' : 'grey-4'"
+              @click="store.statusView = 'org'"
+            />
           </q-toolbar>
         </q-card-section>
         <q-separator />
@@ -339,6 +348,10 @@ onMounted(async () => {
             <q-tab-panel name="tree" style="padding: 0px">
               <StructureView v-if="store.statusView === 'tree'" />
             </q-tab-panel>
+
+            <q-tab-panel name="org" style="padding: 0px">
+              <StructureOrgMain v-if="store.statusView === 'org'" />
+            </q-tab-panel>
           </q-tab-panels>
         </q-card-section>
       </q-card>

src/modules/08_registryEmployee/views/Main.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { checkPermission } from "@/utils/permissions";
-import { date, useQuasar } from "quasar";
+import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -35,8 +35,6 @@ const {
 } = useCounterMixin();
 const { statusText } = useRegistryEmp();
 
-const filter = ref<string>("");
-
 /** Table*/
 const rows = ref<DataEmployee[]>([]);
 const maxPage = ref<number>(0);