imatrix-ui 0.0.15 → 0.1.1-up

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

@@ -0,0 +1,207 @@
+<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 === '/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 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>

package/src/views/layout/mixin/ResizeHandler.js

@@ -1,41 +1,41 @@
-import store from '../../../store'
-
-const { body } = document
-const WIDTH = 1024
-const RATIO = 3
-
-export default {
-  watch: {
-    $route(route) {
-      if (this.device === 'mobile' && this.sidebar.opened) {
-        store.dispatch('closeSidebar', { withoutAnimation: false })
-      }
-    }
-  },
-  beforeMount() {
-    window.addEventListener('resize', this.resizeHandler)
-  },
-  mounted() {
-    const isMobile = this.isMobile()
-    if (isMobile) {
-      store.dispatch('toggelDevice', 'mobile')
-      store.dispatch('closeSidebar', { withoutAnimation: true })
-    }
-  },
-  methods: {
-    isMobile() {
-      const rect = body.getBoundingClientRect()
-      return rect.width - RATIO < WIDTH
-    },
-    resizeHandler() {
-      if (!document.hidden) {
-        const isMobile = this.isMobile()
-        store.dispatch('toggelDevice', isMobile ? 'mobile' : 'desktop')
-
-        if (isMobile) {
-          store.dispatch('closeSidebar', { withoutAnimation: true })
-        }
-      }
-    }
-  }
-}
+import store from '../../../store'
+
+const { body } = document
+const WIDTH = 1024
+const RATIO = 3
+
+export default {
+  watch: {
+    $route(route) {
+      if (this.device === 'mobile' && this.sidebar.opened) {
+        store.dispatch('closeSidebar', { withoutAnimation: false })
+      }
+    },
+  },
+  beforeMount() {
+    window.addEventListener('resize', this.resizeHandler)
+  },
+  mounted() {
+    const isMobile = this.isMobile()
+    if (isMobile) {
+      store.dispatch('toggelDevice', 'mobile')
+      store.dispatch('closeSidebar', { withoutAnimation: true })
+    }
+  },
+  methods: {
+    isMobile() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - RATIO < WIDTH
+    },
+    resizeHandler() {
+      if (!document.hidden) {
+        const isMobile = this.isMobile()
+        store.dispatch('toggelDevice', isMobile ? 'mobile' : 'desktop')
+
+        if (isMobile) {
+          store.dispatch('closeSidebar', { withoutAnimation: true })
+        }
+      }
+    },
+  },
+}

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

@@ -0,0 +1,38 @@
+<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,93 @@
+<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.vue'
+import * as 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 = window.$vueApp.config.globalProperties.customSystem
+    console.log('新菜单组件-----systemCode====', this.systemCode)
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('closeSidebar', { withoutAnimation: false })
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/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/authredirect.vue

@@ -1,10 +1,10 @@
-<script>
-export default {
-  name: 'AuthRedirect',
-  created() {
-    const hash = window.location.search.slice(1)
-    window.opener.location.href = window.location.origin + '/login#' + hash
-    window.close()
-  }
-}
-</script>
+<script>
+export default {
+  name: 'AuthRedirect',
+  created() {
+    const hash = window.location.search.slice(1)
+    window.opener.location.href = window.location.origin + '/login#' + hash
+    window.close()
+  },
+}
+</script>