149 lines
4 KiB
Vue
149 lines
4 KiB
Vue
|
<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>
|