imatrix-ui 2.7.78-dw → 2.7.78

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="menu-wrapper">
+    <template v-if="!item.children || item.children.lenght === 0">
+      <app-link :to="toPath(item)" @click.native="clickMenu(toPath(item))">
+        <el-menu-item :index="resolvePath(item.code,item.path,item.pageType)" :class="{'submenu-title-noDropdown':!isNest}">
+          <item :icon="item.iconName" :title="item.name" :is-root="true" />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu v-else :index="resolvePath(item.code,item.path,item.pageType)" popper-class="sidebar-container-popper">
+      <template slot="title">
+        <item :icon="item.iconName" :title="item.name" :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"
+          :key="child.code"
+          :is-nest="true"
+          :item="child"
+          class="nest-menu"
+        />
+        <app-link v-else :key="child.code" :to="toPath(child)" @click.native="clickMenu(toPath(child))">
+          <el-menu-item :index="resolvePath(child.code,child.path,child.pageType)">
+            <item :icon="child.iconName" :title="child.name" />
+          </el-menu-item>
+        </app-link>
+      </template>
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+// import { isExternal } from 'imatrix-ui/src/utils'
+import Item from './Item'
+import AppLink from './Link'
+import Vue from 'vue'
+import tabJs from '../../../api/tab'
+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
+      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 = Vue.prototype.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = menu.name
+      } else {
+        const pageCode = routePath
+        toPathObj.path = '/dsc-index/page'
+        toPathObj.tabPath = '/dsc/page'
+        toPathObj.query = {}
+        toPathObj.query.pageCode = pageCode
+        toPathObj.query.customSystem = Vue.prototype.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = menu.name
+      }
+      return toPathObj
+    },
+    clickMenu(toPathObj) {
+      console.log('clickMenu----toPathObj=', toPathObj)
+      this.addTabs(toPathObj.query, this.$store.state.tabContent.openTab, toPathObj.tabPath)
+    },
+    isExternalLink(pageType) {
+      if (pageType && pageType === 'iframe') {
+        return true
+      }
+      return false
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,179 @@
+<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'
+import Cookies from 'js-cookie'
+import tabJs from '../../../api/tab'
+export default {
+  name: 'Sidebar',
+  components: {
+    SidebarItem
+  },
+  props: {
+    systemCode: {
+      type: String,
+      default: null
+    },
+    collapse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'menus'
+    ]),
+    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
+        this.$router.push({ path: '/dsc-index/iframe-page', query: { src: iframeSrc }})
+      } else {
+        const pageCode = this.firstLeafMenu.path
+        const query = { customSystem: this.systemCode, pageCode: pageCode, _menuCode: this.firstLeafMenu.code, _menuName: this.firstLeafMenu.name }
+        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) {
+      console.log('selectMenu----indexPath=', indexPath, 'index=', index)
+      Cookies.set('selectMenu', index)
+    },
+    getMyFirstMenu(menus) {
+      if (menus && menus.length > 0) {
+        let shouldSelectMenu = this.getFirstMenuWithCookie(menus)
+        if (!shouldSelectMenu) {
+          shouldSelectMenu = this.getFirstMenu(menus)
+        }
+        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
+          }
+        }
+        if (!shouldSelectMenu) {
+          // 如果没有获得默认选中的菜单，则默认选中第一个菜单
+          shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
+        }
+        return shouldSelectMenu
+      }
+    },
+    getShouldSelectMenu(menu) {
+      if (menu) {
+        console.log('dsc--getShouldSelectMenu--this.$route=', this.$route)
+        let shouldSelectMenu
+        const children = menu.children
+        const currentRoute = this.$route.path
+        if (children && children.length > 0) {
+          shouldSelectMenu = this.getFirstMenu(children)
+        } else if (menu.fullPath && menu.fullPath === currentRoute) {
+          shouldSelectMenu = menu
+        }
+        return shouldSelectMenu
+      }
+    },
+    getSelectMenuWithFirstMenu(menu) {
+      console.log('dsc--getSelectMenuWithFirstMenu--this.$route=', this.$route)
+      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.set('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,78 @@
+<template>
+  <el-tabs 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>
+</template>
+<style rel="stylesheet/scss" lang="scss" scoped>
+iframe.tab-main-content{
+  width: 100%;
+  height: calc(100vh - 10px);
+}
+</style>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'TabContent',
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'openTab'
+    ]),
+    activeIndex: {
+      get() {
+        return this.$store.state.tabContent.activeIndex
+      },
+      set(val) {
+        this.$store.commit('set_active_index', val)
+      }
+    }
+  },
+  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 = '#' + tag.routePath + '?'
+      if (tag.routeQuery) {
+        for (const key in tag.routeQuery) {
+          path += key + '=' + tag.routeQuery[key] + '&'
+        }
+      }
+      return path
+    }
+  }
+}
+</script>
+
+<style>
+.nav-tab {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+.nav-tab .el-tabs__header{
+  margin: 0;
+  /* border-bottom: 0px; */
+}
+.menu-tab-container .el-tabs__content{
+  padding: 0;
+}
+</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() {