11

ruoyi-ui/src/views/developer/workSpace/index.vue

@@ -1,69 +1,119 @@
 <template>
   <div style="height: 100vh;width: 100%;background-color: #F5F6F8;display: flex;">
+    <!-- 左侧菜单 -->
     <div style="width: 12%;background-color: white;margin-top: 2%;margin-left: 10%;height: 82vh;">
-        <div style="text-align: center;">
-            <svg-icon icon-class="头像" style="height: 70px;width: 70PX;margin-top: -15%;"/>
-        </div>
-        <div style="text-align: center;margin-top: 4%;">
-            北京金水公司
-        </div>
-        <el-menu  default-active="/workSpace"  class="custom-menu"  style="width: 100%;;margin-top: 10%;" router>
-            <el-menu-item  index="/workSpace" @click="pushTo">
-                <svg-icon icon-class="产品工作台" style="height: 1rem;width:1rem;"/>
-                <span style="margin-left: 2%;">工作台</span>
+      <div style="text-align: center;">
+        <svg-icon icon-class="头像" style="height: 70px;width: 70px;margin-top: -15%;"/>
+      </div>
+      <div style="text-align: center;margin-top: 4%;">
+        北京金水公司
+      </div>
+      <el-menu  
+        :default-active="activeMenu"
+        :default-openeds="openMenus"  
+        :router="true"               
+        @select="handleSelect"       
+        active-text-color="#409EFF"  
+      >
+        <el-menu-item index="/workSpace">
+          <svg-icon icon-class="产品工作台" style="height: 1rem;width:1rem;"/>
+          <span style="margin-left: 2%;">工作台</span>
+        </el-menu-item>
+        <el-sub-menu index="111" :key="'111'">
+          <template #title>
+            <svg-icon icon-class="申请" style="height: 1rem;width:1rem;"/>
+            <span>我的申请</span>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item index="/shenqing" @click="toggleSubMenu('111')"> <!-- 控制展开状态 -->
+              信息资源申请
             </el-menu-item>
-            <el-sub-menu index="111" >
-                <template #title>
-                    <svg-icon icon-class="申请" style="height: 1rem;width:1rem;"/>
-                    <span style="margin-left: 2%;">我的申请</span>
-                </template>
-                <el-menu-item-group>
-                    <el-menu-item index="/shenqing">信息资源申请</el-menu-item>
-                </el-menu-item-group>
-            </el-sub-menu>
-            <el-sub-menu index="122" >
-                <template #title>
-                    <svg-icon icon-class="收藏" style="height: 1rem;width:1rem;"/>
-                    <span style="margin-left: 2%;">浏览收藏</span>
-                </template>
-                <el-menu-item-group>
-                    <el-menu-item index="/ziyuan">资源浏览记录</el-menu-item>
-                </el-menu-item-group>
-            </el-sub-menu>
-            <el-menu-item index="/fankui">
-                <svg-icon icon-class="我的待办" style="height: 1rem;width:1rem;"/>
-                <span style="margin-left: 2%;">问题反馈</span>
+          </el-menu-item-group>
+        </el-sub-menu>
+        <el-sub-menu index="122" :key="'122'">
+          <template #title>
+            <svg-icon icon-class="收藏" style="height: 1rem;width:1rem;"/>
+            <span>浏览收藏</span>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item index="/ziyuan" @click="toggleSubMenu('122')">
+              资源浏览记录
             </el-menu-item>
-            <el-sub-menu index="1" >
-                <template #title>
-                    <svg-icon icon-class="配置管理" style="height: 1rem;width:1rem;"/>
-                    <span style="margin-left: 2%;">配置管理</span>
-                </template>
-                <el-menu-item-group>
-                    <el-menu-item index="/yingyong">应用管理</el-menu-item>
-                </el-menu-item-group>
-            </el-sub-menu>
-        </el-menu>
+        </el-menu-item-group>
+        </el-sub-menu>
+        <el-menu-item index="/fankui">
+          <svg-icon icon-class="我的待办" style="height: 1rem;width:1rem;"/>
+          <span>问题反馈</span>
+        </el-menu-item>
+        <el-sub-menu index="1" :key="'1'">
+          <template #title>
+            <svg-icon icon-class="配置管理" style="height: 1rem;width:1rem;"/>
+            <span>配置管理</span>
+          </template>
+          <el-menu-item-group>
+            <el-menu-item index="/yingyong" @click="toggleSubMenu('1')">
+              应用管理
+            </el-menu-item>
+          </el-menu-item-group>
+        </el-sub-menu>
+      </el-menu>
     </div>
-    <div style="width: 67%;background-color: white;margin-top: 2%;margin-left: 1%;height: 82%;background-color: ;">
-        <router-view></router-view>
+    <!-- 右侧内容 -->
+    <div style="width: 67%;background-color: white;margin-top: 2%;margin-left: 1%;height: 82%;">
+      <router-view></router-view>
     </div>
   </div>
 </template>
+
 <script setup>
-import { ref, onMounted } from 'vue';
-const router = useRouter();
-function pushTo(){
-    router.push('/workSpace');
+import { ref, watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+const activeMenu = ref(route.path)
+const openMenus = ref([]) 
+
+watch(
+  () => route.path,
+  (newPath) => {
+    activeMenu.value = newPath
+    // 根据路由路径自动展开父级菜单（需自定义逻辑）
+    if (newPath === '/shenqing') openMenus.value = ['111']
+    if (newPath === '/ziyuan') openMenus.value = ['122']
+    if (newPath === '/yingyong') openMenus.value = ['1']
+  }
+)
+
+// 手动控制子菜单展开/收起
+const toggleSubMenu = (index) => {
+  const indexPos = openMenus.value.indexOf(index)
+  if (indexPos > -1) {
+    openMenus.value.splice(indexPos, 1) // 收起
+  } else {
+    openMenus.value.push(index) // 展开
+  }
 }
+
 onMounted(() => {
-    pushTo()
-});
+  activeMenu.value = route.path
+})
 </script>
-<style scoped>
 
+<style scoped>
 .custom-menu {
   border-right: none !important;
 }
 
+/* 覆盖 Element Plus 默认样式 */
+:deep(.el-sub-menu.is-opened) {
+  .el-sub-menu__title {
+    background-color: #f5f7fa !important; /* 展开时的背景色 */
+  }
+}
+
+:deep(.el-menu-item.is-active) {
+  color: #409EFF !important; /* 激活文字颜色 */
+  background-color: #f5f7fa !important; /* 激活背景色 */
+}
 </style>

ruoyi-ui/src/views/standardization/modeling/index.vue

@@ -7,7 +7,8 @@
       <el-button @click="delWholeFlow" style="margin-left: auto;" type="danger" size="mini">删除</el-button>
       <!-- <el-button style="margin-left: 1%;" type="info" size="mini" plain @click="toImage">导出为图片</el-button> -->
       <el-button style="margin-left: 1%;" type="primary" size="mini" @click="saveFlow">保存</el-button>
-      <el-button style="margin-left: 1%;" type="primary" size="mini" @click="startTest">试运行</el-button>
+      <!-- <el-button style="margin-left: 1%;" type="primary" size="mini" @click="startTest">试运行</el-button> -->
+       <el-button style="margin-left: 1%;" type="primary" size="mini" @click="showNodes">试运行</el-button>
     </div>
     <div v-if="nodeDeSer" style="height: 82vh;overflow-y: auto;width: 20vw;position: absolute;float: right;z-index: 1000;right: 1%;top:6%;border: 0.1px solid #dedfe0;border-radius: 6px;background-color: white;">
       <div style="display: flex;margin-left: 3%;margin-top: 3%;align-items: center;justify-content: space-between;width: 95%;">
@@ -1100,6 +1101,9 @@ function closeDe(){
   nodeDeSer.value = false
   servieName.value = null
 }
+function showNodes(){
+  console.log(nodes.value)
+}
 function saveNode(){
   console.log(tableDataCan.value)
   var par = {
@@ -1162,6 +1166,7 @@ function saveNode(){
   // }
   console.log(nodes.value,parNodeid.value)
   nodes.value.forEach(item=>{
+    console.log(111)
     if(item.id===parNodeid.value){
       console.log(item.id)
       item.data.parameters = par.parameters
@@ -1171,7 +1176,7 @@ function saveNode(){
       }
     }
   })
-  console.log(toObject())
+  console.log(nodes.value)
 }
 function delWholeFlow(){
   proxy.$confirm('是否删除该模型流程？', '提示', {
@@ -1930,13 +1935,16 @@ async function onDrop(event) {
   
   // 1. 同步创建节点
   const newNode = {
-    id: nodeId,
+    id: nodeId.toString(),
     type: 'special',
     position,
     data: copyObject(draggedData.value) // 先使用本地数据
   };
   addNodes(newNode);
-
+  nodes.value = [...nodes.value, newNode]
+  await nextTick() // 等待 DOM 更新
+  updateNodeInternals()
+  console.log(nodes.value)
   // 2. 异步获取数据并更新
   
   // const res = await getSerDe(draggedData.value.id);
@@ -1947,10 +1955,10 @@ async function onDrop(event) {
   // };
 
   // 3. 等待节点渲染完成后再修正位置
-  nextTick(() => {
-    updateNode(nodeId, { data: { ...newNode.data, ...fullData } });
-    updateNodeInternals(nodeId); // 强制更新节点布局[1](@ref)
-  });
+  // nextTick(() => {
+  //   updateNode(nodeId, { data: { ...newNode.data, ...fullData } });
+  //   updateNodeInternals(nodeId);
+  // });
   // console.log(toObject())
 }