imatrix-ui 2.8.5-tmp1 → 2.8.5-tmp3

package/src/views/layout/NewLayout copy.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <menubar class="sidebar-container" />
+    <div class="main-container">
+      <breadcrumb v-if="showMenuRoute" />
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Menubar, AppMain, Breadcrumb } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { isShowMenuRoute } from '../../../src/utils/common-util'
+
+export default {
+  name: 'Layout',
+  components: {
+    Menubar,
+    AppMain,
+    Breadcrumb
+  },
+  mixins: [ResizeMixin],
+  data() {
+    // 是否显示菜单路径，默认是不显示
+    const showMenuRoute = isShowMenuRoute()
+    return {
+      showMenuRoute
+    }
+  },
+  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'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSidebar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "../../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/layout/NewLayout.vue

@@ -1,77 +1,18 @@
 <template>
-  <div :class="classObj" class="app-wrapper">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <menubar class="sidebar-container" />
-    <div class="main-container">
-      <breadcrumb v-if="showMenuRoute" />
+  <div class="app-wrapper">
+    <div class="tab-main-container">
+      <!-- <tab-content/> -->
       <app-main />
     </div>
   </div>
 </template>
-
 <script>
-import { Menubar, AppMain, Breadcrumb } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
-import { isShowMenuRoute } from '../../../src/utils/common-util'
-
+import { AppMain } from './components'
 export default {
-  name: 'Layout',
+  name: 'EmptyLayout',
   components: {
-    Menubar,
-    AppMain,
-    Breadcrumb
-  },
-  mixins: [ResizeMixin],
-  data() {
-    // 是否显示菜单路径，默认是不显示
-    const showMenuRoute = isShowMenuRoute()
-    return {
-      showMenuRoute
-    }
-  },
-  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'
-      }
-    }
-  },
-  methods: {
-    handleClickOutside() {
-      this.$store.dispatch('closeSidebar', { withoutAnimation: false })
-    }
+    AppMain
   }
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "../../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/layout/components/Menubar/Item.vue

@@ -14,31 +14,48 @@ export default {
     hasChildren: {
       type: Boolean,
       default: false
+    },
+    isRoot: {
+      type: Boolean,
+      default: false
     }
   },
   render(h, context) {
+    const { title, hasChildren, isRoot } = context.props
     let icon = context.props.icon
-    const { title, hasChildren } = context.props
     const vnodes = []
-
     if (icon) {
       if (icon.indexOf('fa-') === 0) {
         // 表示以“fa-”开头，使用font-awesome中的图标
         icon = 'fa ' + icon
+        vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon}/></div>)
+      } else if (icon.indexOf('svg-') === 0) {
+        icon = icon.substring(icon.indexOf('svg-') + 4)
+        vnodes.push(<div style='display: inline-block;overflow:hidden;'><svg-icon icon-class={icon}/></div>)
+      } else {
+        icon += ' svg-icon'
+        vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon} /></div>)
       }
-      icon += ' svg-icon'
-      vnodes.push(<div style='display: inline-block;'><i class={icon}/></div>)
     }
 
     if (title) {
+      debugger
       let width = '130px'
       if (hasChildren) {
         // 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
         width = '100px'
       }
-      vnodes.push(<div slot='title' style='display: inline-block'>
-        <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
-      </div>)
+      if (isRoot) {
+        // 是否是根目录，没有子菜单时
+        vnodes.push(<div style='display: inline-block'>
+          <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
+        </div>)
+      } else {
+        // 有子菜单时
+        vnodes.push(<div slot='title' style='display: inline-block'>
+          <div title={title} style={'display: inline-block;width:' + width + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;'}>{(title)}</div>
+        </div>)
+      }
     }
     return vnodes
   }

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

@@ -6,9 +6,12 @@
     <slot />
   </a> -->
 
-    <router-link :to="to">
+    <router-link v-if="!isOpenNewTab" :to="to">
       <slot />
     </router-link>
+    <div v-else>
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -23,8 +26,14 @@ export default {
   },
   data() {
     const isExter = this.to.isExternal
+    const openWay = this.to.openWay
+    let isOpenNewTab = false
+    if (openWay && openWay === 'NEW_PAGE_OPEN') {
+      isOpenNewTab = true
+    }
     return {
-      isExter
+      isExter,
+      isOpenNewTab
     }
   }
 }

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,161 @@
+<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() {
+    debugger
+    // 登录超时，给父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>