n20-common-lib 1.1.98

package/src/components/Layout/index.vue

@@ -0,0 +1,529 @@
+<template>
+  <div class="layout-wrap">
+    <headerWrap
+      class="header-wrap"
+      @custom-event="(par) => $emit('custom-event', par)"
+    />
+    <asideNav
+      :menus="menusC"
+      :active-nav="activeNavC"
+      :collapse.sync="collapse"
+      @menu-click="menuClick"
+    />
+    <tabsNav
+      class="tabs-nav-wrap"
+      :tab-list="tabList"
+      :active-nav="activeNav"
+      @tab-click="tabClick"
+      @tab-close="tabClose"
+      @tab-close-nexts="tabCloseNexts"
+      @tab-close-others="tabCloseOthers"
+      @tab-refresh="tabRefresh"
+    />
+    <div ref="content-wrap" class="content-wrap">
+      <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"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+const TestProduction = process.env.VUE_APP_TestProduction === 'true'
+const routerBase = process.env.BASE_URL
+const routerBaseRe = new RegExp('^' + routerBase)
+
+import { addListener, removeListener } from 'resize-detector'
+import forEachs from '../../utils/forEachs'
+import { setRela } from '../../utils/relaNo'
+import asideNav from './AsideNav/index.vue'
+import headerWrap from './HeaderWrap/index.vue'
+import tabsNav from './TabsNav/index.vue'
+
+export default {
+  name: 'Layout',
+  components: {
+    asideNav,
+    headerWrap,
+    tabsNav
+  },
+  props: {
+    appNo: {
+      type: String,
+      default: process.env.VUE_APP_NAME
+    },
+    menus: {
+      type: Array,
+      default: () => []
+    },
+    keepTab: {
+      type: String,
+      default: ''
+    },
+    isTest: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    let headerH = 48
+    let tabsH = 35
+    let clientM = 10 + 1
+
+    return {
+      dnsKey: this.isTest || TestProduction,
+      headerH,
+      tabsH,
+      clientM,
+      clientHeight:
+        document.documentElement.offsetHeight - headerH - tabsH - 2 * clientM,
+      collapse: window.localStorage.getItem('aside-nav-collapse') === 'true',
+
+      menusC: [],
+      menuList: [],
+      tabList: [],
+      activeNav: ''
+    }
+  },
+  computed: {
+    activeNavC() {
+      return getShowUuid(this.activeNav, this.menuList)
+    }
+  },
+  watch: {
+    menus: {
+      handler() {
+        this.getMenuList()
+      },
+      immediate: true
+    },
+    collapse: {
+      handler(val) {
+        if (val) {
+          document.querySelector('body').classList.add('aside-nav--collapse')
+        } else {
+          document.querySelector('body').classList.remove('aside-nav--collapse')
+        }
+      },
+      immediate: true
+    },
+    clientHeight: {
+      handler(val) {
+        document
+          .querySelector('body')
+          .style.setProperty('--client-height', val + 'px')
+      },
+      immediate: true
+    }
+  },
+  created() {
+    window._tab_cache_route = undefined
+    window._pending_update_cache = {}
+
+    setRela(this.appNo)
+
+    this.getCollapse()
+    this.getTabList()
+    setTimeout(() => {
+      this.getActiveNav()
+    }, 60)
+
+    window.addEventListener('message', this.setMainTab)
+
+    window.addEventListener('beforeunload', this.setTabList)
+  },
+  mounted() {
+    addListener(this.$refs['content-wrap'], this.contentChange)
+  },
+  beforeDestroy() {
+    removeListener(this.$refs['content-wrap'], this.contentChange)
+    this.setTabList()
+
+    window.removeEventListener('message', this.setMainTab)
+
+    window.removeEventListener('beforeunload', this.setTabList)
+  },
+  methods: {
+    setMainTab(ev) {
+      const {
+        targetName,
+        replaceTab,
+        addTab,
+        closeTab,
+        setTabName,
+        addTabO,
+        refreshTab
+      } = ev.data
+
+      if (targetName === 'main') {
+        replaceTab && this.tabReplace(replaceTab)
+        addTab && this.tabAdd(addTab)
+        addTabO && this.tabAddO(addTabO)
+        closeTab && this.tabClose(closeTab)
+        setTabName && this.tabSetName(setTabName)
+        refreshTab && this.tabRefresh(refreshTab)
+      }
+    },
+    getCollapse() {
+      this.collapse =
+        window.localStorage.getItem('aside-nav-collapse') === 'true'
+    },
+    contentChange(dom) {
+      this.clientHeight = dom.clientHeight - 2 * this.clientM
+    },
+    getMenuList() {
+      let menus = JSON.parse(JSON.stringify(this.menus))
+      let menuList = []
+      menus.forEach((sub) => {
+        let base = sub.base
+        forEachs(sub.menu, (m, i, a, p) => {
+          if (m.route) {
+            m.pid = p.uuid
+            m.route = base + m.route.replace(/\/$/, '')
+            m.route || (m.route = '/')
+            m.uuid = m.route
+
+            menuList.push(m)
+          }
+        })
+      })
+
+      menus.forEach((sub) => {
+        sub.menu = sub.menu.filter((c) => !c.hide)
+        forEachs(sub.menu, (m) => {
+          if (m.children) {
+            let cN = m.children.filter((c) => !c.hide)
+            m.children = cN.length ? cN : undefined
+          }
+        })
+      })
+
+      this.menusC = menus
+      this.menuList = menuList
+    },
+    getTabList() {
+      let tabList = JSON.parse(window.sessionStorage.getItem('tab-list')) || []
+      if (!tabList.some((tab) => tab.route === this.keepTab)) {
+        let menu = this.menuList.find((m) => m.route === this.keepTab)
+        if (menu) {
+          let keepMenu = Object.assign({}, menu, { keep: true })
+          tabList.unshift(keepMenu)
+        }
+      }
+      this.tabList = tabList
+    },
+    setTabList() {
+      window.sessionStorage.setItem('tab-list', JSON.stringify(this.tabList))
+    },
+    getActiveNav() {
+      let tab = this.tabList.find(
+        (t) => this.$route.path === t.uuid || this.$route.path === t.route
+      )
+      if (tab) {
+        this.activeNav = tab.uuid
+      } else {
+        this.$router.replace({
+          path: this.keepTab || '/'
+        })
+      }
+    },
+    routerPush({ path, query = {} }) {
+      if (path !== this.$route.path) {
+        this.$router.push({
+          path: path,
+          query: query
+        })
+      } else if (JSON.stringify(query) !== JSON.stringify(this.$route.query)) {
+        this.$router.push({
+          path: path,
+          query: query
+        })
+      }
+    },
+    menuClick(menu) {
+      this.routerPush({ path: menu.route })
+    },
+    tabClick(tab) {
+      this.activeNav = tab.uuid
+
+      this.routerPush({
+        path: tab.route,
+        query: tab.query
+      })
+    },
+    tabReplace(opt) {
+      let { path } = opt
+      path = path.replace(routerBaseRe, '/')
+      path = path.replace(/\/$/, '')
+
+      let tab = this.tabList.find((t) => t.uuid === this.activeNav)
+      if (tab) {
+        if (window._tab_cache_route === tab.route) {
+          setTimeout(() => {
+            window._tab_cache_route = undefined
+          }, 100)
+        } else {
+          this.removeOcache({ path: tab.route })
+        }
+
+        this.$set(tab, 'route', path)
+        for (let k in opt) {
+          k !== 'path' && this.$set(tab, k, opt[k])
+        }
+      }
+    },
+    tabAddO(opt) {
+      let { path, query } = opt
+      path = path.replace(routerBaseRe, '/')
+      path = path.replace(/\/$/, '')
+      path || (path = '/')
+
+      let tab = this.tabList.find((t) => t.route === path)
+      if (tab) {
+        this.activeNav = tab.uuid
+
+        let queryStr = JSON.stringify({ ...tab.query, _fromNo: undefined })
+        let queryStrN = JSON.stringify({ ...query, _fromNo: undefined })
+
+        this.$set(tab, 'route', path)
+        for (let k in opt) {
+          k !== 'path' && this.$set(tab, k, opt[k])
+        }
+
+        queryStr !== queryStrN && this.tabRefresh({ uuid: tab.uuid })
+      } else {
+        let tabI = this.tabList.findIndex((t) => t.uuid === path)
+        tab = this.tabList[tabI]
+        if (tab) {
+          if (window._tab_cache_route === tab.route) {
+            setTimeout(() => {
+              window._tab_cache_route = undefined
+            }, 100)
+          } else {
+            this.removeOcache({ path: tab.route })
+          }
+
+          for (let k in opt) {
+            k !== 'path' && this.$set(tab, k, opt[k])
+          }
+        } else {
+          let tabN = {
+            ...opt,
+            route: path,
+            path: undefined,
+            uuid: path,
+            keep: path === this.keepTab ? true : undefined
+          }
+          this.tabList.push(tabN)
+          this.activeNav = path
+        }
+      }
+    },
+    tabAdd(opt) {
+      let { path, query } = opt
+      this.$router.push({ path, query })
+      this.$nextTick(() => {
+        this.tabAddO(opt)
+      })
+    },
+    tabClose({ uuid, path }) {
+      let tabI = -1
+      if (uuid) {
+        tabI = this.tabList.findIndex((t) => t.uuid === uuid)
+      } else if (path) {
+        tabI = this.tabList.findIndex((t) => t.route === path)
+      }
+      if (tabI !== -1) {
+        uuid = this.tabList[tabI].uuid
+        let path = this.tabList[tabI].route
+
+        this.tabList.splice(tabI, 1)
+        if (uuid === this.activeNav) {
+          let tabN = this.tabList[tabI] || this.tabList[tabI - 1]
+          if (tabN) {
+            if (tabN.uuid !== this.activeNav) {
+              this.routerPush({
+                path: tabN.route,
+                query: tabN.query
+              })
+            }
+          } else {
+            this.routerPush({
+              path: '/'
+            })
+          }
+        }
+
+        this.$nextTick(() => {
+          this.removeOcache({ path: path })
+        })
+      } else {
+        console.warn('请求关闭的Tab页签不存在')
+      }
+    },
+    tabCloseNexts(uuid) {
+      let tabI = this.tabList.findIndex((t) => t.uuid === uuid)
+      let nextTabs = this.tabList.splice(tabI + 1)
+
+      if (!this.tabList.some((t) => t.uuid === this.activeNav)) {
+        let tab = this.tabList[tabI]
+        this.activeNav = tab.uuid
+        this.routerPush({
+          path: tab.route,
+          query: tab.query
+        })
+      }
+
+      this.$nextTick(() => {
+        nextTabs.forEach((t) => {
+          this.removeOcache({ path: t.route })
+        })
+        nextTabs = undefined
+      })
+    },
+    tabCloseOthers(uuid) {
+      let tab = this.tabList.find((t) => t.uuid === uuid)
+      let tabs = []
+      let otherTabs = []
+      this.tabList.forEach((t) => {
+        if (t.uuid === uuid) {
+          tabs.push(t)
+          tab = t
+        } else if (t.keep) {
+          tabs.push(t)
+        } else {
+          otherTabs.push(t)
+        }
+      })
+
+      this.tabList = tabs
+      if (this.activeNav !== tab.uuid) {
+        this.activeNav = tab.uuid
+        this.routerPush({
+          path: tab.route,
+          query: tab.query
+        })
+      }
+
+      this.$nextTick(() => {
+        otherTabs.forEach((t) => {
+          this.removeOcache({ path: t.route })
+        })
+        otherTabs = undefined
+      })
+    },
+    tabRefresh({ uuid, path }) {
+      let tab = undefined
+      if (uuid) {
+        tab = this.tabList.find((t) => uuid === t.uuid)
+      } else if (path) {
+        tab = this.tabList.find((t) => t.route === path)
+      }
+
+      if (
+        tab.uuid === this.activeNav &&
+        this.$route.matched[0]['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 })
+        this.$nextTick(() => {
+          this.$router.replace(oTab)
+        })
+      } else {
+        this.removeOcache({ path: tab.route })
+      }
+    },
+    tabSetName({ uuid, path, title }) {
+      let tabI = -1
+      if (uuid) {
+        tabI = this.tabList.findIndex((t) => t.uuid === uuid)
+      } else if (path) {
+        tabI = this.tabList.findIndex((t) => t.route === path)
+      }
+      if (tabI !== -1) {
+        let tab = this.tabList[tabI]
+        tab.title = title
+      }
+    },
+    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) {
+          window._pending_update_cache[path] = true
+          window.postMessage({
+            updateCache: true,
+            targetName: '*',
+            originName: 'main'
+          })
+          let isNull = componentInstance.cache[path].componentInstance.isNull
+          if (isNull) {
+            return
+          }
+          let destroy = componentInstance.cache[path].componentInstance.destroy
+          destroy && destroy()
+
+          delete componentInstance.cache[path]
+          componentInstance.keys.splice(kI, 1)
+
+          // console.log({
+          //   cache: componentInstance.cache,
+          //   keys: componentInstance.keys
+          // })
+        } else {
+          window._pending_update_cache[path] = true
+          window.postMessage({
+            updateCache: true,
+            targetName: '*',
+            originName: 'main'
+          })
+        }
+      } else {
+        window._pending_update_cache[path] = true
+        window.postMessage({
+          updateCache: true,
+          targetName: '*',
+          originName: 'main'
+        })
+      }
+    }
+  }
+}
+
+function getShowUuid(uuid, list) {
+  let menu = list.find((m) => m.uuid === uuid)
+  if (menu) {
+    return menu.hide ? menu.pid : menu.uuid
+  }
+
+  let pid = uuid.replace(/\/[^\/]+\/*$/, '')
+  if (pid !== '' && pid !== '/') {
+    return getShowUuid(pid, list)
+  }
+
+  return '/'
+}
+</script>

package/src/components/Layout/utils.js

@@ -0,0 +1,12 @@
+export const watchPushState = {
+  created() {},
+  beforeDestroy() {},
+  methods: {
+    // newPushState
+  }
+}
+
+import { $l } from '../../utils/i18n'
+export function labelF(menu) {
+  return $l(menu.title, { [menu.title]: menu.i18n })
+}