qj-happy-common-zhongjian 1.0.27

package/src/views/layout/theme/darkBlue/components/LeftNavbar(/345/261/225/347/244/272/345/205/250/351/203/250/350/217/234/345/215/225).vue

@@ -0,0 +1,448 @@
+<template>
+  <div
+    :class="{'is-active':sidebar.appNavOpen}"
+    class="el-menu-vertical-demo"
+    :style="{height:height+'px'}"
+  >
+    <!-- <div class="top-logo">
+        <img src="../assets/logo.png">
+    </div>-->
+    <div class="tool-menu-svg">
+      <a class="header-container">
+        <div class="header-img">
+          <i class="user-icon"></i>
+        </div>
+        <span>{{$store.state.user.name}}</span>
+      </a>
+      <a class="my-youfu">我的悠福</a>
+    </div>
+    <!-- <div class="el-container-box" :style="{height:heightBox+'px'}"> -->
+    <div class="el-container-box">
+      <div class="el-menu-box">
+        <ul class="el-menu-ul">
+          <li
+            class="active"
+            v-for="(item,index) in appList.list"
+            :key="index"
+            v-if="!item.menuTarget"
+          >
+            <a class="active" @click="menuLi($event)">
+              <i
+                class="iconfont"
+                :class="item.proappMenuRemark ? item.proappMenuRemark :'icon-caidan-shi'"
+              ></i>
+              {{item.menuName}}
+            </a>
+            <ol v-if="item.children!==null">
+              <li
+                v-for="(itemOl,indexOl) in item.children"
+                :key="indexOl"
+                :class="[$route.path == '/'+itemOl.menuAction ? 'active':'',itemOl.menuAction]"
+                v-if=" !itemOl.menuTarget"
+              >
+                <div class="el-li-title">
+                  <a @click="menuHref(item.menuAction,itemOl,2)">
+                    <em></em>
+                    <span></span>
+                    {{itemOl.menuName}}
+                  </a>
+                  <i
+                    v-if="itemOl.children!==null"
+                    :class="[iconStatic? 'el-icon-minus':'el-icon-plus', 'el-icon']"
+                    @click="menuIcon($event)"
+                  ></i>
+                </div>
+                <dl v-if="itemOl.children!==null" class="el-dl-list-box">
+                  <dd
+                    v-for="(itemDd,indexDd) in itemOl.children"
+                    :key="indexDd"
+                    :class="[$route.path.split('/')[2] == itemDd.menuAction ? 'is-active3':'']"
+                    v-if=" !itemDd.menuTarget"
+                  >
+                    <a
+                      class="el-dd-list"
+                      @click="menuHref(item.menuAction,itemDd,3)"
+                    >{{itemDd.menuName}}</a>
+                  </dd>
+                </dl>
+              </li>
+            </ol>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+      appActive: process.env.APP_PATH, // 当前点击的项目名称
+      height: document.documentElement.clientHeight - 85,
+      heightBox: document.documentElement.clientHeight - 355,
+      isCollapse: true,
+      iconStatic: false
+    };
+  },
+  mounted() {
+    // console.log(this.appList, "=====++++==");
+    console.log(this.appList, "appListappList");
+    window.addEventListener("resize", this.heightChange);
+    //先判断是几级菜单，现在的是二级菜单
+    if (document.querySelector(".active")) {
+      //表示二级菜单
+      document.querySelector(".active").parentNode.parentNode.className =
+        "active";
+    } else if (document.querySelector(".is-active3")) {
+      //三级菜单
+      let obj = document.querySelector(".is-active3");
+      console.log(obj, "obj");
+      this.iconStatic = true;
+      obj.parentNode.parentNode.childNodes[0].classList.add("active");
+      obj.parentNode.parentNode.parentNode.parentNode.childNodes[0].classList.add(
+        "active"
+      );
+      obj.className = "active";
+    }
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  watch: {},
+  methods: {
+    // toggle(index) {
+    //   this.checkindex = index;
+    // },
+    menuLi(e) {
+      //点击显示二级菜单
+      //点击添加class
+      e.target.classList.toggle("active");
+    },
+    menuIcon(e) {
+      //点击显示三级菜单
+      e.target.parentNode.classList.toggle("active");
+      if (e.target.className.indexOf("el-icon-plus") >= 0) {
+        e.target.classList.remove("el-icon-plus");
+        e.target.classList.add("el-icon-minus");
+      } else {
+        e.target.classList.remove("el-icon-minus");
+        e.target.classList.add("el-icon-plus");
+      }
+    },
+    handleSelect(key, keyPath) {
+      if (!key) {
+        return;
+      }
+      var url = "";
+      this.appList.list.forEach(item => {
+        if (item.menuJspath === key) {
+          url = item.menuAction;
+        }
+      });
+      window.location.href = url;
+      console.log(key, keyPath);
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    heightChange() {
+      this.height = document.documentElement.clientHeight - 58 - 40;
+    },
+    menuHref(menuAction, item, index) {
+      let path =
+        index === 2
+          ? "/" + item.menuAction
+          : "/" + item.proappMenuPcode + "/" + item.menuAction;
+      // index===2 是二级菜单，3是三级菜单
+      if (item.children === null) {
+        //可跳转
+        if (location.href.indexOf("localhost") >= 0) {
+          //localhost表示本地跳转
+
+          this.$router.push({
+            path: path
+          });
+
+          this.$store.commit("MENUTITLE", item.menuName);
+        } else {
+          if (location.href.indexOf(menuAction) >= 0) {
+            //表示线上同源下跳转
+            this.$router.push({
+              path: path
+            });
+            this.$store.commit("MENUTITLE", item.menuName);
+          } else {
+            location.href = menuAction + "#" + path;
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet" scoped>
+.el-menu-ul ol {
+  display: none;
+  margin-left: 7px;
+  /* transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
+  transform: translateY(0); */
+}
+.el-menu-ul li ol li.active .el-dl-list-box,
+.el-menu-ul ol.active,
+.el-menu-ul li a.active + ol {
+  display: block;
+}
+
+.el-menu-ul .active ol,
+.el-menu-ul .active + ol {
+  display: block;
+}
+
+.el-menu-vertical-demo {
+  width: 196px;
+  margin-top: 12px;
+}
+.user-icon {
+  display: block;
+  height: 80px;
+  overflow: hidden;
+  background: url("../../../../../assets/nav/admin.png") center no-repeat;
+}
+.top-logo {
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+  margin-bottom: 2px;
+  background: #fff;
+}
+.top-logo img {
+  height: 70px;
+}
+.el-menu-vertical-demo {
+  background: none;
+}
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+.el-menu-vertical {
+  width: 100%;
+  height: 100%;
+  border-right: none;
+}
+
+.el-menu-item:hover,
+.el-menu-item:hover a,
+.el-menu-item:hover a i {
+  background: #f1f8ff !important;
+}
+.el-menu-item.is-active,
+.el-menu-item.is-active a,
+.el-menu-item.is-active a i {
+  background: #f1f8ff !important;
+}
+
+.header-img {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: #eee;
+  margin: 20px 0 0px;
+  text-align: center;
+}
+.header-container {
+  display: block;
+}
+.header-container span {
+  display: block;
+  color: #666;
+  line-height: 30px;
+}
+.el-submenu .el-menu-item {
+  min-width: 196px;
+}
+.tool-menu-svg {
+  font-size: 14px;
+  width: 196px;
+  /*height: 150px;*/
+  text-align: center;
+  /*position: absolute;*/
+  z-index: 12;
+  background: #fff;
+  border-bottom: solid 1px #eee;
+  padding-bottom: 10px;
+  /* box-shadow: -5px 2px 10px 0 #333; */
+}
+.my-youfu {
+  display: block;
+  height: 50px;
+  line-height: 50px;
+  background: #f1f8ff;
+  color: #2171d2;
+  margin-top: 30px;
+  position: relative;
+}
+.my-youfu:after {
+  content: "";
+  display: block;
+  width: 4px;
+  background: #2171d2;
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  top: 0;
+}
+.app-scroll-container {
+  /*    margin-top: 72px;
+        padding-bottom: 72px;*/
+  margin-top: 60px;
+}
+.app-scroll-container.scroll-container {
+  background: #fff;
+}
+.el-menu-custom {
+  margin-left: 34px;
+  width: 140px;
+}
+.el-menu-list {
+  /* border-top: 1px solid #666; */
+  min-width: 160px !important;
+  border-left: 1px solid #999;
+  padding: 0px !important;
+}
+.el-menu-ul a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.el-menu-list i {
+  width: 20px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+}
+.el-menu-list span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+  margin-right: 6px;
+}
+
+.el-menu-ul {
+  margin: 0px 15px;
+  width: 166px;
+  font-size: 14px;
+  line-height: 42px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.el-dl-list-box {
+  display: none;
+}
+.el-dl-list-box a {
+  display: block;
+}
+.el-menu-ul ol li {
+  position: relative;
+}
+.el-menu-ul ol li:last-child .el-dl-list-box a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 0px;
+}
+.el-dl-list-box a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 44px;
+}
+
+.el-menu-ul ol li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 44px;
+}
+.el-menu-ul ol li:last-child::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 23px;
+}
+.el-menu-ul i {
+  font-size: 16px;
+  margin-right: 5px;
+  display: inline-block;
+}
+.el-menu-box a {
+  color: #666;
+}
+.el-menu-box {
+  position: relative;
+}
+.el-menu-box ~ .el-menu-box {
+  /* border-top: 1px solid #eee; */
+  margin-top: 20px;
+}
+.el-container-box {
+  background: #fff;
+  /*margin-top: 150px;*/
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.el-li-title span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+  margin-right: 6px;
+}
+.el-li-title.active + dl {
+  display: block;
+}
+.el-li-title em {
+  width: 15px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+  vertical-align: middle;
+}
+.el-dd-list {
+  display: block;
+  font-size: 12px;
+  color: #999;
+  padding-left: 45px;
+}
+.el-li-title i.el-icon {
+  font-size: 12px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+</style>
+

package/src/views/layout/theme/darkBlue/components/LeftNavbar.3.vue

@@ -0,0 +1,191 @@
+<template>
+    <div :class="{'is-active':sidebar.appNavOpen}" class="el-menu-vertical-demo" :style="{height:height+'px'}">
+        <div class="tool-menu-svg">
+           <a class="logo-container">
+               <img src="../assets/logo.png">
+           </a>
+        </div>
+        <scroll-bar class="app-scroll-container">
+          
+          <el-menu
+            default-active="2"
+            class="el-menu-vertical-demo"
+            background-color="#fff"
+            @open="handleOpen"
+            @close="handleClose">
+            <el-submenu v-for="item in appList.list" :key="item.menuJspath" :index="item.menuJspath || item.proappMenuCode">
+              <template slot="title">
+                <i class="iconfont icon-shangpinguanli" :class="item.proappMenuRemark"></i>
+                <span>{{item.menuName}}</span>
+              </template>
+              <el-menu-item  v-for="itemT in item.children" v-if="itemT.children===null" :key="itemT.menuJspath" :index="itemT.menuJspath || itemT.proappMenuCode">{{itemT.menuName}}</el-menu-item>
+              <el-submenu v-for="itemT in item.children" v-if="itemT.children!==null" :key="itemT.menuJspath" :index="itemT.menuJspath || itemT.proappMenuCode">
+                <template slot="title">{{itemT.menuName}}</template>
+                <el-menu-item v-for="itemTr in itemT.children" :key="itemTr.menuJspath" :index="itemTr.menuJspath || itemTr.proappMenuCode">{{itemTr.menuName}}</el-menu-item>
+              </el-submenu>
+            </el-submenu>
+
+          </el-menu>
+       </scroll-bar>
+       
+    </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import ScrollBar from "#/components/ScrollBar";
+
+export default {
+  components: { ScrollBar },
+  data() {
+    return {
+      appActive: process.env.APP_PATH, // 当前点击的项目名称
+      height: document.documentElement.clientHeight - 58 - 40,
+      isCollapse: true
+    };
+  },
+  mounted() {
+    window.addEventListener("resize", this.heightChange);
+    console.log(this.appList, "applist");
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      if (!key) {
+        return;
+      }
+      var url = "";
+      this.appList.list.forEach(item => {
+        if (item.menuJspath === key) {
+          url = item.menuAction;
+        }
+      });
+      window.location.href = url;
+      console.log(key, keyPath);
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    heightChange() {
+      this.height = document.documentElement.clientHeight - 58 - 40;
+    }
+  }
+};
+</script>
+<style>
+/* .el-submenu__title {
+  padding: 0 !important;
+} */
+.el-menu-item-group__title {
+  padding: 0px !important;
+}
+</style>
+
+<style rel="stylesheet" lang="scss" scoped>
+.el-menu-vertical-demo {
+  /* position: absolute; */
+  width: 196px;
+  /* left: 0;
+      top:0;
+      bottom: 0; */
+  background: #fff;
+  transition: width 0.43s;
+  overflow: overlay;
+}
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+.el-menu-vertical {
+  width: 100%;
+  height: 100%;
+  border-right: none;
+}
+
+.el-menu-item:hover,
+.el-menu-item:hover a,
+.el-menu-item:hover a i {
+  background: #243646 !important;
+  color: #fff;
+}
+.el-menu-item.is-active,
+.el-menu-item.is-active a,
+.el-menu-item.is-active a i {
+  background: #243646 !important;
+  color: #fff;
+}
+.el-menu-item.is-active {
+  border-right: 3px solid #243646;
+}
+// #app .nest-menu .el-submenu > .el-submenu__title,
+// #app .el-submenu .el-menu-item {
+//   background: none;
+// }
+.logo-container {
+  overflow: hidden;
+  display: inline-block;
+  width: 48px;
+  height: 80px;
+  border-radius: 50%;
+  background: #eee;
+  margin: 5px auto;
+  text-align: center;
+}
+.logo-container img {
+  width: 100%;
+  max-width:145px;
+  max-height:50px;
+  border-radius: 50%;
+}
+.el-submenu .el-menu-item {
+  min-width: 196px;
+}
+.tool-menu-svg {
+  font-size: 14px;
+  width: 196px;
+  height: 190px;
+  text-align: center;
+  position: absolute;
+  z-index: 12;
+  background: #fff;
+  /* box-shadow: -5px 2px 10px 0 #333; */
+}
+.app-scroll-container {
+  /*    margin-top: 72px;
+        padding-bottom: 72px;*/
+  margin-top: 190px;
+}
+.app-scroll-container.scroll-container {
+  background: #fff;
+}
+.el-menu-custom {
+  margin-left: 34px;
+  width: 140px;
+}
+.el-menu-list {
+  /* border-top: 1px solid #666; */
+  min-width: 160px !important;
+  border-left: 1px solid #999;
+  padding: 0px !important;
+}
+
+.el-menu-list i {
+  width: 20px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+}
+.el-menu-list span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #666;
+  margin-right: 6px;
+}
+</style>
+