iot-ui-plus/src/views/monitoring/devicemanage/components/menu.vue

<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-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-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>
          </el-tooltip>
        </el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { getDept, getDeviceList } from '@/api/device/index';
import { menuVo, deviceVo } from '@/api/device/types';
import mitt from '@/plugins/bus';
const deptData = ref([]);
const selectedKey = ref();
const menuOptions = ref<menuVo[]>();
const deviceData = ref<deviceVo[]>();
const id=

const emit = defineEmits(['tableMenuData']);

onMounted(() => {
  menuApi();
});

function menuApi() {
  //获取部门
  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')
      // selectedKey.value = key;
      // mitt.emit('menuKey', key);
      emit('tableMenuData', res.data);
    }
  });
}

function gitDevice(key: number, type: string) {
  //获取部门下设备列表
  const params = key;
  getDeviceList(params).then((res: any) => {
    if (res.code === 200) {
      // res.data.map((item: any) => {
      //   item.level = '3'
      //   item.deptId = Number(item.deviceUUID)
      //   item.deptName = item.deviceName
      // });
      deptData.value.map((result: any) => {
        if (result.children && result.children.length) {
          result.children.map((data: any) => {
            if (key === data.deptId) {
              data.children = res.data
            }
          });
        }
      });
      if (type === '0') {
        const deptIdKey = res.data[0].deptId;
        selectedKey.value = deptIdKey.toString();
        mitt.emit('menuKey', deptIdKey);
      }
      // 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);
      // }
    }
  });
}

// 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 menuUpdateValue(key: number, item: MenuOption) {
//   //点击菜单
//   // gitDevice(key, '1')
//   mitt.emit('menuKey', key);
//   console.log(key, item);
// }

const openClick = (key: string, indexPath: string[]) => {
  //sub-menu 展开的回调
  console.log("open-", key, indexPath)
  gitDevice(Number(key), '1')
}
const closeClick = (key: string, keyPath: string[]) => {
  //sub-menu 收起的回调
  console.log("close-", key, keyPath)
}
const selectClick = (key: string, keyPath: string[], item: any) => {
  //菜单激活回调
  console.log("select-", key, keyPath, item)
  mitt.emit('menuKey', key);
}

function clickNative(item: any) {
  console.log("clickNative-",item)
}
</script>
<style lang="scss" scoped>
@import '../index.scss';
</style>