sub mini menu
This commit is contained in:
setthawutttty
parent
f8998cc43a
commit
6500751044
3 changed files with 316 additions and 210 deletions
425
public/toc.json
425
public/toc.json
|
|
@ -1,214 +1,219 @@
|
|||
[{
|
||||
"icon": "mdi-home-variant-outline",
|
||||
"activeIcon": "mdi-home-variant",
|
||||
"label": "หน้าแรก",
|
||||
"path": "/"
|
||||
},
|
||||
{
|
||||
"icon": "mdi-file-outline",
|
||||
"activeIcon": "mdi-file",
|
||||
"label": "คู่มือการใช้งานระบบแอดมิน",
|
||||
[
|
||||
{
|
||||
"icon": "mdi-home-variant-outline",
|
||||
"activeIcon": "mdi-home-variant",
|
||||
"label": "หน้าแรก",
|
||||
"path": "/"
|
||||
},
|
||||
{
|
||||
"icon": "mdi-file-outline",
|
||||
"activeIcon": "mdi-file",
|
||||
"label": "คู่มือการใช้งานระบบแอดมิน",
|
||||
"children": [
|
||||
{
|
||||
"label": "การใช้งานผู้ดูแลระบบ",
|
||||
"path": "/manual/chapter-1-superadmin-maintenance"
|
||||
},
|
||||
{
|
||||
"label": "การใช้งานผู้ดูแลระบบระดับสูง",
|
||||
"path": "/manual/chapter-2-superadmin-maintenance"
|
||||
},
|
||||
{
|
||||
"label": "คู่มือการตรวจสอบและแก้ไข",
|
||||
"path": "/manual/chapter-3-superadmin-debug"
|
||||
},
|
||||
{
|
||||
"label": "คู่มือการจัดการระบบ",
|
||||
"path": "/manual/chapter-4-superadmin-build-and-deploy"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"icon": "mdi-file-outline",
|
||||
"activeIcon": "mdi-file",
|
||||
"label": "คู่มือการใช้งานระบบบริหารจัดการ",
|
||||
"children": [
|
||||
{
|
||||
"label": "การเข้าสู่ระบบ",
|
||||
"path": "/manual/chapter-1-admin-login"
|
||||
},
|
||||
{
|
||||
"label": "ระบบข้อมูลการประเมิน",
|
||||
"path": "/manual/chapter-2-admin-evaluate"
|
||||
},
|
||||
{
|
||||
"label": "ระบบโครงสร้างอัตรากำลัง",
|
||||
"path": "/manual/chapter-3-admin-organization"
|
||||
},
|
||||
{
|
||||
"label": "ระบบรักษาการในตำแหน่ง",
|
||||
"path": "/manual/chapter-4-admin-acting"
|
||||
},
|
||||
{
|
||||
"label": "ระบบอัตรากำลังลูกจ้าง",
|
||||
"path": "/manual/chapter-5-admin-position-employee"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทะเบียนประวัติ",
|
||||
"path": "/manual/chapter-6-admin-registry"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทะเบียนประวัติลูกจ้าง",
|
||||
"path": "/manual/chapter-7-admin-registry-employee"
|
||||
},
|
||||
{
|
||||
"label": "ระบบออกคำสั่ง",
|
||||
"path": "/manual/chapter-8-admin-order"
|
||||
},
|
||||
{
|
||||
"label": "ระบบสรรหา",
|
||||
"path": "/manual/chapter-9-admin-recruit"
|
||||
},
|
||||
{
|
||||
"label": "ระบบบรรจุ",
|
||||
"path": "/manual/chapter-10-admin-appointment"
|
||||
},
|
||||
{
|
||||
"label": "ทดลองปฏิบัติหน้าที่ราชการ",
|
||||
"path": "/manual/chapter-11-admin-probation"
|
||||
},
|
||||
{
|
||||
"label": "ระบบพ้นจากราชการ",
|
||||
"path": "/manual/chapter-12-admin-retirement"
|
||||
},
|
||||
{
|
||||
"label": "ระบบเครื่องราช",
|
||||
"path": "/manual/chapter-13-admin-insignia"
|
||||
},
|
||||
{
|
||||
"label": "ระบบการลา",
|
||||
"path": "/manual/chapter-14-admin-leave"
|
||||
},
|
||||
{
|
||||
"label": "ระบบวินัย",
|
||||
"path": "/manual/chapter-15-admin-discipline"
|
||||
},
|
||||
{
|
||||
"label": "ระบบประเมินบุคคล",
|
||||
"path": "/manual/chapter-16-admin-KPI"
|
||||
},
|
||||
{
|
||||
"label": "ระบบเงินเดือนและค่าจ้าง",
|
||||
"path": "/manual/chapter-17-admin-salary"
|
||||
},
|
||||
{
|
||||
"label": "ระบบประเมินผลการปฎิบัติ",
|
||||
"path": "/manual/chapter-18-admin-perf-evaluation"
|
||||
},
|
||||
{
|
||||
"label": "ระบบพัฒนา",
|
||||
"path": "/manual/chapter-19-admin-development"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": 4,
|
||||
"icon": "mdi-file-outline",
|
||||
"activeIcon": "mdi-file",
|
||||
"label": "คู่มือการใช้งานระบบผู้ใช้งานทั่วไป",
|
||||
"children": [
|
||||
{
|
||||
"key": 4.1,
|
||||
"label": "คู่มือการใช้งานระบบข้าราชการกรุงเทพหานครสามัญ",
|
||||
"children": [
|
||||
|
||||
{
|
||||
"label": "การใช้งานผู้ดูแลระบบ",
|
||||
"path": "/manual/chapter-1-superadmin-maintenance"
|
||||
|
||||
},
|
||||
{
|
||||
"label": "การใช้งานผู้ดูแลระบบระดับสูง",
|
||||
"path": "/manual/chapter-2-superadmin-maintenance"
|
||||
},
|
||||
{
|
||||
|
||||
"label": "คู่มือการตรวจสอบและแก้ไข",
|
||||
"path": "/manual/chapter-3-superadmin-debug"
|
||||
},
|
||||
{
|
||||
"label": "คู่มือการจัดการระบบ",
|
||||
"path": "/manual/chapter-4-superadmin-build-and-deploy"
|
||||
}
|
||||
{
|
||||
"label": "ระบบแผนผังองค์กร",
|
||||
"path": "/manual/chapter-1-user-organization-chart"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทะเบียนประวัติ",
|
||||
"path": "/manual/chapter-2-user-registry"
|
||||
},
|
||||
{
|
||||
"label": "ระบบประเมินบุคคล",
|
||||
"path": "/manual/chapter-3-user-evaluate"
|
||||
},
|
||||
{
|
||||
"label": "ระบบการลา",
|
||||
"path": "/manual/chapter-4-user-leave"
|
||||
},
|
||||
{
|
||||
"label": "ระบบผลงาน",
|
||||
"path": "/manual/chapter-5-user-portfolio"
|
||||
},
|
||||
{
|
||||
"label": "ระบบขอโอน",
|
||||
"path": "/manual/chapter-6-user-transfer"
|
||||
},
|
||||
{
|
||||
"label": "ระบบอุทธรณ์ร้องทุกข์",
|
||||
"path": "/manual/chapter-7-user-appeal-complain"
|
||||
},
|
||||
{
|
||||
"label": "ระบบผู้ขอรับประเมิน (KPI)",
|
||||
"path": "/manual/chapter-8-user-KPI"
|
||||
},
|
||||
{
|
||||
"label": "ระบบผู้ประเมิน (KPI)",
|
||||
"path": "/manual/chapter-9-user-KPI-evaluator"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทุนการศึกษา/ฝึกอบรม",
|
||||
"path": "/manual/chapter-10-user-scholarship"
|
||||
},
|
||||
{
|
||||
"label": "ระบบการพัฒนารายบุคคล",
|
||||
"path": "/manual/chapter-11-user-Individual-development"
|
||||
},
|
||||
{
|
||||
"label": "ระบบลาออก",
|
||||
"path": "/manual/chapter-12-user-retire"
|
||||
},
|
||||
{
|
||||
"label": "ระบบบันทึกการลงเวลาปฏิบัติงาน",
|
||||
"path": "/manual/chapter-13-user-worktimerecord"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทุนการศึกษา/ฝึกอบรม",
|
||||
"path": "/manual/chapter-14-user-service-testing"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"icon": "mdi-file-outline",
|
||||
"activeIcon": "mdi-file",
|
||||
"label": "คู่มือการใช้งานระบบบริหารจัดการ",
|
||||
"children": [{
|
||||
"label": "การเข้าสู่ระบบ",
|
||||
"path": "/manual/chapter-1-admin-login"
|
||||
},
|
||||
{
|
||||
"label": "ระบบข้อมูลการประเมิน",
|
||||
"path": "/manual/chapter-2-admin-evaluate"
|
||||
},
|
||||
{
|
||||
"label": "ระบบโครงสร้างอัตรากำลัง",
|
||||
"path": "/manual/chapter-3-admin-organization"
|
||||
},
|
||||
{
|
||||
"label": "ระบบรักษาการในตำแหน่ง",
|
||||
"path": "/manual/chapter-4-admin-acting"
|
||||
},
|
||||
{
|
||||
"label": "ระบบอัตรากำลังลูกจ้าง",
|
||||
"path": "/manual/chapter-5-admin-position-employee"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทะเบียนประวัติ",
|
||||
"path": "/manual/chapter-6-admin-registry"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทะเบียนประวัติลูกจ้าง",
|
||||
"path": "/manual/chapter-7-admin-registry-employee"
|
||||
},
|
||||
{
|
||||
"label": "ระบบออกคำสั่ง",
|
||||
"path": "/manual/chapter-8-admin-order"
|
||||
},
|
||||
{
|
||||
"label": "ระบบสรรหา",
|
||||
"path": "/manual/chapter-9-admin-recruit"
|
||||
},
|
||||
{
|
||||
"label": "ระบบบรรจุ",
|
||||
"path": "/manual/chapter-10-admin-appointment"
|
||||
},
|
||||
{
|
||||
"label": "ทดลองปฏิบัติหน้าที่ราชการ",
|
||||
"path": "/manual/chapter-11-admin-probation"
|
||||
},
|
||||
{
|
||||
"label": "ระบบพ้นจากราชการ",
|
||||
"path": "/manual/chapter-12-admin-retirement"
|
||||
},
|
||||
{
|
||||
"label": "ระบบเครื่องราช",
|
||||
"path": "/manual/chapter-13-admin-insignia"
|
||||
},
|
||||
{
|
||||
"label": "ระบบการลา",
|
||||
"path": "/manual/chapter-14-admin-leave"
|
||||
},
|
||||
{
|
||||
"label": "ระบบวินัย",
|
||||
"path": "/manual/chapter-15-admin-discipline"
|
||||
},
|
||||
{
|
||||
"label": "ระบบประเมินบุคคล",
|
||||
"path": "/manual/chapter-16-admin-KPI"
|
||||
},
|
||||
{
|
||||
"label": "ระบบเงินเดือนและค่าจ้าง",
|
||||
"path": "/manual/chapter-17-admin-salary"
|
||||
},
|
||||
{
|
||||
"label": "ระบบประเมินผลการปฎิบัติ",
|
||||
"path": "/manual/chapter-18-admin-perf-evaluation"
|
||||
},
|
||||
{
|
||||
"label": "ระบบพัฒนา",
|
||||
"path": "/manual/chapter-19-admin-development"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
|
||||
"icon": "mdi-file-outline",
|
||||
"activeIcon": "mdi-file",
|
||||
"label": "คู่มือการใช้งานระบบผู้ใช้งานทั่วไป",
|
||||
"children": [{
|
||||
"label": "คู่มือการใช้งานระบบข้าราชการกรุงเทพหานครสามัญ",
|
||||
"children": [{
|
||||
"label": "ระบบแผนผังองค์กร",
|
||||
"path": "/manual/chapter-1-user-organization-chart"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทะเบียนประวัติ",
|
||||
"path": "/manual/chapter-2-user-registry"
|
||||
},
|
||||
{
|
||||
"label": "ระบบประเมินบุคคล",
|
||||
"path": "/manual/chapter-3-user-evaluate"
|
||||
},
|
||||
{
|
||||
"label": "ระบบการลา",
|
||||
"path": "/manual/chapter-4-user-leave"
|
||||
},
|
||||
{
|
||||
"label": "ระบบผลงาน",
|
||||
"path": "/manual/chapter-5-user-portfolio"
|
||||
},
|
||||
{
|
||||
"label": "ระบบขอโอน",
|
||||
"path": "/manual/chapter-6-user-transfer"
|
||||
},
|
||||
{
|
||||
"label": "ระบบอุทธรณ์ร้องทุกข์",
|
||||
"path": "/manual/chapter-7-user-appeal-complain"
|
||||
},
|
||||
{
|
||||
"label": "ระบบผู้ขอรับประเมิน (KPI)",
|
||||
"path": "/manual/chapter-8-user-KPI"
|
||||
},
|
||||
{
|
||||
"label": "ระบบผู้ประเมิน (KPI)",
|
||||
"path": "/manual/chapter-9-user-KPI-evaluator"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทุนการศึกษา/ฝึกอบรม",
|
||||
"path": "/manual/chapter-10-user-scholarship"
|
||||
},
|
||||
{
|
||||
"label": "ระบบการพัฒนารายบุคคล",
|
||||
"path": "/manual/chapter-11-user-Individual-development"
|
||||
},
|
||||
{
|
||||
"label": "ระบบลาออก",
|
||||
"path": "/manual/chapter-12-user-retire"
|
||||
},
|
||||
{
|
||||
"label": "ระบบบันทึกการลงเวลาปฏิบัติงาน",
|
||||
"path": "/manual/chapter-13-user-worktimerecord"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทุนการศึกษา/ฝึกอบรม",
|
||||
"path": "/manual/chapter-14-user-service-testing"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"label": "คู่มือการใช้งานระบบลูกจ้างประจำกรุงเทพมหานคร",
|
||||
"children": [{
|
||||
"label": "ระบบแผนผังองค์กร",
|
||||
"path": "/manual/chapter-1-user-organization-chart"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทะเบียนประวัติ",
|
||||
"path": "/manual/chapter-2-user-registry"
|
||||
}, {
|
||||
"label": "ระบบการลา",
|
||||
"path": "/manual/chapter-4-user-leave"
|
||||
},
|
||||
{
|
||||
"label": "ระบบลงเวลา (ยังไม่ได้ทำ)",
|
||||
"path": "/manual/"
|
||||
},
|
||||
{
|
||||
"label": "ระบบอุทธรณ์ร้องทุกข์",
|
||||
"path": "/manual/chapter-7-user-appeal-complain"
|
||||
},
|
||||
{
|
||||
"label": "ระบบลาออก",
|
||||
"path": "/manual/chapter-12-user-retire"
|
||||
},
|
||||
{
|
||||
"label": "ระบบบันทึกการลงเวลาปฏิบัติงาน",
|
||||
"path": "/manual/chapter-13-user-worktimerecord"
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"key": 4.2,
|
||||
"label": "คู่มือการใช้งานระบบลูกจ้างประจำกรุงเทพมหานคร",
|
||||
"children": [
|
||||
{
|
||||
"label": "ระบบแผนผังองค์กร",
|
||||
"path": "/manual/chapter-1-user-organization-chart"
|
||||
},
|
||||
{
|
||||
"label": "ระบบทะเบียนประวัติ",
|
||||
"path": "/manual/chapter-2-user-registry"
|
||||
},
|
||||
{
|
||||
"label": "ระบบการลา",
|
||||
"path": "/manual/chapter-4-user-leave"
|
||||
},
|
||||
{
|
||||
"label": "ระบบลงเวลา (ยังไม่ได้ทำ)",
|
||||
"path": "/manual/"
|
||||
},
|
||||
{
|
||||
"label": "ระบบอุทธรณ์ร้องทุกข์",
|
||||
"path": "/manual/chapter-7-user-appeal-complain"
|
||||
},
|
||||
{
|
||||
"label": "ระบบลาออก",
|
||||
"path": "/manual/chapter-12-user-retire"
|
||||
},
|
||||
{
|
||||
"label": "ระบบบันทึกการลงเวลาปฏิบัติงาน",
|
||||
"path": "/manual/chapter-13-user-worktimerecord"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -3,5 +3,6 @@ export interface MenuItem {
|
|||
activeIcon: string;
|
||||
label: string;
|
||||
path?: string;
|
||||
key?: number;
|
||||
children?: MenuItem[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const queryRole = route.query.role as string;
|
|||
const drawerMini = ref(false);
|
||||
const drawerMain = ref(false);
|
||||
const search = ref("");
|
||||
const link = ref<string>("");
|
||||
|
||||
/**
|
||||
* ปุ่มย่อ ขยาย สารบัญทางขวาของคู่มือ
|
||||
|
|
@ -245,6 +246,105 @@ function defaultOpen(index: number) {
|
|||
<q-list padding>
|
||||
<div v-for="(menuItem, index) in menuList" :key="index">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === menuItem.label"
|
||||
@click="link = menuItem.label"
|
||||
active-class="text-primary menuActiveMini text-weight-medium"
|
||||
v-if="menuItem.path !== '/'"
|
||||
>
|
||||
<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="subMenu.path"
|
||||
:to="subMenu.path"
|
||||
>
|
||||
<!-- เมนูย่อย 2 ชั้น -->
|
||||
<div
|
||||
v-if="menuItem.children && menuItem.children.length > 0"
|
||||
>
|
||||
<q-item
|
||||
dense
|
||||
clickable
|
||||
v-if="subMenu.key == 4.1 || subMenu.key == 4.2"
|
||||
>
|
||||
<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="subMenu2.path"
|
||||
:active="
|
||||
$route.path === subMenu2.path ||
|
||||
($route.path !== '/' &&
|
||||
subMenu2.path?.includes($route.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="subMenu.path"
|
||||
:active="
|
||||
$route.path === subMenu.path ||
|
||||
($route.path !== '/' &&
|
||||
subMenu.path?.includes($route.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
|
||||
v-else
|
||||
clickable
|
||||
v-ripple
|
||||
:to="menuItem.path"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue