@lambo-design/pro-layout 1.0.0-beta.45 → 1.0.0-beta.451

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

@@ -1,150 +0,0 @@
-<template>
-  <div class="pro-layout-nav-wrapper">
-    <Menu ref="topNav" mode="horizontal" theme="dark" :active-name="activeName" @on-select="selectApp">
-      <MenuItem :name="item.appId" v-for="item in topMenList" :key="item.appId">
-        {{item.name}}
-        <div class="line"></div>
-      </MenuItem>
-      <Submenu name="other" v-if="otherList.length > 0">
-        <template slot="title">
-          ...
-        </template>
-        <MenuItem :name="item.appId" v-for="item in otherList" :key="item.appId">
-        {{item.name}}
-        </MenuItem>
-      </Submenu>
-    </Menu>
-  </div>
-</template>
-
-<script>
-import Bus from "@lambo-design/shared/utils/bus";
-import {deepCopy} from "@lambo-design/shared/utils/assist";
-import config from "@lambo-design/shared/config/config";
-
-export default {
-  name: "pro-layout-logo",
-  data(){
-    return {
-      navList : [],
-      topMenList : [],
-      otherList : [],
-      activeName : '',
-      topMenuNum : 4,
-      originMenuList: []
-    }
-  },
-  methods: {
-    initListener(){
-      Bus.$on('nav-list',(data)=>{
-        this.initNav(data)
-      });
-      Bus.$on('change-app', ({appId,appInfo})=> {
-        this.changeApp(appId,appInfo)
-      });
-      Bus.$on('menu-list',(data)=>{
-        this.initMenu(data)
-      });
-    },
-    destroyListener(){
-      Bus.$off('nav-list')
-      Bus.$off('menu-list')
-      Bus.$off('change-app')
-    },
-    initNav(data){
-      if (data.toString() === this.navList.toString()) {
-        return;
-      }
-      this.navList = data;
-      if (data.length > this.topMenuNum) {
-        let navList = deepCopy(data);
-        this.topMenList = navList.splice(0,this.topMenuNum);
-        this.otherList = navList;
-      } else {
-        this.topMenList = this.navList
-      }
-      if (this.topMenList.length > 0){
-        let appId = this.topMenList[0].appId;
-        if (this.activeName) {
-          appId = this.activeName;
-        }
-        this.selectApp(appId);
-      }
-    },
-    initMenu(data){
-      this.originMenuList = deepCopy(data);
-    },
-    selectApp(appId){
-      this.activeName = appId;
-      let res = this.navList.filter(app => app.appId == appId);
-      Bus.$emit('change-app', {appId,appInfo:res[0]})
-    },
-    changeApp(appId,appInfo) {
-      this.activeName = appId;
-      this.$nextTick(() => {
-        this.$refs.topNav.updateActiveName()
-      })
-    }
-  },
-  watch: {
-    activeName(){
-      this.$nextTick(()=>{
-        this.$refs.topNav.updateActiveName();
-      })
-    }
-  },
-  created(){
-    this.initListener();
-  },
-  beforeDestroy(){
-    this.destroyListener();
-  }
-}
-</script>
-
-<style scoped lang="less">
-@import '@lambo-design/core/src/styles/default.less';
-.pro-layout-nav-wrapper{
-  .ivu-menu{
-    .ivu-menu-item{
-      &:hover{
-        background: rgba(255,255,255,0.2);
-        .line{
-          border-bottom: 2px solid var(--primary-color,@_primary-color);
-        }
-      }
-      &.ivu-menu-item-active,&.ivu-menu-item-selected{
-        background: rgba(255,255,255,0.2);
-        .line{
-          border-bottom: 2px solid var(--primary-color,@_primary-color);
-        }
-      }
-    }
-    /deep/.ivu-menu-submenu{
-      .ivu-menu-submenu-title > i{
-        &.ivu-menu-submenu-title-icon{
-
-        }
-      }
-      .ivu-select-dropdown{
-        background: var(--menu-dark-title,@_menu-dark-title);
-        color: var(--heading-color-dark,@_heading-color-dark);
-        .ivu-menu-drop-list{
-          .ivu-menu-item{
-            color: var(--menu-dark-subsidiary-color,@_menu-dark-subsidiary-color);
-            &:hover{
-              background: rgba(255,255,255,0.2);
-              color: var(--heading-color-dark,@_heading-color-dark);
-            }
-            &.ivu-menu-item-active,&.ivu-menu-item-selected{
-              background: rgba(255,255,255,0.2);
-              color: var(--heading-color-dark,@_heading-color-dark);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-</style>

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

@@ -1,138 +0,0 @@
-<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/packages/utils/ajax'
-import config from "@/config/config";
-import CommonIcon from "_c/common-icon";
-
-export default {
-  name: "other-menu",
-  components: {CommonIcon},
-  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-menu-item.vue

@@ -1,37 +0,0 @@
-<template>
-  <Submenu v-show="isShow" :name="`${parentName}`">
-    <template slot="title">
-      <ProLayoutSiderIcon :icon-type="parentItem.meta.icon"></ProLayoutSiderIcon>
-      <span>{{ showTitle(parentItem) }}</span>
-    </template>
-    <template v-for="item in children">
-      <template v-if="item.children && item.children.length === 1">
-        <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
-                        :parent-item="item">
-        </ProLayoutSiderMenuItem>
-        <menu-item v-else :key="`menu-${item.children[0].name}`" :name="getNameOrHref(item, true)">
-          <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
-          <span>{{ showTitle(item.children[0]) }}</span>
-        </menu-item>
-      </template>
-      <template v-else>
-        <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
-                        :parent-item="item">
-        </ProLayoutSiderMenuItem>
-        <menu-item v-else :key="`menu-${item.name}`" :name="getNameOrHref(item)">
-          <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
-          <span>{{ showTitle(item) }}</span>
-        </menu-item>
-      </template>
-    </template>
-  </Submenu>
-</template>
-<script>
-import sider from '../utils/sider'
-import menuItem from '../utils/menuItem'
-
-export default {
-  name: 'ProLayoutSiderMenuItem',
-  mixins: [sider, menuItem],
-}
-</script>

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

@@ -1,240 +0,0 @@
-<template>
-  <div class="pro-layout-sider-wrapper">
-    <Menu v-show="!collapsed" ref="menu"
-          :accordion="accordion" :active-name="activeName"
-          :open-names="openedNames" theme="dark"
-          width="auto" @on-select="handleSelect">
-      <template v-for="item in menuList">
-        <template v-if="item.children && item.children.length === 1">
-          <ProLayoutSiderMenuItem v-if="showChildren(item)"
-                          :key="`menu-${item.name}`"
-                          :parent-item="item">
-          </ProLayoutSiderMenuItem>
-          <MenuItem v-else :key="`menu-${item.children[0].name}`"
-                     :name="getNameOrHref(item, true)">
-            <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
-            <span>{{ showTitle(item.children[0]) }}</span>
-          </MenuItem>
-        </template>
-        <template v-else>
-          <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
-                          :parent-item="item">
-          </ProLayoutSiderMenuItem>
-          <MenuItem v-else :key="`menu-${item.name}`"
-                     :name="getNameOrHref(item)">
-            <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
-            <span>{{ showTitle(item) }}</span>
-          </MenuItem>
-        </template>
-      </template>
-    </Menu>
-    <div v-show="collapsed" :list="menuList" class="menu-collapsed">
-      <template v-for="item in menuList">
-        <ProLayoutSiderCollapsedMenu v-if="item.children && item.children.length > 1" :key="`drop-menu-${item.name}`"
-                        :parent-item="item" theme="dark" hide-title
-                        @on-click="handleSelect">
-        </ProLayoutSiderCollapsedMenu>
-        <Tooltip v-else :key="`drop-menu-${item.name}`" :content="showTitle(item.children && item.children[0] ? item.children[0] : item)"
-                 placement="right" transfer>
-          <a :style="{textAlign: 'center'}" class="drop-menu-a"
-             @click="handleSelect(getNameOrHref(item, true))">
-            <ProLayoutSiderIcon :icon-type="item.meta.icon" icon-size="26"></ProLayoutSiderIcon>
-          </a>
-        </Tooltip>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import Bus from "@lambo-design/shared/utils/bus";
-import {deepCopy} from "@lambo-design/shared/utils/assist";
-import generatorMenuList from "@lambo-design/shared/utils/menu/index";
-import sider from '../utils/sider'
-import ProLayoutSiderMenuItem from './pro-layout-sider-menu-item'
-import ProLayoutSiderCollapsedMenu from './pro-layout-sider-collapsed-menu'
-import {
-  filterMenuName,
-  filterMenuUri, routeEqual,
-  tagExists
-} from "@lambo-design/shared/utils/platform";
-
-export default {
-  name: "pro-layout-sider",
-  components: {
-    ProLayoutSiderMenuItem,
-    ProLayoutSiderCollapsedMenu
-  },
-  data(){
-    return {
-      navList: [],
-      originMenuList:[],
-      menuList: [],
-      appId: '',
-      collapsed: false,
-      accordion: true,
-      activeName: '',
-      openedNames: [],
-      tagValue: '',
-      tagList: []
-    }
-  },
-  mixins:[sider],
-  methods: {
-    initListener(){
-      Bus.$on('nav-list',(data)=>{
-        this.initNav(data)
-      });
-      Bus.$on('menu-list',(data)=>{
-        this.initMenu(data)
-      });
-      Bus.$on('trigger-change',(data)=>{
-        this.triggerChange(data)
-      });
-      Bus.$on('change-app', ({appId,appInfo})=> {
-        this.changeApp(appId,appInfo)
-      })
-      Bus.$on('tag-list',(data,current)=>{
-        this.initTags(data,current)
-      });
-      Bus.$on('menu-click',(current)=>{
-        this.menuClick(current)
-      });
-    },
-    destroyListener(){
-      Bus.$off('nav-list')
-      Bus.$off('menu-list')
-      Bus.$off('trigger-change')
-      Bus.$off('change-app')
-      Bus.$off('tag-list')
-      Bus.$off('menu-click')
-    },
-    initNav(data){
-      if (data.toString() === this.navList.toString()) {
-        return;
-      }
-      this.navList = data;
-    },
-    initMenu(data){
-      if (data && data.length > 0) {
-        let item = data[0];
-        if (item.appId && item.appId !== this.appId) {
-          return;
-        }
-      }
-      this.originMenuList = deepCopy(data);
-      this.changeMenu()
-    },
-    changeApp(appId,appInfo){
-      this.appId = appId;
-      this.changeMenu()
-    },
-    changeMenu(){
-      let treeMenuList = generatorMenuList(this.originMenuList,this.appId);
-      if (treeMenuList && treeMenuList.length > 0) {
-        this.menuList = treeMenuList;
-      } else {
-        this.menuList = [];
-      }
-      this.openedNames = this.getOpenedNamesByActiveName();
-    },
-    handleSelect(name){
-      let menu = null;
-      if (name.indexOf("isTurnByHref_") > -1) {
-        name = name.replace("isTurnByHref_","");
-        menu = filterMenuUri(this.menuList,name);
-      } else {
-        menu = filterMenuName(this.menuList,name);
-      }
-      let tagList = this.tagList;
-      if (menu && menu.name) {
-        if (!tagExists(tagList,menu.name)) {
-          tagList.push(menu);
-        }
-        Bus.$emit('tag-list', tagList, menu.name)
-      }
-    },
-    triggerChange(data){
-      this.collapsed = data;
-    },
-    initTags(data,name){
-      this.tagList = data;
-      this.value = name;
-    },
-    menuClick(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);
-      let openNames = []
-      if (res) {
-        const crumbs = res.meta.crumbs;
-        if (crumbs) {
-          crumbs.forEach(item => {
-            if (item.type === 1) {
-              openNames.push(item.name)
-            }
-          })
-        }
-      }
-      return openNames
-    }
-  },
-  watch:{
-    activeName(){
-      this.openedNames = this.getOpenedNamesByActiveName();
-    },
-    openedNames() {
-      this.$nextTick(() => {
-        this.$refs.menu.updateOpened()
-        this.$refs.menu.updateActiveName()
-      })
-    }
-  },
-  created(){
-    this.initListener();
-  },
-  beforeDestroy(){
-    this.destroyListener();
-  }
-
-}
-</script>
-
-<style scoped lang="less">
-@import "@lambo-design/core/src/styles/default";
-.pro-layout-sider-wrapper{
-  /deep/.ivu-menu-submenu{
-    .ivu-menu{
-      background: #1A1A1A;
-    }
-  }
-  .menu-collapsed {
-    padding-top: 10px;
-    /deep/a.drop-menu-a{
-      display: inline-block;
-      padding: 6px 20px;
-      width: 100%;
-      text-align: center;
-      font-weight: normal;
-      color: var(--menu-dark-subsidiary-color, @_menu-dark-subsidiary-color);
-      &:hover{
-        color: var(--heading-color-dark, @_heading-color-dark);
-      }
-    }
-  }
-}
-</style>

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

@@ -1,84 +0,0 @@
-<template>
-  <div class="user-avatar-dropdown">
-    <Dropdown @on-click="handleClick">
-      <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" :key="item.name">&nbsp;{{item.value}}</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  </div>
-</template>
-
-<script>
-import Bus from "@lambo-design/shared/utils/bus";
-import {deepCopy} from "@lambo-design/shared/utils/assist";
-
-export default {
-  name: 'pro-layout-tools-user',
-  data(){
-    return{
-      userInfo: {
-        userName: '管理员',
-        dropList: [
-          {name: 'changePwd', value: '修改密码'},
-          {name: 'logout', value: '退出登录'}
-        ]
-      }
-    }
-  },
-  methods: {
-    initListener(){
-      Bus.$on('user-info',(data)=>{
-        this.handleUser(data)
-      });
-    },
-    destroyListener(){
-      Bus.$off('user-info')
-    },
-    handleUser(data){
-      this.userInfo = Object.assign(this.userInfo,data);
-    },
-    handleClick(name) {
-      Bus.$emit('user-action',name)
-    }
-  },
-  created(){
-    this.initListener();
-  },
-  beforeDestroy(){
-    this.destroyListener();
-  }
-}
-</script>
-<style lang="less" scoped>
-@import '@lambo-design/core/src/styles/default.less';
-.user-avatar-dropdown {
-  cursor: pointer;
-  vertical-align: middle;
-  color: var(--menu-dark-subsidiary-color, @_menu-dark-subsidiary-color);
-  font-size: var(--font-size-base, @_font-size-base);
-  /deep/.ivu-dropdown-rel{
-    &:hover {
-      color: var(--heading-color-dark,@_heading-color-dark);
-    }
-  }
-  /deep/.ivu-select-dropdown{
-    background: var(--menu-dark-title,@_menu-dark-title);
-    color: var(--heading-color-dark,@_heading-color-dark);
-    .ivu-dropdown-menu{
-      .ivu-dropdown-item{
-        color: var(--menu-dark-subsidiary-color,@_menu-dark-subsidiary-color);
-        &:hover{
-          background: rgba(255,255,255,0.2);
-          color: var(--heading-color-dark,@_heading-color-dark);
-        }
-        &.ivu-menu-item-active,&.ivu-menu-item-selected{
-          background: rgba(255,255,255,0.2);
-          color: var(--heading-color-dark,@_heading-color-dark);
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,21 +0,0 @@
-<template>
-  <div class="pro-layout-tools-wrapper">
-    <LamboProLayoutToolsUser></LamboProLayoutToolsUser>
-  </div>
-</template>
-
-<script>
-import LamboProLayoutToolsUser from './pro-layout-tools-user'
-export default {
-  name: "pro-layout-tools",
-  components: {
-    LamboProLayoutToolsUser
-  }
-}
-</script>
-
-<style scoped lang="less">
-  .pro-layout-tools-wrapper{
-    margin-right: 15px;
-  }
-</style>