imatrix-ui 2.9.99 → 7.7.20-p2

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

@@ -66,10 +66,12 @@ export default {
           selectMenu = cookieMenu
         }
         if (selectMenu) {
+          // 解决表单页面无法获得列表路由
           const path = selectMenu.substring(0, selectMenu.indexOf('~~'))
           const title = selectMenu.substring(selectMenu.indexOf('~~') + 2)
           if (matched && matched.length > 0) {
-            if (title && matched[matched.length - 1].meta && title !== matched[matched.length - 1].meta.title) {
+            const lastRoute = matched[matched.length - 1]
+            if (this.isShouldConcatLastMenu(title, path, lastRoute)) {
               matched.push({ path: path, meta: { title: title }})
             }
           } else {
@@ -78,6 +80,36 @@ export default {
         }
       }
       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
     }
   }
 }

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

@@ -0,0 +1,46 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    hasChildren: {
+      type: Boolean,
+      default: false
+    }
+  },
+  render(h, context) {
+    let icon = context.props.icon
+    const { title, hasChildren } = context.props
+    const vnodes = []
+
+    if (icon) {
+      if (icon.indexOf('fa-') === 0) {
+        // 表示以“fa-”开头，使用font-awesome中的图标
+        icon = 'fa ' + icon
+      }
+      icon += ' svg-icon'
+      vnodes.push(<div style='display: inline-block;'><i class={icon}/></div>)
+    }
+
+    if (title) {
+      let width = '130px'
+      if (hasChildren) {
+        // 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
+        width = '100px'
+      }
+      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/Menubar/Link.vue

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

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="menu-wrapper">
+    <template v-if="!item.children || item.children.lenght === 0">
+      <app-link :to="toPath(item)">
+        <el-menu-item :index="item.fullPath+'~~'+item.i18nValue" :class="{'submenu-title-noDropdown':!isNest}">
+          <item :icon="item.iconName" :title="item.i18nValue" />
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-submenu v-else :index="item.fullPath+'~~'+item.i18nValue">
+      <template slot="title">
+        <item :icon="item.iconName" :title="item.i18nValue" :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)">
+          <el-menu-item :index="child.fullPath+'~~'+child.i18nValue">
+            <item :icon="child.iconName" :title="child.i18nValue" />
+          </el-menu-item>
+        </app-link>
+      </template>
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+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) {
+      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
+      if (this.isExternalLink(menu.pageType)) {
+        toPathObj.path = '/iframe-page/page'
+        toPathObj.query = {}
+        toPathObj.query.src = routePath
+        toPathObj.isExternal = true
+      } else {
+        toPathObj.path = routePath
+      }
+      return toPathObj
+    },
+    isExternalLink(pageType) {
+      if (pageType && pageType === 'iframe') {
+        return true
+      }
+      return false
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,143 @@
+<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'
+import Vue from 'vue'
+import { getLanguageWithLocale } from '../../../../utils/util'
+import { isShowSystemMenu } from '../../../../utils/common-util'
+import Cookies from 'js-cookie'
+export default {
+  name: 'Menubar',
+  components: {
+    SidebarItem
+  },
+  data() {
+    let systemName
+    if (isShowSystemMenu() === true) {
+      const language = getLanguageWithLocale()
+      const systemNameObj = Vue.prototype.systemNameObj
+      if (systemNameObj) {
+        systemName = systemNameObj[language]
+      }
+    }
+    return {
+      firstLeafMenu: null, // 第一个有权限的叶子菜单，用于默认展开第一个父菜单
+      systemName,
+      defaultActive: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'menus'
+    ]),
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  },
+  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
+        Vue.prototype._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
+      Vue.prototype._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 }})
+      } else {
+        this.$router.push({ path: this.firstLeafMenu.fullPath })
+      }
+    }
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('toggleSidebar')
+    },
+    selectMenu(index, indexPath) {
+      Vue.prototype._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) {
+      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>

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

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

package/src/views/redirect/index.vue

@@ -1,9 +1,9 @@
 <script>
 export default {
   beforeCreate() {
-    const { query } = this.$route
-    console.log('redirect.vue------path=', query.path, 'query=', query)
-    this.$router.replace({ path: '/' + query.path, query }).catch(() => {})// 把error 抛出来
+    const { params, query } = this.$route
+    const { path } = params
+    this.$router.replace({ path: '/' + path, query })
   },
   render: function(h) {
     return h() // avoid warning message

package/src/views/wf-history/tache-subprocess-history.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div style="padding-bottom: 10px">
+      <el-radio-group v-model="type">
+        <el-radio-button label="graph">
+          {{ $t('imatrixUIPublicModel.graphView') }}
+        </el-radio-button>
+        <el-radio-button label="list">
+          {{ $t('imatrixUIPublicModel.listView') }}
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <div v-if="type==='graph'" class="graphDiv">
+      <workflow-history :id="workflowId" />
+    </div>
+    <workflow-history-list v-if="type==='list'" :workflow-id="workflowId" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TacheSubprocessHistory',
+  data() {
+    return {
+      type: 'graph',
+      workflowId: null
+    }
+  },
+  created() {
+    const workflowId = this.$route.query.workflowId
+    if (workflowId) {
+      this.workflowId = parseInt(workflowId)
+    }
+  }
+}
+</script>
+<style scoped>
+.graphDiv {
+  overflow:auto;
+  height: 100%;
+  height: calc(100vh - 20px);
+}
+</style>
+