<template>
|
<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, 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 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[]>([
|
{
|
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());
|
};
|
|
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);
|
}
|
};
|
|
//添加目录
|
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-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>
|
