@lambo-design/pro-layout 1.0.0-beta.10 → 1.0.0-beta.100

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.100",
   "description": "",
   "main": "index.js",
-  "scripts": {
-    
-  },
+  "scripts": {},
   "author": "lambo",
   "license": "ISC",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/core": "workspace:*",
-    "@lambo-design/shared": "workspace:*"
+    "@lambo-design/core": "workspace:^",
+    "@lambo-design/shared": "workspace:^"
   }
 }

package/src/components/pro-layout-header.vue

@@ -4,10 +4,10 @@
       <LamboProTrigger></LamboProTrigger>
     </div>
     <div class="logo-box">
-      <LamboProLogo></LamboProLogo>
+      <LamboProLogo @clickLogo="handleClick"></LamboProLogo>
     </div>
     <div class="nav-box">
-      <LamboProNav></LamboProNav>
+      <LamboProNav :accept-app-id="acceptAppId"></LamboProNav>
     </div>
     <div class="tools-box">
       <LamboProTools></LamboProTools>
@@ -22,11 +22,22 @@ import LamboProNav from './pro-layout-nav'
 import LamboProTools from './pro-layout-tools'
 export default {
   name: "pro-layout-header",
+  props:{
+    acceptAppId: {
+      type: String,
+      default:''
+    }
+  },
   components: {
     LamboProTrigger,
     LamboProLogo,
     LamboProNav,
     LamboProTools
+  },
+  methods:{
+    handleClick(){
+      this.$emit('clickLogo')
+    }
   }
 }
 </script>
@@ -38,7 +49,6 @@ export default {
   .trigger-box{
     float: left;
     height: inherit;
-    border: 1px solid #000000;
   }
   .logo-box{
     float: left;

package/src/components/pro-layout-logo.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="pro-layout-logo-wrapper">
-    <div class="logo"></div>
+    <div class="logo" :style="logoStyle"
+         @click="handleClick"
+    ></div>
     <div class="divider"></div>
     <div class="system-name">{{systemName}}</div>
   </div>
@@ -10,22 +12,44 @@
 import Bus from '@lambo-design/shared/utils/bus'
 export default {
   name: "pro-layout-logo",
+  props:{
+    routeName:String,
+    default:''
+  },
   data(){
     return {
-      systemName: '后台管理系统'
+      systemInfo: {},
+      systemName: '后台管理系统',
+      isHovered: false,
+    }
+  },
+  computed:{
+    logoStyle(){
+      if (this.systemInfo && this.systemInfo.systemLogo) {
+        return 'background: url("' + this.systemInfo.systemLogo + '") no-repeat;background-size: 100%;'
+      }
+      return '';
     }
   },
   methods: {
+    handleClick(){
+      this.$emit('clickLogo')
+    },
     initListener(){
-      Bus.$on('system-name-change',(data)=>{
-        this.systemNameChange(data)
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
       });
     },
     destroyListener(){
-      Bus.$off('system-name-change')
+      Bus.$off('system-info')
     },
-    systemNameChange(data){
-      this.systemName = data;
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+        if (data.systemName) {
+          this.systemName = data.systemName;
+        }
+      }
     }
   },
   created(){
@@ -40,15 +64,14 @@ export default {
 <style scoped lang="less">
 .pro-layout-logo-wrapper{
   overflow: hidden;
-  border-bottom: 1px solid #000000;
   .logo{
+    cursor:pointer;
     width: 150px;
     height: 55px;
-    background: url("../styles/images/logo.png") no-repeat;
+    background: url("../styles/images/inspur.png") no-repeat;
     background-size: 100%;
     float: left;
-    margin-top: 8px;
-    border-bottom: 1px solid #000000;
+    margin-top: 20px;
   }
   .divider{
     height: 33px;
@@ -64,4 +87,4 @@ export default {
     margin-right: 15px;
   }
 }
-</style>
+</style>

package/src/components/pro-layout-nav.vue

@@ -24,6 +24,12 @@ import config from "@lambo-design/shared/config/config";
 
 export default {
   name: "pro-layout-logo",
+  props:{
+    acceptAppId: {
+      type: String,
+      default: ''
+    }
+  },
   data(){
     return {
       navList : [],
@@ -65,6 +71,11 @@ export default {
       }
       if (this.topMenList.length > 0){
         let appId = this.topMenList[0].appId;
+        for (let i = 0; i < this.topMenList.length; i++) {
+          if (this.topMenList[i].selected == true){
+            appId = this.topMenList[i].appId;
+          }
+        }
         if (this.activeName) {
           appId = this.activeName;
         }
@@ -91,6 +102,10 @@ export default {
       this.$nextTick(()=>{
         this.$refs.topNav.updateActiveName();
       })
+    },
+    acceptAppId(val) {
+      console.log('监听成功')
+      this.selectApp(val)
     }
   },
   created(){

package/src/components/pro-layout-other-menu.vue

@@ -0,0 +1,137 @@
+<template>
+  <div :class="classes">
+    <div class="other-menu-item" @click="onChange('history')">
+      <Tooltip :disabled="!collapsed" content="历史" placement="right" transfer>
+        <div>
+          <Icon class="other-menu-icon" type="md-time"/>
+          <span class="other-menu-title"> 历史</span>
+        </div>
+      </Tooltip>
+    </div>
+    <div class="other-menu-item" @click="onChange('collect')">
+      <Tooltip :disabled="!collapsed" content="收藏" placement="right" transfer>
+        <div>
+          <Icon class="other-menu-icon" type="md-star-outline"/>
+          <span class="other-menu-title"> 收藏</span>
+        </div>
+
+      </Tooltip>
+    </div>
+    <Drawer v-model="drawer.model"
+            :class-name="drawerClasses"
+            :closable="false"
+            :mask-style="{backgroundColor: 'unset'}"
+            :scrollable="true"
+            :title="drawer.title"
+            placement="left"
+    >
+      <div v-if="drawer.type=='history'" class="other-menu-history">
+        <div v-for="item in list" class="other-menu-history-item">
+          <div class="content" @click="handleClick(item)">
+            <common-icon :type="item.icon"></common-icon>
+            <span> {{ item.label }}</span>
+          </div>
+          <div class="delete">
+            <common-icon type="ios-close" @click.native="handleHistoryDelete(item)"></common-icon>
+          </div>
+        </div>
+      </div>
+      <div v-if="drawer.type=='collect'" class="other-menu-collect">
+        <div v-for="item in list" class="other-menu-collect-item" @click="handleClick(item)">
+          <div class="content">
+            <Tooltip :content="item.label" :delay="1000">
+              <common-icon :size="40" :type="item.icon"></common-icon>
+            </Tooltip>
+          </div>
+          <div class="delete">
+            <common-icon type="ios-close" @click.native.stop="handleCollectDelete(item)"></common-icon>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import ajax from '@lambo-design/shared/utils/ajax';
+import config from "@lambo-design/shared/config/config";
+
+export default {
+  name: "other-menu",
+  components: {},
+  props: {
+    collapsed: {
+      type: Boolean
+    },
+  },
+  data() {
+    return {
+      drawer: {
+        model: false,
+        url: '',
+        title: '',
+        type: '',
+      },
+      list: []
+    }
+  },
+  computed: {
+    classes() {
+      let classes = ["other-menu"]
+      return this.collapsed ? ["other-menu-collapsed", ...classes] : [...classes]
+    },
+    drawerClasses() {
+      return this.collapsed ? "other-menu-drawer-wrap-collapsed" : "other-menu-drawer-wrap"
+    }
+  },
+  methods: {
+    onChange(value) {
+      if (value == 'history') {
+        this.drawer.title = '历史菜单'
+        this.drawer.url = '/manage/upmsMenuHistory/list'
+
+      } else {
+        this.drawer.title = '收藏菜单'
+        this.drawer.url = '/manage/upmsMenuCollect/list'
+      }
+      this.getList()
+      this.drawer.type = value
+      this.drawer.model = !this.drawer.model
+    },
+    getList() {
+      this.list = []
+      ajax.get(config.upmsServerContext + this.drawer.url).then(resp => {
+        if (resp.data.code == 1) {
+          this.list = resp.data.data
+          if (this.drawer.type == 'collect') {
+            this.$store.commit('setCollectMenuList', this.list)
+          }
+        }
+      })
+    },
+    handleClick(item) {
+      this.$emit('on-select', item.name)
+      this.drawer.model = false
+    },
+    handleHistoryDelete(item) {
+      ajax.get(config.upmsServerContext + "/manage/upmsMenuHistory/delete/" + item.historyId).then(resp => {
+        if (resp.data.code == 1) {
+          this.getList()
+        }
+      })
+    },
+    handleCollectDelete(item) {
+      ajax.get(config.upmsServerContext + "/manage/upmsMenuCollect/delete/" + item.collectId).then(resp => {
+        if (resp.data.code == 1) {
+          this.getList()
+        }
+      })
+    }
+  }
+}
+</script>
+
+
+<style lang="less">
+@import '../styles/other-menu.less';
+</style>

package/src/components/pro-layout-sider.vue

@@ -55,7 +55,7 @@ import ProLayoutSiderMenuItem from './pro-layout-sider-menu-item'
 import ProLayoutSiderCollapsedMenu from './pro-layout-sider-collapsed-menu'
 import {
   filterMenuName,
-  filterMenuUri,
+  filterMenuUri, routeEqual,
   tagExists
 } from "@lambo-design/shared/utils/platform";
 
@@ -153,7 +153,6 @@ export default {
         }
         Bus.$emit('tag-list', tagList, menu.name)
       }
-      //Bus.$emit('menu-click', name)
     },
     triggerChange(data){
       this.collapsed = data;
@@ -163,7 +162,20 @@ export default {
       this.value = name;
     },
     menuClick(current) {
-      this.activeName = current;
+      let item = this.originMenuList.filter(menu => menu.name === current);
+      if (item && item.length > 0){
+        let type = item[0].type;
+        if (type == 2) {
+          this.activeName = current;
+        } else {
+          let pItem = this.originMenuList.filter(menu => menu.permissionId === item[0].pid);
+          if (pItem && pItem.length > 0){
+            this.activeName = pItem[0].name;
+          }
+        }
+      } else {
+        this.activeName = current;
+      }
     },
     getOpenedNamesByActiveName(){
       let res = filterMenuName(this.menuList,this.activeName);

package/src/components/pro-layout-tabs.vue

@@ -44,6 +44,7 @@
 <script>
 import {
   getPreviousTagIndex,
+  getDelTagIndex,
   setTagNavListInLocalstorage,
   showTitle
 } from '@lambo-design/shared/utils/platform'
@@ -56,6 +57,8 @@ export default {
   name: 'pro-layout-tabs',
   data() {
     return {
+      systemInfo: {},
+      tabNum : 8,
       appId: '',
       appInfo: {},
       navList: [],
@@ -76,6 +79,9 @@ export default {
   },
   methods: {
     initListener(){
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
+      });
       Bus.$on('nav-list',(data)=>{
         this.initNav(data)
       });
@@ -90,11 +96,20 @@ export default {
       })
     },
     destroyListener(){
+      Bus.$off('system-info')
       Bus.$off('nav-list')
       Bus.$off('menu-list')
       Bus.$off('tag-list')
       Bus.$off('change-app')
     },
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+        if (data.tabNum) {
+          this.tabNum = data.tabNum;
+        }
+      }
+    },
     initNav(data){
       if (data.toString() === this.navList.toString()) {
         return;
@@ -105,7 +120,11 @@ export default {
       this.originMenuList = deepCopy(data);
     },
     initTags(data,current){
-      setTagNavListInLocalstorage(data);
+      if (data.length > this.tabNum) {
+        let index = getDelTagIndex(data,current);
+        data.splice(index,1);
+      }
+      setTagNavListInLocalstorage(data, config.routerBase + '-tagNavList');
       this.tagList = data;
       if (current !== this.value) {
         this.value = current;
@@ -186,7 +205,7 @@ export default {
     },
     handleClick(item) {
       this.value = item.name
-      Bus.$emit('menu-click', item.name)
+      Bus.$emit('menu-click', item.name , item)
       if (item.meta && item.meta.appId
           && item.meta.appId != this.appId
           && item.meta.appId != config.homeRouter.meta.appId) {
@@ -238,7 +257,7 @@ export default {
       this.visible = true
       const offsetLeft = this.$el.getBoundingClientRect().left
       this.contextMenuLeft = e.clientX - offsetLeft + 10
-      this.contextMenuTop = e.clientY - 114
+      this.contextMenuTop = e.clientY - 54
     },
     closeMenu() {
       this.visible = false
@@ -368,6 +387,7 @@ export default {
       margin: 0;
       padding: 5px 15px;
       cursor: pointer;
+      line-height: 18px;
 
       &:hover {
         background: #eee;

package/src/components/pro-layout-tools-user.vue

@@ -4,7 +4,7 @@
       <span>欢迎，{{ userInfo.userName }}</span>
       <Icon type="ios-arrow-down" />
       <DropdownMenu v-if="userInfo.dropList.length > 0" slot="list">
-        <DropdownItem v-for="item in userInfo.dropList" :name="item.name">&nbsp;{{item.value}}</DropdownItem>
+        <DropdownItem v-for="item in userInfo.dropList" :name="item.name" :key="item.name">&nbsp;{{item.value}}</DropdownItem>
       </DropdownMenu>
     </Dropdown>
   </div>

package/src/components/pro-layout-trigger.vue

@@ -26,7 +26,7 @@ export default {
 .trans{
   transition: transform .2s ease;
 }
-@size: 40px;
+@size: 64px;
 .sider-trigger-a{
   float: left;
   padding: 6px;

package/src/index.vue

@@ -1,14 +1,14 @@
 <template>
-  <i-layout class="pro-layout">
+  <i-layout class="pro-layout" :class="layoutClass">
     <i-header class="pro-layout-header">
-      <LamboProLayoutHeader></LamboProLayoutHeader>
+      <LamboProLayoutHeader :accept-app-id="acceptAppId" @clickLogo="handleClick"></LamboProLayoutHeader>
     </i-header>
     <i-layout>
       <i-sider
           class="pro-layout-sider"
           hide-trigger
           collapsible
-          :width="256"
+          :width="220"
           :collapsed-width="64"
           v-model="collapsed">
         <LamboProLayoutSider ref="sider"></LamboProLayoutSider>
@@ -35,14 +35,25 @@ import LamboProLayoutTabs from './components/pro-layout-tabs'
 import Bus from '@lambo-design/shared/utils/bus'
 import config from "@lambo-design/shared/config/config";
 import {
-  getTagNavListFromLocalstorage, tagExists,
+  getTagNavListFromLocalstorage, routeEqual, tagExists,
 } from "@lambo-design/shared/utils/platform";
 import {deepCopy} from "@lambo-design/shared/utils/assist";
 export default {
   props:{
+    acceptAppId: {
+      type: String,
+      default:''
+    },
     systemInfo: {
       type: Object,
-      default: () => {}
+      default: () => {
+        return {
+          systemName: '后台管理系统',
+          systemLogo: '',
+          layoutSize: '',
+          tabNum: 8,
+        }
+      }
     },
     userInfo: {
       type: Object,
@@ -86,6 +97,17 @@ export default {
         menuList,
         homeRouter
       }
+    },
+    layoutClass(){
+      if (this.systemInfo && this.systemInfo.layoutSize) {
+        let layoutSize = this.systemInfo.layoutSize;
+        if (layoutSize == 'default') {
+          return '';
+        } else {
+          return 'small';
+        }
+      }
+      return '';
     }
   },
   watch: {
@@ -98,6 +120,9 @@ export default {
     }
   },
   methods: {
+    handleClick(){
+      this.$emit('clickLogo')
+    },
     initListener(){
       Bus.$on('trigger-change',(data)=>{
         this.triggerChange(data)
@@ -108,8 +133,8 @@ export default {
       Bus.$on('user-action', (name)=> {
         this.userAction(name)
       })
-      Bus.$on('menu-click',(name)=>{
-        this.menuClick(name)
+      Bus.$on('menu-click',(name, item)=>{
+        this.menuClick(name, item)
       })
       Bus.$on('tag-list',(data,current)=>{
         this.changeTabs(data,current)
@@ -123,15 +148,13 @@ export default {
       Bus.$off('tag-list')
     },
     initEmit(){
-      if (this.systemInfo && this.systemInfo.systemName) {
-        Bus.$emit('system-name-change',this.systemInfo.systemName)
-      }
+      Bus.$emit('system-info',this.systemInfo)
       Bus.$emit('user-info',this.userInfo)
       Bus.$emit('nav-list',this.navList)
       Bus.$emit('menu-list',this.menuList)
     },
     initTags(){
-      let tagList = getTagNavListFromLocalstorage();
+      let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
       if (tagList.length == 0) {
         tagList.push(this.homeRouter);
       }
@@ -147,7 +170,7 @@ export default {
     },
     changeApp(appId,appInfo) {
       if (!appInfo) {
-        appInfo = this.navList.filter(item => item.appId == appId)[0];
+          appInfo = this.navList.filter(item => item.appId == appId)[0];
       }
       this.appId = appId;
       this.$emit('change-app',{appId,appInfo})
@@ -155,10 +178,15 @@ export default {
     userAction(name){
       this.$emit('user-action',name)
     },
-    menuClick(name){
-      let res = this.menuList.filter(item => item.name == name);
+    menuClick(name, item){
+      if (!item) {
+        let res = this.menuList.filter(item => item.name == name);
+        if (res && res.length > 0) {
+          item = res[0];
+        }
+      }
       sessionStorage.setItem('activeName',name);
-      this.$emit('menu-click', name, res[0])
+      this.$emit('menu-click', name, item)
     },
     changeTabs(data,current){
       this.$emit('change-tabs',data,current)
@@ -176,9 +204,17 @@ export default {
       } else {
         name = menu.name;
         menuItem = deepCopy(menu);
-        let tagList = getTagNavListFromLocalstorage();
+        let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
         if (!tagExists(tagList,name)) {
           tagList.push(menuItem);
+        } else {
+          let tag = tagList.filter(item => item.name == name)[0];
+          if (!routeEqual(tag,menuItem)) {
+            let res = tagList.filter(item => item.name !== name);
+            tag = Object.assign(tag, menu);
+            res.push(tag);
+            tagList = deepCopy(res);
+          }
         }
         Bus.$emit('tag-list', tagList, name)
       }
@@ -196,7 +232,7 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 @import "@lambo-design/core/src/styles/default";
 .pro-layout{
   color: #ffffff;
@@ -208,20 +244,61 @@ export default {
   }
   .pro-layout-sider{
     overflow: hidden;
-    /deep/.ivu-layout-sider-children{
-      height: ~"calc(100vh - 65px)";
+    .ivu-layout-sider-children{
+      height: calc(100vh - 65px);
       overflow-y: scroll;
       margin-right: -18px;
     }
   }
   .pro-layout-content{
     .pro-layout-content-layout{
-      height: ~"calc(100vh - 65px)";
+      height: ~"calc(100vh - 53px)";
       .pro-layout-page{
         overflow: hidden;
         color: var(--text-color,@_text-color);
       }
     }
   }
+  &.small {
+    .ivu-layout-header{
+      height: 50px;
+      line-height: 50px;
+      .pro-layout-header-wrapper{
+        height: 50px;
+        .trigger-box{
+          .sider-trigger-a{
+            margin-top: 5px;
+            width: 64px;
+            height: 50px;
+          }
+        }
+        .logo-box{
+          .pro-layout-logo-wrapper{
+            .logo{
+              height: 45px;
+              margin-top: 14px;
+            }
+            .divider{
+              height: 26px;
+              margin: 12px;
+            }
+          }
+        }
+        .nav-box{
+          .pro-layout-nav-wrapper{
+            .ivu-menu-horizontal{
+              height: 46px;
+              line-height: 46px;
+            }
+          }
+        }
+      }
+    }
+    .pro-layout-sider{
+      .ivu-layout-sider-children{
+        height: calc(100vh - 50px);
+      }
+    }
+  }
 }
-</style>
+</style>

package/src/styles/other-menu.less

@@ -0,0 +1,159 @@
+.other-menu {
+  width: 100%;
+  border-top: 3px solid #000000;
+  position: absolute;
+  bottom: 0;
+  z-index: 1000;
+  background: #061629;
+
+  &.other-menu-collapsed {
+    .other-menu-item {
+      border-top: 2px solid #000000;
+      width: 100%;
+
+      &:hover {
+        color: #ffffff;
+        background: #061629;
+      }
+
+      .ivu-tooltip {
+        width: 100%;
+
+        .ivu-tooltip-rel {
+          width: 100%;
+        }
+
+        .ivu-tooltip-popper .ivu-tooltip-content {
+          .ivu-tooltip-arrow {
+            border-right-color: #fff;
+          }
+
+          .ivu-tooltip-inner {
+            background: #fff;
+            color: #495060;
+          }
+        }
+      }
+
+      .other-menu-icon {
+        font-size: 20px;
+      }
+
+      .other-menu-title {
+        display: none;
+      }
+    }
+
+  }
+
+
+  .other-menu-item {
+    color: #F0F0F0;
+    text-align: center;
+    line-height: 50px;
+    height: 50px;
+    width: 100px;
+    display: inline-block;
+    border-right: 2px solid #000000;
+    cursor: pointer;
+    border-radius: 3px;
+
+    &:hover {
+      color: #ffffff;
+      background: var(--primary-color,@_primary-color);
+    }
+
+  }
+}
+
+
+.other-menu-drawer-wrap {
+
+
+  .ivu-drawer {
+    left: 256px;
+    height: calc(100% - 110px);
+    bottom: 0;
+    top: auto;
+
+    .other-menu-history {
+
+      .other-menu-history-item {
+        width: 100%;
+        height: 35px;
+        line-height: 35px;
+        position: relative;
+
+        .delete {
+          display: none;
+          position: absolute;
+          right: 15px;
+          top: 0px;
+          cursor: pointer;
+        }
+
+        &:hover {
+          .content {
+            cursor: pointer;
+            height: 38px;
+            font-weight: bold;
+            color: var(--primary-color,@_primary-color);
+          }
+
+          .delete {
+            display: inline;
+          }
+        }
+      }
+    }
+
+    .other-menu-collect {
+      .other-menu-collect-item {
+        display: inline-block;
+        margin: 8px;
+        position: relative;
+
+        .delete {
+          display: none;
+          position: absolute;
+          right: -5px;
+          top: -5px;
+          z-index: 100;
+          cursor: pointer;
+        }
+
+        &:hover {
+          .content {
+            cursor: pointer;
+            color: var(--primary-color,@_primary-color);
+
+            .ivu-tooltip {
+              .ivu-tooltip-rel {
+                .ivu-icon {
+                  font-size: 43px;
+                }
+              }
+            }
+          }
+
+          .delete {
+            display: inline;
+          }
+        }
+
+      }
+
+    }
+  }
+
+
+}
+
+.other-menu-drawer-wrap-collapsed {
+  .ivu-drawer {
+    left: 65px;
+    height: calc(100% - 110px);
+    bottom: 0;
+    top: auto;
+  }
+}