cloud-web-corejs-haier 1.0.43 → 1.0.44

package/src/layout/components/Sidebar/default.vue

@@ -1,12 +1,13 @@
 <template>
-  <div :class="{ 'has-logo': showLogo }">
+  <div :class="{ 'has-logo': showLogo, telescopMenu: !isMenu }">
     <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
 
     <div class="hamburger-box" ref="hamhurger" @click="openUserInfo">
       <!-- <hamburger :is-active="sidebar.opened" @toggleClick="toggleSideBar" /> -->
       <div>
         <p class="name">
-          <i class="iconfont icon-ziyuan"></i><span>{{ userInfo.nickName }}</span>
+          <i class="iconfont icon-ziyuan"></i
+          ><span>{{ userInfo.nickName }}</span>
         </p>
       </div>
     </div>
@@ -57,7 +58,10 @@
           :content="$t1('获取提取码')"
           :placement="direction"
         >
-          <i class="el-icon-setting" @click="showExtractedCodeCreateDialog = true" />
+          <i
+            class="el-icon-setting"
+            @click="showExtractedCodeCreateDialog = true"
+          />
         </el-tooltip>
       </div>
       <div class="item" v-if="isBdAdmin">
@@ -67,7 +71,10 @@
           :content="$t1('查看提取码')"
           :placement="direction"
         >
-          <i class="el-icon-tickets" @click="showExtractedCodeQueryDialog = true" />
+          <i
+            class="el-icon-tickets"
+            @click="showExtractedCodeQueryDialog = true"
+          />
         </el-tooltip>
       </div>
 
@@ -99,7 +106,10 @@
               <i :class="getMenuClass(router2, 2)"></i
               ><span>{{ getMenuName(router2) }}</span>
             </div>
-            <dl v-for="(router3, index3) in router2.children" :key="'router3' + index3">
+            <dl
+              v-for="(router3, index3) in router2.children"
+              :key="'router3' + index3"
+            >
               <div
                 class="item"
                 v-if="!router3.hidden"
@@ -122,37 +132,57 @@
       :unique-opened="true"
       @mouseleave="showNav()"
       ref="seconMenus"
+      :collapse="!isMenu"
     >
       <el-scrollbar wrap-class="scrollbar-wrapper" id="menuUl">
-        <el-submenu
+        <component
           v-for="menuModule in menuModules"
+          :is="getMenuType(menuModule)"
           :index="'' + menuModule.id"
           :key="'menuModule' + menuModule.id"
           @click.native="rourteTo(menuModule)"
         >
+          <i :class="getMenuClass(menuModule, 1)" v-if="menuModule.children.length <= 0"></i>
           <template slot="title">
-            <i :class="getMenuClass(menuModule, 1)"></i>
+            <i :class="getMenuClass(menuModule, 1)" v-if="menuModule.children.length > 0"></i>
             <span>{{ getMenuName(menuModule) }}</span>
           </template>
-          <el-menu-item
-            v-for="(router1, index1) in menuModule.children"
+          <component
+            v-for="(router2, index1) in menuModule.children"
+            :is="getMenuType(router2)"
             :key="index1"
-            :index="'' + router1.id"
-            :class="getMenuClass(router1, 2)"
-            @mouseenter.native="showNav(router1, $event)"
+            :index="'' + router2.id"
+            @mouseenter.native="showNav(router2, $event)"
             @mouseleave.native="showNav()"
-            @click="rourteTo(router1)"
+            @click="rourteTo(router2)"
           >
-            {{ getMenuName(router1) }}
-            <i class="el-icon-caret-right" v-if="router1.children.length > 0" />
-          </el-menu-item>
-        </el-submenu>
-        <el-submenu @click.native="openCreateCompanyDialog" index="xx" v-if="isFormDev">
+            <template slot="title">
+              <i :class="getMenuClass(router2, 2)"></i>
+              <span>{{ getMenuName(router2) }}</span>
+            </template>
+            <el-menu-item
+              v-for="(router3, index3) in router2.children"
+              :key="index3"
+              :index="'' + router3.id"
+              @click="rourteTo(router3)"
+            >
+              <template slot="title">
+                <i :class="getMenuClass(router3, 3)"></i>
+                <span>{{ getMenuName(router3) }}</span>
+              </template>
+            </el-menu-item>
+          </component>
+        </component>
+        <el-menu-item
+          @click.native="openCreateCompanyDialog"
+          index="xx"
+          v-if="isFormDev"
+        >
           <template slot="title">
             <i :class="getMenuClass({}, 1)"></i>
             <span>新建企业</span>
           </template>
-        </el-submenu>
+        </el-menu-item>
       </el-scrollbar>
     </el-menu>
     <div class="menu-btn">
@@ -173,7 +203,7 @@
       v-if="showMenuModal"
     ></div>
     <el-dialog
-      title="切换组织"
+      :title="$t1('切换组织')"
       width="355px"
       custom-class="dialog-style list-dialog"
       v-if="showCompanyDialog"
@@ -186,7 +216,11 @@
       @close="changeCompanyClose"
     >
       <div class="cont">
-        <el-input placeholder="搜索" class="search-btn" v-model="filterText"></el-input>
+        <el-input
+          :placeholder="$t1('搜索')"
+          class="search-btn"
+          v-model="filterText"
+        ></el-input>
         <el-tree
           :props="defaultProps"
           :load="loadNode"
@@ -264,6 +298,9 @@ import createCompanyDialog from "@base/layout/components/createCompany/createCom
 export default {
   props: {
     option: Object,
+    isMenu: {
+      type: Boolean,
+    },
   },
   components: {
     userInfo,
@@ -365,6 +402,13 @@ export default {
     this.getBdEnv();
   },
   methods: {
+    getMenuType(item) {
+      if (item.children && item.children.length > 0) {
+        return "el-submenu";
+      } else {
+        return "el-menu-item";
+      }
+    },
     getBdEnv() {
       getBdFlag({
         success: (res) => {
@@ -414,9 +458,9 @@ export default {
               window.open(path);
             },
           });
-        } else{
-          if (path.indexOf('token={token}') >= 0) {
-            path = path.replace('token={token}', 'token=' + getToken())
+        } else {
+          if (path.indexOf("token={token}") >= 0) {
+            path = path.replace("token={token}", "token=" + getToken());
           }
           window.open(path);
         }
@@ -428,7 +472,10 @@ export default {
       if (match) {
         const customReqUrl = decodeURIComponent(match[1]);
         // 移除匹配到的参数部分
-        const newUrl = url.replace(match[0], match[0].startsWith("?") ? "?" : "");
+        const newUrl = url.replace(
+          match[0],
+          match[0].startsWith("?") ? "?" : ""
+        );
 
         return {
           custom_req_url: customReqUrl,
@@ -594,7 +641,9 @@ export default {
     // 异步树叶子节点懒加载逻辑
     loadNode(node, resolve) {
       let companyCode =
-        node && node.data && node.data.companyCode ? node.data.companyCode || "" : "";
+        node && node.data && node.data.companyCode
+          ? node.data.companyCode || ""
+          : "";
       let url = !companyCode
         ? USER_PREFIX + "/user_company_info/getAllList"
         : USER_PREFIX + "/user_company_info/getChildren";
@@ -610,7 +659,7 @@ export default {
           let parentLabel = companyCode ? node.label : null;
           datas.forEach((item) => {
             item.leaf = !item.hasChild;
-            let label = item.companyName;
+            let label = this.$t1(item.companyName);
             /*if(companyCode){
               label = label + '('+companyTypeMap[item.companyType]+')'
             }*/
@@ -722,6 +771,7 @@ export default {
       this.showUserInfoDialog = true;
     },
     showNav(route, event) {
+      if (!this.isMenu) return;
       let id = route && route.id ? route.id : null;
       if (id != null) {
         if (!route.children || !route.children.length) {
@@ -734,7 +784,7 @@ export default {
           let dom = event.target;
           let domAttr = dom.getBoundingClientRect();
           // var sh1 = dom.offsetTop;
-          var sh1 = domAttr.top;
+          var sh1 = domAttr.top + 5;
           let $snav = this.$refs["seconMenus" + id][0];
           let snavAttr = $snav.getBoundingClientRect();
 
@@ -747,10 +797,11 @@ export default {
           if (sh >= 0) {
             $snav.style["margin-top"] = sh1 + "px";
           } else if (sh < 0) {
-            let bd = sh1 + sh;
+            let bd = sh1 + sh ;
 
             $snav.style["margin-top"] = bd + "px";
-            $snav.querySelector(".ico-arrow").style["margin-top"] = sh1 - bd + "px";
+            $snav.querySelector(".ico-arrow").style["margin-top"] =
+              sh1 - bd + "px";
           }
         });
       } else {
@@ -883,6 +934,7 @@ export default {
       line-height: 16px;
       overflow: hidden;
       vertical-align: middle;
+      white-space: nowrap;
     }
 
     &.name {
@@ -907,6 +959,11 @@ export default {
 
   p {
     margin: 0;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
   }
 }
 
@@ -1000,66 +1057,135 @@ export default {
     position: relative;
     background-color: rgba(0, 0, 0, 0.2);
     word-break: break-word;
-
-    .el-submenu {
-      overflow: hidden; //有点电脑分辨率问题
-      .el-submenu__title {
-        padding: 0 11px !important;
-        height: 48px;
-        line-height: 48px;
-
-        i {
-          color: #fff;
-          font-size: 13px;
-          margin-right: 0;
-          width: 18px;
-
-          &.iconfont {
-            margin-right: 5px;
-            font-size: 19px;
-            float: left;
+    .el-scrollbar__view >{
+      .el-menu-item{padding:0 11px !important;
+        span{font-size:14px;}
+      }
+      .el-submenu > .el-submenu__title{padding:0 11px !important;
+        span{font-size:14px;}
+        ~ .el-menu{
+          padding:5px 0;display: grid;
+          > .el-menu-item{
+             span{line-height:1.4;height: 26px;}
           }
-
-          &.el-submenu__icon-arrow {
-            right: 3px;
-            text-align: center;
-            font-size: 12px;
-            margin-top: -5px;
-            display: none;
+          .el-submenu.is-opened .el-submenu__title{background-color:#FFF;opacity:1;
+            span{color:$baseColor;}
+            i.iconfont{color:$baseColor}
           }
         }
 
-        > span {
-          height: 48px;
-          display: table-cell;
-          width: 114px;
-          vertical-align: middle;
-          font-size: 13px;
-          white-space: normal;
-          line-height: 16px;
+      }
+    }
+    .el-submenu__title,.el-menu-item {
+      padding: 0 11px;
+      height: 48px;
+      line-height: 48px;
+      &:hover,&.is-active{background-color:rgba(0, 0, 0, 0.29)}
+      i {
+        color: #fff;
+        font-size: 13px;
+        margin-right: 0;
+        width: 18px;
+
+        &.iconfont {
+          margin-right: 5px;
+          font-size: 19px;
+          float: left;
+        }
+
+        &.el-submenu__icon-arrow {
+          right: 3px;
+          text-align: center;
+          font-size: 12px;
+          margin-top: -5px;
+          display: none;
         }
       }
 
+      > span {
+        height: 48px;
+        display: table-cell;
+        width: 114px;
+        vertical-align: middle;
+        font-size: 13px;
+        white-space: normal;
+        line-height: 16px;
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden; //有点电脑分辨率问题
+
       &.is-opened .el-submenu__title {
         //background-color: rgba(27, 66, 97) !important;
       }
+      .el-submenu .el-menu{display:none}
     }
 
     .el-submenu {
+      &.is-opened{
+        > .el-submenu__title{background-color:rgba(0, 0, 0, 0.29)}
+      }
       .el-menu {
-        background: rgba(0, 0, 0, 0.35) !important;
+        background: rgba(0, 0, 0, 0.35);
         box-shadow: 0px -5px 8px #00000014 inset;
         //padding:4px 0;
+        .el-submenu__title{
+          height: auto;
+          line-height: 1.4;
+          font-size: 12px;
+          opacity: 0.8;
+          margin: 5px 0 5px 14px;
+          padding: 7px 2px 7px 33px !important;
+          border-radius: 8px;
+          text-align: left;
+          min-width: 81px;
+          white-space: normal;
+          margin-right: 10px;
+          word-break: break-word;
+          i.iconfont {
+            position: absolute;
+            top: 50%;
+            height: 20px;
+            margin-top: -10px;
+            line-height: 20px;
+            left: 7px;
+            font-size: 18px;
+          }
+
+          [class^="el-icon-"] {
+            font-size: 12px;
+            color: #fff;
+            position: absolute;
+            right: 2px;
+            top: 50%;
+            margin-top: -5px;
+            width: 14px;
+            zoom: 0.8;
+            display: none;
+          }
+          span{height:auto;text-align: left !important;}
+          &:hover,
+          &.on {
+            opacity: 1;
+            background-color: #fbfdfe !important;
+            color: $baseColor !important;
+            i.iconfont{color:$baseColor}
+            .el-icon-arrow-right {
+              color: $baseColor;
+            }
+          }
+        }
       }
 
-      .el-menu-item {
+      .el-menu-item{
         height: auto;
         line-height: 1.4;
         padding-left: 33px !important;
         font-size: 12px;
         opacity: 0.8;
-        margin: 10px 0 10px 14px;
-        padding: 7px 2px 7px 0px;
+        margin: 5px 0 5px 14px;
+        padding: 2px 2px 2px 0px;
         border-radius: 8px;
         text-align: left;
         min-width: 81px !important;
@@ -1067,7 +1193,7 @@ export default {
         margin-right: 10px;
         word-break: break-word;
 
-        &:before {
+        i.iconfont {
           position: absolute;
           top: 50%;
           height: 20px;
@@ -1075,6 +1201,7 @@ export default {
           line-height: 20px;
           left: 7px;
           font-size: 18px;
+          color:#D0D6DB;
         }
 
         [class^="el-icon-"] {
@@ -1087,6 +1214,7 @@ export default {
           width: 14px;
           zoom: 0.8;
           display: none;
+
         }
 
         &:hover,
@@ -1095,7 +1223,7 @@ export default {
           background-color: #fbfdfe !important;
           color: $baseColor !important;
 
-          .el-icon-arrow-right {
+          .el-icon-arrow-right,i.iconfont {
             color: $baseColor;
           }
         }
@@ -1108,7 +1236,6 @@ export default {
       .el-submenu {
         .el-submenu__title {
           > span {
-            font-size: 14px;
             text-align: center;
           }
 
@@ -1416,8 +1543,62 @@ export default {
     }
   }
 }
-
 // .el-submenu .el-menu {
 //   height: auto !important;
 // }
+.el-menu--vertical{
+   > .el-menu--popup{overflow: auto;//不用atuo 超出不出滚动条
+      .el-submenu__title, .el-menu-item{
+        height: auto !important;
+        line-height: 1.4 !important;
+        padding: 8px 0;
+        text-align: left;
+        white-space: normal;
+        word-break: break-word;
+        background:none;
+        i.iconfont{color:#FFF;margin-right:8px;}
+      }
+   }
+  .el-submenu{
+    .el-submenu__title{
+      .el-submenu__icon-arrow{display:none}
+    }
+    &:hover{
+      .el-submenu__title{
+        background-color: rgba(0, 0, 0, 0.29) !important;
+        i.iconfont{color:$baseColor}
+      }
+    }
+
+    &.is-opened{
+      .el-submenu__title{
+        background-color: rgba(0, 0, 0, 0.29) !important;
+        i.iconfont{color:$baseColor}
+      }
+    }
+  }
+  .el-menu-item{
+    &:hover{
+        background-color: rgba(0, 0, 0, 0.29) !important;
+        i.iconfont{color:$baseColor}
+    }
+
+    &.is-opened{
+        background-color: rgba(0, 0, 0, 0.29) !important;
+        i.iconfont{color:$baseColor}
+    }
+  }
+  // .el-menu-item{
+  //   &:hover{
+  //     background:#FFF !important;opacity:1;
+  //     span{color:$baseColor}
+  //     i.iconfont{color:$baseColor}
+  //   }
+  //   &.is-opened{
+  //     background:#FFF;opacity:1;
+  //     span{color:$baseColor}
+  //     i.iconfont{color:$baseColor}
+  //   }
+  // }
+}
 </style>

package/src/layout/components/Sidebar/index.vue

@@ -1,10 +1,15 @@
 <template>
-  <defaultView></defaultView>
+  <defaultView :isMenu.sync="isMenu"></defaultView>
 </template>
 
 <script>
 import defaultView from "./default.vue";
 export default {
+  props: {
+    isMenu: {
+      type: Boolean
+    }
+  },
   data() {
     return {};
   },

package/src/layout/components/TagsView/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="tags-view-container" class="navbar-tag">
+    <div @click="$baseEventBus.$emit('triggerMenu')" class="telescopMenuIcon"><i class="iconfont" :class="isMenu?'icon-shouqi':'icon-shouqi-copy'"></i></div>
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
         v-for="tag in visitedViews"
@@ -63,6 +64,11 @@ import path from 'path'
 
 export default {
   components: {ScrollPane},
+  props: {
+    isMenu: {
+      type: Boolean
+    }
+  },
   data() {
     return {
       visible: false,

package/src/layout/components/langTool.vue

@@ -1,14 +1,18 @@
 <template>
-  <div class="item" v-if="i18nEnabled && languageSettings.length>1">
-    <el-dropdown class='lang-box' trigger="click">
-    <span class="el-dropdown-link">
-      <i class="iconfont icon-duoyuyan"></i><i
-      class="el-icon-arrow-down el-icon--right"></i>
-    </span>
+  <div class="item" v-if="i18nEnabled && languageSettings.length > 1">
+    <el-dropdown class="lang-box" trigger="click">
+      <span class="el-dropdown-link">
+        <i class="iconfont icon-duoyuyan"></i
+        ><i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
       <el-dropdown-menu slot="dropdown" class="lang-box-pup">
-        <el-dropdown-item v-for="(item,index) in languageSettings" :key="index" :command="item.languageCode"
-                          @click.native="changeLanguage(item.languageCode)"
-                          :class="{'cur':currentName == item.languageName}">{{ item.languageName }}
+        <el-dropdown-item
+          v-for="(item, index) in languageSettings"
+          :key="index"
+          :command="item.languageCode"
+          @click.native="changeLanguage(item.languageCode)"
+          :class="{ cur: currentName == item.languageName }"
+          >{{ $t1(item.languageName) }}
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
@@ -24,13 +28,13 @@ export default {
     return {
       languageSettings: [],
       languageSettingMap: {},
-      i18nEnabled: settingConfig.i18nEnabled
-    }
+      i18nEnabled: settingConfig.i18nEnabled,
+    };
   },
   computed: {
     currentName() {
-      return this.languageSettingMap[this.$i18n.locale]
-    }
+      return this.languageSettingMap[this.$i18n.locale];
+    },
   },
   mounted() {
     this.initLanguageSetting();
@@ -42,33 +46,33 @@ export default {
           url: USER_PREFIX + `/auth/switchLanguage`,
           method: `post`,
           data: {
-            "stringOne": command
+            stringOne: command,
           },
           isLoading: true,
           modalStrictly: true,
           loadingTarget: document.body,
-          success: res => {
-            this.$i18n.locale = command // 设置给本地的i18n插件
+          success: (res) => {
+            this.$i18n.locale = command; // 设置给本地的i18n插件
             localStorage.setItem("i18n-lang", command);
-            this.$message.success('切换多语言成功')
-            location.reload()
-          }
-        })
+            this.$message.success("切换多语言成功");
+            location.reload();
+          },
+        });
       }
     },
     initLanguageSetting() {
       if (settingConfig.i18nEnabled !== true) return;
-      let languageSettings = []
-      languageSettings.push(...(this.$store.state.user.languageSettings));
+      let languageSettings = [];
+      languageSettings.push(...this.$store.state.user.languageSettings);
       let map = {};
-      languageSettings.forEach(item => {
+      languageSettings.forEach((item) => {
         map[item.languageCode] = item.languageName;
       });
       this.languageSettingMap = map;
       this.languageSettings = languageSettings;
     },
-  }
-}
+  },
+};
 </script>
 <style scoped lang="scss">
 /*多语言*/
@@ -78,7 +82,7 @@ export default {
   height: 18px;
   line-height: 18px;
   vertical-align: middle;
-  color: #FFF;
+  color: #fff;
   font-size: 12px;
 
   .el-icon--right {
@@ -86,7 +90,7 @@ export default {
   }
 
   .el-dropdown-link {
-    color: #FFF;
+    color: #fff;
 
     .name {
       display: inline-block;
@@ -95,7 +99,7 @@ export default {
       overflow: hidden;
       vertical-align: middle;
       font-size: 12px;
-      line-height: 19px
+      line-height: 19px;
     }
 
     i {
@@ -110,7 +114,6 @@ export default {
       }
     }
   }
-
 }
 
 .lang-box-pup .el-dropdown-menu__item.cur {