imatrix-ui 2.9.9-dw → 2.9.11-boe1

package/src/views/layout/components/Menubar/SidebarItem.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="menu-wrapper">
     <template v-if="!item.children || item.children.lenght === 0">
-      <app-link :to="toPath(item)">
+      <app-link :to="toPath(item)" @click.native="clickMenu(toPath(item))">
         <el-menu-item :index="item.fullPath+'~~'+item.i18nValue" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="item.iconName" :title="item.i18nValue" />
+          <item :icon="item.iconName" :title="getI18nName(item)" :is-root="true" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else :index="item.fullPath+'~~'+item.i18nValue">
       <template slot="title">
-        <item :icon="item.iconName" :title="item.i18nValue" :has-children="item.children.length > 0?true:false" />
+        <item :icon="item.iconName" :title="getI18nName(item)" :has-children="item.children.length > 0?true:false" />
       </template>
 
       <template v-for="child in item.children">
@@ -21,9 +21,9 @@
           :item="child"
           class="nest-menu"
         />
-        <app-link v-else :key="child.code" :to="toPath(child)">
+        <app-link v-else :key="child.code" :to="toPath(child)" @click.native="clickMenu(toPath(child))">
           <el-menu-item :index="child.fullPath+'~~'+child.i18nValue">
-            <item :icon="child.iconName" :title="child.i18nValue" />
+            <item :icon="child.iconName" :title="getI18nName(child)" />
           </el-menu-item>
         </app-link>
       </template>
@@ -34,6 +34,9 @@
 <script>
 import Item from './Item'
 import AppLink from './Link'
+import Vue from 'vue'
+import { getI18nName } from 'imatrix-ui/src/utils/menu'
+import tabJs from '../../../../api/tab'
 
 export default {
   name: 'SidebarItem',
@@ -59,6 +62,7 @@ export default {
     }
   },
   methods: {
+    ...tabJs,
     hasOneShowingChild(children, parent) {
       if (children && children.length > 0) {
         this.onlyOneChild = children[0]
@@ -80,13 +84,24 @@ export default {
     toPath(menu) {
       const toPathObj = {}
       const routePath = menu.fullPath
+      toPathObj.openWay = menu.openWay
       if (this.isExternalLink(menu.pageType)) {
-        toPathObj.path = '/iframe-page/page'
+        toPathObj.path = '/tab-content-iframe-index'
+        toPathObj.tabPath = '/iframe-page/page'
         toPathObj.query = {}
         toPathObj.query.src = routePath
         toPathObj.isExternal = true
+        // 如果路径中没有拼系统编码，才需要把系统编码放到参数中
+        toPathObj.query.customSystem = Vue.prototype.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
       } else {
-        toPathObj.path = routePath
+        toPathObj.path = '/tab-content-index'
+        toPathObj.tabPath = routePath
+        toPathObj.query = {}
+        toPathObj.query.customSystem = Vue.prototype.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
       }
       return toPathObj
     },
@@ -95,6 +110,34 @@ export default {
         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)
+      }
+    },
+    getI18nName(menu) {
+      return getI18nName(menu)
     }
   }
 }

package/src/views/layout/components/Menubar/index.vue

@@ -24,6 +24,8 @@ import SidebarItem from './SidebarItem'
 import Vue from 'vue'
 import { getLanguageWithLocale } from '../../../../utils/util'
 import { isShowSystemMenu } from '../../../../utils/common-util'
+import tabJs from '../../../../api/tab'
+import { getI18nName } from '../../../../utils/menu'
 import Cookies from 'js-cookie'
 import { getMenus } from '../../../../utils/permissionAuth'
 export default {
@@ -31,6 +33,16 @@ export default {
   components: {
     SidebarItem
   },
+  props: {
+    systemCode: {
+      type: String,
+      default: null
+    },
+    collapse: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     let systemName
     if (isShowSystemMenu() === true) {
@@ -53,7 +65,10 @@ export default {
       'sidebar'
     ]),
     isCollapse() {
-      return !this.sidebar.opened
+      if (this.collapse === false) {
+        return !this.sidebar.opened
+      }
+      return true
     }
   },
   watch: {
@@ -77,13 +92,22 @@ export default {
       // 跳转到第一个页面
       if (this.firstLeafMenu.pageType && this.firstLeafMenu.pageType === 'iframe') {
         const iframeSrc = this.firstLeafMenu.fullPath
-        this.$router.push({ path: '/iframe-page/page', query: { src: iframeSrc }})
+        // this.$router.push({ path: '/iframe-page/page', query: { src: iframeSrc }})
+        const query = { src: iframeSrc, customSystem: this.systemCode, _menuCode: this.firstLeafMenu.code, _menuName: getI18nName(this.firstLeafMenu) }
+        this.addTabs(query, this.$store.state.tabContent.openTab, '/iframe-page/page', '/iframe-page/page')
+        // this.$router.push({ path: '/iframe-page/page', query: query })
+        this.$router.push({ path: '/tab-content-iframe-index', query: query })
       } else {
-        this.$router.push({ path: this.firstLeafMenu.fullPath })
+        const query = { customSystem: this.systemCode, _menuCode: this.firstLeafMenu.code, _menuName: getI18nName(this.firstLeafMenu) }
+        const path = this.firstLeafMenu.fullPath
+        this.addTabs(query, this.$store.state.tabContent.openTab, path, path)
+        this.$router.push({ path: '/tab-content-index', query: query })
+        // this.$router.push({ path: this.firstLeafMenu.fullPath })
       }
     }
   },
   methods: {
+    ...tabJs,
     toggleSideBar() {
       this.$store.dispatch('toggleSidebar')
     },
@@ -102,31 +126,42 @@ export default {
             break
           }
         }
-        if (!shouldSelectMenu) {
-          // 如果没有获得默认选中的菜单，则默认选中第一个菜单
-          shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
-        }
+        // if (!shouldSelectMenu) {
+        //   // 如果没有获得默认选中的菜单，则默认选中第一个菜单
+        //   shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
+        // }
         return shouldSelectMenu
       }
     },
     getShouldSelectMenu(menu) {
-      if (menu) {
-        const cookieMenu = Cookies.get('selectMenu')
-        let currentRoute = this.$route.path
-        if (cookieMenu && cookieMenu.indexOf('~~') > 0) {
-          // cookie中记录了选中的菜单路径
-          const path = cookieMenu.substring(0, cookieMenu.lastIndexOf('~~'))
-          currentRoute = path
-        }
+      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.fullPath && menu.fullPath === currentRoute) {
+        } else if (menu.code && menu.code === currentMenuCode) {
           shouldSelectMenu = menu
         }
         return shouldSelectMenu
       }
+      // if (menu) {
+      //   const cookieMenu = Cookies.get('selectMenu')
+      //   let currentRoute = this.$route.path
+      //   if (cookieMenu && cookieMenu.indexOf('~~') > 0) {
+      //     // cookie中记录了选中的菜单路径
+      //     const path = cookieMenu.substring(0, cookieMenu.lastIndexOf('~~'))
+      //     currentRoute = path
+      //   }
+      //   let shouldSelectMenu
+      //   const children = menu.children
+      //   if (children && children.length > 0) {
+      //     shouldSelectMenu = this.getFirstMenu(children)
+      //   } else if (menu.fullPath && menu.fullPath === currentRoute) {
+      //     shouldSelectMenu = menu
+      //   }
+      //   return shouldSelectMenu
+      // }
     },
     getSelectMenuWithFirstMenu(menu) {
       if (menu) {

package/src/views/layout/components/tabs/tab-content.vue

@@ -0,0 +1,160 @@
+<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>
+<style rel="stylesheet/scss" lang="scss" scoped>
+iframe.tab-main-content{
+  width: 100%;
+  height: calc(100vh - 53px);
+}
+</style>
+<script>
+import Vue from 'vue'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'TabContent',
+  data() {
+    let defaultPageTip = Vue.prototype.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 === '/iframe-page/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, '*')
+      } else if (event && typeof event.data === 'string' && event.data === 'return-to-system-list') {
+        // 表示系统元数据/设计页面点击了“返回“按钮，需要返回到系统九宫格列表页面
+        this.$store.commit('clear_tabs')
+        this.$router.push({ path: '/mms/systems/list' })
+      }
+    }
+  }
+}
+</script>
+
+<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>

package/src/views/layout/tab-content-iframe-index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <iframe v-if="src && src!== null" ref="menuContent" :src="src" name="menu-content" title="Main content" frameborder="0" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      src: null
+    }
+  },
+  watch: {
+    $route(to, from) {
+      // 必须这样写，否则会在切换页面时无法获得pageCode参数
+      this.src = this.$route.query.src
+    }
+  },
+  mounted() {
+    this.src = this.$route.query.src
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+iframe{
+  width: 100%;
+  height: calc(100vh - 50px);
+}
+</style>

package/src/views/layout/tab-content-index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <menubar :system-code="systemCode" :collapse="true" class="sidebar-container" />
+    <div class="main-container">
+      <breadcrumb v-if="showMenuRoute" />
+      <tab-content />
+      <!-- <app-main /> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menubar, Breadcrumb } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { isShowMenuRoute } from 'imatrix-ui/src/utils/common-util'
+import TabContent from './components/tabs/tab-content'
+import Vue from 'vue'
+
+export default {
+  name: 'Layout',
+  components: {
+    Menubar,
+    Breadcrumb,
+    TabContent
+  },
+  mixins: [ResizeMixin],
+  data() {
+    // 是否显示菜单路径，默认是不显示
+    const showMenuRoute = isShowMenuRoute()
+    return {
+      showMenuRoute,
+      systemCode: null
+    }
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    device() {
+      return this.$store.state.app.device
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === 'mobile'
+      }
+    }
+  },
+  created() {
+    this.systemCode = Vue.prototype.customSystem
+    console.log('新菜单组件-----systemCode====', this.systemCode)
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSidebar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "imatrix-ui/src/styles/mixin.scss";
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    &.mobile.openSidebar{
+      position: fixed;
+      top: 0;
+    }
+  }
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+</style>

package/src/views/login/index.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import { Message } from '@gcommon/gcommon-ui'
+import { Message } from 'element-ui'
 export default {
   name: 'Login',
   data() {

package/packages/breadcrumb/index.js

@@ -1,6 +0,0 @@
-import Breadcrumb from './src/breadcrumb.vue'
-Breadcrumb.install = function(Vue) {
-  Vue.component(Breadcrumb.name, Breadcrumb)
-}
-
-export default Breadcrumb

package/packages/breadcrumb/src/breadcrumb.vue

@@ -1,71 +0,0 @@
-<template>
-  <el-breadcrumb class="app-breadcrumb" separator="/">
-    <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelListWithTitle" :key="item.path">
-        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">
-          {{ item.meta.title }}
-        </span>
-        <router-link v-else :to="item.redirect||item.path">
-          {{ item.meta.title }}
-        </router-link>
-      </el-breadcrumb-item>
-    </transition-group>
-  </el-breadcrumb>
-</template>
-
-<script>
-import pathToRegexp from 'path-to-regexp'
-
-export default {
-  name: 'Breadcrumb',
-  data() {
-    return {
-      levelList: null
-    }
-  },
-  computed: {
-    levelListWithTitle() {
-      return this.levelList.filter(item => item.meta.title !== undefined && item.meta.title !== null)
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  },
-  created() {
-    this.getBreadcrumb()
-  },
-  methods: {
-    getBreadcrumb() {
-      const { params } = this.$route
-      let matched = this.$route.matched.filter(item => {
-        if (item.name) {
-          // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-          var toPath = pathToRegexp.compile(item.path)
-          item.path = toPath(params)
-          return true
-        }
-      })
-      const first = matched[0]
-      if (first && first.name !== 'Dashboard') {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
-      }
-      this.levelList = matched
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 10px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
-  }
-</style>

package/packages/department-tree/index.js

@@ -1,6 +0,0 @@
-import DepartmentTree from './src/department-tree.vue'
-DepartmentTree.install = function(Vue) {
-  Vue.component(DepartmentTree.name, DepartmentTree)
-}
-
-export default DepartmentTree