imatrix-ui 0.0.15 → 0.1.1-up

package/src/views/layout/components/AppMain.vue

@@ -1,29 +1,39 @@
-<template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <!-- or name="fade" -->
-      <!-- <router-view :key="key"></router-view> -->
-      <router-view/>
-    </transition>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'AppMain',
-  computed: {
-    // key() {
-    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
-    // }
-  }
-}
-</script>
-
-<style scoped>
-.app-main {
-  /*50 = navbar  */
-  height: calc(100vh - 50px);
-  position: relative;
-  overflow: hidden;
-}
-</style>
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component }">
+      <transition name="fade-transform" mode="out-in">
+        <component :is="Component"></component>
+      </transition>
+    </router-view>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+
+    // 解决的问题如下：
+    // 改变路由参数（page?pageCode=xx）去获取对应数据，然后渲染到页面（用的是同一套组件），
+    // 问题来了：当切换菜单时，数据并没有更新，后来看了Vue-router官网，
+    // 有这么一句话：提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。
+    // 因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用
+    key() {
+      return this.$route.name !== undefined
+        ? this.$route.name + +new Date()
+        : this.$route + +new Date()
+    },
+  },
+}
+</script>
+
+<style scoped>
+.app-main {
+  height: calc(100vh - 10px);
+  position: relative;
+  overflow: hidden;
+}
+</style>

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

@@ -0,0 +1,156 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator=">">
+    <transition-group tag="span" name="breadcrumb">
+      <el-breadcrumb-item
+        v-for="(item, index) in levelListWithTitle"
+        :key="item.path + '-' + index"
+      >
+        <span class="no-redirect">
+          {{ $t(item.meta.title) }}
+        </span>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+import * as Vue from 'vue'
+import { getLanguageWithLocale } from '../../../../utils/util'
+import * as pathToRegexp from 'path-to-regexp'
+import Cookies from 'js-cookie'
+
+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
+      console.log('this.$route.matched==', this.$route.matched)
+      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 (matched) {
+        let systemName
+        const language = getLanguageWithLocale()
+        const systemNameObj =
+          window.$vueApp.config.globalProperties.systemNameObj
+        if (systemNameObj) {
+          systemName = systemNameObj[language]
+        }
+        matched = [
+          { path: '/', redirect: 'noredirect', meta: { title: systemName } },
+        ].concat(matched)
+        const cookieMenu = Cookies.get('selectMenu')
+        const leftSelectMenu =
+          window.$vueApp.config.globalProperties._selectMenu
+        let selectMenu
+        if (leftSelectMenu) {
+          selectMenu = leftSelectMenu
+        } else if (cookieMenu) {
+          selectMenu = cookieMenu
+        }
+        if (selectMenu) {
+          // 解决表单页面无法获得列表路由
+          const path = selectMenu.substring(0, selectMenu.indexOf('~~'))
+          const title = selectMenu.substring(selectMenu.indexOf('~~') + 2)
+          if (matched && matched.length > 0) {
+            const lastRoute = matched[matched.length - 1]
+            if (this.isShouldConcatLastMenu(title, path, lastRoute)) {
+              matched.push({ path: path, meta: { title: title } })
+            }
+          } else {
+            matched.push({ path: path, meta: { title: title } })
+          }
+        }
+      }
+      this.levelList = matched
+    },
+    // 新建页面时会把列表页面路由刷没，导致菜单路径缺少最后一层菜单问题
+    isShouldConcatLastMenu(title, path, lastRoute) {
+      if (
+        this.isTitleNotEqual(title, lastRoute) &&
+        this.isPathNotEqual(path, lastRoute)
+      ) {
+        // title和path都不同，表示是不同的页面，需要添加到matched集合中
+        return true
+      }
+      return false
+    },
+    /**
+     * Vue.prototype._selectMenu的菜单标题是否与最后的路由页面标题一致
+     * 返回true表示不一样，返回false表示一样
+     */
+    isTitleNotEqual(title, lastRoute) {
+      if (
+        title &&
+        lastRoute.meta &&
+        title !== lastRoute.meta.title &&
+        title !== this.$t(lastRoute.meta.title)
+      ) {
+        // 表示title不一样，当前可能是在表单页面，需要添加到matched集合中
+        return true
+      }
+      return false
+    },
+    /**
+     * Vue.prototype._selectMenu的菜单的访问路径是否与最后的路由页面的路径一致
+     * 返回true表示不一样，返回false表示一样
+     */
+    isPathNotEqual(path, lastRoute) {
+      if (path && lastRoute.path && path !== lastRoute.path) {
+        // 表示path不一样，当前可能是在表单页面，需要添加到matched集合中
+        return true
+      }
+      return false
+    },
+  },
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.app-breadcrumb.el-breadcrumb {
+  background-color: #eee;
+  width: 100%;
+  border: 1px solid #ccc;
+  bottom: 2px;
+  margin-left: 2px;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 40px;
+  .no-redirect {
+    color: #333;
+    cursor: text;
+  }
+  .el-breadcrumb__item {
+    padding-left: 5px;
+  }
+  .el-breadcrumb__separator {
+    margin: 0 5px;
+  }
+}
+</style>

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

@@ -0,0 +1,57 @@
+<template>
+	<div>
+		<div v-if="icon">
+			<div v-if="icon.indexOf('fa-') === 0" style="display: inline-block;overflow:hidden;">
+				<i :class="`fa${icon}`"/>
+			</div>
+			<div v-else-if="icon.indexOf('svg-') === 0" style="display: inline-block;overflow:hidden;">
+				<svg-icon :icon-class={icon} />
+			</div>
+			<div v-else style="display: inline-block;overflow:hidden;">
+				<i class="svg-icon" />
+			</div>
+		</div>
+
+		<div v-else-if="title">
+			<div v-if="isRoot" style="display: inline-block">
+				<div
+						:title=title
+						:style="{'display':'inline-block','width':hasChildren?'100px':'130px','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}"
+				>
+				{{ title }}
+			  </div>
+		  </div>
+			<div v-else style="display: inline-block">
+				<div
+						:title=title
+						:style="{'display':'inline-block','width':hasChildren?'100px':'130px','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}"
+				>
+					{{ title }}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		icon: {
+			type: String,
+			default: ''
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		hasChildren: {
+			type: Boolean,
+			default: false
+		},
+		isRoot: {
+			type: Boolean,
+			default: false
+		}
+	}
+}
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <!-- eslint-disable vue/require-component-is-->
+    <!-- <a v-if="isExter" :href="to.path" target="_blank" rel="noopener">
+        <slot />
+      </a> -->
+
+    <router-link v-if="!isOpenNewTab" :to="to">
+      <slot />
+    </router-link>
+    <div v-else>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    to: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    const isExter = this.to.isExternal
+    const openWay = this.to.openWay
+    let isOpenNewTab = false
+    if (openWay && openWay === 'NEW_PAGE_OPEN') {
+      isOpenNewTab = true
+    }
+    return {
+      isExter,
+      isOpenNewTab,
+    }
+  },
+}
+</script>

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="menu-wrapper">
+    <template v-if="!item.children || item.children.lenght === 0">
+      <app-link :to="toPath(item)" @click="clickMenu(toPath(item))">
+        <el-menu-item
+          :index="item.fullPath + '~~' + item.i18nValue"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <item
+            :icon="item.iconName"
+            :title="getI18nName(item)"
+            :is-root="true"
+          />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-sub-menu v-else :index="item.fullPath + '~~' + item.i18nValue">
+      <template v-slot:title>
+        <item
+          :icon="item.iconName"
+          :title="getI18nName(item)"
+          :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"
+          :is-nest="true"
+          :item="child"
+          class="nest-menu"
+        />
+        <app-link v-else :to="toPath(child)" @click="clickMenu(toPath(child))">
+          <el-menu-item :index="child.fullPath + '~~' + child.i18nValue">
+            <item :icon="child.iconName" :title="getI18nName(child)" />
+          </el-menu-item>
+        </app-link>
+      </template>
+    </el-sub-menu>
+  </div>
+</template>
+
+<script>
+import Item from './Item.vue'
+import AppLink from './Link.vue'
+import * as Vue from 'vue'
+import { getI18nName } from 'imatrix-ui/src/utils/menu'
+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
+    },
+    toPath(menu) {
+      const toPathObj = {}
+      const routePath = menu.fullPath
+      toPathObj.openWay = menu.openWay
+      if (this.isExternalLink(menu.pageType)) {
+        toPathObj.path = '/tab-content-iframe-index'
+        toPathObj.tabPath = '/iframe-page/page'
+        toPathObj.query = {}
+        toPathObj.query.src = routePath
+        toPathObj.isExternal = true
+        // 如果路径中没有拼系统编码，才需要把系统编码放到参数中
+        toPathObj.query.customSystem =
+          window.$vueApp.config.globalProperties.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
+      } else {
+        toPathObj.path = '/tab-content-index'
+        toPathObj.tabPath = routePath
+        toPathObj.query = {}
+        toPathObj.query.customSystem =
+          window.$vueApp.config.globalProperties.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
+      }
+      return toPathObj
+    },
+    isExternalLink(pageType) {
+      if (pageType && pageType === 'iframe') {
+        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)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :show-timeout="200"
+        :default-active="defaultActive ? defaultActive : ''"
+        :collapse="isCollapse"
+        mode="vertical"
+        @select="selectMenu"
+      >
+        <el-menu-item
+          v-if="systemName"
+          :title="systemName"
+          index="1"
+          disabled
+          class="system-item"
+          style="padding-left: 10px"
+        >
+          {{ systemName }}
+        </el-menu-item>
+        <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.vue'
+import * as 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 {
+  name: 'Menubar',
+  components: {
+    SidebarItem,
+  },
+  props: {
+    systemCode: {
+      type: String,
+      default: null,
+    },
+    collapse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    let systemName
+    if (isShowSystemMenu() === true) {
+      const language = getLanguageWithLocale()
+      const systemNameObj = window.$vueApp.config.globalProperties.systemNameObj
+      if (systemNameObj) {
+        systemName = systemNameObj[language]
+      }
+    }
+    const menus = getMenus()
+    return {
+      firstLeafMenu: null, // 第一个有权限的叶子菜单，用于默认展开第一个父菜单
+      systemName,
+      defaultActive: '',
+      menus,
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+    isCollapse() {
+      if (this.collapse === false) {
+        return !this.sidebar.opened
+      }
+      return true
+    },
+  },
+  watch: {
+    $route() {
+      this.firstLeafMenu = this.getFirstMenu(this.menus)
+      if (this.firstLeafMenu) {
+        // Breadcrumb组件需要使用Vue.prototype._selectMenu的值，格式为：fullPath~~title
+        this.defaultActive =
+          this.firstLeafMenu.fullPath + '~~' + this.firstLeafMenu.i18nValue
+        window.$vueApp.config.globalProperties._selectMenu = this.defaultActive
+      }
+    },
+  },
+  created() {
+    this.firstLeafMenu = this.getFirstMenu(this.menus)
+    if (this.firstLeafMenu) {
+      // Breadcrumb组件需要使用Vue.prototype._selectMenu的值，格式为：fullPath~~title
+      this.defaultActive =
+        this.firstLeafMenu.fullPath + '~~' + this.firstLeafMenu.i18nValue
+      window.$vueApp.config.globalProperties._selectMenu = this.defaultActive
+    }
+    if (this.firstLeafMenu && this.firstLeafMenu.fullPath) {
+      // 跳转到第一个页面
+      if (
+        this.firstLeafMenu.pageType &&
+        this.firstLeafMenu.pageType === 'iframe'
+      ) {
+        const iframeSrc = this.firstLeafMenu.fullPath
+        // 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 {
+        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')
+    },
+    selectMenu(index, indexPath) {
+      window.$vueApp.config.globalProperties._selectMenu = index
+      Cookies.set('selectMenu', index)
+    },
+    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) {
+      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.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) {
+        let shouldSelectMenu
+        const children = menu.children
+        if (children && children.length > 0) {
+          shouldSelectMenu = this.getFirstMenu(children)
+        } else {
+          shouldSelectMenu = menu
+        }
+        return shouldSelectMenu
+      }
+    },
+  },
+}
+</script>