@lambo-design/pro-layout 1.0.0-beta.44 → 1.0.0-beta.441

package/src/components/{pro-layout-sider-collapsed-menu.vue → pro-layout-sider/components/pro-layout-sider-collapsed-menu.vue}

@@ -1,28 +1,29 @@
 <template>
   <Dropdown ref="dropdown" :class="hideTitle ? '' : 'collased-menu-dropdown'" :placement="placement"
-            :transfer="true" @on-click="handleClick">
-    <a :style="{textAlign: !hideTitle ? 'left' : '',padding: !hideTitle ? '0px' : ''}" class="drop-menu-a" type="text"
+            :transfer="transfer" :transfer-class-name="transfer ? 'collased-menu-transfer' : ''" @on-click="handleClick">
+    <a :style="{textAlign: !hideTitle ? 'left' : '',padding: !hideTitle ? '0px' : ''}"
+       :class="['drop-menu-a', activeItem.indexOf(parentItem.name) >= 0 ? 'selected-parent' : '']" type="text"
        @mouseover="handleMousemove($event, children)">
       <ProLayoutSiderIcon :icon-type="parentItem.meta.icon" :icon-size="hideTitle ? 26 : 14"></ProLayoutSiderIcon>
-      <span v-if="!hideTitle" class="menu-title">{{ showTitle(parentItem) }}</span>
+      <span v-if="!hideTitle" >&nbsp;{{ showTitle(parentItem) }}</span>
       <Icon v-if="!hideTitle" :size="16"type="ios-arrow-forward"/>
     </a>
     <DropdownMenu ref="dropdown" slot="list" style="width: auto">
       <template v-for="child in children">
         <ProLayoutSiderCollapsedMenu v-if="showChildren(child)" :key="`drop-${child.name}`"
-                        :parent-item="child">
+                                     :parent-item="child" :transfer="false">
         </ProLayoutSiderCollapsedMenu>
         <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name">
           <ProLayoutSiderIcon :icon-type="child.meta.icon"></ProLayoutSiderIcon>
-          <span class="menu-title">{{ showTitle(child) }}</span>
+          <span class="menu-title-nochildren">&nbsp;{{ showTitle(child) }}</span>
         </DropdownItem>
       </template>
     </DropdownMenu>
   </Dropdown>
 </template>
 <script>
-import sider from '../utils/sider'
-import menuItem from '../utils/menuItem'
+import sider from '../../../utils/sider'
+import menuItem from '../../../utils/menuItem'
 import {findNodeUpperByClasses} from '@lambo-design/shared/utils/platform'
 
 export default {
@@ -32,6 +33,10 @@ export default {
     hideTitle: {
       type: Boolean,
       default: false
+    },
+    transfer: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -58,6 +63,7 @@ export default {
 </script>
 <style lang="less" scoped>
 @import "@lambo-design/core/src/styles/default";
+@import '../../../styles/other-menu.less';
 .collased-menu-dropdown {
   width: 100%;
   margin: 0;
@@ -71,7 +77,7 @@ export default {
   transition: background 0.2s ease-in-out;
   display: block;
   &:hover{
-    color: var(--heading-color, @_heading-color);
+    //color: var(--heading-color, @_heading-color);
     background: rgba(26,26,26,0.05);
   }
   /deep/.ivu-dropdown-rel{
@@ -80,12 +86,25 @@ export default {
       width: 100%;
       font-weight: normal;
       margin-left: -5px;
-      color: var(--text-color, @_text-color) !important;
+      //color: var(--text-color, @_text-color) !important;
       text-decoration: none;
       &:hover{
-        color: var(--heading-color, @_heading-color) !important;
+        //color: var(--heading-color, @_heading-color) !important;
       }
     }
   }
 }
-</style>
+.collased-menu-transfer{
+  .ivu-dropdown-menu{
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* 隐藏滚动条 */
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Edge */
+    }
+    /* Firefox */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+</style>

package/src/components/{pro-layout-sider-icon.vue → pro-layout-sider/components/pro-layout-sider-icon.vue}

@@ -40,7 +40,7 @@ export default {
       }
       if (iconType.indexOf('iconfont') > -1) {
         let imgName = iconType.replace('iconfont','').replace(/\s+/g,'');
-        return 'background: url('+ require('../styles/images/menuicon/' + imgName + '-s.png') +') no-repeat;background-size: 100%;';
+        return 'background: url('+ require('../../../styles/images/menuicon/' + imgName + '-s.png') +') no-repeat;background-size: 100%;';
       }
       return '';
     }
@@ -78,4 +78,4 @@ export default {
       }
     }
   }
-</style>
+</style>

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

@@ -0,0 +1,137 @@
+<template>
+  <Submenu :name="`${parentName}`">
+    <template slot="title">
+      <Row type="flex" justify="center" align="top">
+        <Col :span="getSpanNum(systemInfo,'icon')">
+          <ProLayoutSiderIcon v-if="systemInfo.menuLogo == '1'" :icon-type="parentItem.meta.icon"></ProLayoutSiderIcon>
+        </Col>
+        <Col :span="getSpanNum(systemInfo,'title')">
+          <div>
+            <Tooltip style="width: 100%" v-if="systemInfo.titleShow ==='ellipsis'" placement="right" transfer :content="showTitle(parentItem)">
+              <div class="menu-title-ellipsis">{{ showTitle(parentItem)}}</div>
+            </Tooltip>
+            <span v-else class="menu-title-wrap">{{ showTitle(parentItem)}}</span>
+          </div>
+        </Col>
+      </Row>
+    </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"
+                                :collect-map="collectMap"
+                                :system-info="systemInfo"
+                                :nav-list="navList">
+        </ProLayoutSiderMenuItem>
+        <menu-item v-else :key="`menu-${item.children[0].name}`" :name="getNameOrHref(item, true)">
+          <Row type="flex" justify="center" align="top">
+            <Col :span="getSpanNum(systemInfo,'icon')">
+              <Icon v-if="systemInfo.menuLogo == '1'" :type="collectMap.hasOwnProperty(item.name) ? 'ios-star' : 'ios-star-outline'"
+                    @click="toggleCollect(item)"></Icon>
+            </Col>
+            <Col :span="getSpanNum(systemInfo,'title')">
+              <div :class="['menu-title-' + item.children[0].permissionId,'draggable-text']" v-draggable="dragOptions(item.children[0])">
+                <Tooltip style="width: 100%" v-if="systemInfo.titleShow ==='ellipsis'" placement="right" transfer :content="showTitle(item.children[0])">
+                  <div class="menu-title-nochildren-ellipsis">{{ showTitle(item.children[0]) }}</div>
+                </Tooltip>
+                <span v-else class="menu-title-nochildren-wrap">{{ showTitle(item.children[0])}}</span>
+              </div>
+            </Col>
+          </Row>
+        </menu-item>
+      </template>
+      <template v-else>
+        <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
+                                :parent-item="item"
+                                :collect-map="collectMap"
+                                :system-info="systemInfo"
+                                :nav-list="navList">
+        </ProLayoutSiderMenuItem>
+        <menu-item v-else :key="`menu-${item.name}`" :name="getNameOrHref(item)">
+          <Row type="flex" justify="center" align="top">
+            <Col :span="getSpanNum(systemInfo,'icon')">
+              <Icon v-if="systemInfo.menuLogo == '1'" :type="collectMap.hasOwnProperty(item.name) ? 'ios-star' : 'ios-star-outline'"
+                    @click="toggleCollect(item)"></Icon>
+            </Col>
+            <Col :span="getSpanNum(systemInfo,'title')">
+              <div :class="['menu-title-' + item.permissionId,'draggable-text']" v-draggable="dragOptions(item)">
+                <Tooltip style="width: 100%" v-if="systemInfo.titleShow ==='ellipsis'" placement="right" transfer :content="showTitle(item)">
+                  <div class="menu-title-nochildren-ellipsis">{{ showTitle(item) }}</div>
+                </Tooltip>
+                <span v-else class="menu-title-nochildren-wrap">{{ showTitle(item) }}</span>
+              </div>
+            </Col>
+          </Row>
+        </menu-item>
+      </template>
+    </template>
+  </Submenu>
+</template>
+<script>
+import sider from '../../../utils/sider'
+import menuItem from '../../../utils/menuItem'
+import Bus from '@lambo-design/shared/utils/bus'
+import Locale from "@lambo-design/core/src/mixins/locale";
+
+export default {
+  name: 'ProLayoutSiderMenuItem',
+  mixins: [sider, menuItem, Locale],
+  props: {
+    collectMap: {
+      type: Object,
+      default: () => {}
+    },
+    systemInfo: {
+      type: Object,
+      default: () => {
+        return {
+          systemName: this.t('pro-layout.common.systemName'),
+          systemLogo: '',
+          layoutSize: 'small',
+          acceptAppId: '',
+          tabNum: 5,
+          topMenu: 4,
+          rightTopOptButtonList: [],
+          menuScaling:'1',
+          headBackground:'',
+          menuLogo: '1',
+          titleShow:'wrap',
+        }
+      }
+    },
+    navList: {
+      type: Array,
+      default : () => {
+        return []
+      }
+    }
+  },
+  methods: {
+    toggleCollect(item) {
+      Bus.$emit('toggle-collect-menu',!this.collectMap[item.name],item)
+    },
+    dragOptions(item){
+      if (!item) {
+        item = {}
+      }
+      item.navList = this.navList;
+      return {
+        trigger: '.menu-title-' + item.permissionId,
+        body: '.menu-title-' + item.permissionId,
+        recover: true,
+        item: item
+      }
+    },
+  },
+  computed:{
+    showTooltip() {
+      const ellipsisDiv = this.$refs['ellipsisDiv' + this.index];
+      return ellipsisDiv.clientWidth < ellipsisDiv.scrollWidth;
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '../../../styles/other-menu.less';
+</style>

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

@@ -0,0 +1,140 @@
+<template>
+  <div :class="classes">
+    <div class="other-menu-item" @click="onChange('history')">
+      <Tooltip :disabled="!collapsed" :content="t('pro-layout.side.history')" placement="right" transfer>
+        <div>
+          <Icon class="other-menu-icon" type="md-time"/>
+          <span class="other-menu-title"> {{ t('pro-layout.side.history') }}</span>
+        </div>
+      </Tooltip>
+    </div>
+    <div class="other-menu-item" @click="onChange('collect')">
+      <Tooltip :disabled="!collapsed" :content="t('pro-layout.side.collect')" placement="right" transfer>
+        <div>
+          <Icon class="other-menu-icon" type="md-star-outline"/>
+          <span class="other-menu-title">{{ t('pro-layout.side.collect') }}</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-drawer-list">
+        <div v-for="(item,index) in historyMenuList" :key="index" class="other-menu-drawer-item">
+          <div class="content" @click="handleClick(item)">
+            <Icon :type="item.icon"></Icon>
+            <span> {{ item.label }}</span>
+          </div>
+          <div class="delete">
+            <Icon type="ios-close" @click.native="handleHistoryDelete(item)"></Icon>
+          </div>
+        </div>
+      </div>
+      <div v-if="drawer.type=='collect'" class="other-menu-drawer-list">
+        <div v-for="(item,index) in collectMenuList"  :key="index" class="other-menu-drawer-item" @click="handleClick(item)">
+          <div class="content" @click="handleClick(item)">
+            <Icon :type="item.icon"></Icon>
+            <span> {{ item.label }}</span>
+          </div>
+          <div class="delete">
+            <Icon type="ios-close" @click.native.stop="handleCollectDelete(item)"></Icon>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import Bus from "@lambo-design/shared/utils/bus";
+import Locale from "@lambo-design/core/src/mixins/locale";
+
+export default {
+  name: "other-menu",
+  mixins: [Locale],
+  components: {},
+  props: {
+    collapsed: {
+      type: Boolean,
+      default:false
+    }
+  },
+  data() {
+    return {
+      historyMenuList: [],
+      collectMenuList: [],
+      drawer: {
+        model: false,
+        title: '',
+        type: '',
+      }
+    }
+  },
+  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: {
+    initListener(){
+      Bus.$on('history-menu-list',(data)=>{
+        this.initHistory(data)
+      });
+      Bus.$on('collect-menu-list', (data)=> {
+        this.initCollect(data)
+      })
+    },
+    destroyListener(){
+      Bus.$off('history-menu-list')
+      Bus.$off('collect-menu-list')
+    },
+    initHistory(historyMenuList){
+      this.historyMenuList = historyMenuList;
+    },
+    initCollect(collectMenuList){
+      this.collectMenuList = collectMenuList;
+    },
+    onChange(value) {
+      if (value == 'history') {
+        Bus.$emit('get-history-menu-list')
+        this.drawer.title = this.t('pro-layout.side.history-menu')
+      } else {
+        this.drawer.title = this.t('pro-layout.side.collect-menu')
+      }
+      this.drawer.type = value
+      this.drawer.model = !this.drawer.model
+    },
+    handleClick(item) {
+      this.drawer.model = false
+      this.$emit('select-menu', item.name, item)
+    },
+    handleHistoryDelete(item) {
+      Bus.$emit('delete-history-menu',item)
+    },
+    handleCollectDelete(item) {
+      Bus.$emit('delete-collect-menu',item)
+    }
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+  }
+}
+</script>
+
+
+<style lang="less">
+@import '../../../styles/other-menu.less';
+</style>