|
|
|
@ -1,36 +1,95 @@ |
|
|
|
<template> |
|
|
|
<n-menu ref="menuInstRef" class="menu" :indent="0" :options="menuOptions" v-model:value="selectedKey" key-field="deptId" |
|
|
|
label-field="deptName" :default-expand-all="false" :watch-props="['defaultExpandedKeys']" |
|
|
|
:render-label="renderMenuLabel" @update:value="menuUpdateValue" /> |
|
|
|
<div class="menuCantent"> |
|
|
|
<n-menu |
|
|
|
ref="menuInstRef" |
|
|
|
class="menu" |
|
|
|
:indent="0" |
|
|
|
:options="menuOptions" |
|
|
|
v-model:value="selectedKey" |
|
|
|
key-field="deptId" |
|
|
|
label-field="deptName" |
|
|
|
:default-expand-all="false" |
|
|
|
:watch-props="['defaultExpandedKeys']" |
|
|
|
:render-label="renderMenuLabel" |
|
|
|
@update:value="menuUpdateValue" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { useRoute } from 'vue-router'; |
|
|
|
import type { MenuOption } from 'naive-ui'; |
|
|
|
// import { NEllipsis } from 'naive-ui'; |
|
|
|
import { getMenu } from '@/api/table/list'; |
|
|
|
import { getMenuData } from '@/api/device/index'; |
|
|
|
import { getFirstNodeLastLevel } from '@/utils/index'; |
|
|
|
import useStorage from '@/utils/useStorage' |
|
|
|
import useStorage from '@/utils/useStorage'; |
|
|
|
import mitt from '@/plugins/bus'; |
|
|
|
const router = useRoute(); |
|
|
|
const menuOptions = ref([]); |
|
|
|
const selectedKey = ref(); |
|
|
|
const sessionStorageIns = useStorage('sessionStorage'); |
|
|
|
const routerType = ref(''); |
|
|
|
const id = ref(0); |
|
|
|
const deptId = ref(0); |
|
|
|
const menuDeptKey = ref(0); |
|
|
|
const menuIdKey = ref(0); |
|
|
|
|
|
|
|
const emit = defineEmits(['tableMenuData']); |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
menuType: { |
|
|
|
type: String, |
|
|
|
default: '1' |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
menuApi(); |
|
|
|
routerType.value = router.query?.id === undefined ? '0' : '1'; |
|
|
|
id.value = sessionStorage.getItem('id') === null ? 0 : Number(sessionStorage.getItem('id')); |
|
|
|
deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId')); |
|
|
|
if (props.menuType === '1') { |
|
|
|
menuApi(); |
|
|
|
} else if (props.menuType === '2') { |
|
|
|
comMenuApi(); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
function menuApi() { |
|
|
|
//获取左侧菜单 |
|
|
|
//获取表格左侧菜单 |
|
|
|
getMenu().then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
const key = getFirstNodeLastLevel(res.data).deptId |
|
|
|
menuDeptKey.value = |
|
|
|
routerType.value === '1' |
|
|
|
? deptId.value |
|
|
|
: routerType.value === '0' && deptId.value != 0 |
|
|
|
? deptId.value |
|
|
|
: getFirstNodeLastLevel(res.data).deptId; |
|
|
|
removeChildren(res.data); |
|
|
|
menuOptions.value = res.data; |
|
|
|
selectedKey.value = key; |
|
|
|
sessionStorageIns.setUseStorage('deptId', key); |
|
|
|
mitt.emit('menuKey', key); |
|
|
|
selectedKey.value = menuDeptKey.value; |
|
|
|
sessionStorageIns.setUseStorage('deptId', menuDeptKey.value); |
|
|
|
mitt.emit('menuMockKeys', menuDeptKey.value); |
|
|
|
emit('tableMenuData', res.data); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
function comMenuApi() { |
|
|
|
//获取组态左侧菜单 |
|
|
|
getMenuData().then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
menuIdKey.value = |
|
|
|
routerType.value === '1' |
|
|
|
? id.value |
|
|
|
: routerType.value === '0' && id.value != 0 |
|
|
|
? id.value |
|
|
|
: getFirstNodeLastLevel(res.data).deptId; |
|
|
|
const parentId = routerType.value === '1' ? deptId.value : getFirstNodeLastLevel(res.data).parentId; |
|
|
|
removeChildren(res.data); |
|
|
|
menuOptions.value = res.data; |
|
|
|
selectedKey.value = menuIdKey.value; |
|
|
|
sessionStorageIns.setUseStorage('deptId', routerType.value === '1' ? deptId.value : parentId); |
|
|
|
mitt.emit('deviceMenuKey', menuIdKey.value); |
|
|
|
emit('tableMenuData', res.data); |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -42,7 +101,7 @@ function removeChildren(menu: any) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
menu.forEach((item) => { |
|
|
|
menu.forEach(item => { |
|
|
|
if (item.children && item.children.length === 0) { |
|
|
|
delete item.children; |
|
|
|
} else { |
|
|
|
@ -50,19 +109,184 @@ function removeChildren(menu: any) { |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function renderMenuLabel(option: MenuOption) { |
|
|
|
// function renderMenuLabel(option: MenuOption) { |
|
|
|
const renderMenuLabel = (option: MenuOption) => { |
|
|
|
//菜单标题增加提示 |
|
|
|
return h(NEllipsis, null, option.deptName as string); |
|
|
|
} |
|
|
|
// return h(NEllipsis, null, option.deptName as string); |
|
|
|
return h(NEllipsis, null, { default: () => option.deptName }); |
|
|
|
}; |
|
|
|
|
|
|
|
function menuUpdateValue(key: string, item: MenuOption) { |
|
|
|
//点击菜单 |
|
|
|
sessionStorageIns.setUseStorage('id', key); |
|
|
|
mitt.emit('menuKey', key); |
|
|
|
sessionStorageIns.setUseStorage(props.menuType === '1' ? 'deptId' : 'id', key); |
|
|
|
sessionStorageIns.setUseStorage('currentPage', 1); |
|
|
|
if (props.menuType === '1') { |
|
|
|
mitt.emit('currentPageEmits', 1); |
|
|
|
} |
|
|
|
if (props.menuType === '2') { |
|
|
|
sessionStorageIns.setUseStorage('deptId', item.parentId); |
|
|
|
} |
|
|
|
mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', key); |
|
|
|
console.log(key, item); |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import '../index.scss'; |
|
|
|
:root { |
|
|
|
--n-item-text-color-child-active-hover: #fff; |
|
|
|
--n-item-text-color-active-hover: #fff; |
|
|
|
--n-item-text-color-child-active: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.menuCantent { |
|
|
|
height: -webkit-fill-available; |
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
.menu { |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
:deep(.n-submenu) { |
|
|
|
--n-item-color-hover: auto; |
|
|
|
|
|
|
|
.n-menu-item { |
|
|
|
.n-menu-item-content { |
|
|
|
padding: 0 !important; |
|
|
|
|
|
|
|
.n-ellipsis { |
|
|
|
font-family: 'AlibabaPuHuiTiBold'; |
|
|
|
padding: 0 15px; |
|
|
|
} |
|
|
|
|
|
|
|
// .n-menu-item-content__arrow { |
|
|
|
// color: #b1e3ff; |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
.n-menu-item-content.n-menu-item-content--child-active { |
|
|
|
// .n-menu-item-content-header { |
|
|
|
// color: #b1e3ff; |
|
|
|
// } |
|
|
|
|
|
|
|
.n-menu-item-content__arrow { |
|
|
|
color: var(--n-arrow-color); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// .n-menu-item-content--child-active { |
|
|
|
// .n-menu-item-content-header:hover { |
|
|
|
// color: #fff !important; |
|
|
|
// } |
|
|
|
|
|
|
|
// .n-menu-item-content__arrow:hover { |
|
|
|
// color: #fff !important; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .n-menu-item-content--child-active:hover{ |
|
|
|
// color: #fff !important; |
|
|
|
// } |
|
|
|
|
|
|
|
.n-menu-item-content-header { |
|
|
|
font-size: 2.2rem; |
|
|
|
color: var(--vxe-table-header-font-color); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.n-menu-item:hover { |
|
|
|
color: #409eff; |
|
|
|
} |
|
|
|
|
|
|
|
.n-submenu-children { |
|
|
|
.n-menu-item-content-header { |
|
|
|
font-size: 1.6rem; |
|
|
|
} |
|
|
|
|
|
|
|
.n-menu-item-content--selected { |
|
|
|
.n-menu-item-content-header { |
|
|
|
color: #409eff; |
|
|
|
|
|
|
|
.n-ellipsis { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
span { |
|
|
|
padding: 0 10px; |
|
|
|
} |
|
|
|
|
|
|
|
span::before { |
|
|
|
content: none; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0.7rem; |
|
|
|
width: 1.8rem; |
|
|
|
height: 1.8rem; |
|
|
|
// background: url(@/assets/images/taps.png) no-repeat; |
|
|
|
// background-size: cover; |
|
|
|
background-color: var(--menuActiveBg) !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.n-menu-item-content--selected::before { |
|
|
|
background: -webkit-linear-gradient(left, #91d3fd 0%, #dedede 100%); |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.n-menu-item-content--selected::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 2px; |
|
|
|
background: -webkit-linear-gradient(left, #409eff 0%, #dedede 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.n-base-icon { |
|
|
|
// color: #84e0f7; |
|
|
|
right: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/*滚动条整体部分*/ |
|
|
|
.menuCantent::-webkit-scrollbar, |
|
|
|
.tableGrid ::-webkit-scrollbar { |
|
|
|
width: 8px; |
|
|
|
height: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
/*滚动条的轨道*/ |
|
|
|
.menuCantent::-webkit-scrollbar-track, |
|
|
|
.tableGrid ::-webkit-scrollbar-track { |
|
|
|
background-color: transparent; |
|
|
|
-webkit-border-radius: 8px; |
|
|
|
-moz-border-radius: 8px; |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
/*滚动条里面的小方块，能向上向下移动*/ |
|
|
|
.menuCantent::-webkit-scrollbar-thumb, |
|
|
|
.tableGrid ::-webkit-scrollbar-thumb { |
|
|
|
background-color: rgb(147, 147, 153, 0.5); |
|
|
|
-webkit-border-radius: 8px; |
|
|
|
-moz-border-radius: 8px; |
|
|
|
border-radius: 8px; |
|
|
|
} |
|
|
|
|
|
|
|
.menuCantent::-webkit-scrollbar-thumb:hover, |
|
|
|
.tableGrid ::-webkit-scrollbar-thumb:hover { |
|
|
|
background-color: #a8a8a8; |
|
|
|
} |
|
|
|
|
|
|
|
.menuCantent::-webkit-scrollbar-thumb:active, |
|
|
|
.tableGrid :-webkit-scrollbar-thumb:active { |
|
|
|
background-color: #787878; |
|
|
|
} |
|
|
|
|
|
|
|
/*边角，即两个滚动条的交汇处*/ |
|
|
|
.menuCantent::-webkit-scrollbar-corner, |
|
|
|
.tableGrid ::-webkit-scrollbar-corner { |
|
|
|
background-color: transparent; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
fuguobin
8 months ago