Merge branch 'dev_NEW_pro' of http://114.132.189.42:9002/r/product-inventor...

huminmin

2 天以前 4a407279f0c9757f0714eaf385fdd5cd68c038c2

 src/layout/components/Sidebar/SidebarItem.vue

@@ -1,17 +1,19 @@
<template>

  <div v-if="!item.hidden">

  <div v-if="!item.hidden" class="sidebar-item-wrapper">

    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">

      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">

        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">

          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>

          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>

          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" class="menu-icon"/>

          <template #title>

            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>

          </template>

        </el-menu-item>

      </app-link>

    </template>



    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>

    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>

      <template v-if="item.meta" #title>

        <svg-icon :icon-class="item.meta && item.meta.icon" />

        <svg-icon :icon-class="item.meta && item.meta.icon" class="menu-icon" />

        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>

      </template>



@@ -48,20 +50,18 @@
  }

})



const onlyOneChild = ref({});

const onlyOneChild = ref({})



function hasOneShowingChild(children = [], parent) {

  if (!children) {

    children = [];

    children = []

  }

  const showingChildren = children.filter(item => {

    if (item.hidden) {

      return false

    } else {

      // Temp set(will be used if only has one showing child)

      onlyOneChild.value = item

      return true

    }

    onlyOneChild.value = item

    return true

  })



  // When there is only one child router, the child router is displayed by default

@@ -76,7 +76,7 @@
  }



  return false

};

}



function resolvePath(routePath, routeQuery) {

  if (isExternal(routePath)) {

@@ -86,7 +86,7 @@
    return props.basePath

  }

  if (routeQuery) {

    let query = JSON.parse(routeQuery);

    let query = JSON.parse(routeQuery)

    return { path: getNormalPath(props.basePath + '/' + routePath), query: query }

  }

  return getNormalPath(props.basePath + '/' + routePath)

@@ -94,9 +94,65 @@


function hasTitle(title){

  if (title.length > 5) {

    return title;

    return title

  } else {

    return "";

    return ""

  }

}

</script>



<style lang="scss" scoped>

.sidebar-item-wrapper {
  :deep(.menu-icon) {
    width: 26px;
    height: 26px;
    margin-right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease;
    color: var(--sidebar-text);
    opacity: 0.88;
  }
  
  :deep(.el-menu-item:hover .menu-icon),
  :deep(.el-sub-menu__title:hover .menu-icon) {
    color: #ffffff;
    opacity: 1;
  }
  
  :deep(.el-menu-item.is-active .menu-icon) {

    color: var(--menu-active-text) !important;

    opacity: 1;

  }

  
  :deep(.menu-title) {
    font-weight: 500;
    transition: color 0.2s ease;
    color: var(--sidebar-text);
    opacity: 0.82;
  }
  
  :deep(.el-menu-item:hover .menu-title),
  :deep(.el-sub-menu__title:hover .menu-title) {
    color: #ffffff;
    opacity: 1;
  }
  
  :deep(.el-menu-item.is-active .menu-title) {
    color: var(--menu-active-text) !important;
    opacity: 1;
  }
  
  :deep(.nest-menu) {
    .menu-icon {
      width: 22px;
      height: 22px;
      margin-right: 10px;
    }
    
    .menu-title { font-size: 13px; }
  }
}
</style>