Merge branch 'master' of https://gitee.com/tj-wang-yahui/AMS_HeatSys_Vue_V10

src/components/MyMenu.vue

@@ -98,7 +98,6 @@
                 options.value.push(menus[i].childs[j])
             }
         }
-        console.log(options.value)
     }
 
     //定义默认展开

src/views/home.vue

 <template>
-  <div id="ams-container">
+  <div id="ams-container" @click="closeContextMenu">
     <div class="ams-aside" :style="{ width: menuWidth + 'px' }">
       <div class="header" :style="{ width: menuWidth - 1 + 'px' }">
         <img
@@ -292,6 +292,7 @@
             class="demo-tabs mytab"
             @tab-remove="removeTab"
             @tab-change="changeTabsHandle"
+            @contextmenu.prevent.native="openContextMenu($event)"
           >
             <el-tab-pane
               :closable="item.path !== '/RealSupply'"
@@ -302,6 +303,16 @@
             >
             </el-tab-pane>
           </el-tabs>
+          <ul
+              v-show="contextMenuVisible"
+              :style="{left:left+'px',top:top+'px'}"
+              class="contextmenu"
+            >
+              <li @click="closeAllTabs">关闭所有</li>
+              <li @click="closeLeftTabs()">关闭左边</li>
+              <li @click="closeRigthTabs()">关闭右边</li>
+              <li @click="closeOtherTabs()">关闭其他</li>
+            </ul>
         </div>
         <div :style="{ height: mainHeight + 'px' }">
           <!--, width: mainWidth +'px' -->
@@ -353,6 +364,29 @@
   background-color: #0065d5;
   color: #ffffff;
 }
+
+.contextmenu {
+  width: 100px;
+  margin: 0;
+  border: 1px solid #ccc;
+  background: #fff;
+  z-index: 3000;
+  position: absolute;
+  list-style-type: none;
+  padding: 5px 0;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #333;
+  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
+}
+.contextmenu li {
+  margin: 0;
+  padding: 7px 16px;
+}
+.contextmenu li:hover {
+  background: #f2f2f2;
+  cursor: pointer;
+}
 </style>
 
 <script lang="ts">
@@ -607,7 +641,6 @@ export default defineComponent({
 
     //标签删除函数
     const removeTab = (path) => {
-      console.log(path);
       let isTabs = activeTable.value;
       const tabs = editableTabs.value;
       //删除的是 激活菜单,将激活选项设为 上一个或下一个标签的 path
@@ -920,6 +953,113 @@ export default defineComponent({
       }
     }
     getuserdata();
+
+    var left = ref();
+    var top = ref();
+    var currentContextTabId = ref();
+    //标签右击事件
+    function openContextMenu(e) {
+      if (e.srcElement.id) {
+        currentContextTabId.value = e.srcElement.id.split("-")[1];
+        contextMenuVisible.value = true;
+        // this.$store.commit("saveCurContextTabId", currentContextTabId);
+        left.value = e.clientX-200;
+        top.value = e.clientY - 70;
+      }
+    }
+    // 关闭所有标签页
+    function closeAllTabs() {
+      editableTabs.value = [
+      {
+        title: "首页-实时热源",
+        path: "/RealSupply",
+      },
+    ];
+      //本地存储
+      window.sessionStorage.setItem(
+        "tabList",
+        JSON.stringify(editableTabs.value)
+      );
+      //路由跳转
+      router.push('/RealSupply');
+      contextMenuVisible.value = false;
+    }
+    // 关闭其它标签页
+    function closeOtherTabs() {
+        editableTabs.value = editableTabs.value.filter(
+        (item) => item.path === currentContextTabId.value || item.path === '/RealSupply'
+      );
+      //本地存储
+      window.sessionStorage.setItem(
+        "tabList",
+        JSON.stringify(editableTabs.value)
+      );
+      //路由跳转
+      router.push(currentContextTabId.value);
+      contextMenuVisible.value = false;
+    }
+    // 关闭contextMenu
+    function closeContextMenu() {
+      contextMenuVisible.value = false;
+    }
+    // 关闭左侧标签页
+    function closeLeftTabs() {
+      let isTabs = currentContextTabId.value;
+      const tabs = editableTabs.value;
+      tabs.forEach((item, index) => {
+        if (item.path == currentContextTabId.value) {
+          //找到了需要删除的菜单
+          //获取上一个或下一个标签
+          const nextTab = tabs[index - 1];
+          if(nextTab && nextTab.path == activeTable.value){
+            activeTable.value = '/RealSupply';
+          }
+          if (nextTab) {
+            isTabs = nextTab.path;
+          }
+        }
+      });
+      editableTabs.value = editableTabs.value.filter(
+        (item) => item.path != isTabs || item.path === '/RealSupply'
+      );
+      //本地存储
+      window.sessionStorage.setItem(
+        "tabList",
+        JSON.stringify(editableTabs.value)
+      );
+      //路由跳转
+      router.push(activeTable.value);
+      contextMenuVisible.value = false;
+    }
+    // 关闭右侧标签页
+    function closeRigthTabs() {
+      let isTabs = activeTable.value;
+      const tabs = editableTabs.value;
+      tabs.forEach((item, index) => {
+        if (item.path == currentContextTabId.value) {
+          //找到了需要删除的菜单
+          //获取上一个或下一个标签
+          const nextTab = tabs[index + 1];
+          if(nextTab && nextTab.path == activeTable.value){
+            activeTable.value = '/RealSupply';
+          }
+          if (nextTab) {
+            isTabs = nextTab.path;
+            editableTabs.value = editableTabs.value.filter(
+              (item) => item.path != isTabs || item.path === '/RealSupply'
+            );
+          }
+        }
+      });
+      //本地存储
+      window.sessionStorage.setItem(
+        "tabList",
+        JSON.stringify(editableTabs.value)
+      );
+      //路由跳转
+      router.push(activeTable.value);
+      contextMenuVisible.value = false;
+    }
     
     return {
       menuWidth,
@@ -958,6 +1098,14 @@ export default defineComponent({
       showenterpriseName,
       savepass,
       funsel,
+      openContextMenu,
+      left,
+      top,
+      closeAllTabs,
+      closeOtherTabs,
+      closeContextMenu,
+      closeRigthTabs,
+      closeLeftTabs
     };
   },
   methods: {