imatrix-ui 2.8.7 → 2.8.8-boe10

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>