|
|
|
@ -1,15 +1,16 @@ |
|
|
|
<template> |
|
|
|
<el-menu ref="menuInstRef" class="menu" background-color="transparent" text-color="#84e0f7" |
|
|
|
active-text-color="#ffd04b" :default-active="selectedKey" @open="openClick" @close="closeClick" @select="selectClick"> |
|
|
|
<el-menu ref="menuInstRef" class="menu" background-color="transparent" text-color="#84e0f7" active-text-color="#ffd04b" |
|
|
|
:default-active="selectedKey" unique-opened @open="openClick" @close="closeClick" @select="selectClick"> |
|
|
|
<el-sub-menu :index="`${item.deptId}`" v-for="(item, index) in menuOptions" :key="item.deptId"> |
|
|
|
<template #title> |
|
|
|
<el-tooltip class="box-item" effect="dark" :content="item.deptName" placement="top-start"> |
|
|
|
<span>{{ item.deptName }}</span> |
|
|
|
</el-tooltip> |
|
|
|
</template> |
|
|
|
<el-sub-menu :index="`${result.deptId}`" v-for="(result, index) in item.children" :key="result.deptId" |
|
|
|
@click.native="clickNative"> |
|
|
|
<template #title>{{ result.deptName }}</template> |
|
|
|
<el-sub-menu :index="`${result.deptId}`" v-for="(result, index) in item.children" :key="result.deptId"> |
|
|
|
<template #title> |
|
|
|
<div @click.native="clickNative(result)">{{ result.deptName }}</div> |
|
|
|
</template> |
|
|
|
<el-menu-item :index="`${res.deptId}`" v-for="(res, index) in result.children" :key="res.deptId"> |
|
|
|
<el-tooltip class="box-item" effect="dark" :content="res.deptName" placement="right-start"> |
|
|
|
<span>{{ res.deptName }}</span> |
|
|
|
@ -21,7 +22,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { useRouter } from "vue-router"; |
|
|
|
import { useRoute } from "vue-router"; |
|
|
|
import { getDept, getDeviceList } from '@/api/device/index'; |
|
|
|
import { menuVo, deviceVo } from '@/api/device/types'; |
|
|
|
import mitt from '@/plugins/bus'; |
|
|
|
@ -29,29 +30,38 @@ const deptData = ref([]); |
|
|
|
const selectedKey = ref(); |
|
|
|
const menuOptions = ref<menuVo[]>(); |
|
|
|
const deviceData = ref<deviceVo[]>(); |
|
|
|
const id= |
|
|
|
const router = useRoute() |
|
|
|
|
|
|
|
const emit = defineEmits(['tableMenuData']); |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
menuApi(); |
|
|
|
if (router.query?.id === undefined) { |
|
|
|
menuApi('0'); |
|
|
|
} else { |
|
|
|
menuApi('2'); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
function menuApi() { |
|
|
|
function menuApi(type: string) { |
|
|
|
//获取部门 |
|
|
|
getDept().then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
const key = |
|
|
|
res.data[0] && res.data[0].children && res.data[0].children.length > 0 |
|
|
|
? res.data[0].children[0].deptId |
|
|
|
: res.data[0].deptId; |
|
|
|
// removeChildren(res.data); |
|
|
|
deptData.value = res.data; |
|
|
|
menuOptions.value=res.data |
|
|
|
gitDevice(key, '0') |
|
|
|
// menuOptions.value = res.data |
|
|
|
// selectedKey.value = key; |
|
|
|
// mitt.emit('menuKey', key); |
|
|
|
// mitt.emit('deviceMenuKey', key); |
|
|
|
emit('tableMenuData', res.data); |
|
|
|
if (type === '0') { |
|
|
|
const key = |
|
|
|
res.data[0] && res.data[0].children && res.data[0].children.length > 0 |
|
|
|
? res.data[0].children[0].deptId |
|
|
|
: res.data[0].deptId; |
|
|
|
gitDevice(key, '0') |
|
|
|
} else { |
|
|
|
const deptId = Number(sessionStorage.getItem('deptId')) |
|
|
|
gitDevice(deptId, '2') |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
@ -78,14 +88,18 @@ function gitDevice(key: number, type: string) { |
|
|
|
if (type === '0') { |
|
|
|
const deptIdKey = res.data[0].deptId; |
|
|
|
selectedKey.value = deptIdKey.toString(); |
|
|
|
mitt.emit('menuKey', deptIdKey); |
|
|
|
mitt.emit('deviceMenuKey', deptIdKey); |
|
|
|
} else if (type === '2') { |
|
|
|
const deptIdKey = router.query?.id; |
|
|
|
selectedKey.value = deptIdKey?.toString(); |
|
|
|
mitt.emit('deviceMenuKey', deptIdKey); |
|
|
|
} |
|
|
|
// menuOptions.value = deptData.value |
|
|
|
menuOptions.value = deptData.value |
|
|
|
deviceData.value = res.data; |
|
|
|
// console.log(menuOptions.value) |
|
|
|
// if (type === '0') { |
|
|
|
// selectedKey.value = res.data[0].deptId; |
|
|
|
// mitt.emit('menuKey', res.data[0].deptId); |
|
|
|
// mitt.emit('deviceMenuKey', res.data[0].deptId); |
|
|
|
// } |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -109,14 +123,14 @@ function gitDevice(key: number, type: string) { |
|
|
|
// function menuUpdateValue(key: number, item: MenuOption) { |
|
|
|
// //点击菜单 |
|
|
|
// // gitDevice(key, '1') |
|
|
|
// mitt.emit('menuKey', key); |
|
|
|
// mitt.emit('deviceMenuKey', key); |
|
|
|
// console.log(key, item); |
|
|
|
// } |
|
|
|
|
|
|
|
const openClick = (key: string, indexPath: string[]) => { |
|
|
|
//sub-menu 展开的回调 |
|
|
|
console.log("open-", key, indexPath) |
|
|
|
gitDevice(Number(key), '1') |
|
|
|
// gitDevice(Number(key), '1') |
|
|
|
} |
|
|
|
const closeClick = (key: string, keyPath: string[]) => { |
|
|
|
//sub-menu 收起的回调 |
|
|
|
@ -125,11 +139,12 @@ const closeClick = (key: string, keyPath: string[]) => { |
|
|
|
const selectClick = (key: string, keyPath: string[], item: any) => { |
|
|
|
//菜单激活回调 |
|
|
|
console.log("select-", key, keyPath, item) |
|
|
|
mitt.emit('menuKey', key); |
|
|
|
mitt.emit('deviceMenuKey', key); |
|
|
|
} |
|
|
|
|
|
|
|
function clickNative(item: any) { |
|
|
|
console.log("clickNative-",item) |
|
|
|
gitDevice(item.deptId, '1') |
|
|
|
console.log("clickNative-", item) |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
|
fuguobin
1 year ago