imatrix-ui 0.0.15 → 0.1.1-up

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

@@ -1,29 +1,53 @@
-<script>
-export default {
-  name: 'MenuItem',
-  functional: true,
-  props: {
-    icon: {
-      type: String,
-      default: ''
-    },
-    title: {
-      type: String,
-      default: ''
-    }
-  },
-  render(h, context) {
-    const { icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)}</span>)
-    }
-    return vnodes
-  }
-}
-</script>
+<script lang="jsx">
+import * as Vue from 'vue'
+export default function render(_props, _context) {
+  const context = {
+    ..._context,
+    props: _props,
+    data: _context.attr,
+    children: _context.slots,
+  }
+  const { icon, title, hasChildren } = context.props
+  const vnodes = []
+
+  if (icon) {
+    vnodes.push(
+      <div style="display: inline-block;">
+        <svg-icon icon-class={icon} />
+      </div>
+    )
+  }
+
+  if (title) {
+    let width = '130px'
+    if (hasChildren) {
+      // 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
+      width = '100px'
+    }
+    const className = window.$vueApp.config.globalProperties.className
+    if (className && className === 'blue2') {
+      // blue2样式的左侧菜单宽度为240px
+      width = '230px'
+      if (hasChildren) {
+        // 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
+        width = '200px'
+      }
+    }
+    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
+}
+</script>

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

@@ -1,39 +1,38 @@
-
-<template>
-  <!-- eslint-disable vue/require-component-is-->
-  <component v-bind="linkProps(to)">
-    <slot />
-  </component>
-</template>
-
-<script>
-import { isExternal } from '../../../../utils'
-
-export default {
-  props: {
-    to: {
-      type: String,
-      required: true
-    }
-  },
-  methods: {
-    isExternalLink(routePath) {
-      return isExternal(routePath)
-    },
-    linkProps(url) {
-      if (this.isExternalLink(url)) {
-        return {
-          is: 'a',
-          href: url,
-          target: '_blank',
-          rel: 'noopener'
-        }
-      }
-      return {
-        is: 'router-link',
-        to: url
-      }
-    }
-  }
-}
-</script>
+<template>
+  <!-- eslint-disable vue/require-component-is-->
+  <component v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script>
+import { isExternal } from '../../../../utils'
+
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    isExternalLink(routePath) {
+      return isExternal(routePath)
+    },
+    linkProps(url) {
+      if (this.isExternalLink(url)) {
+        return {
+          is: 'a',
+          href: url,
+          target: '_blank',
+          rel: 'noopener',
+        }
+      }
+      return {
+        is: 'router-link',
+        to: url,
+      }
+    },
+  },
+}
+</script>

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

@@ -1,100 +1,135 @@
-<template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
-      <app-link :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon" :title="onlyOneChild.meta.title" />
-        </el-menu-item>
-      </app-link>
-    </template>
-
-    <el-submenu v-else :index="resolvePath(item.path)">
-      <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
-      </template>
-
-      <template v-for="child in item.children" v-if="!child.hidden">
-        <sidebar-item
-          v-if="child.children&&child.children.length>0"
-          :is-nest="true"
-          :key="child.path"
-          :item="child"
-          :base-path="resolvePath(child.path)"
-          class="nest-menu"
-/>
-        <app-link v-else :key="child.name" :to="resolvePath(child.path)">
-          <el-menu-item :index="resolvePath(child.path)">
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title" />
-          </el-menu-item>
-        </app-link>
-      </template>
-    </el-submenu>
-</div>
-</template>
-
-<script>
-import path from 'path'
-import { isExternal } from '../../../../utils'
-import Item from './Item'
-import AppLink from './Link'
-
-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: {
-    hasOneShowingChild(children, parent) {
-      const showingChildren = children.filter(item => {
-        if (item.hidden) {
-          return false
-        } else {
-          // Temp set(will be used if only has one showing child)
-          this.onlyOneChild = item
-          return true
-        }
-      })
-
-      // When there is only one child router, the child router is displayed by default
-      if (showingChildren.length === 1) {
-        return true
-      }
-
-      // Show parent if there are no child router to display
-      if (showingChildren.length === 0) {
-        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
-        return true
-      }
-
-      return false
-    },
-    resolvePath(routePath) {
-      if (this.isExternalLink(routePath)) {
-        return routePath
-      }
-      return path.resolve(this.basePath, routePath)
-    },
-    isExternalLink(routePath) {
-      return isExternal(routePath)
-    }
-  }
-}
-</script>
+<template>
+  <div v-if="!item.hidden && item.children" class="menu-wrapper">
+    <template
+      v-if="
+        hasOneShowingChild(item.children, item) &&
+        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
+        !item.alwaysShow
+      "
+    >
+      <app-link :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item
+          :index="
+            resolvePath(onlyOneChild.path) + '~~' + onlyOneChild.meta.title
+          "
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <item
+            v-if="onlyOneChild.meta"
+            :icon="onlyOneChild.meta.icon || item.meta.icon"
+            :title="$t(onlyOneChild.meta.title)"
+          />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-sub-menu
+      v-else
+      :index="resolvePath(item.path) + '~~' + item.meta.title"
+    >
+      <template v-slot:title>
+        <item
+          v-if="item.meta"
+          :icon="item.meta.icon"
+          :title="$t(item.meta.title)"
+          :has-children="item.children.length > 0 ? true : false"
+        />
+      </template>
+
+      <template v-for="child in visibleChildren">
+        <sidebar-item
+          v-if="child.children && child.children.length > 0"
+          :is-nest="true"
+          :item="child"
+          :base-path="resolvePath(child.path)"
+          class="nest-menu"
+        />
+        <app-link v-else :to="resolvePath(child.path)">
+          <el-menu-item
+            :index="resolvePath(child.path) + '~~' + child.meta.title"
+          >
+            <item
+              v-if="child.meta"
+              :icon="child.meta.icon"
+              :title="$t(child.meta.title)"
+            />
+          </el-menu-item>
+        </app-link>
+      </template>
+    </el-sub-menu>
+  </div>
+</template>
+
+<script>
+import path from 'path'
+import { isExternal } from '../../../../utils'
+import Item from './Item.vue'
+import AppLink from './Link.vue'
+
+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,
+    }
+  },
+  computed: {
+    visibleChildren() {
+      return this.item.children.filter((child) => {
+        return !child.hidden
+      })
+    },
+  },
+  methods: {
+    hasOneShowingChild(children, parent) {
+      const showingChildren = children.filter((item) => {
+        if (item.hidden) {
+          return false
+        } else {
+          // Temp set(will be used if only has one showing child)
+          this.onlyOneChild = item
+          return true
+        }
+      })
+
+      // When there is only one child router, the child router is displayed by default
+      if (showingChildren.length === 1) {
+        return true
+      }
+
+      // Show parent if there are no child router to display
+      if (showingChildren.length === 0) {
+        this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
+        return true
+      }
+
+      return false
+    },
+    resolvePath(routePath) {
+      if (this.isExternalLink(routePath)) {
+        return routePath
+      }
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return isExternal(routePath)
+    },
+  },
+}
+</script>

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

@@ -1,48 +1,141 @@
-<template>
-  <div>
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :show-timeout="200"
-        :default-active="$route.path"
-        :collapse="isCollapse"
-        mode="vertical"
-        background-color="#304156"
-        text-color="#bfcbd9"
-        active-text-color="#409EFF"
-      >
-        <sidebar-item v-for="route in protectedRouters" :key="route.path" :item="route" :base-path="route.path"/>
-      </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 Hamburger from '@/components/Hamburger'
-export default {
-  components: {
-    SidebarItem
-    // Hamburger
-  },
-  computed: {
-    ...mapGetters([
-      'sidebar',
-      'protectedRouters'
-    ]),
-    // routes() {
-    //   return this.
-    // },
-    isCollapse() {
-      return !this.sidebar.opened
-    }
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('toggleSidebar')
-    }
-  }
-}
-</script>
+<template>
+  <div>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :show-timeout="200"
+        :default-active="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="route in protectedRouters"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+        />
+      </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 Cookies from 'js-cookie'
+export default {
+  components: {
+    SidebarItem,
+  },
+  data() {
+    let systemName
+    if (isShowSystemMenu() === true) {
+      const language = getLanguageWithLocale()
+      const systemNameObj = window.$vueApp.config.globalProperties.systemNameObj
+      if (systemNameObj) {
+        systemName = systemNameObj[language]
+      }
+    }
+    return {
+      systemName,
+      defaultActive: '',
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar', 'protectedRouters']),
+    isCollapse() {
+      return !this.sidebar.opened
+    },
+  },
+  watch: {
+    $route() {
+      this.getDefaultActiveMenu()
+    },
+  },
+  created() {
+    this.getDefaultActiveMenu()
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('toggleSidebar')
+    },
+    selectMenu(index, indexPath) {
+      window.$vueApp.config.globalProperties._selectMenu = index
+      Cookies.set('selectMenu', index)
+    },
+    getDefaultActiveMenu() {
+      const cookieMenu = Cookies.get('selectMenu')
+      const leftSelectMenu = window.$vueApp.config.globalProperties._selectMenu
+      if (leftSelectMenu) {
+        this.defaultActive = leftSelectMenu
+      } else if (cookieMenu) {
+        this.defaultActive = cookieMenu
+      } else {
+        // 初始进入系统
+        const parentPaths = []
+        this.defaultActive = this.getDefaultActiveRouteInChildren(
+          this.protectedRouters,
+          parentPaths
+        )
+        window.$vueApp.config.globalProperties._selectMenu = this.defaultActive
+      }
+    },
+    getDefaultActiveRouteInChildren(children, parentPaths) {
+      let defaultActive
+      for (let i = 0; i < children.length; i++) {
+        const route = children[i]
+        if (
+          (route.hidden === undefined || route.hidden === false) &&
+          route.path &&
+          route.path !== '' &&
+          route.path !== '/redirect/:path*'
+        ) {
+          // 表示不是隐藏的路由
+          if (route.children === undefined || route.children.length === 0) {
+            // 表示当前路由就是要默认选中的
+            let path = route.path
+            if (path && path.indexOf('/') !== 0) {
+              // 表示是相对路径，需要拼接父路由路径
+              path = parentPaths.join('/') + '/' + path
+            }
+            if (this.$route.path === path) {
+              const title = route.meta ? route.meta.title : ''
+              defaultActive = path + '~~' + title
+              break
+            }
+          } else {
+            parentPaths.push(route.path)
+            defaultActive = this.getDefaultActiveRouteInChildren(
+              route.children,
+              parentPaths
+            )
+            if (defaultActive) {
+              break
+            }
+          }
+        }
+        parentPaths = []
+      }
+      return defaultActive
+    },
+  },
+}
+</script>

package/src/views/layout/components/iframe-page.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/components/index.js

@@ -1,3 +1,4 @@
-export { default as Navbar } from './Navbar'
-export { default as Sidebar } from './Sidebar'
-export { default as AppMain } from './AppMain'
+export { default as Sidebar } from './Sidebar/index.vue'
+export { default as AppMain } from './AppMain.vue'
+export { default as Menubar } from './Menubar/index.vue'
+export { default as Breadcrumb } from './Breadcrumb/index.vue'