n20-common-lib 1.1.98

package/src/components/Layout/SubContent/index.vue

@@ -0,0 +1,131 @@
+<template>
+  <keep-alive v-if="dnsKey">
+    <router-view
+      ref="content-cache"
+      :key="$route.path"
+      class="content-box"
+      :no-cache="$route.meta.noCache"
+    />
+  </keep-alive>
+  <router-view
+    v-else
+    ref="content-cache"
+    class="content-box"
+    :no-cache="$route.meta.noCache"
+  />
+</template>
+
+<script>
+const TestProduction = process.env.VUE_APP_TestProduction === 'true'
+
+import { setRela } from '../../../utils/relaNo'
+const routerBase = process.env.BASE_URL
+const routerBaseRe = new RegExp('^' + routerBase)
+
+export default {
+  name: 'SubContent',
+  props: {
+    appNo: {
+      type: String,
+      default: process.env.VUE_APP_NAME
+    },
+    isTest: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dnsKey: this.isTest || TestProduction
+    }
+  },
+  watch: {
+    $route: {
+      handler(vn, vo) {
+        if (vo.meta.noCache) {
+          this.removeOcache({ path: vo.path })
+        }
+      }
+    }
+  },
+  created() {
+    setRela(this.appNo)
+
+    window.addEventListener('message', this.watchMessage)
+
+    setTimeout(() => {
+      this.pendingRemoveCaches()
+    }, 60)
+  },
+  activated() {
+    window.addEventListener('message', this.watchMessage)
+
+    setTimeout(() => {
+      this.pendingRemoveCaches()
+    }, 60)
+  },
+  deactivated() {
+    window.removeEventListener('message', this.watchMessage)
+  },
+  beforeDestroy() {
+    window.removeEventListener('message', this.watchMessage)
+  },
+  methods: {
+    watchMessage(ev) {
+      const { targetName, originName } = ev.data
+      if (targetName === '*' && originName === 'main') {
+        this.pendingRemoveCaches()
+      }
+    },
+    pendingRemoveCaches() {
+      for (let key in window._pending_update_cache) {
+        if (routerBaseRe.test(key) && window._pending_update_cache[key]) {
+          let cacheKey = key.replace(routerBaseRe, '/')
+          if (cacheKey === this.$route.path) {
+            let path = this.$route.path
+            let oTab = JSON.parse(
+              JSON.stringify({
+                path: this.$route.path,
+                query: this.$route.query
+              })
+            )
+
+            this.$router.replace('/loading')
+            this.removeOcache({ path: path })
+            setTimeout(() => {
+              this.$router.replace(oTab)
+            }, 300)
+          } else {
+            this.removeOcache({ path: cacheKey })
+          }
+        }
+      }
+    },
+    removeOcache({ path }) {
+      if (!this.dnsKey) return
+
+      let componentInstance =
+        this.$refs['content-cache']?.$vnode.parent.componentInstance
+
+      if (componentInstance) {
+        let kI = componentInstance.keys.findIndex((k) => k === path)
+        if (kI !== -1) {
+          let destroy = componentInstance.cache[path].componentInstance.destroy
+          destroy && destroy()
+
+          delete componentInstance.cache[path]
+          componentInstance.keys.splice(kI, 1)
+
+          let spath = path.replace(/^\//, routerBase)
+          delete window._pending_update_cache[spath]
+        }
+
+        // console.log({
+        //   cache: componentInstance.cache,
+        //   keys: componentInstance.keys
+        // })
+      }
+    }
+  }
+}
+</script>

package/src/components/Layout/TabsNav/index.vue

@@ -0,0 +1,170 @@
+/* 多页签导航 */
+<template>
+  <el-tabs
+    ref="nav-tabs"
+    :value="activeNav"
+    type="card"
+    closable
+    @tab-click="tabClick"
+    @tab-remove="tabClose"
+    @contextmenu.native.prevent="tabContextmenu"
+    @mousewheel.native.prevent="tabScroll"
+  >
+    <el-tab-pane
+      v-for="tab in tabList"
+      :key="tab.uuid"
+      :label="tab | tabLabelF"
+      :name="tab.uuid"
+      :tab-info="tab"
+    />
+    <el-dropdown
+      trigger="click"
+      placement="bottom"
+      style="display: none"
+      @command="menuCommand"
+    >
+      <span>右键菜单</span>
+      <el-dropdown-menu
+        ref="contextMenu"
+        v-click-outside="clickOut"
+        class="tab-nav-context-menu"
+      >
+        <el-dropdown-item command="refresh">{{
+          '刷新当前标签' | $l(i18n)
+        }}</el-dropdown-item>
+        <el-dropdown-item
+          v-if="!menuInTab || !menuInTab.keep"
+          command="close"
+          >{{ '关闭当前标签' | $l(i18n) }}</el-dropdown-item
+        >
+        <el-dropdown-item command="closeNexts">{{
+          '关闭右侧标签' | $l(i18n)
+        }}</el-dropdown-item>
+        <el-dropdown-item command="closeOthers">{{
+          '关闭其他标签' | $l(i18n)
+        }}</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-tabs>
+</template>
+
+<script>
+import { labelF } from '../utils'
+const i18n = {
+  刷新当前标签: {
+    en: 'Refresh current label'
+  },
+  关闭当前标签: {
+    en: 'Close current label'
+  },
+  关闭右侧标签: {
+    en: 'Close right label'
+  },
+  关闭其他标签: {
+    en: 'Close other labels'
+  }
+}
+
+export default {
+  filters: {
+    tabLabelF: labelF
+  },
+  props: {
+    tabList: {
+      type: Array,
+      default: () => []
+    },
+    activeNav: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      showContextMenu: false,
+      menuInTab: undefined,
+      i18n
+    }
+  },
+  methods: {
+    tabClick(C) {
+      let item = C.$attrs['tab-info']
+      this.$emit('tab-click', item)
+    },
+    tabClose(uuid) {
+      this.$emit('tab-close', { uuid })
+    },
+    tabContextmenu(ev) {
+      let emitTab = undefined
+      ev.path.some((dom) => {
+        if (dom.classList.contains('el-tabs__item')) {
+          emitTab = dom
+          return true
+        } else if (dom === ev.currentTarget) {
+          return true
+        }
+      })
+      if (emitTab) {
+        let uuid = emitTab.getAttribute('id').replace('tab-', '')
+        this._tabContextmenu(uuid, emitTab)
+      }
+    },
+    _tabContextmenu(uuid, dom) {
+      this.menuInTab = this.tabList.find((t) => t.uuid === uuid)
+
+      let contextMenu = this.$refs.contextMenu
+      if (this.showContextMenu) {
+        contextMenu.showPopper = false
+        this.showContextMenu = false
+
+        contextMenu.referenceElm = dom
+        setTimeout(() => {
+          contextMenu.showPopper = true
+          this.showContextMenu = true
+        }, 400)
+      } else {
+        contextMenu.referenceElm = dom
+        contextMenu.showPopper = true
+        this.showContextMenu = true
+      }
+    },
+    clickOut() {
+      if (this.showContextMenu) {
+        this.$refs.contextMenu.showPopper = false
+        this.showContextMenu = false
+        this.menuInTab = undefined
+      }
+    },
+    menuCommand(c) {
+      switch (c) {
+        case 'refresh':
+          this.$emit('tab-refresh', { uuid: this.menuInTab.uuid })
+          break
+        case 'close':
+          this.$emit('tab-close', { uuid: this.menuInTab.uuid })
+          break
+        case 'closeNexts':
+          this.$emit('tab-close-nexts', this.menuInTab.uuid)
+          break
+        case 'closeOthers':
+          this.$emit('tab-close-others', this.menuInTab.uuid)
+          break
+      }
+
+      this.clickOut()
+    },
+    tabScroll(ev) {
+      let isPrev = ev.wheelDelta < 0
+      let refNav = this.$refs['nav-tabs'].$refs['nav']
+      if (isPrev) {
+        refNav.scrollNext()
+      } else {
+        refNav.scrollPrev()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>