From 4a8d8a5f49321d9597251e7ba69bf39f78baa51b Mon Sep 17 00:00:00 2001
From: litian <2804272236@qq.com>
Date: 星期二, 18 三月 2025 11:42:07 +0800
Subject: [PATCH] tijiao
---
src/components/TreeMenu.vue | 430 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 335 insertions(+), 95 deletions(-)
diff --git a/src/components/TreeMenu.vue b/src/components/TreeMenu.vue
index c5e57bc..86ea3bf 100644
--- a/src/components/TreeMenu.vue
+++ b/src/components/TreeMenu.vue
@@ -1,127 +1,367 @@
<template>
- <div class="tree-menu">
- <SearchBar @search="handleSearch" />
- <el-tree
- ref="treeRef"
- :data="filteredData"
- :props="defaultProps"
- :filter-node-method="filterNode"
- default-expand-all
- @node-click="handleNodeClick"
- >
- <template #default="{ node, data }">
- <span class="custom-tree-node">
- <el-icon v-if="data.icon"><component :is="data.icon" /></el-icon>
- <span>{{ node.label }}</span>
- </span>
- </template>
- </el-tree>
+ <div class="tree-menu-box">
+ <div class="flex">
+ <div class="tree-menu">
+ <div class="topMenu">
+ <span class="topMenu-title">{{ menuName }}</span>
+ <div class="btnGroup" v-if="props.menuItem == 'model'">
+ <el-icon class="icon1" @click="addBtn"><FolderAdd /></el-icon>
+ <el-icon class="icon2" @click="editBtn"><Edit /></el-icon>
+ <el-icon class="icon3" @click="delBtn"><Delete /></el-icon>
+ </div>
+ </div>
+ <el-tree
+ ref="treeRef"
+ :data="filteredData"
+ :props="defaultProps"
+ :filter-node-method="filterNode"
+ default-expand-all
+ @node-click="handleNodeClick"
+ >
+ <template #default="{ node, data }">
+ <span class="custom-tree-node">
+ <el-icon v-if="data.icon"><component :is="data.icon" /></el-icon>
+ <span>{{ node.label }}</span>
+ </span>
+ </template>
+ </el-tree>
+ </div>
+ <div class="tree-menu" v-if="props.menuItem == 'systemManage'">
+ <div class="topMenu">
+ <span class="topMenu-title">{{ systemMenuName }}</span>
+ <div class="btnGroup">
+ <el-icon class="icon1" @click="addBtn"><FolderAdd /></el-icon>
+ <el-icon class="icon2" @click="editBtn"><Edit /></el-icon>
+ <el-icon class="icon3" @click="delBtn"><Delete /></el-icon>
+ </div>
+ </div>
+ <el-tree
+ ref="treeRef"
+ :data="systemData"
+ :props="defaultProps"
+ :filter-node-method="filterNode1"
+ default-expand-all
+ @node-click="systemClick"
+ >
+ <template #default="{ node, data }">
+ <span class="custom-tree-node">
+ <el-icon v-if="data.icon"><component :is="data.icon" /></el-icon>
+ <span>{{ node.label }}</span>
+ </span>
+ </template>
+ </el-tree>
+ </div>
+ </div>
</div>
+ <el-dialog
+ v-model="dialogFormVisible"
+ :title="dialogTitle"
+ width="500"
+ @close="closeDialog(formRef)"
+ >
+ <el-form :model="form" ref="formRef" :rules="formRules" label-width="140px">
+ <el-form-item label="鍚嶇О" prop="name">
+ <el-input v-model="form.name" autocomplete="off" placeholder="璇疯緭鍏�" style="width: 240px"/>
+ </el-form-item>
+ <el-form-item label="鎻忚堪">
+ <el-input
+ v-model="form.description"
+ style="width: 240px"
+ :rows="2"
+ type="textarea"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeDialog(formRef)">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitBtn(formRef)"> 纭畾 </el-button>
+ </div>
+ </template>
+ </el-dialog>
</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, reactive, defineProps, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import type { FormInstance, FormRules} from "element-plus";
+import { ElMessage, ElMessageBox } from 'element-plus'
+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;
+}>();
+const menuName = ref("妯″瀷搴�");
+const filteredData = ref();
+const systemMenuName = ref("");
+const systemData = ref();
+const selectData = ref()
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: 'FolderOpened',
- children: [
- {
- label: '浠跨湡閰嶇疆',
- path: '/simulation-config',
- icon: 'Document'
- },
- {
- label: '浠跨湡缁撴灉',
- path: '/simulation-result',
- 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 modelTreeData = ref<TreeNode[]>([
+ {
+ label: "鍨嬪彿",
+ icon: "FolderOpened",
+ children: [
+ {
+ label: "鐫�闄嗗櫒妯″瀷搴�",
+ path: "/model/landerModel",
+ icon: "Document",
+ },
+ {
+ label: "宸¤鍣ㄦā鍨嬪簱",
+ path: "/model/roverModel",
+ icon: "Document",
+ },
+ {
+ label: "椋炶穬鍣ㄦā鍨嬪簱",
+ path: "/model/leapMachineModel",
+ icon: "Document",
+ },
+ ],
+ },
+]);
+
+const visualSimulationTreeData = ref<TreeNode[]>([
+ {
+ label: "娴嬭瘯浠跨湡",
+ path: "/testSimulation",
+ icon: "Document",
+ },
+ {
+ label: "瀹炴椂浠跨湡",
+ path: "realTimeSimulation",
+ icon: "Document",
+ },
+ {
+ label: "鑷富鍔熻兘",
+ path: "/autonomousFunction",
+ icon: "Document",
+ },
+]);
+
+const systemManageTreeData = ref<TreeNode[]>([
+ {
+ label: "鏈烘瀯鐢ㄦ埛",
+ path: "/userManage",
+ icon: "Document",
+ },
+ {
+ label: "瑙掕壊鏉冮檺绠＄悊",
+ path: "/roleManage",
+ icon: "Document",
+ },
+]);
+
+const systemTreeData = ref<TreeNode[]>([
+ {
+ label: "501",
+ path: "",
+ icon: "Document",
+ children: [
+ {
+ label: "涓�瀹�",
+ path: "",
+ icon: "",
+ },
+ {
+ label: "浜屽",
+ path: "",
+ icon: "",
+ },
+ {
+ label: "涓夊",
+ path: "",
+ icon: "",
+ },
+ ],
+ },
+]);
+const systemTreeData1 = ref<TreeNode[]>([
+ {
+ label: "绯荤粺绠＄悊鍛�",
+ path: "",
+ icon: "",
+ },
+ {
+ label: "妯″瀷绠＄悊鍛�",
+ path: "",
+ icon: "",
+ },
+ {
+ label: "娴嬭瘯浜哄憳",
+ path: "",
+ icon: "",
+ },
+ {
+ label: "鎶ュ憡鏌ョ湅浜哄憳",
+ path: "",
+ icon: "",
+ },
+]);
+
+const dialogFormVisible = ref(false);
+const dialogTitle = ref()
+const formRef = ref<FormInstance>();
+const form = reactive({
+ name: "",
+ description: "",
+});
+
+interface formInfo {
+ name: string;
+}
+const formRules = reactive<FormRules<formInfo>>({
+ name: [{ required: true, message: "鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
+});
+
+onMounted(() => {
+ console.log(props.menuItem, "123");
+ if (props.menuItem == "model") {
+ filteredData.value = modelTreeData.value;
+ menuName.value = "妯″瀷搴�";
+ } else if (props.menuItem == "simulation") {
+ menuName.value = "鍙鍖栦豢鐪�";
+ filteredData.value = visualSimulationTreeData.value;
+ } else if (props.menuItem == "systemManage") {
+ menuName.value = "绯荤粺绠＄悊";
+ filteredData.value = systemManageTreeData.value;
+ } else {
+ filteredData.value = [];
+ }
+ systemMenuName.value = systemManageTreeData.value[0].label;
+});
const filterNode = (value: string, data: TreeNode) => {
- if (!value) return true
- return data.label.toLowerCase().includes(value.toLowerCase())
-}
+ if (!value) return true;
+ return data.label.toLowerCase().includes(value.toLowerCase());
+};
-const handleSearch = (searchText: string) => {
- treeRef.value?.filter(searchText)
-}
+const filterNode1 = (value: string, data: TreeNode) => {
+ if (!value) return true;
+ return data.label.toLowerCase().includes(value.toLowerCase());
+};
const handleNodeClick = (data: TreeNode) => {
+ console.log(data, 12);
+ selectData.value = data
if (data.path) {
- router.push(data.path)
+ systemMenuName.value = data.label;
+ if (data.path == "/userManage") {
+ systemData.value = systemTreeData.value;
+ } else if (data.path == "/roleManage") {
+ systemData.value = systemTreeData1.value;
+ }
+ router.push(data.path);
}
+};
+
+//娣诲姞鐩綍
+const addBtn = () => {
+ dialogTitle.value = '娣诲姞'
+ dialogFormVisible.value = true;
+};
+const submitBtn = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate((valid, fields) => {
+ if (valid) {
+ }
+ });
+};
+const closeDialog = (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ formEl.resetFields();
+ dialogFormVisible.value = false;
+};
+
+const editBtn =() =>{
+ dialogTitle.value = '缂栬緫'
+ form.name = selectData.value.label
+ dialogFormVisible.value = true;
+
}
+
+const delBtn =()=>{
+ ElMessageBox.confirm(
+ '纭畾瑕佸垹闄ら�変腑鐨勬暟鎹�?',
+ 'Warning',
+ {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }
+ )
+ .then(() => {
+ console.log()
+
+ })
+ .catch(() => {
+
+ })
+}
+
+const systemClick = (data: TreeNode) => {};
</script>
<style lang="less" scoped>
-.tree-menu {
+.tree-menu-box {
height: 100%;
background-color: #fff;
-
+ .flex {
+ height: 100%;
+ }
+}
+.tree-menu {
+ width: 260px;
+ height: 100%;
+ border-right: 1px solid #e9eef3;
: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