permissionsMenu
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
cc36f52e55
commit
007df38109
4 changed files with 204 additions and 73 deletions
|
|
@ -112,4 +112,10 @@ export default {
|
|||
* รายการคำร้องขอแก้ไขทะเบียนประวัติ
|
||||
*/
|
||||
requestEdit: `${orgProfile}/edit/`,
|
||||
|
||||
/**
|
||||
* รายการเมนู
|
||||
*/
|
||||
orgPermissions: `${organization}/permission/menu`,
|
||||
|
||||
};
|
||||
|
|
|
|||
21
src/interface/response/main.ts
Normal file
21
src/interface/response/main.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
interface ListMenu {
|
||||
id: string;
|
||||
icon: string;
|
||||
order: number;
|
||||
parentId?: string | null;
|
||||
path: string;
|
||||
sysDescription: string;
|
||||
sysName: string;
|
||||
children?: ListMenu[];
|
||||
}
|
||||
|
||||
interface ChildConfig {
|
||||
sysName?: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
interface ChildLevelTree {
|
||||
[key: string]: ChildConfig[];
|
||||
}
|
||||
|
||||
export type { ListMenu, ChildLevelTree, ChildConfig };
|
||||
115
src/stores/menuList.ts
Normal file
115
src/stores/menuList.ts
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { ref } from "vue";
|
||||
|
||||
import type {
|
||||
ListMenu,
|
||||
ChildLevelTree,
|
||||
ChildConfig,
|
||||
} from "@/interface/response/main";
|
||||
|
||||
export const useMenuDataStore = defineStore("menuUse", () => {
|
||||
const menuList = ref<ListMenu[]>([
|
||||
{
|
||||
id: "dashboard",
|
||||
order: 0,
|
||||
icon: "mdi-home-variant-outline",
|
||||
sysName: "หน้าแรก",
|
||||
sysDescription: "หน้าแรก",
|
||||
path: "dashboard",
|
||||
parentId: null,
|
||||
children: [],
|
||||
},
|
||||
]);
|
||||
|
||||
const childLevelTree = ref<ChildLevelTree>({
|
||||
SYS_EVA_INDICATOR: [
|
||||
{
|
||||
sysName: "ตามแผน",
|
||||
path: "KPIIndicatorByPlan",
|
||||
},
|
||||
{
|
||||
sysName: "ตามตำแหน่ง",
|
||||
path: "KPIIndicatorByRole",
|
||||
},
|
||||
{
|
||||
sysName: "งานที่ได้รับมอบหมาย",
|
||||
path: "KPIAssignment",
|
||||
},
|
||||
],
|
||||
SYS_EXAM_CONTEST: [
|
||||
{
|
||||
sysName: "จัดการรอบสอบแข่งขัน",
|
||||
path: "competePeriod",
|
||||
},
|
||||
{
|
||||
sysName: "สถิติสมัครสอบแข่งขัน",
|
||||
path: "competePeriodStat",
|
||||
},
|
||||
],
|
||||
SYS_EXAM_SELECT: [
|
||||
{
|
||||
sysName: "จัดการรอบคัดเลือก",
|
||||
path: "qualifyPeriod",
|
||||
},
|
||||
{
|
||||
sysName: "จัดการรอบคัดเลือกคนพิการ",
|
||||
path: "disablePeriod",
|
||||
},
|
||||
{
|
||||
sysName: "จัดการรายชื่อคัดเลือก",
|
||||
path: "manage",
|
||||
},
|
||||
{
|
||||
sysName: "สถิติสมัครคัดเลือก",
|
||||
path: "qualifyPeriodStat",
|
||||
},
|
||||
{
|
||||
sysName: "สถิติสมัครคัดเลือกคนพิการ",
|
||||
path: "qualifyPeriodStatDisable",
|
||||
},
|
||||
],
|
||||
SYS_DISCIPLINE_INFO: [
|
||||
{
|
||||
sysName: "กรรมการ",
|
||||
path: "disciplineDirector",
|
||||
},
|
||||
{
|
||||
sysName: "ช่องทางการร้องเรียน",
|
||||
path: "disciplineChannel",
|
||||
},
|
||||
],
|
||||
SYS_EVA_INFO: [
|
||||
{
|
||||
sysName: "กรรมการ",
|
||||
path: "evaluateDirector",
|
||||
},
|
||||
{
|
||||
sysName: "การประชุม",
|
||||
path: "evaluateMeeting",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
function fetchListMenu(data: ListMenu[]) {
|
||||
data.forEach((item) => {
|
||||
if (item.children && item.children.length !== 0) {
|
||||
item.children.forEach((q: ListMenu) => {
|
||||
const config: any = childLevelTree.value[q.id];
|
||||
if (config) {
|
||||
if (!q.children) {
|
||||
q.children = [];
|
||||
}
|
||||
// เพิ้ม ข้อมูลเลเวล 3
|
||||
q.children.push(...config);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
menuList.value.push(...data);
|
||||
}
|
||||
|
||||
return {
|
||||
fetchListMenu,
|
||||
menuList,
|
||||
};
|
||||
});
|
||||
|
|
@ -6,6 +6,7 @@ import { useDataStore } from "@/stores/data";
|
|||
import { storeToRefs } from "pinia";
|
||||
import { scroll, useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useMenuDataStore } from "@/stores/menuList";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -28,6 +29,7 @@ const route = useRoute();
|
|||
const router = useRouter();
|
||||
const link = ref<string>("");
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const storeMenu = useMenuDataStore();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
|
|
@ -230,10 +232,13 @@ const activeBtn = () => {
|
|||
* ยังจับ boolean ผิด จึงต้อง set
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fetchSys();
|
||||
|
||||
if (keycloak.tokenParsed) {
|
||||
await fetchroleUser(keycloak.tokenParsed.role);
|
||||
}
|
||||
await fetchmsgNoread();
|
||||
|
||||
// await getDataNotification(1, "NOMAL");
|
||||
myEventHandler(null, false);
|
||||
window.addEventListener("resize", (e: any) => {
|
||||
|
|
@ -499,6 +504,20 @@ const handleButtonClick = () => {
|
|||
console.log("No manual available for this page:", currentPath);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* function fetch รายการเมนูทั้งหมด
|
||||
*/
|
||||
function fetchSys() {
|
||||
http
|
||||
.get(config.API.orgPermissions)
|
||||
.then((res) => {
|
||||
storeMenu.fetchListMenu(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- โครงเว็บ -->
|
||||
|
|
@ -762,28 +781,15 @@ const handleButtonClick = () => {
|
|||
<q-separator color="grey-9" />
|
||||
<!-- เมนูย่อย ตอนย่อ -->
|
||||
<q-list padding>
|
||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<div v-if="role.includes(menuItem.role)">
|
||||
<div v-for="(menuItem, index) in storeMenu.menuList" :key="index">
|
||||
<div>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === menuItem.label"
|
||||
@click="link = menuItem.label"
|
||||
:active="link === menuItem.sysName"
|
||||
@click="link = menuItem.sysName"
|
||||
active-class="text-primary menuActiveMini text-weight-medium"
|
||||
v-if="
|
||||
menuItem.key == 2 ||
|
||||
menuItem.key == 0 ||
|
||||
menuItem.key == 7 ||
|
||||
menuItem.key == 8 ||
|
||||
menuItem.key == 9 ||
|
||||
menuItem.key == 10 ||
|
||||
menuItem.key == 11 ||
|
||||
menuItem.key == 12 ||
|
||||
menuItem.key == 13 ||
|
||||
menuItem.key == 14 ||
|
||||
menuItem.key == 15 ||
|
||||
menuItem.key == 16
|
||||
"
|
||||
v-if="menuItem.children && menuItem.children.length !== 0"
|
||||
>
|
||||
<div class="row items-center no-wrap">
|
||||
<q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
|
||||
|
|
@ -798,7 +804,7 @@ const handleButtonClick = () => {
|
|||
self="center left"
|
||||
:offset="[10, 10]"
|
||||
>
|
||||
{{ menuItem.label }}
|
||||
{{ menuItem.sysName }}
|
||||
</q-tooltip>
|
||||
<q-menu
|
||||
anchor="top right"
|
||||
|
|
@ -815,24 +821,25 @@ const handleButtonClick = () => {
|
|||
<!-- เมนูย่อย 2 ชั้น -->
|
||||
<div
|
||||
v-if="
|
||||
menuItem.key == 2 ||
|
||||
menuItem.key == 7 ||
|
||||
menuItem.key == 12 ||
|
||||
menuItem.key == 13
|
||||
menuItem.id == 'SYS_EVA_METADATA' ||
|
||||
menuItem.id == 'SYS_EXAM' ||
|
||||
menuItem.id == 'SYS_DISCIPLINE' ||
|
||||
menuItem.id == 'SYS_EVA'
|
||||
"
|
||||
>
|
||||
<q-item
|
||||
dense
|
||||
clickable
|
||||
v-if="
|
||||
subMenu.key !== 2.0 &&
|
||||
subMenu.key !== 7.1 &&
|
||||
subMenu.key !== 12.0 &&
|
||||
subMenu.key !== 13.0
|
||||
subMenu.id == 'SYS_EVA_INDICATOR' ||
|
||||
subMenu.id == 'SYS_EXAM_CONTEST' ||
|
||||
subMenu.id == 'SYS_EXAM_SELECT' ||
|
||||
subMenu.id == 'SYS_DISCIPLINE_INFO' ||
|
||||
subMenu.id == 'SYS_EVA_INFO'
|
||||
"
|
||||
>
|
||||
<q-item-section
|
||||
>{{ subMenu.label }}
|
||||
>{{ subMenu.sysName }}
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="keyboard_arrow_right" />
|
||||
|
|
@ -847,7 +854,7 @@ const handleButtonClick = () => {
|
|||
<q-list class="text-white q-py-sm">
|
||||
<q-item
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.label"
|
||||
:key="subMenu2.sysName"
|
||||
:to="{ name: `${subMenu2.path}` }"
|
||||
dense
|
||||
class="q-pl-md text-body2"
|
||||
|
|
@ -856,7 +863,7 @@ const handleButtonClick = () => {
|
|||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{
|
||||
subMenu2.label
|
||||
subMenu2.sysName
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -873,7 +880,7 @@ const handleButtonClick = () => {
|
|||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
||||
<q-item-label>{{ subMenu.sysName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
|
|
@ -887,7 +894,7 @@ const handleButtonClick = () => {
|
|||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ subMenu.label }}</q-item-label>
|
||||
<q-item-label>{{ subMenu.sysName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
|
|
@ -899,8 +906,8 @@ const handleButtonClick = () => {
|
|||
clickable
|
||||
v-ripple
|
||||
:to="{ name: `${menuItem.path}` }"
|
||||
:active="link === menuItem.label"
|
||||
@click="link = menuItem.label"
|
||||
:active="link === menuItem.sysName"
|
||||
@click="link = menuItem.sysName"
|
||||
active-class="text-primary menuActiveMini"
|
||||
v-else
|
||||
>
|
||||
|
|
@ -914,7 +921,7 @@ const handleButtonClick = () => {
|
|||
self="center left"
|
||||
:offset="[10, 10]"
|
||||
>
|
||||
{{ menuItem.label }}
|
||||
{{ menuItem.sysName }}
|
||||
</q-tooltip>
|
||||
</q-item>
|
||||
</div>
|
||||
|
|
@ -946,28 +953,15 @@ const handleButtonClick = () => {
|
|||
</q-toolbar>
|
||||
<q-separator inset color="grey-9" />
|
||||
<q-list padding>
|
||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<div v-for="(menuItem, index) in storeMenu.menuList" :key="index">
|
||||
<!-- เมนูย่อย -->
|
||||
<div v-if="role.includes(menuItem.role)">
|
||||
<div>
|
||||
<q-expansion-item
|
||||
group="somegroup"
|
||||
class="menuSub"
|
||||
expand-icon="mdi-chevron-down"
|
||||
expanded-icon="mdi-chevron-up"
|
||||
v-if="
|
||||
menuItem.key == 2 ||
|
||||
menuItem.key == 0 ||
|
||||
menuItem.key == 7 ||
|
||||
menuItem.key == 8 ||
|
||||
menuItem.key == 9 ||
|
||||
menuItem.key == 10 ||
|
||||
menuItem.key == 11 ||
|
||||
menuItem.key == 12 ||
|
||||
menuItem.key == 13 ||
|
||||
menuItem.key == 14 ||
|
||||
menuItem.key == 15 ||
|
||||
menuItem.key == 16
|
||||
"
|
||||
v-if="menuItem.children && menuItem.children.length !== 0"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<q-item-section avatar>
|
||||
|
|
@ -977,28 +971,29 @@ const handleButtonClick = () => {
|
|||
font-size="20px"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>{{ menuItem.label }}</q-item-section>
|
||||
<q-item-section>{{ menuItem.sysName }}</q-item-section>
|
||||
</template>
|
||||
|
||||
<!-- เมนูย่อย 2 ชั้น (สรรหา) -->
|
||||
<div
|
||||
v-if="
|
||||
menuItem.key == 2 ||
|
||||
menuItem.key == 7 ||
|
||||
menuItem.key == 12 ||
|
||||
menuItem.key == 13
|
||||
menuItem.id == 'SYS_EVA_METADATA' ||
|
||||
menuItem.id == 'SYS_EXAM' ||
|
||||
menuItem.id == 'SYS_DISCIPLINE' ||
|
||||
menuItem.id == 'SYS_EVA'
|
||||
"
|
||||
>
|
||||
<div v-for="(subMenu, i) in menuItem.children" :key="i">
|
||||
<q-expansion-item
|
||||
switch-toggle-side
|
||||
dense-toggle
|
||||
:label="subMenu.label"
|
||||
:label="subMenu.sysName"
|
||||
v-if="
|
||||
subMenu.key !== 2.0 &&
|
||||
subMenu.key !== 7.1 &&
|
||||
subMenu.key !== 12.0 &&
|
||||
subMenu.key !== 13.0
|
||||
subMenu.id == 'SYS_EVA_INDICATOR' ||
|
||||
subMenu.id == 'SYS_EXAM_CONTEST' ||
|
||||
subMenu.id == 'SYS_EXAM_SELECT' ||
|
||||
subMenu.id == 'SYS_DISCIPLINE_INFO' ||
|
||||
subMenu.id == 'SYS_EVA_INFO'
|
||||
"
|
||||
class="expan2"
|
||||
dense
|
||||
|
|
@ -1009,12 +1004,12 @@ const handleButtonClick = () => {
|
|||
active-class="text-primary active-item text-weight-bold menuSubAct"
|
||||
clickable
|
||||
v-for="subMenu2 in subMenu.children"
|
||||
:key="subMenu2.key"
|
||||
:key="subMenu2.id"
|
||||
:to="{ name: `${subMenu2.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400 subLabel"
|
||||
>{{ subMenu2.label }}
|
||||
>{{ subMenu2.sysName }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -1028,7 +1023,7 @@ const handleButtonClick = () => {
|
|||
:to="{ name: `${subMenu.path}` }"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ subMenu.label }} </q-item-label>
|
||||
<q-item-label>{{ subMenu.sysName }} </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
|
|
@ -1046,7 +1041,7 @@ const handleButtonClick = () => {
|
|||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-400">{{
|
||||
subMenu.label
|
||||
subMenu.sysName
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
|
@ -1066,18 +1061,12 @@ const handleButtonClick = () => {
|
|||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar size="md" font-size="20px">
|
||||
<q-icon
|
||||
:name="
|
||||
menuItem.key === active
|
||||
? menuItem.activeIcon
|
||||
: menuItem.icon
|
||||
"
|
||||
/>
|
||||
<q-icon :name="menuItem.icon" />
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>{{ menuItem.label }}</q-item-label>
|
||||
<q-item-label>{{ menuItem.sysName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue