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

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

@@ -0,0 +1,477 @@
+<template>
+  <div ref="listenWidth" class="pro-layout-sider-wrapper"
+       :class="[(collapsed || systemInfo.showSearchMenu === '0') ? 'menu-has-collapsed' : '',tabsHeight != 46 ? 'custom-tabs' : '']">
+    <Menu v-show="!collapsed" ref="menu"
+          :accordion="isAccordionMode" :active-name="activeName"
+          :open-names="openedNames" theme="dark"
+          width="auto" @on-select="handleSelect"
+          @on-open-change="handleOpenChange">
+      <template v-for="(item,index) in menuList">
+        <template v-if="item.children && item.children.length === 1">
+          <ProLayoutSiderMenuItem v-if="showChildren(item)"
+                                  :key="`menu-${item.name}`"
+                                  :parent-item="item"
+                                  :collect-map="isCollected"
+                                  :system-info="systemInfo"
+                                  :nav-list="navList">
+          </ProLayoutSiderMenuItem>
+          <MenuItem v-else :key="`menu-${item.children[0].name}`"
+                    :name="getNameOrHref(item, true)">
+            <Row type="flex" justify="center" align="top">
+              <Col :span="getSpanNum(systemInfo,'icon')">
+                <ProLayoutSiderIcon v-if="systemInfo.menuLogo == '1'" :icon-type="item.type == 2 ? (isCollected.hasOwnProperty(item.name) ? 'ios-star' : 'ios-star-outline') : item.meta.icon"></ProLayoutSiderIcon>
+              </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>
+          </MenuItem>
+        </template>
+        <template v-else>
+          <ProLayoutSiderMenuItem v-if="showChildren(item)"
+                                  :key="`menu-${item.name}`"
+                                  :parent-item="item"
+                                  :collect-map="isCollected"
+                                  :system-info="systemInfo"
+                                  :nav-list="navList">
+          </ProLayoutSiderMenuItem>
+          <MenuItem v-else :key="`menu-${item.name}`"
+                    :name="getNameOrHref(item)">
+            <Row type="flex" justify="center" align="top">
+              <Col :span="getSpanNum(systemInfo,'icon')">
+                <ProLayoutSiderIcon v-if="systemInfo.menuLogo == '1'" :icon-type="item.type == 2 ? (isCollected.hasOwnProperty(item.name) ? 'ios-star' : 'ios-star-outline') : item.meta.icon"></ProLayoutSiderIcon>
+              </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>
+          </MenuItem>
+        </template>
+      </template>
+    </Menu>
+
+    <ProLayoutSiderOtherMenu v-show="systemInfo.showHistoryAndCollect !== '0'" :style="systemInfo.menuScaling === '0' ? { width: otherWidth } : {}" :collapsed="collapsed" @select-menu="selectMenu"></ProLayoutSiderOtherMenu>
+    <ProLayoutSiderSearch
+        :style="systemInfo.menuScaling === '0' ? { width: otherWidth } : {}"
+        v-show="!collapsed && (systemInfo.showSearchMenu !== '0')"
+        :searchType="0"
+        @select-menu="selectMenu"
+    ></ProLayoutSiderSearch>
+    <div v-show="collapsed" :list="menuList" class="menu-collapsed" >
+      <template v-for="item in menuList">
+        <ProLayoutSiderCollapsedMenu v-if="item.children && item.children.length > 0" :key="`drop-menu-${item.name}`"
+                                     :parent-item="item" theme="dark" hide-title transfer
+                                     @on-click="handleSelect" :active-item="openedNames">
+        </ProLayoutSiderCollapsedMenu>
+        <Tooltip v-else :key="`drop-menu-${item.name}`" :content="showTitle(item.children && item.children[0] ? item.children[0] : item)"
+                 placement="right" transfer>
+          <template v-slot:default="{ active }">
+            <a :style="{textAlign: 'center'}"
+               :class="['drop-menu-a', item.name === selectedTopParent ? 'selected-parent' : '']"
+               @click="handleSelect(getNameOrHref(item, true))">
+              <!--              <i :class="[item.meta.icon, selectedIconType === item.meta.icon ? 'selected-icon' : '']"></i>-->
+              <ProLayoutSiderIcon :icon-type="item.meta.icon" icon-size="26" :class="{ 'selected-icon': item.name === selectedTopParent && collapsed }"
+              ></ProLayoutSiderIcon>
+            </a>
+          </template>
+        </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 ProLayoutSiderOtherMenu from "./components/pro-layout-sider-other-menu";
+import ProLayoutSiderSearch from "./components/pro-layout-sider-search";
+import ProLayoutSiderMenuItem from './components/pro-layout-sider-menu-item'
+import ProLayoutSiderCollapsedMenu from './components/pro-layout-sider-collapsed-menu'
+import {
+  filterMenuName, filterMenuUri, tagExists,
+  isOpenBlank, buildSinglePermission,arraysEqual
+} from "@lambo-design/shared/utils/platform";
+import config from "@lambo-design/shared/config/config";
+import {getThemeVarByKey} from "@lambo-design/shared/utils/theme";
+
+export default {
+  name: "pro-layout-sider",
+  components: {
+    ProLayoutSiderMenuItem,
+    ProLayoutSiderCollapsedMenu,
+    ProLayoutSiderOtherMenu,
+    ProLayoutSiderSearch
+  },
+  props:{
+    serverContext: {
+      type: String,
+      default: () => config.upmsServerContext // 设置默认值
+    }
+  },
+  data(){
+    return {
+      show: false,
+      otherWidth:'',
+      originalAllMenuList: [],
+      navList: [],
+      originMenuList:[],
+      menuList: [],
+      appId: '',
+      collapsed: false,
+      activeName: '',
+      openedNames: [],
+      userExpandedMenus: [], // 记录用户手动展开的菜单（非手风琴模式下使用）
+      activeMenu: null,
+      selectedMenuParent: null,
+      activeMenuItem: null,
+      openedSubMenu: null,
+      currentMenuItem: null,
+      selectedTopParent: '',
+      activeIcon: null,
+      tagValue: '',
+      tagList: [],
+      collectMenuList: [],
+      isCollected: {},
+      systemInfo:{},
+      tabsHeight: 46
+    }
+  },
+  mixins:[sider],
+  computed: {
+    isAccordionMode() {
+      // 当 accordionMode 为 '0' 时关闭手风琴模式，否则开启
+      return this.systemInfo.accordionMode !== '0';
+    }
+  },
+  methods: {
+    initListener(){
+      Bus.$on('origin-all-menu-list', (data)=>{
+        this.initAllMenu(data);
+      });
+      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)
+      });
+      Bus.$on('select-menu',(name,item)=>{
+        this.selectMenu(name,item)
+      });
+      Bus.$on('collect-menu-list',(data)=>{
+        this.initCollectMenu(data)
+      });
+      Bus.$on('system-info',(data)=>{
+        this.initSystemInfo(data)
+      })
+    },
+    destroyListener(){
+      Bus.$off('origin-all-menu-list')
+      Bus.$off('nav-list')
+      Bus.$off('menu-list')
+      Bus.$off('trigger-change')
+      Bus.$off('change-app')
+      Bus.$off('tag-list')
+      Bus.$off('menu-click')
+      Bus.$off('select-menu')
+      Bus.$off('collect-menu-list')
+      Bus.$off('system-info')
+    },
+    initSystemInfo(data){
+      this.systemInfo = deepCopy(data)
+    },
+    initAllMenu(data){
+      this.originalAllMenuList = data;
+    },
+    initNav(data){
+      if (this.navList && data && arraysEqual(this.navList,data)){
+        return;
+      }
+      this.navList = data;
+    },
+    initMenu(data){
+      if (this.originMenuList && data && arraysEqual(this.originMenuList,data)){
+        return;
+      }
+      if (data && data.length > 0) {
+        let item = data[0];
+        if (item.appId && item.appId !== this.appId) {
+          return;
+        }
+      }
+      this.originMenuList = deepCopy(data);
+      this.changeMenu()
+    },
+    initCollectMenu(data){
+      this.collectMenuList = data;
+      this.isCollected = {}
+      this.collectMenuList.forEach(menu => {
+        this.isCollected[menu.name] = true
+      })
+    },
+    changeApp(appId,appInfo){
+      this.appId = appId;
+      this.changeMenu()
+    },
+    changeMenu(){
+      let treeMenuList = generatorMenuList(this.originMenuList,this.appId,'menu');
+      if (treeMenuList && treeMenuList.length > 0) {
+        this.menuList = treeMenuList;
+      } else {
+        this.menuList = [];
+      }
+      Bus.$emit('tree-menu-list',this.menuList)
+      this.openedNames = this.getOpenedNamesByActiveName();
+    },
+    selectMenu(name,menu) {
+      if (!menu) {
+        let res = this.originMenuList.filter(item => item.name == name)
+        if (res && res.length > 0) {
+          menu = res[0];
+        }
+      }
+      if (config.mainType && config.mainType == 'singleApp') {
+        menu = buildSinglePermission(this.originalAllMenuList, menu);
+      }
+      if (menu.appId && menu.appId != this.appId) {
+        let appInfo = this.navList.filter(app => app.appId === menu.appId);
+        Bus.$emit('change-app', {appId:menu.appId,appInfo:appInfo[0]})
+      }
+      setTimeout(()=>{
+        this.handleSelect(name)
+      },100)
+    },
+    handleSelect(name,uri,pid){
+      /*if (this.activeName == name) {
+        return;
+      }*/
+      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 (isOpenBlank(menu)) {
+          Bus.$emit('menu-click', menu.name , menu)
+        } else {
+          let tag = tagList.find(item => item.name == menu.name);
+          if (!tag) {
+            tag = {}
+          }
+          if ('home' != menu.name) {
+            let res = tagList.filter(item => item.name !== menu.name);
+            menu.cts = new Date().getTime();
+            tag = Object.assign(tag, menu);
+            res.push(tag);
+            tagList = deepCopy(res);
+          }
+          Bus.$emit('tag-list', tagList, menu.name)
+        }
+
+        /*if (!tagExists(tagList,menu.name)) {
+          if (!isOpenBlank(menu)) {
+            tagList.push(menu);
+          } else {
+            Bus.$emit('menu-click', menu.name , menu)
+          }
+        } else {
+          let tag = tagList.find(item => item.name == menu.name);
+          if ('home' != menu.name) {
+            let res = tagList.filter(item => item.name !== menu.name);
+            menu.cts = new Date().getTime();
+            tag = Object.assign(tag, menu);
+            res.push(tag);
+            tagList = deepCopy(res);
+          }
+        }
+        Bus.$emit('tag-list', tagList, menu.name)*/
+      }
+      /*if (menu.meta && Array.isArray(menu.meta.crumbs)) {
+        let parentMenu = menu.meta.crumbs[0]
+        this.$set(this, 'selectedTopParent', parentMenu.name);
+      } else {
+        // 处理没有父菜单的情况
+        this.$set(this, 'selectedTopParent', menu.name);
+      }
+      // 如果 uri 为空，则需要根据 pid 判断是展开父菜单还是同时展开父菜单和当前菜单
+      if (!uri) {
+        let parentName;
+        if (pid === 0) {
+          // 如果 pid 为 0，表示是最外层菜单
+          parentName = this.getNameOrHref(menu);
+        } else {
+          // 如果 pid 不等于 0，查找并打开对应的最外层父菜单
+          parentName = this.getTopParent(menu);
+          this.openedNames = [parentName]; // 设置最外层父菜单为展开状态
+          this.activeName = menu.name; // 设置当前菜单为激活状态
+        }
+      }*/
+    },
+    getTopParent(menu) {
+      return menu.parent ? this.getTopParent(menu.parent) : 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 && menu.type && menu.type == '2');
+      if (item && item.length > 0){
+        if (isOpenBlank(item[0])) {
+          //window.location.href = window.location.href;
+          return;
+        }
+        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
+    },
+    handleOpenChange(openNames) {
+      // openNames 是 Menu 组件当前的所有展开项
+      if (this.systemInfo.accordionMode === '0') {
+        // 非手风琴模式：保存用户手动展开的状态
+        this.userExpandedMenus = [...openNames];
+      }
+      // 注意：这里不直接修改 this.openedNames，避免循环触发
+    },
+    mergeOpenedNames(newNames) {
+      // 如果关闭手风琴模式，保留用户手动展开的菜单
+      if (this.systemInfo.accordionMode === '0') {
+        // 合并用户展开的菜单和新的必需展开项
+        const merged = [...new Set([...this.userExpandedMenus, ...newNames])];
+        return merged;
+      } else {
+        // 手风琴模式，只保留新的 names（路径必需的展开项）
+        return newNames;
+      }
+    },
+    handleResize() {
+      const targetElement = this.$refs.listenWidth; // 获取 DOM 元素的引用
+      this.otherWidth = targetElement.clientWidth+'px'; // 获取 div 元素的宽度
+    },
+    dragOptions(item){
+      if (!item) {
+        item = {}
+      }
+      item.navList = this.navList;
+      return {
+        trigger: '.menu-title-' + item.permissionId,
+        body: '.menu-title-' + item.permissionId,
+        recover: true,
+        item: item
+      }
+    },
+    loadingCustomStyle(){
+      let themeKey = localStorage.getItem("theme") ? localStorage.getItem("theme") : "default"
+      let tabsHeight = getThemeVarByKey(themeKey,'--layout-tabs-height');
+      if (tabsHeight) {
+        this.tabsHeight = tabsHeight;
+      }
+    }
+  },
+  watch:{
+    activeName(){
+      const newOpenNames = this.getOpenedNamesByActiveName();
+      this.openedNames = this.mergeOpenedNames(newOpenNames);
+    },
+    openedNames() {
+      this.$nextTick(() => {
+        this.$refs.menu.updateOpened()
+        this.$refs.menu.updateActiveName()
+      })
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize); // 监听窗口大小变化事件
+    this.handleResize(); // 初始化时获取一次宽度
+    this.loadingCustomStyle();
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+    window.removeEventListener('resize', this.handleResize); // 在组件销毁前移除事件监听器，以防止内存泄漏
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+@import "@lambo-design/core/src/styles/default";
+@import '../../styles/other-menu.less';
+.pro-layout-sider-wrapper{
+  margin-bottom: 50px;
+  padding-top: 47px;
+  .menu-collapsed {
+    padding-top: 10px;
+    /deep/a.drop-menu-a{
+      display: inline-block;
+      padding: 6px 20px;
+      width: 100%;
+      text-align: center;
+      font-weight: normal;
+    }
+    overflow: hidden;
+  }
+  &.menu-has-collapsed{
+    padding-top: 0 !important;
+  }
+  &.custom-tabs{
+    padding-top: 36px;
+  }
+}
+</style>