n20-common-lib 2.7.0-beta.1 → 2.7.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.7.0-beta.1",
+  "version": "2.7.0-beta.10",
   "private": false,
   "main": "src/index.js",
   "scripts": {

package/src/assets/css/cl-layout-header.scss

@@ -280,27 +280,72 @@ $--header-color: #3d4a57;
   color: #333333;
 }
 
-.header-menu-drawer.el-drawer.ttb {
-  top: 48px;
+.menu {
+  color: #33383d;
+  letter-spacing: 0;
+  line-height: 22px;
+  opacity: .98;
+  background-color: #fff;
+  box-shadow: 0 12px 30px -15px rgba(0, 0, 0, .1);
+  width: calc(100vw - 190px);
+  height: 20px;
+  position: fixed;
+  top: 50px;
   left: 190px;
-  width: calc(100% - 190px);
-  padding-left: 105px;
+  z-index: 1000;
+  max-height: 0;
+  min-height: 0;
+  transition: max-height .3s ease, min-height .3s ease;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-  .menu {
-    &-system-item {
-      flex: 0 0 33.33%;
-      padding-top: 32px;
-    }
+  &_drawer_box {
+    width: 992px;
+  }
 
-    &-system-child {
-      padding-top: 16px;
-      padding-left: 32px;
+  &-system-item {
+    flex: 0 0 33.33%;
+    padding-top: 32px;
+
+    &_title {
+
+      display: inline-block;
+      padding: 4px;
+
+      &:hover {
+        background-color: #f5f5f5;
+        border-radius: $--border-radius-base;
+      }
     }
+  }
+
+  &-system-child {
+    padding-top: 16px;
+    padding-left: 36px;
+  }
+
+  &-first-item {
+    flex: 0 0 33.33%;
+    margin-bottom: 16px;
+
+    &_title {
 
-    &-first-item {
-      flex: 0 0 33.33%;
-      margin-bottom: 16px;
+      display: inline-block;
+      padding: 4px;
+
+      &:hover {
+        background-color: #f5f5f5;
+        border-radius: $--border-radius-base;
+      }
     }
   }
 
+}
+
+.menu.show_drawer {
+  max-height: calc(90vh - 50px);
+  min-height: 350px;
 }

package/src/components/Layout/HeaderWrap/indexN.vue

@@ -24,12 +24,11 @@
       <svg class="icon" aria-hidden="true">
         <use xlink:href="#n20-icon-caidan"></use>
       </svg>
-      <span class="m-l-ss f-s-b color-primary">切换系统</span>
+      <span class="m-l-ss f-s-b color-primary">{{ $lc('系统切换') }}</span>
       <svg class="icon m-l-ss f-s-s" aria-hidden="true">
         <use xlink:href="#n20-icon-lujing"></use>
       </svg>
     </div>
-    <menuDrawer :visible.sync="menuDrawer" :menus="headerSystem" :callback="getTreeList"></menuDrawer>
 
     <span v-if="byLabel && !inBack" class="header-uif-by">{{ byLabel }}</span>
     <!-- YSCW -->
@@ -78,20 +77,12 @@
       </el-dropdown-menu>
     </el-dropdown>
 
-    <el-tooltip v-if="!hideHelpDoc" :content="'帮助文档' | $lc">
-      <span class="set-user-btn iconfont icon-bangzhuwendang header-color m-l-lg" @click="openHelp"></span>
-    </el-tooltip>
-
-    <el-tooltip v-if="!hideDowApp" :content="'客户端下载' | $lc">
-      <span class="set-user-btn iconfont icon-kehuduanxiazai header-color m-l-lg" @click="dowApp"></span>
-    </el-tooltip>
-
     <el-badge :hidden="noticeNum + afficheNum === 0" :value="noticeNum + afficheNum">
       <span v-if="!noticeDrw" v-popover:noticePop class="news-btn iconfont icon-xiaoxi header-color"></span>
       <span v-else class="news-btn iconfont icon-xiaoxi header-color" @click="customOpt.noticeDrawer"></span>
     </el-badge>
 
-    <el-popover ref="by_popover" v-model="byV" placement="bottom-start" trigger="manual" popper-class="uby-w">
+    <!-- <el-popover ref="by_popover" v-model="byV" placement="bottom-start" trigger="manual" popper-class="uby-w">
       <div class="uby-h flex-box flex-v">
         <i class="uby-h-icon iconfont icon-icon_huanyingmoshi"></i>
         <span
@@ -103,7 +94,7 @@
       <div class="text-r">
         <el-button type="primary" @click="byV = false">{{ '知道了' | $lc }}</el-button>
       </div>
-    </el-popover>
+    </el-popover> -->
 
     <el-dropdown
       ref="userDrop"
@@ -215,26 +206,24 @@
             </el-dropdown-menu>
           </el-dropdown>
         </el-dropdown-item>
-        <!-- 系统切换 -->
-        <el-dropdown-item v-if="systemChange && systemList && systemList.length">
-          <el-dropdown trigger="hover" size="medium" placement="left-start" style="width: 100%">
-            <div class="flex-box flex-v">
-              <span>{{ '系统切换' | $lc }}</span>
-              <i class="el-icon-caret-right m-l-auto m-r-0"></i>
-            </div>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="(item, i) in systemList" :key="i" @click.native="clickSystem(item)">
-                <span>{{ item.NAME }}</span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </el-dropdown-item>
         <el-dropdown-item v-if="!inBack" command="toBack">
           <div class="flex-box flex-v">
             <span>{{ '后台管理' | $lc }}</span>
             <i class="el-icon-caret-right m-l-auto m-r-0"></i>
           </div>
         </el-dropdown-item>
+        <el-dropdown-item v-if="!hideHelpDoc" command="openHelp">
+          <div class="flex-box flex-v">
+            <span>{{ '帮助文档' | $lc }}</span>
+            <i class="el-icon-caret-right m-l-auto m-r-0"></i>
+          </div>
+        </el-dropdown-item>
+        <el-dropdown-item v-if="!hideDowApp" command="dowApp">
+          <div class="flex-box flex-v">
+            <span>{{ '客户端下载' | $lc }}</span>
+            <i class="el-icon-caret-right m-l-auto m-r-0"></i>
+          </div>
+        </el-dropdown-item>
         <slot name="header-dropdown"></slot>
         <el-dropdown-item command="logOut">
           <div class="flex-box flex-v">
@@ -285,7 +274,6 @@ import { themeList } from '../../../utils/theme.config'
 import dialogWrap from '../../Dialog/index.vue'
 import operatingStatus from '../../operatingStatus/index.vue'
 import changePwd from './changePwd.vue'
-import menuDrawer from './menuDrawer.vue'
 import noticePop from './noticePop.vue'
 import switchUser from './switchUser.vue'
 
@@ -308,8 +296,7 @@ export default {
     changePwd,
     noticePop,
     switchUser,
-    operatingStatus,
-    menuDrawer
+    operatingStatus
   },
   props: {
     beforeLogout: {
@@ -369,13 +356,13 @@ export default {
       afficheNum: 0,
       rolesList: [],
       headerSystem: [],
+      showDrawerBox: false,
       scV: false,
       underway: false,
       /*  */
       byV: false,
       byLabel: '',
       byEV: false,
-      menuDrawer: false,
       headerUserInfoBg: realUrl('/server-assets/userInfoBg.png'),
       inBack: window.localStorage.getItem('pageInType') === 'inBack'
     }
@@ -420,7 +407,6 @@ export default {
         }
       })
     })
-    this.systemChange && this.getSystemList()
     this.getNNum()
     document.addEventListener('visibilitychange', this.getNNum)
     window.addEventListener('message', this.updateNotice)
@@ -440,73 +426,59 @@ export default {
     window.removeEventListener('message', this.updateNotice)
   },
   methods: {
-    handleChangeSystem() {
-      this.menuDrawer = true
-      this.getTreeList({}, null)
-      let system_list = JSON.parse(localStorage.getItem('SYSTEM_LIST'))
-      let menuTree = JSON.parse(sessionStorage.getItem('menuTree'))
-      let length = system_list.length
-
-      for (let i = 0; i < length; i++) {
-        switch (system_list[i].NO) {
-          case 'CSZHYW':
-            system_list[i].icon = '#n20-icon-zhcsyw'
-            break
-          case 'CSYWGL':
-            system_list[i].icon = '#n20-icon-bianzu'
-            break
-          case 'CSFZJC':
-            system_list[i].icon = '#n20-icon-a-bianzu70'
-            break
-          case 'CSWY':
-            system_list[i].icon = '#n20-icon-a-bianzu69'
-            break
-          case 'JTZL':
-            system_list[i].icon = '#n20-icon-a-bianzu3'
-            break
-          case 'JRWG':
-            system_list[i].icon = '#n20-icon-a-bianzu1'
-            break
-          case 'JTSKYWGK':
-            system_list[i].icon = '#n20-icon-a-bianzu701'
-            break
-          case 'JTSKSJFX':
-            system_list[i].icon = '#n20-icon-a-bianzu2'
-            break
-        }
-        system_list[i].menuTree = []
-        for (let j = 0; j < menuTree.length; j++) {
-          if (system_list[i].NO === menuTree[j].systemNo && menuTree[j].isBackmenu === '1') {
-            system_list[i].menuTree.push(menuTree[j])
-          }
-        }
+    async handleChangeSystem() {
+      let menuTree = JSON.parse(sessionStorage.getItem('allMenuTree'))
+      if (!menuTree) {
+        this.getTreeList().finally(async () => {
+          let tree = JSON.parse(sessionStorage.getItem('allMenuTree'))
+          this.setMenuData(tree)
+        })
+      } else {
+        this.setMenuData(menuTree)
       }
-
-      this.headerSystem = system_list
-      console.log(this.headerSystem)
-    },
-    clickMenu(row) {
-      this.$router.push(row.route)
     },
+    setMenuData(menuTree) {
+      let system_list = JSON.parse(localStorage.getItem('SYSTEM_LIST'))
+      this.headerSystem = system_list.map((system) => {
+        const icon =
+          {
+            CSZHYW: '#n20-icon-zhcsyw',
+            CSYWGL: '#n20-icon-bianzu',
+            CSFZJC: '#n20-icon-a-bianzu70',
+            CSWY: '#n20-icon-a-bianzu69',
+            JTZL: '#n20-icon-a-bianzu3',
+            JRWG: '#n20-icon-a-bianzu1',
+            JTSKYWGK: '#n20-icon-a-bianzu701',
+            JTSKSJFX: '#n20-icon-a-bianzu2'
+          }[system.NO] || ''
 
-    /**
-     * 获取系统列表
-     */
-    getSystemList() {
-      this.systemList = JSON.parse(localStorage.getItem('SYSTEM_LIST'))
+        system.icon = icon
+        system.menuTree = menuTree
+          ?.filter((menu) => menu.systemNo === system.NO && menu.isBackmenu === '0')
+          .map((menu) => ({
+            ...menu,
+            icon:
+              {
+                CSZHYW: '#n20-icon-zhcsyw',
+                CSYWGL: '#n20-icon-bianzu',
+                CSFZJC: '#n20-icon-a-bianzu70',
+                CSWY: '#n20-icon-a-bianzu69',
+                JTZL: '#n20-icon-a-bianzu3',
+                JRWG: '#n20-icon-a-bianzu1',
+                JTSKYWGK: '#n20-icon-a-bianzu701',
+                JTSKSJFX: '#n20-icon-a-bianzu2'
+              }[menu.NO] || ''
+          }))
+        return system
+      })
+      this.showDrawerBox = !this.showDrawerBox
+      this.$emit('clickSystem', this.headerSystem, this.showDrawerBox)
     },
-    async getTreeList(item = {}, resType = 1) {
-      const systemNo = item?.NO
-      let { data } = await axios.get(
-        `/bems/1.0/menuTree/tree?t=${Date.now()}`,
-        {
-          resType,
-          systemNo
-        },
-        { loading: false }
-      )
+
+    async getTreeList(item = {}) {
+      let { data } = await axios.get(`/bems/1.0/menuTree/tree?t=${Date.now()}`, item, { loading: false })
       let layoutMenus = siteTree2menus(data || [])
-      sessionStorage.setItem('menuTree', JSON.stringify(layoutMenus))
+      sessionStorage.setItem('allMenuTree', JSON.stringify(layoutMenus))
     },
 
     handleUser() {
@@ -603,6 +575,12 @@ export default {
         case 'toBack':
           this.toBack()
           break
+        case 'dowApp':
+          this.dowApp()
+          break
+        case 'openHelp':
+          this.openHelp()
+          break
         default:
           this.$emit('custom-event', { type: c })
           break

package/src/components/Layout/HeaderWrap/menuDrawer.vue

@@ -1,13 +1,6 @@
 <template>
-  <el-drawer
-    :visible.sync="drawer"
-    custom-class="header-menu-drawer"
-    :with-header="false"
-    :appendToBody="true"
-    direction="ttb"
-    size="45%"
-  >
-    <div class="pointer flex-box flex-wrap">
+  <div class="pointer menu">
+    <div class="flex-box flex-wrap menu_drawer_box">
       <div v-for="(item, i) in menus" :key="i" class="menu-system-item">
         <div class="flex-box flex-v" @click="clickSystem(item)">
           <svg
@@ -16,62 +9,78 @@
           >
             <use :xlink:href="item.icon"></use>
           </svg>
-          <span class="m-l-s">{{ item.NAME }}</span>
+          <span class="m-l-s menu-system-item_title">{{ item.NAME }}</span>
         </div>
         <div v-if="item.menuTree.length" class="flex-box flex-wrap menu-system-child">
-          <div v-for="(row, i) in item.menuTree" :key="i" class="menu-first-item" @click="clickMenu(row)">
-            {{ row.title }}
+          <div
+            v-for="(row, i) in item.menuTree"
+            :key="i"
+            class="menu-first-item"
+            @click="clickMenu(row, item.menuTree)"
+          >
+            <span class="menu-first-item_title">{{ row.title }}</span>
           </div>
         </div>
       </div>
     </div>
-  </el-drawer>
+  </div>
 </template>
 
 <script>
+import axios from '../../../utils/axios.js'
+import { siteTree2menus } from '../../LoginTemporary/utils'
 export default {
   name: 'MenuDrawer',
   props: {
     menus: {
       type: Array,
       default: () => []
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    callback: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  computed: {
-    drawer: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
     }
   },
   methods: {
+    async getTreeList(item) {
+      let { data } = await axios.get(
+        `/bems/1.0/menuTree/tree?t=${Date.now()}`,
+        {
+          resType: 1,
+          systemNo: item.NO
+        },
+        { loading: false }
+      )
+      let layoutMenus = siteTree2menus(data || [])
+      sessionStorage.setItem('menuTree', JSON.stringify(layoutMenus))
+    },
     async clickSystem(item) {
-      // localStorage.setItem('pageInType', 'toFront')
+      await this.getTreeList(item)
       window.localStorage.setItem('pageInSystemNo', item.NO)
       // 切换系统的时候清除缓存的页签
       window.sessionStorage.removeItem('tab-list')
       let { base = '/' } = this.$router.options
       if (!/\/$/.test(base)) base += '/'
-
       window.location.href = window.location.origin + base + 'dashboard/workplace'
     },
-    clickMenu(row) {
-      if (row?.children?.length) {
-        this.$router.push(row.children[0].route)
+    async clickMenu(row, MenuTre) {
+      let pageInSystemNo = window.localStorage.getItem('pageInSystemNo')
+      window.localStorage.setItem('pageInType', 'toFront')
+      if (pageInSystemNo === row.systemNo) {
+        if (row?.children?.length) {
+          this.$router.push(row.children[0].route)
+        } else {
+          this.$router.push(row.route)
+        }
       } else {
-        this.$router.push(row.route)
+        window.localStorage.setItem('pageInSystemNo', row.systemNo)
+        window.sessionStorage.setItem('menuTree', JSON.stringify(MenuTre))
+        // 切换系统的时候清除缓存的页签
+        window.sessionStorage.removeItem('tab-list')
+        if (row?.children?.length) {
+          window.location.href =
+            window.location.origin + row.children[0].route + `?token=${window.sessionStorage.getItem('token')}`
+        } else {
+          window.location.href = window.location.origin + row.route + `?token=${window.sessionStorage.getItem('token')}`
+        }
       }
+      this.$emit('update:visible', false)
     }
   }
 }

package/src/components/Layout/indexN.vue

@@ -7,11 +7,13 @@
       :operation-status="operationStatus"
       :before-logout="beforeLogout"
       :after-logout="afterLogout"
+      @clickSystem="clickSystem"
       @custom-event="(par) => $emit('custom-event', par)"
     >
       <slot slot="header-ectad" name="header-ectad"></slot>
       <slot slot="header-dropdown" name="header-dropdown"></slot>
     </headerWrap>
+    <menuDrawer :class="showDrawerBox ? 'show_drawer' : ''" :menus="systemMenu"></menuDrawer>
     <asideNav :menus="menusC" :active-nav="activeNavC" :collapse.sync="collapse" @menu-click="menuClick" />
     <tabsNav
       class="tabs-nav-wrap"
@@ -43,13 +45,15 @@ import { setRela } from '../../utils/relaNo'
 import asideNav from './AsideNav/index.vue'
 import headerWrap from './HeaderWrap/indexN.vue'
 import tabsNav from './TabsNav/index.vue'
+import menuDrawer from './HeaderWrap/menuDrawer.vue'
 
 export default {
   name: 'Layout',
   components: {
     asideNav,
     headerWrap,
-    tabsNav
+    tabsNav,
+    menuDrawer
   },
   filters: {
     keyF({ path, query = {} }) {
@@ -109,7 +113,8 @@ export default {
       clientM,
       clientHeight: document.documentElement.offsetHeight - headerH - tabsH - 1 * clientM,
       collapse: window.localStorage.getItem('aside-nav-collapse') === 'true',
-
+      showDrawerBox: false,
+      systemMenu: [],
       menusC: [],
       menuList: [],
       tabList: [],
@@ -190,6 +195,10 @@ export default {
         refreshTab && this.tabRefresh(refreshTab)
       }
     },
+    clickSystem(menu, drawerVisible) {
+      this.showDrawerBox = drawerVisible
+      this.systemMenu = menu
+    },
     getCollapse() {
       this.collapse = window.localStorage.getItem('aside-nav-collapse') === 'true'
     },

package/src/components/LoginTemporary/indexN.vue

@@ -378,6 +378,8 @@ export default {
         form.systemNo = this.sltSys.NO
       } else if (this.systemList.length === 1) {
         form.systemNo = this.systemList[0].NO
+      } else {
+        form.systemNo = localStorage.getItem('pageInSystemNo')
       }
 
       return form