change tab

web-vue/src/pages/layout/content-tab.vue

@@ -37,6 +37,10 @@
           </a-menu>
         </a-dropdown>
       </template>
+
+      <keep-alive>
+        <router-view :nodeId="tab.nodeId" />
+      </keep-alive>
     </a-tab-pane>
     <template slot="tabBarExtraContent"> <user-header /> </template>
   </a-tabs>
@@ -106,7 +110,8 @@ export default {
 .my-tabs {
   flex: auto;
   /* margin-right: 20px; */
-  align-self: center;
-  height: 40px;
+  /* align-self: center; */
+  /* height: 40px; */
+  margin-top: 10px;
 }
 </style>

web-vue/src/pages/layout/index.vue

@@ -10,7 +10,7 @@
       <side-menu class="side-menu" />
     </a-layout-sider>
     <a-layout>
-      <a-layout-header class="app-header">
+      <a-layout class="app-header">
         <!-- <a-tooltip placement="right" title="折叠左侧菜单栏">
           <a-icon class="icon-btn" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="changeCollapsed" />
         </a-tooltip> -->
@@ -19,12 +19,12 @@
         </a-tooltip> -->
         <content-tab />
         <!-- <user-header /> -->
-      </a-layout-header>
-      <a-layout-content class="layout-content">
+      </a-layout>
+      <!-- <a-layout-content class="layout-content">
         <keep-alive>
           <router-view />
         </keep-alive>
-      </a-layout-content>
+      </a-layout-content> -->
     </a-layout>
   </a-layout>
 </template>

web-vue/src/pages/layout/side-menu.vue

@@ -23,7 +23,8 @@ export default {
     ...mapGetters(["getMenus", "getActiveMenuKey", "getMenuOpenKeys", "getCollapsed"]),
     selectedKeys: {
       get() {
-        return [this.getActiveMenuKey];
+        console.log(this.getActiveMenuKey);
+        return [this.getActiveMenuKey || ""];
       },
       set() {},
     },

web-vue/src/pages/node/list.vue

@@ -494,15 +494,25 @@ export default {
     },
     // 管理节点
     handleNode(record) {
-      this.temp = Object.assign(record);
-      this.drawerTitle = `${this.temp.name} (${this.temp.url})`;
-      this.drawerVisible = true;
-      let nodeId = this.$route.query.nodeId;
-      if (nodeId !== record.id) {
-        this.$router.push({
-          query: { ...this.$route.query, nodeId: record.id },
+      // this.temp = Object.assign(record);
+      // this.drawerTitle = `${this.temp.name} (${this.temp.url})`;
+      // this.drawerVisible = true;
+      // let nodeId = this.$route.query.nodeId;
+      // if (nodeId !== record.id) {
+      this.$router
+        .push({
+          name: "node-layout",
+          //node-layout
+          params: { ...this.$route.params, nodeId: record.id, name: record.name },
+        })
+        .then(() => {
+          // let query = Object.assign({}, this.$route.query);
+          // delete query.nodeId, delete query.name;
+          // this.$router.replace({
+          //   query: query,
+          // });
         });
-      }
+      // }
     },
     syncNode(node) {
       syncProject(node.nodeId).then((res) => {

web-vue/src/pages/node/node-layout/index.vue

@@ -2,7 +2,7 @@
   <a-layout class="node-layout">
     <!-- 侧边栏 节点管理菜单 -->
     <a-layout-sider theme="light" class="node-sider jpom-node-sider">
-      <a-menu theme="light" mode="inline" :default-selected-keys="selectedKeys" :default-open-keys="defaultOpenKey">
+      <a-menu theme="light" mode="inline">
         <template v-for="menu in nodeMenuList">
           <a-sub-menu v-if="menu.childs" :key="menu.id" :class="menu.id">
             <span slot="title">
@@ -21,7 +21,7 @@
       </a-menu>
     </a-layout-sider>
     <!-- 节点管理的各个组件 -->
-    <a-layout-content class="layout-content jpom-node-content">
+    <a-layout-content v-if="this.nodeId" class="layout-content jpom-node-content">
       <welcome v-if="currentId === 'welcome'" :node="node" />
       <project-list v-if="currentId === 'manageList'" :node="node" />
       <jdk-list v-if="currentId === 'jdkList'" :node="node" />
@@ -40,7 +40,7 @@
   </a-layout>
 </template>
 <script>
-import { getNodeMenu } from "../../../api/menu";
+import { getNodeMenu } from "@/api/menu";
 import Welcome from "./welcome";
 import ProjectList from "./project/project-list";
 import JdkList from "./project/jdk-list";
@@ -74,14 +74,18 @@ export default {
     ScriptLog,
   },
   props: {
-    node: {
-      type: Object,
+    // node: {
+    //   type: Object,
+    // },
+    nodeId: {
+      type: String,
     },
   },
   data() {
     return {
+      node: {},
       nodeMenuList: [],
-      selectedKeys: [this.$route.query.id || "welcome"],
+      selectedKeys: ["welcome"],
     };
   },
   computed: {
@@ -92,13 +96,19 @@ export default {
       let keyList = [];
       if (this.$route.query.pId) {
         // 打开对应的父级菜单
-        keyList = [this.$route.query.pId, "systemConfig"];
+        keyList = [];
       }
       return keyList;
     },
   },
   watch: {},
   created() {
+    if (!this.nodeId) {
+      return;
+    }
+    this.node.id = this.nodeId;
+
+    console.log(this.nodeId);
     this.loadNodeMenu();
     setTimeout(() => {
       this.introGuide();
@@ -154,14 +164,14 @@ export default {
     },
     // 点击菜单
     handleMenuClick(id, pId) {
-      this.selectedKeys = [id];
-      this.$router.push({
-        query: {
-          ...this.$route.query,
-          pId: pId,
-          id: id,
-        },
-      });
+      this.selectedKeys = [id, pId];
+      // this.$router.push({
+      //   query: {
+      //     ...this.$route.query,
+      //     pId: pId,
+      //     id: id,
+      //   },
+      // });
     },
   },
 };

web-vue/src/router/auth.js

 /**
- * 路由鉴权 
+ * 路由鉴权
  * 比如某些路由必须要登录
  */
-import { notification } from 'ant-design-vue';
-import router from './index';
-import store from '../store/index';
+import { notification } from "ant-design-vue";
+import router from "./index";
+import store from "../store/index";
 
 // 不需要鉴权的名单
-const whiteList = [
-  '/login', '/install','/system/ipAccess'
-]
+const whiteList = ["/login", "/install", "/system/ipAccess"];
 
 router.beforeEach((to, from, next) => {
   // 检测白名单
@@ -19,22 +17,22 @@ router.beforeEach((to, from, next) => {
   }
   // 判断 token 是否存在
   if (!store.getters.getToken) {
-    if (from.path !== '/') {
+    if (from.path !== "/") {
       notification.error({
-        message: '未登录，无法访问！',
+        message: "未登录，无法访问！",
         description: `from: ${from.path} ==> to: ${to.path}`,
-        
       });
     }
-    next('/login');
+    next("/login");
     return;
   }
   // 如果存在 token (已经登录) 且是访问 / 路由，需要重新请求菜单接口（使用 action 实现）
-  if (store.getters.getToken && from.path === '/') {
-    store.dispatch('loadSystemMenus');
+  if (store.getters.getToken && from.path === "/") {
+    store.dispatch("loadSystemMenus");
   }
+  // console.log(to);
   // 存储 store
-  store.dispatch('addTab', {key: to.name, path: to.path}).then(() => {
+  store.dispatch("addTab", { key: to.name, path: to.path, nodeId: to.query.nodeId, title: to.query.name }).then(() => {
     next();
-  })
-})
+  });
+});

web-vue/src/router/index.js

@@ -11,11 +11,11 @@ Router.prototype.push = function push(location) {
 Vue.use(Router);
 
 const children = [
-  {
-    path: "/dashboard",
-    name: "dashboard",
-    component: () => import("../pages/dashboard"),
-  },
+  // {
+  //   path: "/dashboard",
+  //   name: "dashboard",
+  //   component: () => import("../pages/dashboard"),
+  // },
   {
     path: "/node/list",
     name: "node-list",
@@ -96,11 +96,11 @@ const children = [
     name: "user-list",
     component: () => import("../pages/user"),
   },
-  // {
-  //   path: "/role/list",
-  //   name: "role-list",
-  //   component: () => import("../pages/role"),
-  // },
+  {
+    path: "/node-layout:nodeId",
+    name: "node-layout",
+    component: () => import("../pages/node/node-layout/index"),
+  },
   {
     path: "/operation/log",
     name: "operation-log",
@@ -148,11 +148,11 @@ const children = [
 const router = new Router({
   mode: "hash",
   routes: [
-    {
-      path: "/test",
-      name: "test",
-      component: () => import("../pages/test"),
-    },
+    // {
+    //   path: "/test",
+    //   name: "test",
+    //   component: () => import("../pages/test"),
+    // },
     {
       path: "/login",
       name: "login",
@@ -164,6 +164,7 @@ const router = new Router({
       component: () => import("../pages/layout"),
       redirect: "/node/list",
       children: children,
+      // components: components,
     },
     {
       path: "/install",

web-vue/src/store/modules/app.js

@@ -39,34 +39,43 @@ const app = {
     // 添加 tab
     addTab({ commit, state, rootGetters, dispatch }, tab) {
       return new Promise((resolve) => {
-        // 从 store 里面拿到 menus 匹配 path 得到当前的菜单，设置 tab 的标题
-        const menus = rootGetters.getMenus;
-        let currentMenu = null;
-        menus.forEach((menu) => {
-          menu.childs.forEach((subMenu) => {
-            if (subMenu.path === tab.path) {
-              currentMenu = subMenu;
-              currentMenu.parent = menu;
-            }
-          });
-        });
-        if (!currentMenu) {
-          return;
-        }
-        tab.title = currentMenu.title;
-        tab.id = currentMenu.id;
-        tab.parentId = currentMenu.parent.id;
         let tabList = state.tabList || [];
-        // 获取下标 -1 表示可以添加 否则就是已经存在
-        const index = tabList.findIndex((ele) => ele.key === tab.key);
-        if (index > -1) {
-          // 设置 activeTabKey
+        let nowIndex;
+        //
+        if (tab.path === "/node-layout") {
+          //
+          tab.parentId = "nodeManager";
+          tab.id = tab.nodeId;
+          // tab.key = tab.nodeId;
+          nowIndex = tabList.findIndex((ele) => ele.nodeId === tab.nodeId);
         } else {
+          // 从 store 里面拿到 menus 匹配 path 得到当前的菜单，设置 tab 的标题
+          const menus = rootGetters.getMenus;
+          let currentMenu = null;
+          menus.forEach((menu) => {
+            menu.childs.forEach((subMenu) => {
+              if (subMenu.path === tab.path) {
+                currentMenu = subMenu;
+                currentMenu.parent = menu;
+              }
+            });
+          });
+          if (!currentMenu) {
+            return;
+          }
+          tab.title = currentMenu.title;
+          tab.id = currentMenu.id;
+          tab.parentId = currentMenu.parent.id;
+          // 获取下标 -1 表示可以添加 否则就是已经存在
+          nowIndex = tabList.findIndex((ele) => ele.key === tab.key);
+        }
+        if (nowIndex === -1) {
           // 新增
           tabList.push(tab);
           commit("setTabList", tabList);
           localStorage.setItem(TAB_LIST_KEY, JSON.stringify(tabList));
         }
+
         // 设置当前选择的菜单
         dispatch("activeTabKey", tab.key);
         dispatch("activeMenu", tab.id);