agilebuilder-ui 1.0.0

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

@@ -0,0 +1,197 @@
+<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="resolvePath(item.code, item.path, item.pageType)"
+          :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="resolvePath(item.code, item.path, item.pageType)"
+      :show-timeout="0"
+      :hide-timeout="50"
+      popper-class="sidebar-container-popper"
+    >
+      <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="resolvePath(child.code, child.path, child.pageType)"
+          >
+            <item :icon="child.iconName" :title="getI18nName(child)" />
+          </el-menu-item>
+        </app-link>
+      </template>
+    </el-sub-menu>
+  </div>
+</template>
+
+<script>
+// import { isExternal } from 'imatrix-ui/src/utils'
+import Item from './Item'
+import AppLink from './Link.vue'
+import * as Vue from 'vue'
+import tabJs from '../../../api/tab'
+import { getI18nName } from '../../../utils/menu'
+// import { SidebarItemChild } from './SidebarItemChild.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,
+    }
+  },
+  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
+      toPathObj.openWay = menu.openWay
+      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 =
+          window.$vueApp.config.globalProperties.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
+      } else {
+        const pageCode = routePath
+        toPathObj.path = '/dsc-index/page'
+        toPathObj.tabPath = '/dsc/page'
+        toPathObj.query = {}
+        toPathObj.query.pageCode = pageCode
+        toPathObj.query.customSystem =
+          window.$vueApp.config.globalProperties.customSystem
+        toPathObj.query._menuCode = menu.code
+        toPathObj.query._menuName = getI18nName(menu)
+      }
+      return toPathObj
+    },
+    // 是否已存在customSystem参数
+    isHasCustomSystem(routePath) {
+      if (routePath && routePath.indexOf('?') > 0) {
+        const params = routePath.substring(routePath.indexOf('?') + 1)
+        const paramArr = params.split('&')
+        for (let i = 0; i < paramArr.length; i++) {
+          const item = paramArr[i]
+          const key = item.split('=')[0]
+          if (key === 'customSystem') {
+            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
+        )
+      }
+    },
+    isExternalLink(pageType) {
+      if (pageType && pageType === 'iframe') {
+        return true
+      }
+      return false
+    },
+    getI18nName(menu) {
+      return getI18nName(menu)
+    },
+  },
+}
+</script>

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

@@ -0,0 +1,229 @@
+<template>
+	<div>
+		<el-scrollbar wrap-class="scrollbar-wrapper">
+			<keep-alive>
+				<el-menu
+						:collapse="isCollapse"
+						:default-active="getDefaultActive()"
+						:show-timeout="200"
+						mode="vertical"
+						@select="selectMenu"
+				>
+					<sidebar-item v-for="menu in menus" :key="menu.code" :item="menu"/>
+				</el-menu>
+			</keep-alive>
+		</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'
+import {getMenus} from '../../../utils/permissionAuth'
+import {getI18nName} from '../../../utils/menu'
+
+export default {
+	name: 'Sidebar',
+	components: {
+		SidebarItem,
+	},
+	props: {
+		systemCode: {
+			type: String,
+			default: null,
+		},
+		collapse: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		const menus = getMenus()
+		return {
+			menus: Object.freeze(menus),
+		}
+	},
+	computed: {
+		...mapGetters(['sidebar']),
+		isCollapse() {
+			if (this.collapse === false) {
+				return !this.sidebar.opened
+			}
+			return true
+		},
+	},
+	created() {
+		const a = new Date().getTime()
+		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
+				const path = this.firstLeafMenu.path
+				const query = {
+					src: iframeSrc,
+					customSystem: this.systemCode,
+					path: path,
+					_menuCode: this.firstLeafMenu.code,
+					_menuName: getI18nName(this.firstLeafMenu),
+				}
+				this.addTabs(
+						query,
+						this.$store.state.tabContent.openTab,
+						'/dsc/iframe-page',
+						'/dsc/iframe-page'
+				)
+				this.$router.push({path: '/dsc-index/iframe-page', query: query})
+			} else {
+				const pageCode = this.firstLeafMenu.path
+				const query = {
+					customSystem: this.systemCode,
+					pageCode: pageCode,
+					_menuCode: this.firstLeafMenu.code,
+					_menuName: getI18nName(this.firstLeafMenu),
+				}
+				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 })
+			}
+			const b = new Date().getTime()
+			console.log('菜单组件==>created==>b-a', b - a)
+		}
+	},
+	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) {
+			Cookies.set('selectMenu', index)
+		},
+		getMyFirstMenu(menus) {
+			const a = new Date().getTime()
+			if (menus && menus.length > 0) {
+				let shouldSelectMenu = this.getFirstMenu(menus)
+				if (!shouldSelectMenu) {
+					shouldSelectMenu = this.getFirstMenuWithCookie(menus)
+				}
+				const b = new Date().getTime()
+				console.log('菜单组件==>getMyFirstMenu==>b-a', b - a)
+				// 默认不展示第一个有权限的菜单了，可以去掉下面的代码
+				// if (!shouldSelectMenu) {
+				//   shouldSelectMenu = this.getSelectMenuWithFirstMenu(menus[0])
+				// }
+				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
+					}
+				}
+				return shouldSelectMenu
+			}
+		},
+		getShouldSelectMenu(menu) {
+			// console.log('dsc--getShouldSelectMenu--this.$route=', this.$route)
+			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
+			}
+		},
+		getSelectMenuWithFirstMenu(menu) {
+			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.get('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,215 @@
+<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 === '/dsc/iframe-page') {
+        // 表示是iframe页面
+        let src
+        let params = ''
+        if (tag.routeQuery) {
+          const orgParams = []
+          const orgPath = tag.routeQuery['src']
+          if (orgPath && orgPath.indexOf('?') > 0) {
+            const orgParamsStr = orgPath.substring(orgPath.indexOf('?') + 1)
+            const orgParamsArr = orgParamsStr.split('&')
+            orgParamsArr.forEach(item => {
+              orgParams.push(item.substring(0, item.indexOf('=')))
+            })
+          }
+          for (const key in tag.routeQuery) {
+            if (key === 'src') {
+              src = tag.routeQuery[key]
+            } else {
+              if (orgParams.indexOf(key) < 0) {
+                // 表示原参数中没有该参数，则拼接该参数
+                params += key + '=' + tag.routeQuery[key] + '&'
+              }
+            }
+          }
+        }
+        if (src) {
+          path = src
+        }
+        if (params) {
+          if (path && path.indexOf('?') > 0) {
+            path += '&' + params
+          } else {
+            path += '?' + params
+          }
+        }
+      } else {
+        // 表示页面跳转
+        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, '*')
+      }
+    },
+  },
+}
+</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>