update 嵌入其他系统隐藏菜单和用户信息（顶部）

src/App.vue

@@ -17,6 +17,7 @@ import '@/utils/warterMark'
 // 引入自定义icon
 import '@/assets/icon/iconfont.less'
 import Vue from 'vue'
+import { updatePageHeight } from './components/tools/setting.js'
 
 moment.locale('zh-cn')
 
@@ -100,6 +101,9 @@ export default {
       const { href } = this.$router.resolve(params)
       window.open(href, '_blank')
     }
+
+    updatePageHeight()
+
   }
 }
 </script>

src/assets/less/common.less

@@ -1,7 +1,10 @@
 @primary-color: #D52C26;
+/*用户信息部分的高度*/
+@user-info-height: var(--user-info-height, 59px);
+/*面包屑的高度，高度21，上下margin24*/
+@breadcrumb-height: var(--breadcrumb-height, 45px);
 /* 页面不出全局滚动条的高度，如果在vue文件使用，就只能在style里引入common.less */
-/*59px是用户信息那块，21px是面包屑，24px是上下的留白*/
-@page-content-h: calc(100vh - 59px - 21px - 24px);
+@page-content-h: calc(100vh - @user-info-height - @breadcrumb-height);
 
 /*列表上方操作按钮区域*/
 /*.ant-card-body .table-operator {

src/components/page/GlobalLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <a-layout class="layout" :class="[device]">
 
-    <template v-if="layoutMode === 'sidemenu'">
+    <template v-if="layoutMode === 'sidemenu' && !isEmbedded">
       <a-drawer
         v-if="device === 'mobile'"
         :wrapClassName="'drawer-sider ' + navTheme"
@@ -59,6 +59,7 @@
       :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }">
       <!-- layout header -->
       <global-header
+        v-if="!isEmbedded"
         :mode="layoutMode"
         :menus="menus"
         :theme="navTheme"
@@ -122,7 +123,9 @@ export default {
       // 主路由
       mainRouters: state => state.permission.addRouters,
       // 后台菜单
-      permissionMenuList: state => state.user.permissionList
+      permissionMenuList: state => state.user.permissionList,
+      // 是否嵌入在别的系统中
+      isEmbedded: state => state.app.isEmbedded
     })
   },
   watch: {

src/components/tools/setting.js

@@ -1,5 +1,6 @@
 import { message } from 'ant-design-vue/es'
 // import defaultSettings from '../defaultSettings';
+import store from '../../store/index.js'
 
 let lessNodesAppended
 
@@ -41,6 +42,7 @@ const updateTheme = primaryColor => {
   }
   const hideMessage = message.loading('正在编译主题！', 0)
   console.info(`正在编译主题!`)
+
   function buildIt () {
     // 正确的判定less是否已经加载less.modifyVars可用
     if (!window.less || !window.less.modifyVars) {
@@ -58,6 +60,7 @@ const updateTheme = primaryColor => {
         hideMessage()
       })
   }
+
   if (!lessNodesAppended) {
     // insert less.js and color.less
     const lessStyleNode = document.createElement('link')
@@ -93,4 +96,20 @@ const updateColorWeak = colorWeak => {
   colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
 }
 
-export { updateTheme, colorList, updateColorWeak }
+/**
+ * 设置页面高度
+ */
+const updatePageHeight = () => {
+  const isEmbedded = store.getters.isEmbedded
+  const obj = {
+    'user-info-height': isEmbedded ? '0px' : '59px', // 用户信息的高度
+    'breadcrumb-height': '45px' // 面包屑的高度
+  }
+  for (const key in obj) {
+    document
+      .getElementsByTagName('body')[0]
+      .style.setProperty(`--${key}`, obj[key])
+  }
+}
+
+export { updateTheme, colorList, updateColorWeak, updatePageHeight }

src/permission.js

@@ -12,6 +12,11 @@ const whiteList = ['/user/login', '/user/register', '/user/register-result', '/u
 whiteList.push(OAUTH2_LOGIN_PAGE_PATH)
 
 router.beforeEach((to, from, next) => {
+  // 处理是否是嵌入其他系统，是需要隐藏左侧和上面，如果当前值是true，就不需要修改了
+  const isEmbedded = store.getters.isEmbedded
+  if (!isEmbedded && to.query.code === 'implant') {
+    store.commit('SET_IS_EMBEDDED', true)
+  }
   NProgress.start() // start progress bar
   if (Vue.ls.get(ACCESS_TOKEN)) {
     /* has token */

src/store/getters.js

@@ -16,7 +16,8 @@ const getters = {
   enhanceJs: (state) => (code) => {
     state.enhance.enhanceJs[code] = Vue.ls.get(ENHANCE_PRE + code)
     return state.enhance.enhanceJs[code]
-  }
+  },
+  isEmbedded: state => state.app.isEmbedded
 
 }
 

src/store/modules/app.js

@@ -27,7 +27,8 @@ const app = {
     autoHideHeader: false,
     color: null,
     weak: false,
-    multipage: true // 默认多页签模式
+    multipage: true, // 默认多页签模式
+    isEmbedded: false // 是否嵌入其他系统
   },
   mutations: {
     SET_SIDEBAR_TYPE: (state, type) => {
@@ -78,6 +79,9 @@ const app = {
     SET_MULTI_PAGE (state, multipageFlag) {
       Vue.ls.set(DEFAULT_MULTI_PAGE, multipageFlag)
       state.multipage = multipageFlag
+    },
+    SET_IS_EMBEDDED (state, isEmbedded) {
+      state.isEmbedded = isEmbedded
     }
   },
   actions: {