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 | 304 ++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 264 insertions(+), 40 deletions(-)
diff --git a/src/components/TreeMenu.vue b/src/components/TreeMenu.vue
index 41ed582..86ea3bf 100644
--- a/src/components/TreeMenu.vue
+++ b/src/components/TreeMenu.vue
@@ -1,34 +1,92 @@
<template>
- <div class="tree-menu">
- <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 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>
- <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>
+ <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, defineProps } from "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();
@@ -36,13 +94,21 @@
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[];
}
+const defaultProps = {
+ children: "children",
+ label: "label",
+};
const modelTreeData = ref<TreeNode[]>([
{
@@ -68,41 +134,199 @@
},
]);
-const defaultProps = {
- children: "children",
- label: "label",
-};
+const visualSimulationTreeData = ref<TreeNode[]>([
+ {
+ label: "娴嬭瘯浠跨湡",
+ path: "/testSimulation",
+ icon: "Document",
+ },
+ {
+ label: "瀹炴椂浠跨湡",
+ path: "realTimeSimulation",
+ icon: "Document",
+ },
+ {
+ label: "鑷富鍔熻兘",
+ path: "/autonomousFunction",
+ icon: "Document",
+ },
+]);
-const filteredData = ref(modelTreeData.value);
+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());
};
+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) {
+ 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);
}
};
-watch(
- () => props.menuItem,
- (value) => {
- if (value == "/" || value == "/model") {
- filteredData.value = modelTreeData.value;
- } else {
- filteredData.value = []
+//娣诲姞鐩綍
+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;
}
--
Gitblit v1.9.1