imatrix-ui 0.0.15 → 0.1.1-up

package/src/views/dsc-component/Sidebar/SidebarItem.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="menu-wrapper">
+    <template v-if="!item.children || item.children.lenght === 0">
+      <app-link :to="toPath(item)" @click="clickMenu(toPath(item))">
+        <el-menu-item
+          :index="resolvePath(item.code, item.path, item.pageType)"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <item
+            :icon="item.iconName"
+            :title="getI18nName(item)"
+            :is-root="true"
+          />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-sub-menu
+      v-else
+      :index="resolvePath(item.code, item.path, item.pageType)"
+      :show-timeout="0"
+      :hide-timeout="50"
+      popper-class="sidebar-container-popper"
+    >
+      <template v-slot:title>
+        <item
+          :icon="item.iconName"
+          :title="getI18nName(item)"
+          :has-children="item.children.length > 0 ? true : false"
+        />
+      </template>
+
+      <template v-for="child in item.children">
+        <sidebar-item
+          v-if="child.children && child.children.length > 0"
+          :is-nest="true"
+          :item="child"
+          class="nest-menu"
+        />
+        <app-link v-else :to="toPath(child)" @click="clickMenu(toPath(child))">
+          <el-menu-item
+            :index="resolvePath(child.code, child.path, child.pageType)"
+          >
+            <item :icon="child.iconName" :title="getI18nName(child)" />
+          </el-menu-item>
+        </app-link>
+      </template>
+    </el-sub-menu>
+  </div>
+</template>
+
+<script>
+// import { isExternal } from 'imatrix-ui/src/utils'
+import Item from './Item.vue'
+import AppLink from './Link.vue'
+import * as Vue from 'vue'
+import tabJs from '../../../api/tab'
+import { getI18nName } from '../../../utils/menu'
+export default {
+  name: 'SidebarItem',
+  components: { Item, AppLink },
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true,
+    },
+    isNest: {
+      type: Boolean,
+      default: false,
+    },
+    // basePath: {
+    //   type: String,
+    //   default: ''
+    // }
+  },
+  data() {
+    return {
+      onlyOneChild: null,
+    }
+  },
+  methods: {
+    ...tabJs,
+    hasOneShowingChild(children, parent) {
+      if (children && children.length > 0) {
+        this.onlyOneChild = children[0]
+      }
+      // When there is only one child router, the child router is displayed by default
+      if (children.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (!children || children.length === 0) {
+        // children不存在
+        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(menuCode, pageCode, pageType) {
+      if (this.isExternalLink(pageType)) {
+        return '/dsc/' + menuCode + '~~'
+      } else {
+        return '/dsc/' + menuCode + '~~' + pageCode
+      }
+    },
+    toPath(menu) {
+      const toPathObj = {}
+      const routePath = menu.path
+      toPathObj.openWay = menu.openWay
+      if (this.isExternalLink(menu.pageType)) {
+        toPathObj.path = '/dsc-index/iframe-page'
+        toPathObj.tabPath = '/dsc/iframe-page'
+        toPathObj.query = {}
+        toPathObj.query.src = routePath
+        toPathObj.isExternal = true
+        // 如果路径中没有拼系统编码，才需要把系统编码放到参数中
+        toPathObj.query.customSystem =
+          window.$vueApp.config.globalProperties.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
+      } else {
+        const pageCode = routePath
+        toPathObj.path = '/dsc-index/page'
+        toPathObj.tabPath = '/dsc/page'
+        toPathObj.query = {}
+        toPathObj.query.pageCode = pageCode
+        toPathObj.query.customSystem =
+          window.$vueApp.config.globalProperties.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
+      }
+      return toPathObj
+    },
+    // 是否已存在customSystem参数
+    isHasCustomSystem(routePath) {
+      if (routePath && routePath.indexOf('?') > 0) {
+        const params = routePath.substring(routePath.indexOf('?') + 1)
+        const paramArr = params.split('&')
+        for (let i = 0; i < paramArr.length; i++) {
+          const item = paramArr[i]
+          const key = item.split('=')[0]
+          if (key === 'customSystem') {
+            return true
+          }
+        }
+      }
+      return false
+    },
+    clickMenu(toPathObj) {
+      // console.log('clickMenu----toPathObj=', toPathObj)
+      if (
+        toPathObj.openWay &&
+        toPathObj.openWay === 'NEW_PAGE_OPEN' &&
+        toPathObj.query
+      ) {
+        // 新页签打开菜单
+        let url = toPathObj.query.src
+        if (url && url.indexOf('?') > 0) {
+          url += '&'
+        } else {
+          url += '?'
+        }
+        if (toPathObj.query.customSystem) {
+          url += 'customSystem=' + toPathObj.query.customSystem
+        }
+        if (toPathObj.query._menuCode) {
+          url += '_menuCode=' + toPathObj.query._menuCode
+        }
+        if (toPathObj.query._menuCode) {
+          url += '_menuName=' + toPathObj.query._menuName
+        }
+        window.open(url, toPathObj.query._menuCode)
+      } else {
+        // 刷新页签打开菜单
+        this.addTabs(
+          toPathObj.query,
+          this.$store.state.tabContent.openTab,
+          toPathObj.tabPath
+        )
+      }
+    },
+    isExternalLink(pageType) {
+      if (pageType && pageType === 'iframe') {
+        return true
+      }
+      return false
+    },
+    getI18nName(menu) {
+      return getI18nName(menu)
+    },
+  },
+}
+</script>

package/src/views/dsc-component/Sidebar/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :show-timeout="200"
+        :default-active="getDefaultActive()"
+        :collapse="isCollapse"
+        mode="vertical"
+        @select="selectMenu"
+      >
+        <sidebar-item v-for="menu in menus" :key="menu.code" :item="menu" />
+      </el-menu>
+    </el-scrollbar>
+    <hamburger
+      :is-active="sidebar.opened"
+      class="hamburger-container"
+      @toggleClick="toggleSideBar"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem.vue'
+import Cookies from 'js-cookie'
+import tabJs from '../../../api/tab'
+import { getMenus } from '../../../utils/permissionAuth'
+import { getI18nName } from '../../../utils/menu'
+export default {
+  name: 'Sidebar',
+  components: {
+    SidebarItem,
+  },
+  props: {
+    systemCode: {
+      type: String,
+      default: null,
+    },
+    collapse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    const menus = getMenus()
+    return {
+      menus,
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+    isCollapse() {
+      if (this.collapse === false) {
+        return !this.sidebar.opened
+      }
+      return true
+    },
+  },
+  created() {
+    this.firstLeafMenu = this.getMyFirstMenu(this.menus)
+    if (this.firstLeafMenu && this.firstLeafMenu.fullPath) {
+      // 跳转到第一个页面
+      if (
+        this.firstLeafMenu.pageType &&
+        this.firstLeafMenu.pageType === 'iframe'
+      ) {
+        const iframeSrc = this.firstLeafMenu.fullPath
+        const pageCode = this.firstLeafMenu.path
+        const query = {
+          src: iframeSrc,
+          customSystem: this.systemCode,
+          pageCode: pageCode,
+          _menuCode: this.firstLeafMenu.code,
+          _menuName: getI18nName(this.firstLeafMenu),
+        }
+        this.addTabs(
+          query,
+          this.$store.state.tabContent.openTab,
+          '/dsc/iframe-page',
+          '/dsc/iframe-page'
+        )
+        this.$router.push({ path: '/dsc-index/iframe-page', query: query })
+      } else {
+        const pageCode = this.firstLeafMenu.path
+        const query = {
+          customSystem: this.systemCode,
+          pageCode: pageCode,
+          _menuCode: this.firstLeafMenu.code,
+          _menuName: getI18nName(this.firstLeafMenu),
+        }
+        this.addTabs(
+          query,
+          this.$store.state.tabContent.openTab,
+          '/dsc/page',
+          '/dsc/page'
+        )
+        this.$router.push({ path: '/dsc-index/page', query: query })
+        // this.$router.push({ path: this.firstLeafMenu.fullPath })
+      }
+    }
+  },
+  methods: {
+    ...tabJs,
+    getDefaultActive() {
+      if (this.firstLeafMenu && this.firstLeafMenu.pageType !== 'iframe') {
+        const pageCode = this.firstLeafMenu.path
+        return '/dsc/' + this.firstLeafMenu.code + '~~' + pageCode
+      } else if (
+        this.firstLeafMenu &&
+        this.firstLeafMenu.pageType === 'iframe'
+      ) {
+        return '/dsc/' + this.firstLeafMenu.code + '~~'
+      } else {
+        return ''
+      }
+    },
+    toggleSideBar() {
+      this.$store.dispatch('toggleSidebar')
+    },
+    selectMenu(index, indexPath) {
+      Cookies.set('selectMenu', index)
+    },
+    getMyFirstMenu(menus) {
+      if (menus && menus.length > 0) {
+        let shouldSelectMenu = this.getFirstMenu(menus)
+        if (!shouldSelectMenu) {
+          shouldSelectMenu = this.getFirstMenuWithCookie(menus)
+        }
+        // 默认不展示第一个有权限的菜单了，可以去掉下面的代码
+        // if (!shouldSelectMenu) {
+        //   shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
+        // }
+        return shouldSelectMenu
+      }
+    },
+    getFirstMenu(menus) {
+      if (menus && menus.length > 0) {
+        let shouldSelectMenu
+        for (let i = 0; i < menus.length; i++) {
+          const menu = menus[i]
+          shouldSelectMenu = this.getShouldSelectMenu(menu)
+          if (shouldSelectMenu) {
+            // 表示获得到了应该选中的菜单
+            break
+          }
+        }
+        return shouldSelectMenu
+      }
+    },
+    getShouldSelectMenu(menu) {
+      // console.log('dsc--getShouldSelectMenu--this.$route=', this.$route)
+      const currentMenuCode = this.$route.query
+        ? this.$route.query._menuCode
+        : null
+      if (menu && currentMenuCode) {
+        let shouldSelectMenu
+        const children = menu.children
+        if (children && children.length > 0) {
+          shouldSelectMenu = this.getFirstMenu(children)
+        } else if (menu.code && menu.code === currentMenuCode) {
+          shouldSelectMenu = menu
+        }
+        return shouldSelectMenu
+      }
+    },
+    getSelectMenuWithFirstMenu(menu) {
+      if (menu) {
+        let shouldSelectMenu
+        const children = menu.children
+        if (children && children.length > 0) {
+          shouldSelectMenu = this.getFirstMenu(children)
+        } else {
+          shouldSelectMenu = menu
+        }
+        return shouldSelectMenu
+      }
+    },
+    getFirstMenuWithCookie(menus) {
+      if (menus && menus.length > 0) {
+        const cookieMenu = Cookies.get('selectMenu')
+        if (cookieMenu) {
+          //   // 表示缓存中存储了menu，格式为：/dsc/菜单编码~~pageCode
+          const prefix = '/dsc/'
+          const menuCode = cookieMenu.substring(
+            cookieMenu.indexOf(prefix) + prefix.length,
+            cookieMenu.lastIndexOf('~~')
+          )
+
+          let shouldSelectMenu
+          for (let i = 0; i < menus.length; i++) {
+            const menu = menus[i]
+            shouldSelectMenu = this.getShouldSelectMenuWithCookie(
+              menu,
+              menuCode
+            )
+            if (shouldSelectMenu) {
+              // 表示获得到了应该选中的菜单
+              break
+            }
+          }
+          return shouldSelectMenu
+        }
+      }
+    },
+    getShouldSelectMenuWithCookie(menu, menuCode) {
+      if (menu) {
+        // console.log('dsc--getShouldSelectMenuWithCookie--this.$route=', this.$route)
+        let shouldSelectMenu
+        const children = menu.children
+        if (children && children.length > 0) {
+          shouldSelectMenu = this.getFirstMenuWithCookie(children)
+        } else if (menu.code && menu.code === menuCode) {
+          shouldSelectMenu = menu
+        }
+        return shouldSelectMenu
+      }
+    },
+  },
+}
+</script>

package/src/views/dsc-component/tabs/tab-content.vue

@@ -0,0 +1,199 @@
+<template>
+  <div>
+    <el-tabs
+      v-if="openTab && openTab.length > 0"
+      v-model="activeIndex"
+      class="nav-tab menu-tab-container"
+      closable
+      @tab-remove="closeSelectedTag"
+    >
+      <el-tab-pane
+        v-for="tag in openTab"
+        :key="tag.code"
+        :label="tag.name"
+        :name="tag.code"
+      >
+        <iframe
+          ref="tabMainContent"
+          :src="getFullPath(tag)"
+          class="tab-main-content"
+          name="tab-main-content"
+          frameborder="0"
+        />
+      </el-tab-pane>
+    </el-tabs>
+    <div class="default-page-tip">
+      <div class="default-page-tip-msg">
+        <div class="default-page-tip-item">
+          {{ defaultPageTipCn }}
+        </div>
+        <div class="default-page-tip-item">
+          {{ defaultPageTipEn }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as Vue from 'vue'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'TabContent',
+  data() {
+    let defaultPageTip = window.$vueApp.config.globalProperties.defaultPageTip
+    if (!defaultPageTip) {
+      defaultPageTip =
+        '欢迎访问质量管理系统/Welcome to Quality Management System'
+    }
+    let defaultPageTipCn = defaultPageTip
+    let defaultPageTipEn
+    if (defaultPageTip && defaultPageTip.indexOf('/') > 0) {
+      defaultPageTipCn = defaultPageTip.substring(
+        0,
+        defaultPageTip.lastIndexOf('/')
+      )
+      defaultPageTipEn = defaultPageTip.substring(
+        defaultPageTip.lastIndexOf('/') + 1
+      )
+    }
+    return {
+      defaultPageTipCn,
+      defaultPageTipEn,
+    }
+  },
+  computed: {
+    ...mapGetters(['openTab']),
+    activeIndex: {
+      get() {
+        return this.$store.state.tabContent.activeIndex
+      },
+      set(val) {
+        this.$store.commit('set_active_index', val)
+      },
+    },
+  },
+  created() {
+    // 登录超时，给父iframe发送信号
+    window.addEventListener('message', this.recieveMessage)
+  },
+  methods: {
+    closeSelectedTag(tagName) {
+      const index = this.$store.state.tabContent.openTab.findIndex(
+        (item) => item.code === tagName
+      )
+      const view = this.$store.state.tabContent.openTab[index]
+      this.$store.commit('delete_tabs', view)
+      if (tagName === this.activeIndex) {
+        // 表示删除的是当前选中的菜单，选中前面的菜单
+        this.toLastView(
+          this.$store.state.tabContent.openTab,
+          index > 0 ? index - 1 : 0
+        )
+      }
+    },
+    toLastView(visitedViews, lastIndex) {
+      if (
+        visitedViews &&
+        visitedViews.length > 0 &&
+        visitedViews.length > lastIndex
+      ) {
+        const latestView = visitedViews[lastIndex]
+        if (latestView) {
+          this.$store.commit('set_active_index', latestView.code)
+        }
+      }
+    },
+    getFullPath(tag) {
+      let path
+      if (tag.routePath === '/dsc/iframe-page') {
+        // 表示是iframe页面
+        let src
+        let params = ''
+        if (tag.routeQuery) {
+          for (const key in tag.routeQuery) {
+            if (key === 'src') {
+              src = tag.routeQuery[key]
+            } else {
+              params += key + '=' + tag.routeQuery[key] + '&'
+            }
+          }
+        }
+        if (src) {
+          path = src
+        }
+        if (params) {
+          path += '?' + params
+        }
+      } else {
+        // 表示页面跳转
+        path = '#' + tag.routePath + '?'
+        if (tag.routeQuery) {
+          for (const key in tag.routeQuery) {
+            path += key + '=' + tag.routeQuery[key] + '&'
+          }
+        }
+      }
+      if (
+        path &&
+        path.length > 0 &&
+        path.lastIndexOf('&') === path.length - 1
+      ) {
+        path = path.substring(0, path.lastIndexOf('&'))
+      }
+      return path
+    },
+    recieveMessage(event) {
+      if (
+        event &&
+        typeof event.data === 'string' &&
+        event.data.indexOf('loginTimeout') >= 0
+      ) {
+        // 表示iframe中的页面发送了登录超时的信号，将信号传给最外层window
+        console.log(
+          'tab-content-接收到登录超时的信息---event.data=',
+          event.data
+        )
+        window.parent.postMessage(event.data, '*')
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+iframe.tab-main-content {
+  width: 100%;
+  height: calc(100vh - 53px);
+}
+</style>
+
+<style>
+.nav-tab {
+  padding-top: 5px;
+  padding-left: 5px;
+}
+.nav-tab .el-tabs__header {
+  margin: 0;
+  /* border-bottom: 0px; */
+}
+.menu-tab-container .el-tabs__content {
+  padding: 0;
+}
+.default-page-tip {
+  width: 100%;
+  height: 100%;
+  background: #f7f7f8;
+}
+.default-page-tip-msg {
+  padding-top: 25%;
+  padding-bottom: 30%;
+  font-size: 24px;
+  font-weight: 600;
+  text-align: center;
+  color: gray;
+}
+.default-page-tip-item {
+  padding-top: 10px;
+}
+</style>