add permission
This commit is contained in:
parent
b9b26f18de
commit
2842279165
9 changed files with 101 additions and 433 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { scroll, useQuasar } from "quasar";
|
||||
|
|
@ -15,17 +15,12 @@ import type {
|
|||
notiType,
|
||||
optionType,
|
||||
} from "../interface/request/main/main";
|
||||
import {
|
||||
menuList,
|
||||
tabList,
|
||||
tabListPlacement,
|
||||
} from "../interface/request/main/main";
|
||||
import { useroleUserDataStore } from "@/stores/roleUser";
|
||||
import { menuList } from "../interface/request/main/main";
|
||||
// import { useroleUserDataStore } from "@/stores/roleUser";
|
||||
|
||||
const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll;
|
||||
const { setVerticalScrollPosition } = scroll;
|
||||
const store = useDataStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const link = ref<string>("");
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const {
|
||||
|
|
@ -37,12 +32,12 @@ const {
|
|||
date2Thai,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
const DataStore = useroleUserDataStore();
|
||||
const { fetchroleUser } = DataStore;
|
||||
// const DataStore = useroleUserDataStore();
|
||||
// const { fetchroleUser } = DataStore;
|
||||
|
||||
const id = ref<string>("");
|
||||
const $q = useQuasar();
|
||||
const { tabData, loader } = storeToRefs(store);
|
||||
const { loader } = storeToRefs(store);
|
||||
const { changeTab } = store;
|
||||
const miniState = ref<boolean>(false);
|
||||
const drawerR = ref<boolean>(false);
|
||||
|
|
@ -53,7 +48,6 @@ const drawerL = ref<boolean>(false);
|
|||
const fullname = ref<string>("");
|
||||
const role = ref<string[]>([]);
|
||||
const notiTrigger = ref<boolean>(false);
|
||||
const text = ref<string>("");
|
||||
|
||||
const notiList = ref<notiType[]>([]);
|
||||
const options = ref<optionType[]>([
|
||||
|
|
@ -127,13 +121,6 @@ const getDataNotification = async (index: number, type: string) => {
|
|||
.finally(() => {});
|
||||
};
|
||||
|
||||
/**
|
||||
* ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ
|
||||
*/
|
||||
const tabScroll = () => {
|
||||
return route.name == "registryDetail";
|
||||
};
|
||||
|
||||
/**
|
||||
* toggleBtnRight ปุ่มย่อ ขยาย drawer ขวา
|
||||
*/
|
||||
|
|
@ -159,11 +146,8 @@ const toggleBtnLeft = () => {
|
|||
*/
|
||||
const onScroll = (scroll: ScrollType) => {
|
||||
const { position } = scroll;
|
||||
if (route.name == "PlacementPersonalDetail") {
|
||||
updateScrollPlacement(position);
|
||||
} else {
|
||||
updateScroll(position);
|
||||
}
|
||||
|
||||
updateScroll(position);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -176,32 +160,7 @@ const updateScroll = (position: number) => {
|
|||
}
|
||||
|
||||
let last;
|
||||
/**
|
||||
* วนหา id ของ div นั้น
|
||||
*/
|
||||
for (const i in tabList) {
|
||||
const section = tabList[i];
|
||||
const item = document.getElementById(section.tag);
|
||||
/**
|
||||
* วนหา 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 ให้เป็นแทปสีฟ้า
|
||||
|
|
@ -230,9 +189,9 @@ const activeBtn = () => {
|
|||
* ยังจับ boolean ผิด จึงต้อง set
|
||||
*/
|
||||
onMounted(async () => {
|
||||
if (keycloak.tokenParsed) {
|
||||
await fetchroleUser(keycloak.tokenParsed.role);
|
||||
}
|
||||
// if (keycloak.tokenParsed) {
|
||||
// await fetchroleUser(keycloak.tokenParsed.role);
|
||||
// }
|
||||
await fetchmsgNoread();
|
||||
// await getDataNotification(1, "NOMAL");
|
||||
myEventHandler(null, false);
|
||||
|
|
@ -288,119 +247,10 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
|
|||
* @param path string
|
||||
*/
|
||||
const activeMenu = (path: string) => {
|
||||
// if (path == "dashboard" && route.fullPath == "/") return true;
|
||||
// if (path == "registry" && route.fullPath == "/registry-employee")
|
||||
// return false;
|
||||
// if (path == "registry" && route.fullPath.includes(`/registry-employee/edit`))
|
||||
// return false;
|
||||
// if (path == "registry" && route.fullPath.includes(`/registry-employee/add`))
|
||||
// return false;
|
||||
|
||||
// if (path == "registry" && route.fullPath == "/") return false;
|
||||
// if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
|
||||
// const bool = route.fullPath.includes(`/${path}`) || route.name === path;
|
||||
const bool = route.name === path;
|
||||
|
||||
return bool;
|
||||
};
|
||||
/**
|
||||
* เป็นฟังก์ชันที่รันตลอด เพื่อให้ active ตรงตามเงื่อนไขให้เป็น true
|
||||
* @param tag string เป็นชื่อของ ตัวนั้นๆ
|
||||
*/
|
||||
const activeTab = (tag: string) => {
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
//**** Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
|
||||
const tabScrollPlacement = () => {
|
||||
return route.name == "PlacementPersonalDetail";
|
||||
};
|
||||
|
||||
const updateScrollPlacement = (position: number) => {
|
||||
if (position === void 0) {
|
||||
position = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
}
|
||||
|
||||
let last;
|
||||
for (const i in tabListPlacement) {
|
||||
const section = tabListPlacement[i];
|
||||
const item = document.getElementById(section.tag);
|
||||
|
||||
if (item === null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (item.offsetTop >= position + 100) {
|
||||
if (last === void 0) {
|
||||
last = section.tag;
|
||||
}
|
||||
break;
|
||||
} else {
|
||||
last = section.tag;
|
||||
}
|
||||
}
|
||||
|
||||
if (last !== void 0) {
|
||||
changeTab(last);
|
||||
const tocEl = document.getElementById("tab--" + last);
|
||||
if (tocEl) {
|
||||
tocEl.scrollIntoView({ block: "nearest" });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const activeBtnPlacement = () => {
|
||||
return route.name == "PlacementPersonalDetail" && rightActive.value;
|
||||
};
|
||||
|
||||
const activeTabPlacement = (tag: string) => {
|
||||
return tabData.value == tag;
|
||||
};
|
||||
|
||||
const tagClickPlacement = (tag: string) => {
|
||||
const hash = `#${tag}`;
|
||||
const items = document.getElementById(tag);
|
||||
const offset = Math.max(0, items == null ? 0 : items.offsetTop + 50);
|
||||
// router.replace({ hash });
|
||||
if (route.hash !== hash) {
|
||||
const checkPlacement = activeBtnPlacement();
|
||||
if (checkPlacement) {
|
||||
drawerR.value = !drawerR.value;
|
||||
setVerticalScrollPosition(window, offset, 300);
|
||||
} else {
|
||||
setVerticalScrollPosition(window, offset, 300);
|
||||
}
|
||||
} else {
|
||||
setVerticalScrollPosition(window, offset, 300);
|
||||
}
|
||||
};
|
||||
//**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
|
||||
|
||||
/**
|
||||
* logout keycloak
|
||||
|
|
@ -419,6 +269,8 @@ const doLogout = () => {
|
|||
* ดิงชื่อผู้ใช้งานจาก keycloak
|
||||
*/
|
||||
if (keycloak.tokenParsed != null) {
|
||||
console.log("tokenParsed===>", keycloak.tokenParsed);
|
||||
|
||||
fullname.value = keycloak.tokenParsed.name;
|
||||
role.value = keycloak.tokenParsed.role;
|
||||
}
|
||||
|
|
@ -445,7 +297,6 @@ const clickDelete = async (id: string, index: number) => {
|
|||
|
||||
const totalInbox = ref<number>(0);
|
||||
const totalNoti = ref<number>(0);
|
||||
const round = ref<number>(0);
|
||||
const page = ref<number>(0);
|
||||
|
||||
function onLoad(index: any, done: any) {
|
||||
|
|
@ -687,7 +538,7 @@ watch(
|
|||
<q-btn
|
||||
size="13px"
|
||||
class="bg-blue-1"
|
||||
v-if="activeBtn() || activeBtnPlacement()"
|
||||
v-if="activeBtn()"
|
||||
flat
|
||||
dense
|
||||
round
|
||||
|
|
@ -725,7 +576,8 @@ watch(
|
|||
<!-- เมนูย่อย ตอนย่อ -->
|
||||
<q-list padding>
|
||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<div v-if="role.includes(menuItem.role)">
|
||||
<!-- v-if="role.includes(menuItem.role)" -->
|
||||
<div>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
|
|
@ -910,7 +762,8 @@ watch(
|
|||
<q-list padding>
|
||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<!-- เมนูย่อย -->
|
||||
<div v-if="role.includes(menuItem.role)">
|
||||
<!-- v-if="role.includes(menuItem.role)" -->
|
||||
<div>
|
||||
<q-expansion-item
|
||||
group="somegroup"
|
||||
class="menuSub"
|
||||
|
|
@ -1048,83 +901,6 @@ watch(
|
|||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
|
||||
<!-- drawer page registry/:id -->
|
||||
<q-drawer
|
||||
side="right"
|
||||
class="bg-grey-2"
|
||||
show-if-above
|
||||
v-if="tabScroll()"
|
||||
v-model="drawerR"
|
||||
:width="220"
|
||||
:breakpoint="1023"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding>
|
||||
<q-item
|
||||
v-for="(tabItem, index) in tabList"
|
||||
:key="index"
|
||||
: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>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
|
||||
<!-- drawer page placement2/detail/:id -->
|
||||
<q-drawer
|
||||
side="right"
|
||||
class="bg-grey-2"
|
||||
show-if-above
|
||||
v-if="tabScrollPlacement()"
|
||||
v-model="drawerR"
|
||||
:width="220"
|
||||
:breakpoint="1023"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<q-list padding>
|
||||
<q-item
|
||||
v-for="(tabItem, index) in tabListPlacement"
|
||||
:key="index"
|
||||
:id="'tab--' + tabItem.tag"
|
||||
class="tabNative"
|
||||
active-class="text-blue-7 active-item text-weight-medium tabActive"
|
||||
:active="activeTabPlacement(tabItem.tag)"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
exact
|
||||
@click="tagClickPlacement(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>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<!-- drawer -->
|
||||
|
||||
<q-page-container class="bg-grey-2">
|
||||
<q-page style="padding: 0 2%">
|
||||
<router-view :key="$route.fullPath" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue