From 96be59a64cc1d8fcaf1034e787717663c68df4a7 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 26 五月 2025 10:39:58 +0800
Subject: [PATCH] 2025-5-26提交
---
src/components/TreeMenu.vue | 522 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 416 insertions(+), 106 deletions(-)
diff --git a/src/components/TreeMenu.vue b/src/components/TreeMenu.vue
index 86ea3bf..55716bb 100644
--- a/src/components/TreeMenu.vue
+++ b/src/components/TreeMenu.vue
@@ -1,22 +1,94 @@
<template>
<div class="tree-menu-box">
<div class="flex">
- <div class="tree-menu">
+ <div class="tree-menu" v-if="$route.name == 'landerModel'">
<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>
+ <div
+ class="btnGroup"
+ v-if="$route.name == 'landerModel' || $route.name == 'systemUse'"
+ >
+ <el-dropdown>
+ <el-icon class="icon1"><FolderAdd /></el-icon>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item @click="addBtn('parent')"
+ >鏂板缓棰戦亾</el-dropdown-item
+ >
+ <el-dropdown-item
+ :disabled="selectData ? false : true"
+ @click="addBtn('child')"
+ >鏂板缓瀛愰閬�</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
<el-icon class="icon2" @click="editBtn"><Edit /></el-icon>
<el-icon class="icon3" @click="delBtn"><Delete /></el-icon>
</div>
</div>
+
+ <div v-if="loadTree && $route.name == 'landerModel'">
+ <el-tree
+ ref="treeRef"
+ :key="treeKey"
+ :props="defaultProps"
+ :highlight-current="true"
+ @node-click="handleNodeClick"
+ :current-node-key="currentNodeKey"
+ node-key="key"
+ :data="filteredData"
+ :load="loadNode"
+ :expand-on-click-node="false"
+ lazy
+ >
+ <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 class="tree-menu" v-if="$route.name.includes('simulation')">
+ <span class="topMenu-title">{{ menuName }}</span>
+ <div
+ class="btnGroup"
+ v-if="$route.name == 'landerModel' || $route.name == 'systemUse'"
+ >
+ <el-dropdown>
+ <el-icon class="icon1"><FolderAdd /></el-icon>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item @click="addBtn('parent')"
+ >鏂板缓棰戦亾</el-dropdown-item
+ >
+ <el-dropdown-item
+ :disabled="selectData ? false : true"
+ @click="addBtn('child')"
+ >鏂板缓瀛愰閬�</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ <el-icon class="icon2" @click="editBtn"><Edit /></el-icon>
+ <el-icon class="icon3" @click="delBtn"><Delete /></el-icon>
+ </div>
<el-tree
ref="treeRef"
- :data="filteredData"
+ :key="treeKey"
+ :data="visualSimulationTreeData"
:props="defaultProps"
- :filter-node-method="filterNode"
+ node-key="key"
+ :current-node-key="simulationKey"
+ :filter-node-method="filterNode1"
+ :highlight-current="true"
default-expand-all
- @node-click="handleNodeClick"
+ @node-click="systemClick"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
@@ -26,22 +98,18 @@
</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>
+ <div class="tree-menu" v-if="seleStore.curTab == 'systemManage'">
<el-tree
ref="treeRef"
- :data="systemData"
+ :data="systemManageTreeData"
:props="defaultProps"
+ :key="systemKey"
+ :current-node-key="systemKey"
+ node-key="key"
:filter-node-method="filterNode1"
default-expand-all
@node-click="systemClick"
+ :highlight-current="true"
>
<template #default="{ node, data }">
<span class="custom-tree-node">
@@ -61,7 +129,20 @@
>
<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-input
+ v-model="form.name"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ />
+ </el-form-item>
+ <el-form-item label="缂栫爜" prop="refCode">
+ <el-input
+ v-model="form.refCode"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ />
</el-form-item>
<el-form-item label="鎻忚堪">
<el-input
@@ -83,22 +164,43 @@
</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 {
+ ref,
+ reactive,
+ defineProps,
+ onMounted,
+ inject,
+ watch,
+ nextTick,
+} from "vue";
+import { useRoute, 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";
-
+import { fa } from "element-plus/es/locale";
+const MG: any = inject("MG");
+const toolClass: any = inject("toolClass");
+import { curStoreInfo } from "@/store/index";
+const seleStore = curStoreInfo();
const router = useRouter();
-const treeRef = ref();
+const loadTree = ref(false);
+const treeRef = ref(null);
+const curSelectNode = ref();
const props = defineProps<{
menuItem: string;
+ modelTreeData: any;
+ storeInfo: any;
}>();
const menuName = ref("妯″瀷搴�");
const filteredData = ref();
const systemMenuName = ref("");
-const systemData = ref();
-const selectData = ref()
+const currentNodeKey = ref(1);
+const treeKey = ref(0);
+const systemKey = ref(0);
+const simulationKey = ref(0);
+const systemData = ref([]);
+const selectData = ref();
+const createParent = ref(false);
interface TreeNode {
label: string;
path?: string;
@@ -108,61 +210,39 @@
const defaultProps = {
children: "children",
label: "label",
+ isLeaf: "leaf",
+ key: "key",
};
-
-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 route = useRoute();
const visualSimulationTreeData = ref<TreeNode[]>([
{
label: "娴嬭瘯浠跨湡",
path: "/testSimulation",
icon: "Document",
+ key: 0,
},
{
label: "瀹炴椂浠跨湡",
path: "realTimeSimulation",
icon: "Document",
+ key: 1,
},
{
label: "鑷富鍔熻兘",
path: "/autonomousFunction",
icon: "Document",
+ key: 2,
},
]);
const systemManageTreeData = ref<TreeNode[]>([
{
+ key: 0,
label: "鏈烘瀯鐢ㄦ埛",
path: "/userManage",
icon: "Document",
},
- {
- label: "瑙掕壊鏉冮檺绠＄悊",
- path: "/roleManage",
- icon: "Document",
- },
+ { key: 1, label: "瑙掕壊鏉冮檺绠＄悊", path: "/roleManage", icon: "Document" },
]);
const systemTreeData = ref<TreeNode[]>([
@@ -213,10 +293,11 @@
]);
const dialogFormVisible = ref(false);
-const dialogTitle = ref()
+const dialogTitle = ref();
const formRef = ref<FormInstance>();
const form = reactive({
name: "",
+ refCode: "",
description: "",
});
@@ -227,22 +308,151 @@
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 = [];
+watch(
+ () => route,
+ (newRoute) => {
+ console.log("璺敱鍙樺寲:", newRoute.path);
+ // 澶勭悊璺敱鍙樺寲閫昏緫
+ },
+ { deep: true }
+);
+
+watch(
+ () => seleStore.curTab, // 鐩戝惉 reactive 瀵硅薄锛堥粯璁ゆ繁搴︾洃鍚級
+ (newVal) => {
+ if (newVal) {
+ if (seleStore.curTab == "model") {
+ menuName.value = "妯″瀷搴�";
+ } else if (seleStore.curTab == "simulation") {
+ menuName.value = "鍙鍖栦豢鐪�";
+ filteredData.value = visualSimulationTreeData.value;
+ } else if (seleStore.curTab == "systemManage") {
+ menuName.value = "绯荤粺绠＄悊";
+ filteredData.value = systemManageTreeData.value;
+ } else {
+ filteredData.value = [];
+ }
+ systemMenuName.value = systemManageTreeData.value[0].label;
+ }
}
- systemMenuName.value = systemManageTreeData.value[0].label;
+);
+
+onMounted(() => {
+ console.log(route, "route.route");
});
+
+watch(
+ () => props.storeInfo, // 鐩戝惉 reactive 瀵硅薄锛堥粯璁ゆ繁搴︾洃鍚級
+ (newVal) => {
+ if (newVal) {
+ loadTree.value = true;
+ }
+ }
+);
+
+const loadNode = async (node, resolve) => {
+ if (node.level == 0) {
+ const treeData = await getTableData(0);
+ const list = treeData.filter((item) => item.data.refCode !== "testReport");
+ const testReport = treeData.find(
+ (item) => item.data.refCode === "testReport"
+ );
+ console.log(list, "list");
+ console.log(testReport, "testReport");
+ nextTick(() => {
+ currentNodeKey.value = 0; // 纭繚鑺傜偣宸叉覆鏌�
+ seleStore.setChannelInfo(list[0]);
+ seleStore.setTestReportChannel(testReport);
+ selectData.value = list[0];
+ });
+ return resolve(list);
+ }
+ if (node.childNodes.length > 0) {
+ return resolve([]);
+ }
+ // 鏄剧ず鍔犺浇鐘舵��
+ node.loading = true;
+ const childNodes = await getTableData(node.data.data);
+ resolve(childNodes);
+};
+
+//澶勭悊鏍戝舰缁撴瀯
+const handleTreeData = (datas: any[], parent, noTriggerSelect = false) => {
+ let parentData = {};
+ if (parent) {
+ parentData = { ...parent, parent: null };
+ } else {
+ parentData = null;
+ }
+ const list = [];
+ for (let i = 0; i < datas.length; i++) {
+ const data = datas[i];
+ const obj = {
+ label: data.name,
+ key: parentData ? parentData.key + "_" + i : i + "",
+ namePath: parentData ? parentData.namePath + "\\" + data.name : data.name,
+ icon: data.icon,
+ data: data,
+ parent: parentData,
+ leaf: false,
+ children: [],
+ };
+ if (data["children"] && data["children"].length) {
+ obj.leaf = false;
+ obj.children = handleTreeData(
+ data["children"],
+ {
+ ...data,
+ key: obj.key,
+ namePath: obj.namePath,
+ },
+ i == 0 ? false : true // 濡傛灉鏈夊瓙鏁版嵁澶勭悊锛屽彧鏈夌涓�鏉℃暟鎹渶瑕佸睍寮�鍜屽洖璋�
+ );
+ } else {
+ obj.leaf =
+ !data["childrenChannelCount"] || data["childrenChannelCount"] == 0;
+ }
+ list.push(obj);
+ }
+ console.log(list, "list");
+ return list;
+};
+
+const getTableData = async (path) => {
+ const treeData = await toolClass.getCmsItem({
+ path: path.idPath
+ ? path.idPath
+ : props.storeInfo.repositoryData.rootChannel.id,
+ storeId: props.storeInfo.storeId,
+ repositoryId: props.storeInfo.repositoryId,
+ type: "\\",
+ sort: {
+ LinkOrder: "Asc",
+ },
+ paging: {
+ Start: 0,
+ Size: 50,
+ },
+ filters: {
+ "SysType=": ["CmsChannel"],
+ },
+ fields: {
+ ChildrenCount: [],
+ },
+ });
+ if (treeData && treeData.datas.length > 0) {
+ const fomartData = handleTreeData(
+ treeData.datas,
+ path ? path : null,
+ false
+ );
+ seleStore.setChannelInfo(fomartData[0]);
+ seleStore.setChannelList(fomartData);
+ return fomartData;
+ } else {
+ return [];
+ }
+};
const filterNode = (value: string, data: TreeNode) => {
if (!value) return true;
@@ -255,28 +465,90 @@
};
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);
- }
+ seleStore.setChannelInfo(data);
+ selectData.value = data;
};
//娣诲姞鐩綍
-const addBtn = () => {
- dialogTitle.value = '娣诲姞'
+const addBtn = (type) => {
+ if (type == "child") {
+ dialogTitle.value = "鏂板缓瀛愰閬�";
+ createParent.value = false;
+ } else {
+ dialogTitle.value = "鏂板缓棰戦亾";
+ createParent.value = true;
+ }
+
dialogFormVisible.value = true;
};
const submitBtn = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
- await formEl.validate((valid, fields) => {
+ await formEl.validate(async (valid, fields) => {
if (valid) {
+ console.log(form.name, "fields");
+
+ if (dialogTitle.value == "缂栬緫") {
+ const body = {
+ accessPath: selectData.value.data.idPath,
+ accessStoreId: selectData.value.data.storeId,
+ accessRepositoryId: selectData.value.data.repositoryId,
+ accessItemId: selectData.value.data.id,
+ name: form.name, // form.name,
+ description: form.description,
+ refCode: form.refCode,
+ state: selectData.value.data.state,
+ icon: selectData.value.data.icon,
+ type: selectData.value.data.type,
+ };
+ const updateCmsItem = await MG.dps5.UpdateCmsItem({
+ updateList: [body],
+ });
+ if (updateCmsItem) {
+ ElMessage({
+ message: "缂栬緫鎴愬姛",
+ type: "success",
+ });
+ dialogFormVisible.value = false;
+ form.name = "";
+ form.refCode = "";
+ form.description = "";
+ treeKey.value += 1;
+ }
+ } else {
+ const body = {
+ accessPath: createParent.value
+ ? props.storeInfo.repositoryData.rootChannel.id
+ : selectData.value.data.idPath,
+ accessStoreId: props.storeInfo.storeId,
+ accessRepositoryId: props.storeInfo.repositoryId,
+ sysType: "CmsChannel",
+ linkType: "Link",
+ cmsItemRequest: {
+ ...form,
+ state: "Normal",
+ type: "Normal",
+ module: "",
+ accessType: "Public",
+ },
+ };
+ const newCmsItem = await MG.dps5.NewCmsItem(body);
+ if (newCmsItem) {
+ ElMessage({
+ message: "娣诲姞鎴愬姛",
+ type: "success",
+ });
+ dialogFormVisible.value = false;
+ form.name = "";
+ form.refCode = "";
+ form.description = "";
+ treeKey.value += 1;
+ } else {
+ ElMessage({
+ message: "娣诲姞澶辫触",
+ type: "error",
+ });
+ }
+ }
}
});
};
@@ -286,33 +558,71 @@
dialogFormVisible.value = false;
};
-const editBtn =() =>{
- dialogTitle.value = '缂栬緫'
- form.name = selectData.value.label
+const editBtn = () => {
+ dialogTitle.value = "缂栬緫";
+ form.name = selectData.value.label;
+ form.refCode = selectData.value.data.refCode;
+ form.description = selectData.value.data.description;
dialogFormVisible.value = true;
+};
-}
-
-const delBtn =()=>{
- ElMessageBox.confirm(
- '纭畾瑕佸垹闄ら�変腑鐨勬暟鎹�?',
- 'Warning',
- {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning',
- }
- )
+const delBtn = () => {
+ if (selectData.value.data.childrenCmsItemCount > 0) {
+ ElMessage({
+ message: "棰戦亾涓嬭繕鏈夊叾浠栬祫婧愶紝璇峰厛鍒犻櫎璧勬簮鍚庨噸璇曪紒",
+ type: "warning",
+ });
+ return false;
+ }
+ if (selectData.value.data.childrenChannelCount > 0) {
+ ElMessage({
+ message: "棰戦亾涓嬭繕鏈夊瓙棰戦亾锛岃鍏堝垹闄ゅ瓙棰戦亾鍚庨噸璇曪紒",
+ type: "warning",
+ });
+ return false;
+ }
+ ElMessageBox.confirm("纭畾瑕佸垹闄ら�変腑鐨勬暟鎹�?", "鍒犻櫎棰戦亾", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
.then(() => {
- console.log()
-
+ console.log(selectData.value, "selectData.value");
+ let accessPath = "";
+ let accessItemId = 0;
+ if (!selectData.value.parent) {
+ accessPath = props.storeInfo.repositoryData.rootChannel.id + "";
+ accessItemId = props.storeInfo.repositoryData.rootChannel.id;
+ } else {
+ accessPath = selectData.value.parent.data.idPath;
+ accessItemId = selectData.value.parent.data.id;
+ }
+ MG.dps5
+ .DelCmsItemByList({
+ accessPath,
+ accessStoreId: selectData.value.data.storeId,
+ accessRepositoryId: selectData.value.data.repositoryId,
+ accessItemId,
+ itemIds: [selectData.value.data.id],
+ })
+ .then((res) => {
+ ElMessage({
+ message: "鍒犻櫎鎴愬姛",
+ type: "success",
+ });
+ treeKey.value += 1;
+ });
})
- .catch(() => {
-
- })
-}
+ .catch(() => {});
+};
-const systemClick = (data: TreeNode) => {};
+const systemClick = (data: TreeNode) => {
+ curSelectNode.value = data;
+ router.push({
+ path: "/systemManage" + data.path,
+ });
+ console.log(curSelectNode.value, "curSelectNode");
+};
</script>
<style lang="less" scoped>
--
Gitblit v1.9.1