agilebuilder-ui 1.0.0

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

@@ -0,0 +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) + '~~' + 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

@@ -0,0 +1,141 @@
+<template>
+	<div>
+		<el-scrollbar wrap-class="scrollbar-wrapper">
+			<el-menu
+					:collapse="isCollapse"
+					:default-active="defaultActive"
+					:show-timeout="200"
+					mode="vertical"
+					@select="selectMenu"
+			>
+				<el-menu-item
+						v-if="systemName"
+						:title="systemName"
+						class="system-item"
+						disabled
+						index="1"
+						style="padding-left: 10px"
+				>
+					{{ systemName }}
+				</el-menu-item>
+				<sidebar-item
+						v-for="route in protectedRouters"
+						:key="route.path"
+						:base-path="route.path"
+						:item="route"
+				/>
+			</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 {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

@@ -0,0 +1,4 @@
+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'

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

@@ -0,0 +1,214 @@
+<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 {
+        // 表示页面跳转
+        if(tag.routePath.indexOf('http:') < 0 && tag.routePath.indexOf('https:') < 0 ) {
+          path = '#' 
+        }
+        if(tag.routePath.indexOf('?') >= 0) {
+          path = path + tag.routePath + '&'
+        } else {
+          path = 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

@@ -0,0 +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 })
+        }
+      }
+    },
+  },
+}

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,92 @@
+<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 {Breadcrumb, Menubar} from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import {isShowMenuRoute} from 'imatrix-ui/src/utils/common-util'
+import TabContent from './components/tabs/tab-content.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>