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> |
||||