From ffc392274484b5a69528bd03abb04eda71ebaef6 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Mon, 15 Jan 2024 15:18:54 +0700
Subject: [PATCH] no message

---
 src/plugins/http.ts      |   76 +--
 src/plugins/keycloak.ts  |   38 +-
 src/views/MainLayout.vue | 1175 +++++++++++++++++---------------------
 3 files changed, 581 insertions(+), 708 deletions(-)

diff --git a/src/plugins/http.ts b/src/plugins/http.ts
index 494c9aa3..7ad4dd51 100644
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@@ -1,45 +1,45 @@
-import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
-import keycloak from "./keycloak";
+import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios"
+// import keycloak from "./keycloak";
 
 const http = Axios.create({
-  timeout: 1000000000, // เพิ่มค่า timeout
-  headers: {
-    "X-Requested-With": "XMLHttpRequest",
-  },
-});
+	timeout: 1000000000, // เพิ่มค่า timeout
+	headers: {
+		"X-Requested-With": "XMLHttpRequest",
+	},
+})
 
 http.interceptors.request.use(
-  async function (config: AxiosRequestConfig<any>) {
-    await keycloak.updateToken(1);
-    config.headers = config.headers ?? {};
-    const token = keycloak.token;
-    // const token = localStorage.getItem("access_token")
-    // const token =
-    //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
-    if (token) config.headers.Authorization = `Bearer ${token}`;
-    return config;
-  },
-  function (error: any) {
-    return Promise.reject(error);
-  }
-);
+	async function (config: AxiosRequestConfig<any>) {
+		// await keycloak.updateToken(1);
+		config.headers = config.headers ?? {}
+		// const token = keycloak.token;
+		// const token = localStorage.getItem("access_token")
+		// const token =
+		//   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
+		// if (token) config.headers.Authorization = `Bearer ${token}`;
+		return config
+	},
+	function (error: any) {
+		return Promise.reject(error)
+	}
+)
 
 http.interceptors.response.use(
-  function (response: AxiosResponse<any, any>) {
-    return response;
-  },
-  function (error: any) {
-    if (typeof error !== undefined) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (error.hasOwnProperty("response")) {
-        if (error.response.status === 401 || error.response.status === 403) {
-          // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
-          // Store.commit("REMOVE_ACCESS_TOKEN")
-        }
-      }
-    }
-    return Promise.reject(error);
-  }
-);
+	function (response: AxiosResponse<any, any>) {
+		return response
+	},
+	function (error: any) {
+		if (typeof error !== undefined) {
+			// eslint-disable-next-line no-prototype-builtins
+			if (error.hasOwnProperty("response")) {
+				if (error.response.status === 401 || error.response.status === 403) {
+					// Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
+					// Store.commit("REMOVE_ACCESS_TOKEN")
+				}
+			}
+		}
+		return Promise.reject(error)
+	}
+)
 
-export default http;
+export default http
diff --git a/src/plugins/keycloak.ts b/src/plugins/keycloak.ts
index 3c83199b..c12feb1a 100644
--- a/src/plugins/keycloak.ts
+++ b/src/plugins/keycloak.ts
@@ -1,23 +1,23 @@
-/**
- * front connect to keycloak
- */
-import Keycloak from "keycloak-js";
-// import config from "../app.config";
-// import http from "../shared/http";
-// import router from "../router";
+// /**
+//  * front connect to keycloak
+//  */
+// import Keycloak from "keycloak-js";
+// // import config from "../app.config";
+// // import http from "../shared/http";
+// // import router from "../router";
 
-const initOptions = {
-  //   url: "https://keycloak.frappet.synology.me/auth/",
-  realm: "bma-ehr",
-  clientId: "bma-ehr-vue3",
-  url: "https://id.frappet.synology.me/",
-  //   realm: "bma-ehr-exam",
-  //   clientId: "bma-ehr-exam-vue3",
-}; //option keycloak ที่จะ connect
+// const initOptions = {
+//   //   url: "https://keycloak.frappet.synology.me/auth/",
+//   realm: "bma-ehr",
+//   clientId: "bma-ehr-vue3",
+//   url: "https://id.frappet.synology.me/",
+//   //   realm: "bma-ehr-exam",
+//   //   clientId: "bma-ehr-exam-vue3",
+// }; //option keycloak ที่จะ connect
 
-const keycloak = Keycloak(initOptions);
+// const keycloak = Keycloak(initOptions);
 
-keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
+// keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
 
-await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }); //ทำการ connect keycloak
-export default keycloak;
+// await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }); //ทำการ connect keycloak
+// export default keycloak;
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 52fcc0f8..a573e9c8 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,145 +1,136 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from "vue";
-import keycloak from "@/plugins/keycloak";
-import { useRoute, useRouter } from "vue-router";
-import { useDataStore } from "@/stores/data";
-import { storeToRefs } from "pinia";
-import { scroll, useQuasar } from "quasar";
+import { ref, onMounted, onUnmounted, watch } from "vue"
+// import keycloak from "@/plugins/keycloak";
+import { useRoute, useRouter } from "vue-router"
+import { useDataStore } from "@/stores/data"
+import { storeToRefs } from "pinia"
+import { scroll, useQuasar } from "quasar"
 
-import type { ScrollType } from "../interface/request/main/main";
-import {
-  menuList,
-  tabListLogin,
-  tabListDatamain,
-  tabStructuremain,
-  tabRegistration,
-  tabRecruit,
-  tabList,
-  
-} from "../interface/request/main/main";
+import type { ScrollType } from "../interface/request/main/main"
+import { menuList, tabListLogin, tabListDatamain, tabStructuremain, tabRegistration, tabRecruit, tabList } from "../interface/request/main/main"
 
-const { setVerticalScrollPosition } = scroll;
-const store = useDataStore();
-const route = useRoute();
-const router = useRouter();
-const link = ref<string>("");
+const { setVerticalScrollPosition } = scroll
+const store = useDataStore()
+const route = useRoute()
+const router = useRouter()
+const link = ref<string>("")
 
-const $q = useQuasar();
-const { tabData, loader } = storeToRefs(store);
-const { changeTab } = store;
-const miniState = ref<boolean>(false);
-const drawerR = ref<boolean>(false);
-const rightActive = ref<boolean>(false);
-const resize = ref<number>(0);
-const active = ref<number>(0);
-const drawerL = ref<boolean>(false);
-const fullname = ref<string>("");
-const role = ref<string[]>([]);
-const menuRight = ref<boolean>(false);
+const $q = useQuasar()
+const { tabData, loader } = storeToRefs(store)
+const { changeTab } = store
+const miniState = ref<boolean>(false)
+const drawerR = ref<boolean>(false)
+const rightActive = ref<boolean>(false)
+const resize = ref<number>(0)
+const active = ref<number>(0)
+const drawerL = ref<boolean>(false)
+const fullname = ref<string>("")
+const role = ref<string[]>([])
+const menuRight = ref<boolean>(false)
 
-const listTab = ref<any>([]);
+const listTab = ref<any>([])
 
 /**
  * toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
  */
 const toggleBtnRight = () => {
-  drawerR.value = !drawerR.value;
-};
+	drawerR.value = !drawerR.value
+}
 
 /**
  * toggleBtnLeft ปุ่มย่อ ขยาย drawer ซ้าย เมื่อหน้าจอ ย่อถึงขนาด 1024 px
  * ปกติเป็นการย่อโดยใช้ Ministate
  */
 const toggleBtnLeft = () => {
-  if (window.innerWidth < 1024) {
-    drawerL.value = !drawerL.value;
-  } else {
-    miniState.value = !miniState.value;
-  }
-};
+	if (window.innerWidth < 1024) {
+		drawerL.value = !drawerL.value
+	} else {
+		miniState.value = !miniState.value
+	}
+}
 
 /**
  * updateScroll เป็น function active แทปด้านขวา
  */
 const updateScroll = (position: number) => {
-  // console.log(position);
+	// console.log(position);
 
-  // เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
-  if (position === void 0) {
-    position = document.documentElement.scrollTop || document.body.scrollTop;
-  }
+	// เมื่อ position เป็น undifind ให้ position เป็น ตำแหน่ง top ที่ scroll
+	if (position === void 0) {
+		position = document.documentElement.scrollTop || document.body.scrollTop
+	}
 
-  let last;
-  /**
-   * วนหา id ของ div นั้น
-   */
-  for (const i in listTab.value) {
-    const section = listTab.value[i];
-    const item = document.getElementById(section.tag);
-    // console.log(section.childern);
-    if (section.childern) {
-      for (const x in section.childern) {
-        const sectionchildern = section.childern[x];
-        const itemchildern = document.getElementById(sectionchildern.tag);
-        console.log(sectionchildern);
+	let last
+	/**
+	 * วนหา id ของ div นั้น
+	 */
+	for (const i in listTab.value) {
+		const section = listTab.value[i]
+		const item = document.getElementById(section.tag)
+		// console.log(section.childern);
+		if (section.childern) {
+			for (const x in section.childern) {
+				const sectionchildern = section.childern[x]
+				const itemchildern = document.getElementById(sectionchildern.tag)
+				console.log(sectionchildern)
 
-        if (itemchildern === null) {
-          continue;
-        }
+				if (itemchildern === null) {
+					continue
+				}
 
-        if (itemchildern.offsetTop >= position + 155) {
-          console.log(last);
-          if (last === void 0) {
-            last = sectionchildern.tag;
-          }
-          break;
-        } else {
-          last = sectionchildern.tag;
-        }
-      }
-    }
+				if (itemchildern.offsetTop >= position + 155) {
+					console.log(last)
+					if (last === void 0) {
+						last = sectionchildern.tag
+					}
+					break
+				} else {
+					last = sectionchildern.tag
+				}
+			}
+		}
 
-    /**
-     * วนหา id ของ div หน้านั้น
-     * เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
-     * เมื่อเจอแล้ว ให้ ตำแหน่งบนสุดของ div นั้น มากกว่าหรือเท่ากับ  ตำแหน่ง top ที่ scroll บวกกับ แทปด้านบน 155
-     * ถ้า last เป็น undifind ให้ last เท่ากับ tag แล้ว หยุดลูป
-     * ถ้าไม่ใช้ undifind ให้ last เท่ากับ tag แล้ว ลูปหาต่อ กรณี div นั้นยาว
-     */
-    if (item === null) {
-      continue;
-    }
+		/**
+		 * วนหา id ของ div หน้านั้น
+		 * เมื่อหาไม่เจอให้ไปต่อตัวต่อไป
+		 * เมื่อเจอแล้ว ให้ ตำแหน่งบนสุดของ div นั้น มากกว่าหรือเท่ากับ  ตำแหน่ง top ที่ scroll บวกกับ แทปด้านบน 155
+		 * ถ้า last เป็น undifind ให้ last เท่ากับ tag แล้ว หยุดลูป
+		 * ถ้าไม่ใช้ undifind ให้ last เท่ากับ tag แล้ว ลูปหาต่อ กรณี div นั้นยาว
+		 */
+		if (item === null) {
+			continue
+		}
 
-    if (item.offsetTop >= position + 155) {
-      if (last === void 0) {
-        last = section.tag;
-      }
-      break;
-    } else {
-      last = section.tag;
-    }
-  }
-  /**
-   * ถ้า last ไม่เท่ากับ undifind
-   * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
-   * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
-   */
+		if (item.offsetTop >= position + 155) {
+			if (last === void 0) {
+				last = section.tag
+			}
+			break
+		} else {
+			last = section.tag
+		}
+	}
+	/**
+	 * ถ้า last ไม่เท่ากับ undifind
+	 * ใช้ เซ็ท active ให้เป็นแทปสีฟ้า
+	 * และใช้ scrollIntoView ย้ายตำแหน่ง activeโดยการเลื่อนไปหา
+	 */
 
-  if (last !== void 0) {
-    changeTab(last);
-    const tocEl = document.getElementById("tab--" + last);
-    if (tocEl) {
-      tocEl.scrollIntoView({ block: "nearest" });
-    }
-  }
-};
+	if (last !== void 0) {
+		changeTab(last)
+		const tocEl = document.getElementById("tab--" + last)
+		if (tocEl) {
+			tocEl.scrollIntoView({ block: "nearest" })
+		}
+	}
+}
 
 /**
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ และ rightActive เท่ากับ true
  */
 const activeBtn = () => {
-  return route.name == "login" && rightActive.value;
-};
+	return route.name == "login" && rightActive.value
+}
 /**
  * เมื่อเริ่มต้นโปรแกรมให้ฟัง event resize และ function myEventHandler
  * set function myEventHandler เพราะ state ยังไม่เซ็ท , state เซ็ทเมื่อ หน้าจอเริ่ม ขยับหน้าจอ
@@ -147,50 +138,49 @@ const activeBtn = () => {
  * ยังจับ boolean ผิด จึงต้อง set
  */
 onMounted(async () => {
-  myEventHandler(null, false);
-  window.addEventListener("resize", (e: any) => {
-    myEventHandler(e, true);
-  });
-  await setListTab();
-});
+	myEventHandler(null, false)
+	window.addEventListener("resize", (e: any) => {
+		myEventHandler(e, true)
+	})
+	await setListTab()
+})
 
 const setListTab = () => {
-  menuRight.value = true;
-  if (route.name == "login") {
-    listTab.value = tabListLogin;
-  } else if (route.name == "datamain") {
-    listTab.value = tabListDatamain;
-  } else if (route.name == "structuremain") {
-    listTab.value = tabStructuremain;
-  } else if (route.name == "registmain") {
-    listTab.value = tabRegistration;
-  } else if (route.name == "recruitmain") {
-    listTab.value = tabRecruit;
-  }
-  else if (route.name == "commandsmain") {
-    listTab.value = tabRecruit;
-  }
-  changeTab(listTab.value[0].tag);
+	menuRight.value = true
+	if (route.name == "login") {
+		listTab.value = tabListLogin
+	} else if (route.name == "datamain") {
+		listTab.value = tabListDatamain
+	} else if (route.name == "structuremain") {
+		listTab.value = tabStructuremain
+	} else if (route.name == "registmain") {
+		listTab.value = tabRegistration
+	} else if (route.name == "recruitmain") {
+		listTab.value = tabRecruit
+	} else if (route.name == "commandsmain") {
+		listTab.value = tabRecruit
+	}
+	changeTab(listTab.value[0].tag)
 
-  if (route.name == "dashboard") {
-    listTab.value = [];
-    menuRight.value = false;
-  }
-  window.scrollTo(0, 0);
-};
+	if (route.name == "dashboard") {
+		listTab.value = []
+		menuRight.value = false
+	}
+	window.scrollTo(0, 0)
+}
 
 watch(route, () => {
-  setListTab();
-});
+	setListTab()
+})
 
 /**
  * เมื่อออกจากโปรแกรม ให้ ยกเลิกการฟัง event resize
  */
 onUnmounted(() => {
-  window.removeEventListener("resize", (e: any) => {
-    myEventHandler(e, true);
-  });
-});
+	window.removeEventListener("resize", (e: any) => {
+		myEventHandler(e, true)
+	})
+})
 
 /**
  * @param e event ของ resize
@@ -203,25 +193,25 @@ onUnmounted(() => {
  * rightActive = false; ไม่แสดงปุ่ม drawer ด้าน ขวา
  */
 const myEventHandler = (e: any, setSCroll: boolean) => {
-  if (setSCroll) {
-    resize.value = e.target.innerWidth;
-  } else {
-    resize.value = window.innerWidth;
-  }
-  if (resize.value < 1024) {
-    if (!rightActive.value) {
-      rightActive.value = true;
-    }
-  } else {
-    if (rightActive.value) {
-      if (drawerR.value) {
-        rightActive.value = true;
-      } else {
-        rightActive.value = false;
-      }
-    }
-  }
-};
+	if (setSCroll) {
+		resize.value = e.target.innerWidth
+	} else {
+		resize.value = window.innerWidth
+	}
+	if (resize.value < 1024) {
+		if (!rightActive.value) {
+			rightActive.value = true
+		}
+	} else {
+		if (rightActive.value) {
+			if (drawerR.value) {
+				rightActive.value = true
+			} else {
+				rightActive.value = false
+			}
+		}
+	}
+}
 
 /**
  * ตรวจสอบ path นั้นๆ ว่ายังอยู่ที่ path นั้น แม้จะเป็น path ที่มี child แท็ปก็ยังจะ active อยู่เช่น
@@ -230,608 +220,491 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  * @param path string
  */
 const activeMenu = (path: string) => {
-  if (path == "dashboard" && route.fullPath == "/") return true;
-  // if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
-  const bool = route.fullPath.includes(`/${path}`);
+	if (path == "dashboard" && route.fullPath == "/") return true
+	// if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
+	const bool = route.fullPath.includes(`/${path}`)
 
-  return bool;
-};
+	return bool
+}
 /**
  * เป็นฟังก์ชันที่รันตลอด เพื่อให้ active ตรงตามเงื่อนไขให้เป็น true
  * @param tag string เป็นชื่อของ ตัวนั้นๆ
  */
 const activeTab = (tag: string) => {
-  return tabData.value === tag;
-};
+	return tabData.value === tag
+}
 
 /**
  * คลิกเพื่อให้ router หรือ scroll ไปยังตำแหน่งนั้นๆ
  * @param tag string เป็นชื่อของ ตัวนั้นๆ
  */
 const tagClick = (tag: string) => {
-  const hash = `#${tag}`;
-  const items = document.getElementById(tag);
-  const offset = Math.max(0, items == null ? 0 : items.offsetTop - 84);
-  //   router.replace({ hash });
-  if (route.hash !== hash) {
-    const check = activeBtn();
-    if (check) {
-      //   router.replace({ hash, position: { x: 0, y: 0 } });
-      //   router.replace({ hash }).then(() => {
-      //     setVerticalScrollPosition(window, offset, 300);
-      //   });
-      drawerR.value = !drawerR.value;
-      setVerticalScrollPosition(window, offset, 300);
-    } else {
-      setVerticalScrollPosition(window, offset, 300);
-    }
-  } else {
-    setVerticalScrollPosition(window, offset, 300);
-  }
-};
+	const hash = `#${tag}`
+	const items = document.getElementById(tag)
+	const offset = Math.max(0, items == null ? 0 : items.offsetTop - 84)
+	//   router.replace({ hash });
+	if (route.hash !== hash) {
+		const check = activeBtn()
+		if (check) {
+			//   router.replace({ hash, position: { x: 0, y: 0 } });
+			//   router.replace({ hash }).then(() => {
+			//     setVerticalScrollPosition(window, offset, 300);
+			//   });
+			drawerR.value = !drawerR.value
+			setVerticalScrollPosition(window, offset, 300)
+		} else {
+			setVerticalScrollPosition(window, offset, 300)
+		}
+	} else {
+		setVerticalScrollPosition(window, offset, 300)
+	}
+}
 
 const activeBtnPlacement = () => {
-  return route.name == "PlacementPersonalDetail" && rightActive.value;
-};
+	return route.name == "PlacementPersonalDetail" && rightActive.value
+}
 
 /**
  * logout keycloak
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
-  $q.dialog({
-    title: "ยืนยันการออกจากระบบ",
-    message: `ต้องการออกจากระบบใช้หรือไม่?`,
-    cancel: "ยกเลิก",
-    ok: "ยืนยัน",
-    persistent: true,
-  }).onOk(() => {
-    keycloak.logout();
-  });
-};
+	$q.dialog({
+		title: "ยืนยันการออกจากระบบ",
+		message: `ต้องการออกจากระบบใช้หรือไม่?`,
+		cancel: "ยกเลิก",
+		ok: "ยืนยัน",
+		persistent: true,
+	}).onOk(() => {
+		// keycloak.logout();
+	})
+}
 
 /**
  * ดิงชื่อผู้ใช้งานจาก keycloak
  */
-if (keycloak.tokenParsed != null) {
-  fullname.value = keycloak.tokenParsed.name;
-  role.value = keycloak.tokenParsed.role;
-}
+// if (keycloak.tokenParsed != null) {
+//   fullname.value = keycloak.tokenParsed.name;
+//   role.value = keycloak.tokenParsed.role;
+// }
 
 const onScroll = (scroll: ScrollType) => {
-  const { position } = scroll;
-  updateScroll(position);
-};
+	const { position } = scroll
+	updateScroll(position)
+}
 </script>
 
 <!-- โครงเว็บ -->
 <template>
-  
-  <!-- แบบเก่า design แรก -->
-  <!-- <q-layout view="lHh Lpr lff"> -->
-  <!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ  -->
-  <q-layout view="lHh LpR lff" @scroll="onScroll">
-    
-    <!-- header -->
-    <q-header flat class="bg-grey-2 text-dark" height-hint="7">
-      <q-toolbar style="padding: 0 2%">
-        
-        <q-btn
-          size="13px"
-          class="bg-grey-3"
-          flat
-          dense
-          round
-          @click="toggleBtnLeft"
-          aria-label="Menu"
-        >
-          <q-icon
-            :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'"
-            size="20px"
-            color="grey-7"
-          />
-        </q-btn>
+	<!-- แบบเก่า design แรก -->
+	<!-- <q-layout view="lHh Lpr lff"> -->
+	<!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ  -->
+	<q-layout view="lHh LpR lff" @scroll="onScroll">
+		<!-- header -->
+		<q-header flat class="bg-grey-2 text-dark" height-hint="7">
+			<q-toolbar style="padding: 0 2%">
+				<q-btn size="13px" class="bg-grey-3" flat dense round @click="toggleBtnLeft" aria-label="Menu">
+					<q-icon :name="miniState == false ? 'mdi-backburger' : 'mdi-menu-open'" size="20px" color="grey-7" />
+				</q-btn>
 
-        <q-space />
+				<q-space />
 
-        <q-btn
-          size="13px"
-          class="bg-blue-1"
-          v-if="activeBtn() || activeBtnPlacement()"
-          flat
-          dense
-          round
-          @click="toggleBtnRight"
-          aria-label="Menu"
-        >
-          <q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
-        </q-btn>
-      </q-toolbar>
-    </q-header>
-    <!-- end header -->
+				<q-btn size="13px" class="bg-blue-1" v-if="activeBtn() || activeBtnPlacement()" flat dense round @click="toggleBtnRight" aria-label="Menu">
+					<q-icon name="mdi-menu" class="rotate-180" size="20px" color="blue" />
+				</q-btn>
+			</q-toolbar>
+		</q-header>
+		<!-- end header -->
 
-    <!-- drawer -->
-    <q-drawer
-      side="left"
-      class="text-white"
-      style="background: #273238"
-      v-model="drawerL"
-      show-if-above
-      :width="260"
-      :breakpoint="1023"
-      :mini="miniState"
-    >
-      <!--  ส่วนของเมนู mini -->
-      <template v-slot:mini>
-        <q-scroll-area class="fit mini-slot cursor-pointer">
-          <q-toolbar class="q-py-md">
-           <q-img
-              src="@/assets/logo.png"
-              spinner-color="white"
-              style="height: 32px; max-width: 32px"
-            />
-            
-          </q-toolbar>
-          <q-separator color="grey-9" />
-          <!-- เมนูย่อย ตอนย่อ -->
-          <q-list padding>
-            <div v-for="(menuItem, index) in menuList" :key="index">
-              <!-- <div v-if="role.includes(menuItem.role)"> -->
-              <q-item
-                clickable
-                v-ripple
-                :active="link === menuItem.label"
-                @click="link = menuItem.label"
-                active-class="text-primary menuActiveMini text-weight-medium"
-                v-if="menuItem.key == 3 || menuItem.key == 5"
-              >
-                <div class="row items-center no-wrap">
-                  <q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
-                  <q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
-                </div>
-                <q-tooltip
-                  anchor="center right"
-                  self="center left"
-                  :offset="[10, 10]"
-                >
-                  {{ menuItem.label }}
-                </q-tooltip>
-                <q-menu
-                  anchor="top right"
-                  self="top left"
-                  :offset="[5, 0]"
-                  style="background: #273238; z-index: 9000"
-                >
-                  <q-list class="text-white q-py-sm">
-                    <div
-                      v-for="(subMenu, i) in menuItem.children"
-                      :key="i"
-                      :to="{ name: `${subMenu.path}` }"
-                    >
-                      <!-- เมนูย่อย 2 ชั้น -->
-                      <div v-if="menuItem.key == 5">
-                        <q-item dense clickable v-if="subMenu.key !== 5.1">
-                          <q-item-section>{{ subMenu.label }} </q-item-section>
-                          <q-item-section side>
-                            <q-icon name="keyboard_arrow_right" />
-                          </q-item-section>
+		<!-- drawer -->
+		<q-drawer side="left" class="text-white" style="background: #273238" v-model="drawerL" show-if-above :width="260" :breakpoint="1023" :mini="miniState">
+			<!--  ส่วนของเมนู mini -->
+			<template v-slot:mini>
+				<q-scroll-area class="fit mini-slot cursor-pointer">
+					<q-toolbar class="q-py-md">
+						<q-img src="@/assets/logo.png" spinner-color="white" style="height: 32px; max-width: 32px" />
+					</q-toolbar>
+					<q-separator color="grey-9" />
+					<!-- เมนูย่อย ตอนย่อ -->
+					<q-list padding>
+						<div v-for="(menuItem, index) in menuList" :key="index">
+							<!-- <div v-if="role.includes(menuItem.role)"> -->
+							<q-item
+								clickable
+								v-ripple
+								:active="link === menuItem.label"
+								@click="link = menuItem.label"
+								active-class="text-primary menuActiveMini text-weight-medium"
+								v-if="menuItem.key == 3 || menuItem.key == 5"
+							>
+								<div class="row items-center no-wrap">
+									<q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
+									<q-icon name="mdi-dots-vertical" size="13px" color="grey-6" />
+								</div>
+								<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
+									{{ menuItem.label }}
+								</q-tooltip>
+								<q-menu anchor="top right" self="top left" :offset="[5, 0]" style="background: #273238; z-index: 9000">
+									<q-list class="text-white q-py-sm">
+										<div v-for="(subMenu, i) in menuItem.children" :key="i" :to="{ name: `${subMenu.path}` }">
+											<!-- เมนูย่อย 2 ชั้น -->
+											<div v-if="menuItem.key == 5">
+												<q-item dense clickable v-if="subMenu.key !== 5.1">
+													<q-item-section>{{ subMenu.label }} </q-item-section>
+													<q-item-section side>
+														<q-icon name="keyboard_arrow_right" />
+													</q-item-section>
 
-                          <q-menu
-                            anchor="top end"
-                            self="top start"
-                            :offset="[5, 0]"
-                            style="background: #273238; z-index: 9000"
-                          >
-                            <q-list class="text-white q-py-sm">
-                              <q-item
-                                v-for="subMenu2 in subMenu.children"
-                                :key="subMenu2.label"
-                                :to="{ name: `${subMenu2.path}` }"
-                                dense
-                                class="q-pl-md text-body2"
-                                active-class="text-primary active-item text-weight-medium"
-                                clickable
-                              >
-                                <q-item-section>
-                                  <q-item-label>{{
-                                    subMenu2.label
-                                  }}</q-item-label>
-                                </q-item-section>
-                              </q-item>
-                            </q-list>
-                          </q-menu>
-                        </q-item>
+													<q-menu anchor="top end" self="top start" :offset="[5, 0]" style="background: #273238; z-index: 9000">
+														<q-list class="text-white q-py-sm">
+															<q-item
+																v-for="subMenu2 in subMenu.children"
+																:key="subMenu2.label"
+																:to="{ name: `${subMenu2.path}` }"
+																dense
+																class="q-pl-md text-body2"
+																active-class="text-primary active-item text-weight-medium"
+																clickable
+															>
+																<q-item-section>
+																	<q-item-label>{{ subMenu2.label }}</q-item-label>
+																</q-item-section>
+															</q-item>
+														</q-list>
+													</q-menu>
+												</q-item>
 
-                        <q-item
-                          v-else
-                          dense
-                          class="q-pl-md q-pr-xl text-body2"
-                          active-class="text-primary active-item text-weight-medium"
-                          clickable
-                          :to="{ name: `${subMenu.path}` }"
-                        >
-                          <q-item-section>
-                            <q-item-label>{{ subMenu.label }}</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </div>
-                      <!-- เมนูย่อย 1 ชั้น -->
-                      <div v-else>
-                        <q-item
-                          dense
-                          class="q-pl-md q-pr-xl text-body2"
-                          active-class="text-primary active-item text-weight-medium"
-                          clickable
-                          :to="{ name: `${subMenu.path}` }"
-                        >
-                          <q-item-section>
-                            <q-item-label>{{ subMenu.label }}</q-item-label>
-                          </q-item-section>
-                        </q-item>
-                      </div>
-                    </div>
-                  </q-list>
-                </q-menu>
-              </q-item>
-              <q-item
-                clickable
-                v-ripple
-                :to="{ name: `${menuItem.path}` }"
-                :active="link === menuItem.label"
-                @click="link = menuItem.label"
-                active-class="text-primary menuActiveMini"
-                v-else
-              >
-                <q-item-section avatar>
-                  <q-avatar size="md" font-size="20px">
-                    <q-icon :name="menuItem.icon" />
-                  </q-avatar>
-                </q-item-section>
-                <q-tooltip
-                  anchor="center right"
-                  self="center left"
-                  :offset="[10, 10]"
-                >
-                  {{ menuItem.label }}
-                </q-tooltip>
-              </q-item>
-              <!-- </div> -->
-            </div>
-          </q-list>
-        </q-scroll-area>
-      </template>
-      <!--  จบส่วนของเมนู mini -->
+												<q-item
+													v-else
+													dense
+													class="q-pl-md q-pr-xl text-body2"
+													active-class="text-primary active-item text-weight-medium"
+													clickable
+													:to="{ name: `${subMenu.path}` }"
+												>
+													<q-item-section>
+														<q-item-label>{{ subMenu.label }}</q-item-label>
+													</q-item-section>
+												</q-item>
+											</div>
+											<!-- เมนูย่อย 1 ชั้น -->
+											<div v-else>
+												<q-item dense class="q-pl-md q-pr-xl text-body2" active-class="text-primary active-item text-weight-medium" clickable :to="{ name: `${subMenu.path}` }">
+													<q-item-section>
+														<q-item-label>{{ subMenu.label }}</q-item-label>
+													</q-item-section>
+												</q-item>
+											</div>
+										</div>
+									</q-list>
+								</q-menu>
+							</q-item>
+							<q-item
+								clickable
+								v-ripple
+								:to="{ name: `${menuItem.path}` }"
+								:active="link === menuItem.label"
+								@click="link = menuItem.label"
+								active-class="text-primary menuActiveMini"
+								v-else
+							>
+								<q-item-section avatar>
+									<q-avatar size="md" font-size="20px">
+										<q-icon :name="menuItem.icon" />
+									</q-avatar>
+								</q-item-section>
+								<q-tooltip anchor="center right" self="center left" :offset="[10, 10]">
+									{{ menuItem.label }}
+								</q-tooltip>
+							</q-item>
+							<!-- </div> -->
+						</div>
+					</q-list>
+				</q-scroll-area>
+			</template>
+			<!--  จบส่วนของเมนู mini -->
 
-      <!-- ส่วนของเมนู -->
-      <q-scroll-area class="fit">
-        <q-toolbar class="q-py-md">
-          <q-toolbar-title shrink class="row items-center no-wrap">
-            <q-img
-              src="@/assets/logo.png"
-              spinner-color="white"
-              style="height: 40px; max-width: 40px"
-            />
-            <div class="row q-ml-md">
-              <div
-                style="color: #ffffff; letter-spacing: 1px"
-                class="text-body2 text-weight-bolder"
-              >
-                ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
-              </div>
-              <div class="text-caption text-white">&nbsp;กรุงเทพมหานคร</div>
-            </div>
-          </q-toolbar-title>
-        </q-toolbar>
-        <q-separator inset color="grey-9" />
-         <div class="row">
-          <div class="col-12 q-pa-md">
-          <q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
+			<!-- ส่วนของเมนู -->
+			<q-scroll-area class="fit">
+				<q-toolbar class="q-py-md">
+					<q-toolbar-title shrink class="row items-center no-wrap">
+						<q-img src="@/assets/logo.png" spinner-color="white" style="height: 40px; max-width: 40px" />
+						<div class="row q-ml-md">
+							<div style="color: #ffffff; letter-spacing: 1px" class="text-body2 text-weight-bolder">ระบบ<span class="text-primary">ทรัพยากรบุคคล</span></div>
+							<div class="text-caption text-white">&nbsp;กรุงเทพมหานคร</div>
+						</div>
+					</q-toolbar-title>
+				</q-toolbar>
+				<q-separator inset color="grey-9" />
+				<div class="row">
+					<div class="col-12 q-pa-md">
+						<q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
 							<template v-slot:prepend>
 								<q-icon name="search" />
 							</template>
 						</q-input>
-          </div>
-       </div>
-        <q-list padding>
-          <div v-for="(menuItem, index) in menuList" :key="index">
-            <!-- เมนูย่อย -->
-            <!-- <div v-if="role.includes(menuItem.role)"> -->
-            <q-expansion-item
-              group="somegroup"
-              class="menuSub"
-              expand-icon="mdi-chevron-down"
-              expanded-icon="mdi-chevron-up"
-              v-if="menuItem.key == 2"
-            >
-              <template v-slot:header>
-                <q-item-section avatar>
-                  <q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
-                </q-item-section>
-                <q-item-section>{{ menuItem.label }}</q-item-section>
-              </template>
+					</div>
+				</div>
+				<q-list padding>
+					<div v-for="(menuItem, index) in menuList" :key="index">
+						<!-- เมนูย่อย -->
+						<!-- <div v-if="role.includes(menuItem.role)"> -->
+						<q-expansion-item group="somegroup" class="menuSub" expand-icon="mdi-chevron-down" expanded-icon="mdi-chevron-up" v-if="menuItem.key == 2">
+							<template v-slot:header>
+								<q-item-section avatar>
+									<q-avatar :icon="menuItem.icon" size="md" font-size="20px" />
+								</q-item-section>
+								<q-item-section>{{ menuItem.label }}</q-item-section>
+							</template>
 
-              <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
-              <div v-if="menuItem.key == 5">
-                <div v-for="(subMenu, i) in menuItem.children" :key="i">
-                  <q-expansion-item
-                    switch-toggle-side
-                    dense-toggle
-                    :label="subMenu.label"
-                    v-if="subMenu.key !== 5.1"
-                    class="expan2"
-                    dense
-                  >
-                    <q-item
-                      dense
-                      class="menuSubHover"
-                      active-class="text-primary active-item text-weight-bold menuSubAct"
-                      clickable
-                      v-for="subMenu2 in subMenu.children"
-                      :key="subMenu2.key"
-                      :to="{ name: `${subMenu2.path}` }"
-                    >
-                      <q-item-section>
-                        <q-item-label class="font-400 subLabel"
-                          >{{ subMenu2.label }}
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-expansion-item>
-                  <q-item
-                    v-else
-                    dense
-                    class="menuSubHover"
-                    active-class="text-primary active-item text-weight-bold menuSubAct"
-                    clickable
-                    :to="{ name: `${subMenu.path}` }"
-                  >
-                    <q-item-section>
-                      <q-item-label>{{ subMenu.label }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </div>
-              </div>
-              <!-- เมนูย่อย 1 ชั้น -->
-              <q-item
-                v-else
-                dense
-                class="menuSubHover"
-                active-class="text-primary active-item text-weight-bold menuSubAct"
-                clickable
-                v-for="(subMenu, j) in menuItem.children"
-                :key="j"
-                :to="subMenu.path"
-              >
-                <q-item-section>
-                  <q-item-label class="font-400">{{
-                    subMenu.label
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-expansion-item>
+							<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
+							<div v-if="menuItem.key == 5">
+								<div v-for="(subMenu, i) in menuItem.children" :key="i">
+									<q-expansion-item switch-toggle-side dense-toggle :label="subMenu.label" v-if="subMenu.key !== 5.1" class="expan2" dense>
+										<q-item
+											dense
+											class="menuSubHover"
+											active-class="text-primary active-item text-weight-bold menuSubAct"
+											clickable
+											v-for="subMenu2 in subMenu.children"
+											:key="subMenu2.key"
+											:to="{ name: `${subMenu2.path}` }"
+										>
+											<q-item-section>
+												<q-item-label class="font-400 subLabel">{{ subMenu2.label }} </q-item-label>
+											</q-item-section>
+										</q-item>
+									</q-expansion-item>
+									<q-item v-else dense class="menuSubHover" active-class="text-primary active-item text-weight-bold menuSubAct" clickable :to="{ name: `${subMenu.path}` }">
+										<q-item-section>
+											<q-item-label>{{ subMenu.label }}</q-item-label>
+										</q-item-section>
+									</q-item>
+								</div>
+							</div>
+							<!-- เมนูย่อย 1 ชั้น -->
+							<q-item
+								v-else
+								dense
+								class="menuSubHover"
+								active-class="text-primary active-item text-weight-bold menuSubAct"
+								clickable
+								v-for="(subMenu, j) in menuItem.children"
+								:key="j"
+								:to="subMenu.path"
+							>
+								<q-item-section>
+									<q-item-label class="font-400">{{ subMenu.label }}</q-item-label>
+								</q-item-section>
+							</q-item>
+						</q-expansion-item>
 
-            <!-- เมนูปกติ -->
-            
-            <q-item
-              class="text-weight-medium menu"
-              :active="activeMenu(menuItem.path)"
-              active-class="text-primary active-item text-weight-bold menuActive"
-              :to="{ name: `${menuItem.path}` }"
-              clickable
-              v-ripple
-              dense
-              exact
-              v-else
-            >
-              <q-item-section avatar>
-                <q-avatar size="md" font-size="20px">
-                  <q-icon
-                    :name="
-                      menuItem.key === active
-                        ? menuItem.activeIcon
-                        : menuItem.icon
-                    "
-                  />
-                </q-avatar>
-              </q-item-section>
+						<!-- เมนูปกติ -->
 
-              <q-item-section>
-                <q-item-label>{{ menuItem.label }}</q-item-label>
-              </q-item-section>
-            </q-item>
-            <!-- </div> -->
-          </div>
-        </q-list>
-      </q-scroll-area>
-    </q-drawer>
+						<q-item
+							class="text-weight-medium menu"
+							:active="activeMenu(menuItem.path)"
+							active-class="text-primary active-item text-weight-bold menuActive"
+							:to="{ name: `${menuItem.path}` }"
+							clickable
+							v-ripple
+							dense
+							exact
+							v-else
+						>
+							<q-item-section avatar>
+								<q-avatar size="md" font-size="20px">
+									<q-icon :name="menuItem.key === active ? menuItem.activeIcon : menuItem.icon" />
+								</q-avatar>
+							</q-item-section>
 
-    <!-- drawer page login -->
-    <q-drawer
-      v-if="menuRight"
-      side="right"
-      class="bg-grey-2"
-      show-if-above
-      v-model="drawerR"
-      :width="250"
-      :breakpoint="1023"
-    >
-      <q-scroll-area class="fit">
-        <q-list padding>
-          <div v-for="(tabItem, index) in listTab" :key="index">
-            <q-item
-              :id="'tab--' + tabItem.tag"
-              class="tabNative"
-              active-class="text-blue-7 active-item text-weight-medium tabActive"
-              :active="activeTab(tabItem.tag)"
-              clickable
-              v-ripple
-              dense
-              exact
-              @click="tagClick(tabItem.tag)"
-            >
-              <q-item-section>
-                <q-item-label
-                  ><q-icon size="11px" name="mdi-circle-medium" />
-                  <span class="q-pl-xs">{{ tabItem.label }}</span>
-                </q-item-label>
-              </q-item-section>
-            </q-item>
-            <div v-if="route.name == 'recruitmain'">
-              <q-item
-                v-if="route.name == 'recruitmain'"
-                v-for="(childItem, childIndex) in tabItem.childern"
-                :key="'child-' + childIndex"
-                :id="'tab--' + childItem.tag"
-                class="tabNative child-tab"
-                active-class="text-blue-7 active-item text-weight-medium tabActive"
-                :active="activeTab(childItem.tag)"
-                clickable
-                v-ripple
-                dense
-                exact
-                @click="tagClick(childItem.tag)"
-              >
-                <q-item-section>
-                  <q-item-label>
-                    <!-- <q-icon size="11px" name="mdi-circle-small" /> -->
-                    <span class="q-pl-xl">{{ childItem.label }}</span>
-                  </q-item-label>
-                </q-item-section>
-              </q-item>
-            </div>
-          </div>
-        </q-list>
-      </q-scroll-area>
-    </q-drawer>
+							<q-item-section>
+								<q-item-label>{{ menuItem.label }}</q-item-label>
+							</q-item-section>
+						</q-item>
+						<!-- </div> -->
+					</div>
+				</q-list>
+			</q-scroll-area>
+		</q-drawer>
 
-    
+		<!-- drawer page login -->
+		<q-drawer v-if="menuRight" side="right" class="bg-grey-2" show-if-above v-model="drawerR" :width="250" :breakpoint="1023">
+			<q-scroll-area class="fit">
+				<q-list padding>
+					<div v-for="(tabItem, index) in listTab" :key="index">
+						<q-item
+							:id="'tab--' + tabItem.tag"
+							class="tabNative"
+							active-class="text-blue-7 active-item text-weight-medium tabActive"
+							:active="activeTab(tabItem.tag)"
+							clickable
+							v-ripple
+							dense
+							exact
+							@click="tagClick(tabItem.tag)"
+						>
+							<q-item-section>
+								<q-item-label
+									><q-icon size="11px" name="mdi-circle-medium" />
+									<span class="q-pl-xs">{{ tabItem.label }}</span>
+								</q-item-label>
+							</q-item-section>
+						</q-item>
+						<div v-if="route.name == 'recruitmain'">
+							<q-item
+								v-if="route.name == 'recruitmain'"
+								v-for="(childItem, childIndex) in tabItem.childern"
+								:key="'child-' + childIndex"
+								:id="'tab--' + childItem.tag"
+								class="tabNative child-tab"
+								active-class="text-blue-7 active-item text-weight-medium tabActive"
+								:active="activeTab(childItem.tag)"
+								clickable
+								v-ripple
+								dense
+								exact
+								@click="tagClick(childItem.tag)"
+							>
+								<q-item-section>
+									<q-item-label>
+										<!-- <q-icon size="11px" name="mdi-circle-small" /> -->
+										<span class="q-pl-xl">{{ childItem.label }}</span>
+									</q-item-label>
+								</q-item-section>
+							</q-item>
+						</div>
+					</div>
+				</q-list>
+			</q-scroll-area>
+		</q-drawer>
 
-    <q-page-container class="bg-grey-2">
-      <q-page style="padding: 0 2%">
-        <router-view :key="$route.fullPath" />
-      </q-page>
-    </q-page-container>
-    <full-loader :visibility="loader" />
-  </q-layout>
+		<q-page-container class="bg-grey-2">
+			<q-page style="padding: 0 2%">
+				<router-view :key="$route.fullPath" />
+			</q-page>
+		</q-page-container>
+		<full-loader :visibility="loader" />
+	</q-layout>
 </template>
 
 <style>
 .menuSub .q-item__section--avatar,
 .menu .q-item__section--avatar {
-  min-width: 0px;
+	min-width: 0px;
 }
 .menu {
-  padding-bottom: 5px;
-  padding-top: 5px;
-  border-radius: 0 100px 100px 0;
-  margin-right: 2%;
+	padding-bottom: 5px;
+	padding-top: 5px;
+	border-radius: 0 100px 100px 0;
+	margin-right: 2%;
 }
 
 .menuActive {
-  background: #212a2f;
-  border-radius: 0 100px 100px 0;
-  margin-right: 2%;
+	background: #212a2f;
+	border-radius: 0 100px 100px 0;
+	margin-right: 2%;
 }
 
 .menuActiveMini {
-  background: #212a2f;
+	background: #212a2f;
 }
 .menuSub .q-item {
-  border-radius: 0 100px 100px 0;
-  margin-right: 2%;
-  font-weight: 500;
+	border-radius: 0 100px 100px 0;
+	margin-right: 2%;
+	font-weight: 500;
 }
 .expan2 .q-item {
-  padding-left: 10%;
+	padding-left: 10%;
 }
 .subLabel {
-  white-space: nowrap;
-  width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 160px;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .font-400 {
-  font-weight: 400;
+	font-weight: 400;
 }
 .expan2 .menuSubHover {
-  padding-left: 30%;
-  border-radius: 20px;
+	padding-left: 30%;
+	border-radius: 20px;
 }
 .menuSubHover {
-  padding-left: 25%;
-  border-radius: 20px;
+	padding-left: 25%;
+	border-radius: 20px;
 }
 .menuSub .q-expansion-item__content {
-  background: #212a2f;
-  padding: 5px 0px;
-  margin-bottom: 5px;
+	background: #212a2f;
+	padding: 5px 0px;
+	margin-bottom: 5px;
 }
 .tabNative {
-  color: grey;
-  padding-left: 8%;
-  border-radius: 100px 0px 0px 100px;
+	color: grey;
+	padding-left: 8%;
+	border-radius: 100px 0px 0px 100px;
 }
 
 .tabActive {
-  padding-left: 8%;
-  background: #e4f2ff;
-  border-radius: 100px 0px 0px 100px;
+	padding-left: 8%;
+	background: #e4f2ff;
+	border-radius: 100px 0px 0px 100px;
 }
 
 .q-card {
-  box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
+	box-shadow: 3px 3px 20px -10px rgba(151, 150, 150, 0.261) !important;
 }
 .q-card--bordered {
-  border: 1px solid #ededed;
-  box-shadow: none !important;
+	border: 1px solid #ededed;
+	box-shadow: none !important;
 }
 .q-menu {
-  box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
+	box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
 
 .toptitle {
-  font-size: 1.2rem;
-  font-weight: bold;
-  margin-bottom: 1%;
+	font-size: 1.2rem;
+	font-weight: bold;
+	margin-bottom: 1%;
 }
 
 .q-field--outlined .q-field__control {
-  border-radius: 50px;
+	border-radius: 50px;
 }
 
 .q-field--outlined .q-field__control:before {
-  border-color: #c8d3db;
+	border-color: #c8d3db;
 }
 .btnManu {
-  min-height: 48px;
-  border-radius: 0px 100px 100px 0px;
+	min-height: 48px;
+	border-radius: 0px 100px 100px 0px;
 }
 
 .q-field--outlined .q-icon {
-  color: #7474747f;
+	color: #7474747f;
 }
 .q-card__actions .q-btn--rectangle {
-  padding: 0 14px !important;
+	padding: 0 14px !important;
 }
 
 /* custom scrollbar */
 ::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+	width: 12px;
+	height: 12px;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: transparent;
+	background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #d6dee1;
-  border-radius: 20px;
-  border: 3px solid transparent;
-  background-clip: content-box;
+	background-color: #d6dee1;
+	border-radius: 20px;
+	border: 3px solid transparent;
+	background-clip: content-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #a8bbbf;
+	background-color: #a8bbbf;
 }
 </style>