แสดงรูป Profile

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

@@ -6,6 +6,8 @@ const orgProfile = `${env.API_URI}/org/profile`;
 const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
 
 export default {
+  keycloakPosition: () => `${organization}/profile/keycloak/position`,
+
   /** โครงสร้างอัตรากำลัง*/
   activeOrganization: `${organization}/active`,
   orgByid: (id: string) => `${organization}/super-admin/${id}`,

src/views/MainLayout.vue

@@ -10,6 +10,7 @@ import { logout, tokenParsed } from "@/plugins/auth";
 import checkPermission from "@/plugins/checkPermission";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
+import avatar from "@/assets/avatar_user.jpg";
 
 import type {
   ScrollType,
@@ -333,6 +334,33 @@ function getLandingUrl() {
   }
 }
 
+/** ฟังก์ชันเรียกข้อมูลผู้ใช่งาน*/
+async function fetchKeycloakPosition() {
+  await http
+    .get(config.API.keycloakPosition())
+    .then(async (res) => {
+      const data = await res.data.result;
+      //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
+      if (data.avatarName) {
+        await getImg(data.profileId, data.avatarName);
+      } else {
+        profileImg.value = avatar;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+const profileImg = ref<string>("");
+async function getImg(id: string, pathName: string) {
+  await http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, pathName))
+    .then((res) => {
+      profileImg.value = res.data.downloadUrl;
+    });
+}
+
 /**
  * ฟังก์ชัน watch การเปลี่ยนแปลงของค่า notiTrigger
  * เมื่อค่า notiTrigger เปลี่ยนเป็น false,
@@ -375,6 +403,7 @@ onBeforeMount(async () => {
  * ยังจับ boolean ผิด จึงต้อง set
  */
 onMounted(async () => {
+  fetchKeycloakPosition();
   await fetchmsgNoread();
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
@@ -554,8 +583,13 @@ onUnmounted(() => {
               <q-item v-close-popup class="q-pa-none">
                 <q-item-section :avatar="$q.screen.gt.xs">
                   <q-avatar color="grey-3">
-                    <!-- <img src="https://cdn.quasar.dev/img/avatar.png" /> -->
-                    <q-icon name="mdi-account" size="22px" color="grey-7" />
+                    <q-img :src="profileImg" />
+                    <!-- <q-icon
+                      v-else
+                      name="mdi-account"
+                      size="22px"
+                      color="grey-7"
+                    /> -->
                   </q-avatar>
                 </q-item-section>
                 <q-item-section class="text-left gt-xs">
@@ -572,8 +606,8 @@ onUnmounted(() => {
             >
               <div class="column items-center col-12 q-py-md" color="grey-3">
                 <q-avatar size="72px" color="grey-4">
-                  <q-icon name="mdi-account" color="grey-7" />
-                  <!-- <img :src="require('@/assets/logo.png')" /> -->
+                  <q-img :src="profileImg" />
+                  <!-- <q-icon v-else name="mdi-account" color="grey-7" /> -->
                 </q-avatar>
                 <div class="text-subtitle2 q-mt-md q-mb-xs text-center">
                   {{ fullname }}