更新结构

QYF-GitLab1

2025-03-03 f5eb93a15ff74eeb8b6b307e3a38b95319c084e1

 src/components/TreeMenu.vue

@@ -1,6 +1,13 @@
<template>
  <div class="tree-menu">
    <SearchBar @search="handleSearch" />
    <div class="topMenu">
      <span class="topMenu-title">模型库</span>
      <div class="btnGroup">
        <el-icon class="icon1"><FolderAdd /></el-icon>
        <el-icon class="icon2"><Edit /></el-icon>
        <el-icon class="icon3"><Delete /></el-icon>
      </div>
    </div>
    <el-tree
      ref="treeRef"
      :data="filteredData"
@@ -20,108 +27,126 @@
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import SearchBar from './SearchBar.vue'
import { Document, FolderOpened } from '@element-plus/icons-vue'
import { ref, watch,defineProps } from "vue";
import { useRouter } from "vue-router";
import { Document, FolderOpened } from "@element-plus/icons-vue";

const router = useRouter()
const treeRef = ref()
const router = useRouter();
const treeRef = ref();
const props = defineProps<{
  menuItem: string;
}>();

interface TreeNode {
  label: string
  path?: string
  icon?: string
  children?: TreeNode[]
  label: string;
  path?: string;
  icon?: string;
  children?: TreeNode[];
}

const treeData = ref<TreeNode[]>([
  {
    label: '模型管理',
    icon: 'FolderOpened',
    children: [
      {
        label: '机构模型',
        path: '/mechanism',
        icon: 'Document'
      },
      {
        label: '运动学模型',
        path: '/kinematic',
        icon: 'Document'
      }
    ]
    label: "模型管理",
    icon: "Document",
    path: "/model",
  },
  {
    label: '可视化仿真',
    icon: 'FolderOpened',
    label: "可视化仿真",
    icon: "FolderOpened",
    children: [
      {
        label: '仿真配置',
        path: '/simulation-config',
        icon: 'Document'
        label: "测试仿真",
        path: "/simulation-test",
        icon: "FolderOpened",
        children: [
          {
            label: "仿真详情",
            path: "/simulation-config",
            icon: "Document",
          },
          {
            label: "测试报告",
            path: "/simulation-result",
            icon: "Document",
          },
        ],
      },
      {
        label: '仿真结果',
        path: '/simulation-result',
        icon: 'Document'
      }
    ]
        label: "实时仿真",
        path: "/simulation-test",
        icon: "Document",
      },
    ],
  },
  {
    label: '系统管理',
    icon: 'FolderOpened',
    children: [
      {
        label: '用户管理',
        path: '/system/user',
        icon: 'Document'
      },
      {
        label: '权限设置',
        path: '/system/permission',
        icon: 'Document'
      }
    ]
  }
])
]);

const defaultProps = {
  children: 'children',
  label: 'label'
}
  children: "children",
  label: "label",
};

const filteredData = ref(treeData.value)
const filteredData = ref(treeData.value);

const filterNode = (value: string, data: TreeNode) => {
  if (!value) return true
  return data.label.toLowerCase().includes(value.toLowerCase())
}

const handleSearch = (searchText: string) => {
  treeRef.value?.filter(searchText)
}
  if (!value) return true;
  return data.label.toLowerCase().includes(value.toLowerCase());
};

const handleNodeClick = (data: TreeNode) => {
  if (data.path) {
    router.push(data.path)
    router.push(data.path);
  }
}
};


watch(
  () => props.menuItem,
  (value) => {
    console.log(value,'tree');
  }
);
</script>

<style lang="less" scoped>
.tree-menu {
  height: 100%;
  background-color: #fff;
  

  :deep(.el-tree) {
    padding: 10px;
  }
  

  .custom-tree-node {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .topMenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ebeef5;
    .topMenu-title {
      font-size: 16px;
      font-weight: bold;
    }
    .btnGroup {
      display: flex;
      gap: 12px;
      cursor: pointer;

      .icon1,
      .icon2,
      .icon3 {
        font-size: 18px;
        color: #606266;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style> 
</style>