agilebuilder-ui 1.0.0

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

@@ -0,0 +1,79 @@
+<script lang="jsx">
+import { defineComponent, h } from 'vue'
+import SvgIcon from '../../../svg-icon/src/svg-icon.vue'
+export default defineComponent ({
+	name: 'MenuItem',
+	functional: true,
+	props: {
+		icon: {
+			type: String,
+			default: ''
+		},
+		title: {
+			type: String,
+			default: ''
+		},
+		hasChildren: {
+			type: Boolean,
+			default: false
+		},
+		isRoot: {
+			type: Boolean,
+			default: false
+		}
+	},
+	render(props) {
+		const { title, hasChildren, isRoot } = props
+		let icon = props.icon
+		const vnodes = []
+		if (icon) {
+			if (icon.indexOf('fa-') === 0) {
+				// 表示以“fa-”开头，使用font-awesome中的图标
+				icon = 'fa ' + icon
+				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h('i',{class:icon})]))
+				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon}/></div>)
+			} else if (icon.indexOf('svg-') === 0) {
+				icon = icon.substring(icon.indexOf('svg-') + 4)
+				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h(SvgIcon,{'icon-class':icon})]))
+				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><svg-icon icon-class={icon}/></div>)
+			} else {
+				icon += ' svg-icon'
+				vnodes.push(h('div', {style:{display:'inline-block',overflow:'hidden'}},[h('i',{class:icon})]))
+				// vnodes.push(<div style='display: inline-block;overflow:hidden;'><i class={icon} /></div>)
+			}
+		}
+
+		if (title) {
+			let width = '130px'
+			if (hasChildren) {
+				// 当是父菜单时，为了使后面的三角能显示出来，需要将宽度设小点
+				width = '100px'
+			}
+			if (isRoot) {
+				// 是否是根目录，没有子菜单时
+				vnodes.push(h('div', {style:{display:'inline-block'}},
+						[h('div',{
+							title:title,
+							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+						}, title)])
+				)
+				// vnodes.push(<div 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>)
+			} else {
+				// 有子菜单时
+				vnodes.push(h('div', {style:{display:'inline-block'}},
+						[h('div',{
+							title:title,
+							style:{display:'inline-block',width:width,overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap','word-break':'keep-all'}
+						}, title)])
+				)
+				// 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,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,261 @@
+<template>
+  <div class="menu-wrapper">
+    <template v-if="!item.children || item.children.length === 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
+          :key="child.code"
+          v-if="child.children && child.children.length > 0"
+          :is-nest="true"
+          :item="child"
+          class="nest-menu"
+        />
+        <app-link :key="child.code" 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";
+import { getSystemCode } from "../../../../utils/permissionAuth";
+import authApi from "../../../../utils/auth-api";
+
+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() {
+   let frontendUrlKey = '_PLAT_FORM_FRONTEND_URL'
+    let backendUrlKey = '_PLAT_FORM_BACKEND_URL'
+    let devpJWTKey = '_devpJWT'
+    let currentRoleKey = '_CURRENT_ROLE'
+    let runDevpJWTKey = '_runDevpJWT'
+    return {
+      onlyOneChild: null,
+      platFrontUrl: null,
+      platBackendUrl: null,
+      devpJWT: null,
+      currentRole: null,
+      devpJWTKey,
+      currentRoleKey,
+      runDevpJWTKey,
+      runDevpJWT: null,
+      frontendUrlKey,
+      backendUrlKey,
+    };
+  },
+  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) {
+      this.platFrontUrl= authApi.getSessionCache(this.frontendUrlKey)
+      this.platBackendUrl= authApi.getSessionCache(this.backendUrlKey)
+      this.devpJWT= authApi.getSessionCache(this.devpJWTKey)
+      this.currentRole= authApi.getSessionCache(this.currentRoleKey)
+      this.runDevpJWT= authApi.getSessionCache(this.runDevpJWTKey)
+      const toPathObj = {};
+      let routePath
+      toPathObj.openWay = menu.openWay;
+      let isDevp = false
+      if (this.devpJWT) {
+        // 开发平台中访问运行平台的菜单需要的参数
+        isDevp = true
+      }
+      if (this.isExternalLink(menu.pageType)) {
+        routePath = menu.path      
+        if(!routePath) {
+          routePath = ''
+        }
+        if((routePath.indexOf('http:') < 0 && routePath.indexOf('https:') < 0) && this.platFrontUrl) {
+          // 说明不是全路径，需要拼接运行平台前端访问路径
+          if(this.platFrontUrl.lastIndexOf('/') === this.platFrontUrl.length - 1) {
+            // 去掉最后一个/
+            this.platFrontUrl = this.platFrontUrl.substring(0,this.platFrontUrl.length - 1)
+          }
+          routePath =this.platFrontUrl + routePath
+        } else {
+          routePath = menu.fullPath      
+          if(!routePath) {
+            routePath = ''
+          }
+        }
+        routePath = this.getRoutePath(routePath)
+        toPathObj.path = "/tab-content-index"
+        if(isDevp){
+          // 如果是开发平台，进入开发平台设置首页
+          toPathObj.path = "/devp-project/setting"
+        }
+        toPathObj.tabPath = routePath
+        toPathObj.query = {};
+        // toPathObj.query.src = routePath;
+        toPathObj.isExternal = true;
+        // 如果路径中没有拼系统编码，才需要把系统编码放到参数中
+        toPathObj.query.customSystem = getSystemCode();
+        toPathObj.query._menuCode = menu.code;
+        toPathObj.query._menuName = getI18nName(menu);
+      } else {
+        routePath = menu.fullPath;      
+        if(!routePath) {
+          routePath = ''
+        }
+        if (routePath.indexOf("?") > 0) {
+          routePath += "&"
+        } else {
+          routePath += "?"
+        }
+        routePath = routePath + '_isNeedMenu_=false'
+        toPathObj.path = "/tab-content-index";
+        if(isDevp){
+          // 如果是开发平台，进入开发平台设置首页
+          toPathObj.path = "/devp-project/setting"
+        }
+        toPathObj.tabPath = routePath;
+        toPathObj.query = {};
+        toPathObj.query.customSystem = getSystemCode();
+        toPathObj.query._menuCode = menu.code;
+        toPathObj.query._menuName = getI18nName(menu);
+      }
+      return toPathObj;
+    },
+    getRoutePath(routePath){
+        if (routePath.indexOf("?") > 0) {
+          routePath += "&"
+        } else {
+          routePath += "?"
+        }
+        routePath = routePath + '_isNeedMenu_=false'
+        if (this.devpJWT) {
+          // 开发平台中访问运行平台的菜单需要的参数
+          if (routePath.indexOf("?") > 0) {
+            routePath += "&"
+          } else {
+            routePath += "?"
+          }
+          routePath = routePath + this.devpJWTKey + '=' + this.devpJWT
+        }
+        if(this.runDevpJWT) {
+          // 运行平台点击菜单时封装jwt参数
+          if (routePath.indexOf("?") > 0) {
+            routePath += "&"
+          } else {
+            routePath += "?"
+          }
+          routePath = routePath + this.devpJWTKey + '=' + this.runDevpJWT
+        }
+        if (this.currentRole) {
+          // 开发平台中访问运行平台的菜单需要的参数
+          if (routePath.indexOf("?") > 0) {
+            routePath += "&"
+          } else {
+            routePath += "?"
+          }
+          routePath = routePath + this.currentRoleKey + '=' + this.currentRole
+        }
+        return routePath
+    },
+    isExternalLink(pageType) {
+      if (pageType && pageType === "iframe") {
+        return true;
+      }
+      return false;
+    },
+    clickMenu(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
+					:collapse="isCollapse"
+					:default-active="defaultActive ? 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="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 {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组件需要使用window.$vueApp.config.globalProperties._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组件需要使用window.$vueApp.config.globalProperties._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>

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

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

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