From f5eb93a15ff74eeb8b6b307e3a38b95319c084e1 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 03 三月 2025 10:32:46 +0800
Subject: [PATCH] 更新结构
---
src/components/TreeMenu.vue | 161 +++++++++++++++++++++++++++++++----------------------
1 files changed, 93 insertions(+), 68 deletions(-)
diff --git a/src/components/TreeMenu.vue b/src/components/TreeMenu.vue
index c5e57bc..ef177b3 100644
--- a/src/components/TreeMenu.vue
+++ b/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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1