fuguobin
1 year ago
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 9.5 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 853 B After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 496 B After Width: | Height: | Size: 960 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 5.4 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 382 B After Width: | Height: | Size: 811 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 896 B After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 544 B After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 5.5 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,186 @@ |
|||
<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" /> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
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 mitt from '@/plugins/bus'; |
|||
const menuOptions = ref([]); |
|||
const selectedKey = ref(); |
|||
const sessionStorageIns = useStorage('sessionStorage'); |
|||
|
|||
const emit = defineEmits(['tableMenuData']); |
|||
|
|||
const props = defineProps({ |
|||
menuType: { |
|||
type: String, |
|||
default: '1', |
|||
}, |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
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 |
|||
removeChildren(res.data); |
|||
menuOptions.value = res.data; |
|||
selectedKey.value = key; |
|||
sessionStorageIns.setUseStorage('deptId', key); |
|||
mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', key); |
|||
emit('tableMenuData', res.data); |
|||
} |
|||
}); |
|||
} |
|||
function comMenuApi() { |
|||
//获取组态左侧菜单 |
|||
getMenuData().then((res: any) => { |
|||
if (res.code === 200) { |
|||
const key = getFirstNodeLastLevel(res.data).deptId |
|||
removeChildren(res.data); |
|||
menuOptions.value = res.data; |
|||
selectedKey.value = key; |
|||
sessionStorageIns.setUseStorage('deptId', key); |
|||
mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', key); |
|||
emit('tableMenuData', res.data); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function removeChildren(menu: any) { |
|||
//处理菜单空children |
|||
if (!Array.isArray(menu)) { |
|||
return; |
|||
} |
|||
|
|||
menu.forEach((item) => { |
|||
if (item.children && item.children.length === 0) { |
|||
delete item.children; |
|||
} else { |
|||
removeChildren(item.children); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function renderMenuLabel(option: MenuOption) { |
|||
//菜单标题增加提示 |
|||
return h(NEllipsis, null, option.deptName as string); |
|||
} |
|||
|
|||
function menuUpdateValue(key: string, item: MenuOption) { |
|||
//点击菜单 |
|||
sessionStorageIns.setUseStorage('deptId', key); |
|||
mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', key); |
|||
console.log(key, item); |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
:root { |
|||
--n-item-text-color-child-active-hover: #fff; |
|||
--n-item-text-color-active-hover: #fff; |
|||
--n-item-text-color-child-active: #fff; |
|||
} |
|||
|
|||
.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--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: #B1E3FF; |
|||
} |
|||
} |
|||
|
|||
.n-submenu-children { |
|||
.n-menu-item-content-header { |
|||
font-size: 1.6rem; |
|||
} |
|||
|
|||
.n-menu-item-content--selected { |
|||
.n-menu-item-content-header { |
|||
color: #fff; |
|||
|
|||
.n-ellipsis { |
|||
position: relative; |
|||
|
|||
span { |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
span::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0.7rem; |
|||
width: 1.8rem; |
|||
height: 1.8rem; |
|||
background: url(@/assets/images/taps.png) no-repeat; |
|||
background-size: cover; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.n-menu-item-content--selected::before { |
|||
background: -webkit-linear-gradient(left, #1fc7ff29 0%, #1177e700 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, #1fc7ff29 0%, #1177e700 100%); |
|||
} |
|||
} |
|||
|
|||
.n-base-icon { |
|||
color: #84e0f7; |
|||
right: 10px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||