页签历史驻留,返回关闭功能完成

examples/components/mainContent.vue

@@ -1,75 +1,22 @@
 <template>
   <section class="mainContent">
-    <el-tabs class="layout" type="card" :value="currentTab" @tab-click="handleTabClick" @tab-remove="handleTabRemove">
+    <ai-nav-tab/>
-      <el-tab-pane label="首页" name="0"/>
-      <el-tab-pane v-for="op in tabs" :key="op.name" :name="op.name" :label="op.label" lazy closable/>
-    </el-tabs>
     <div class="fill">
       <router-view/>
-      <ai-empty v-if="currentTab=='0'">欢迎使用村微产品库</ai-empty>
+      <ai-empty v-if="isHome">欢迎使用村微产品库</ai-empty>
     </div>
   </section>
 </template>
 
 <script>
-import {mapState} from "vuex";
+import AiNavTab from "dui/packages/basic/AiNavTab";
 
 export default {
   name: "mainContent",
+  components: {AiNavTab},
   computed: {
-    ...mapState(['apps']),
+    isHome: v => v.$route.path == '/',
-    currentTab() {
-      let {name, query, hash} = this.$route
-      return [name?.replace(query?.id, ''), query?.id, hash].join("") || "0"
-    }
   },
-  data() {
-    return {
-      tabs: []
-    }
-  },
-  watch: {
-    $route: {
-      immediate: true,
-      handler() {
-        this.getTabs()
-      }
-    },
-  },
-  methods: {
-    handleTabClick({name}) {
-      if (name == '0') {
-        this.$router.push("/")
-      } else {
-        let {name: route, query, hash} = this.tabs.find(e => e.name == name),
-            exps = []
-        query.id && exps.push(query.id)
-        hash && exps.push(hash)
-        let reg = new RegExp(`(${exps.join("|")})`, 'g')
-        this.$router.push({name: route.replace(reg, ''), query, hash})
-      }
-    },
-    handleTabRemove(id = this.currentTab) {
-      let tabs = JSON.parse(JSON.stringify(this.tabs)),
-          index = tabs?.findIndex(e => id == e.name)
-      if (id == this.currentTab) {
-        let next = tabs?.[index + 1] || tabs?.[index - 1]
-        next ? this.handleTabClick(next) : this.$router.push({path: '/'})
-      }
-      this.tabs.splice(index, 1)
-    },
-    getTabs() {
-      let {name, query, hash} = this.$route
-      let tab = this.tabs.find(e => e.name == this.currentTab),
-          tabName = [name, query?.id, hash].join("")
-      if (tab) {
-      } else if (!name) {
-      } else if (tabName) {
-        let menu = this.apps.find(e => e.name == name)
-        this.tabs.push({name: tabName, query, hash, label: menu?.label})
-      }
-    },
-  }
 }
 </script>
 
@@ -80,7 +27,7 @@ export default {
   display: flex;
   flex-direction: column;
 
-  :deep(.layout ){
+  :deep(.layout ) {
     background: #F5F6F9;
     display: flex;
     flex-direction: column;

project/oms/apps/develop/AppDeployCustom/add.vue

@@ -222,6 +222,7 @@
 </template>
 
 <script>
+import {mapActions} from "vuex"
 import AiLibTable from "./AiLibTable";
 
 export default {
@@ -284,6 +285,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(['closePage']),
     getDetail() {
       let {id} = this.$route.query
       id && this.instance.post("/node/custom/detail", null, {
@@ -296,6 +298,7 @@ export default {
       })
     },
     back() {
+      this.closePage()
       this.$router.push({})
     },
     submit() {

ui/lib/js/modules.js

@@ -234,13 +234,29 @@ export const wxwork = {
  */
 export const logs = {
   state: () => ({
-    closeIntro: []
+    closeIntro: [], pages: []
   }),
   mutations: {
     addCloseIntro(state, app) {
       state.closeIntro.push(app)
-    }
+    },
+    addPage(state, page) {
+      const id = location.href?.replace(location.origin, "")
+      if (!state.pages.find(e => e.id == id || e.id == page.id)) {
+        state.pages.push({...page, id})
+      }
+    },
+    deletePage(state, id) {
+      id = id || location.href?.replace(location.origin, "")
+      const i = state.pages.findIndex(e => e.id == id)
+      i > -1 && state.pages.splice(i, 1)
+    },
   },
+  actions: {
+    closePage({commit}, id) {
+      return commit("deletePage", id)
+    }
+  }
 }
 /**
  * 流程信息

ui/packages/basic/AiNavTab.vue

@@ -0,0 +1,121 @@
+<template>
+  <section class="AiNavTab">
+    <el-tabs class="layout" type="card" :value="currentTab" @tab-click="handleTabClick" @tab-remove="handleTabRemove">
+      <el-tab-pane label="首页" name="/"/>
+      <el-tab-pane v-for="(op,i) in tabs" :key="i" :name="op.id" :label="op.label" lazy closable/>
+    </el-tabs>
+  </section>
+</template>
+
+<script>
+import {mapState, mapMutations} from "vuex";
+export default {
+  name: "AiNavTab",
+  computed: {
+    ...mapState(['apps', 'logs']),
+    currentTab: v => v.isHome ? "/" : v.$route.fullPath,
+    isHome: v => v.$route.path == '/',
+    tabs: v => v.logs.pages
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler(v) {
+        const currentPage = this.apps.find(e => e.name == v.name);
+        currentPage && this.addPage(currentPage)
+      }
+    }
+  },
+  methods: {
+    ...mapMutations(['addPage', 'deletePage']),
+    handleTabClick(pageTab) {
+      const {name} = pageTab
+      this.$router.push(name)
+    },
+    handleTabRemove(id) {
+      const {pages} = this.logs
+      if (id == this.currentTab) {
+        const index = pages.findIndex(e => e.id == id)
+        const next = pages?.[index + 1] || pages?.[index - 1] || {name: '/'}
+        this.handleTabClick(next)
+      }
+      this.deletePage(id)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiNavTab {
+  :deep(.layout ) {
+    background: #F5F6F9;
+    display: flex;
+    flex-direction: column;
+
+    & > .el-tabs__header {
+      margin-bottom: 0;
+      background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
+      height: 40px;
+      display: flex;
+      align-items: flex-end;
+      border: none;
+
+      .el-tabs__nav {
+        border: none;
+      }
+
+      .el-tabs__item {
+        padding: 0 8px 0 12px !important;
+        text-align: left;
+        min-width: 130px;
+        height: 36px;
+        line-height: 36px;
+        border: none;
+        color: #555;
+        font-size: 12px;
+
+        & + .el-tabs__item {
+          margin-left: 2px;
+        }
+
+        .el-icon-close {
+          float: right;
+          width: auto;
+          height: 100%;
+          line-height: 36px;
+          background: transparent;
+          font-size: 16px;
+          color: #89b;
+
+          &:hover {
+            color: #000;
+          }
+        }
+
+        &.is-active {
+          border: 1px solid #D8DCE3;
+          border-bottom: none;
+          border-radius: 4px 4px 0 0;
+          background: #F5F6F9;
+          color: #222;
+
+          &:after {
+            display: none;
+          }
+        }
+
+        &:after {
+          position: absolute;
+          right: 0;
+          content: " ";
+          width: 1px;
+          background: #D8DCE3;
+          height: 24px;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+      }
+    }
+  }
+}
+</style>

ui/packages/basic/AiTitle.vue

@@ -31,6 +31,8 @@
 </template>
 
 <script>
+import {mapActions} from "vuex"
+
 export default {
   name: 'AiTitle',
   model: {
@@ -84,7 +86,9 @@ export default {
   },
 
   methods: {
+    ...mapActions(['closePage']),
     onBackBtnClick() {
+      this.closePage()
       this.$emit('onBackClick')
       this.$emit('back')
     }
@@ -129,7 +133,7 @@ export default {
       align-items: center;
     }
 
-    :deep(.el-button ){
+    :deep(.el-button ) {
       margin-left: 8px !important;
     }
   }