@hbisty/qj-common 5.0.4 → 5.0.6

package/src/views/layout/components/LeftNavbar.vue

@@ -1,318 +1,318 @@
-<template>
-  <div :class="{ 'is-active': sidebar.appNavOpen }" class="el-menu-vertical-demo"
-    :style="{ 'height': heightAll + 'px' }">
-    <div class="tool-menu-svg">
-      <a class="logo-container" @click="navigator">
-        <!-- :href="indexHref" -->
-        <img :src="logoImg" />
-      </a>
-    </div>
-    <div class="app-scroll-container" :style="{ height: height + 'px' }">
-      <el-menu :default-active="appActive" @select="handleSelect" class="el-menu-vertical">
-        <el-menu-item v-for="item in topAppList" :key="item.proappMenuCode" :index="item.proappMenuCode"
-          @click="navBar(item)">
-          <!-- :href="item.menuAction" -->
-          <a :title="item.menuName" slot="title">{{ item.menuName }}</a>
-        </el-menu-item>
-      </el-menu>
-    </div>
-    <div class="app-menu-fixed">
-      <hr />
-      <ul>
-        <li v-for="(item, index) in bottomAppList" :key="index"
-          :class="[item.proappModelCode == appActive ? 'c-theme' : '']">
-          <a @click="openHref(item)" :class="[item.proappMenuCode == appActive ? 'c-theme' : '']">
-            <i :class="['iconfont', item.menuDefaultClass ? item.menuDefaultClass : 'icon-caidan-shi']"></i>
-            {{ item.menuName }}
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import { getProappinfo } from "#/api/login";
-import ScrollBar from "#/components/ScrollBar";
-export default {
-  components: { ScrollBar },
-  data() {
-    return {
-      logoImg: require("../assets/logo.png"),
-      indexHref: "#",
-      appActive: null, // 当前点击的项目名称
-      height: 800,
-      topAppList: [], // 上面菜单
-      bottomAppList: [], //下面菜单
-      proappEnvOpentype: window.sessionStorage.getItem("proappEnvLayout")
-        ? JSON.parse(window.sessionStorage.getItem("proappEnvLayout"))
-          .proappEnvOpentype
-        : null, //默认是null
-      heightAll: document.documentElement.clientHeight,
-      secDomainName: null
-    };
-  },
-  computed: {
-    ...mapGetters(["appList", "sidebar"])
-  },
-  created() {
-
-    this.getAppInfo();
-    console.log(this.$route.meta.menuCode, "this.$route.meta.menuCode");
-    let menuCode = sessionStorage.getItem('menuCode') ? sessionStorage.getItem('menuCode') : null
-    if (this.$route.path && this.$route.meta) {
-      if ('title' in this.$route.meta && 'icon' in this.$route.meta && 'menuCode' in this.$route.meta && 'params' in this.$route.meta && this.$store.name !== '首页') {
-        menuCode = sessionStorage.getItem('menuCode') ? sessionStorage.getItem('menuCode') : localStorage.getItem('menuCode') ? localStorage.getItem('menuCode') : null
-
-      }
-    }
-    this.appActive = this.$route.meta.menuCode ? this.$route.meta.menuCode : menuCode ? menuCode : null;;
-    console.log(this.appActive, "this.appActive ");
-
-  },
-  mounted() {
-    this.handleAppList();
-    this.indexHref = JSON.parse(
-      window.sessionStorage.getItem("proappEnvLayout")
-    ) ? JSON.parse(
-      window.sessionStorage.getItem("proappEnvLayout")
-    ).proappEnvIndex : '';
-    window.addEventListener("resize", this.heightChange);
-    this.secDomainName = sessionStorage.getItem('secDomainName') ? sessionStorage.getItem('secDomainName') : null
-  },
-  methods: {
-    navigator() {
-      window.sessionStorage.setItem("menuCode", '');
-      window.location.href = process.env.API_ROOT + this.indexHref;
-    },
-    openHref(item) {
-      window.sessionStorage.setItem("menuCode", item.proappModelCode);
-      window.localStorage.setItem("menuCode", item.proappModelCode);
-      this.handlerMenu(item);
-    },
-    handleAppList() {
-      this.topAppList = [];
-      this.bottomAppList = [];
-      let menuList = window.sessionStorage.getItem("menuList")
-        ? JSON.parse(window.sessionStorage.getItem("menuList")).menuList
-        : [];
-      menuList.forEach(res => {
-        // 处理菜单top和bottom 的问题
-        if (
-          res.proappMenuConfig === "bottom" &&
-          res.children &&
-          res.children.length > 0
-        ) {
-          this.bottomAppList.push(res);
-        } else if (res.children && res.children.length > 0) {
-          this.topAppList.push(res);
-          // console.log(this.topAppList, "this.topAppList");
-        }
-        this.height =
-          document.documentElement.clientHeight -
-          116 -
-          this.bottomAppList.length * 46;
-      });
-    },
-    getAppInfo() {
-      let imgLogo = JSON.parse(
-        window.sessionStorage.getItem("proappEnvLayout")
-      );
-      if (imgLogo) {
-        if (imgLogo.proappEnvLogo.indexOf('http') > -1) {
-          this.logoImg = imgLogo.proappEnvLogo;
-        } else if (this.secDomainName) {
-          this.logoImg = this.secDomainName + imgLogo.proappEnvLogo;
-        } else {
-          this.logoImg = imgLogo.proappEnvLogo;
-        }
-        // this.indexHref = imgLogo.proappEnvIndexr;
-      } else {
-        getProappinfo().then(data => {
-          // console.log(data, "data");
-          if (data) {
-            // this.indexHref = data.proappEnvIndexr;
-            window.sessionStorage.setItem(
-              "proappEnvLayout",
-              JSON.stringify(data)
-            );
-            this.$store.commit("setProappEnvLayout", data);
-
-            if (data.proappEnvLogo.indexOf('http') > -1) {
-              this.logoImg = data.proappEnvLogo;
-            } else if (this.secDomainName) {
-              this.logoImg = this.secDomainName + data.proappEnvLogo;
-            } else {
-              this.logoImg = data.proappEnvLogo;
-            }
-
-          }
-        });
-      }
-    },
-    navBar(item) {
-      console.log(item, "item");
-      if (location.href.indexOf("localhost") >= 0) {
-        return false;
-      } else {
-        if (item.menuName === '首页') {
-          window.sessionStorage.removeItem("menuCode");
-        } else {
-          window.sessionStorage.setItem("menuCode", item.proappModelCode);
-          window.localStorage.setItem("menuCode", item.proappModelCode);
-        }
-        this.handlerMenu(item);
-      }
-    },
-    handlerMenu(item) {
-      for (let i = 0; i < item.children.length; i++) {
-        let el = item.children[i];
-        if (el.children) {
-          this.handlerMenu(el);
-          break;
-        } else if (el.menuShow == 0) {
-          console.log(el);
-          let url =
-            this.proappEnvOpentype != "/"
-              ? `${el.menuTarget}#/${el.proappMenuPcode}/${el.menuAction}`
-              : `${el.menuTarget}#/${el.menuAction}`;
-          url = this.secDomainName && (url.indexOf('http') == -1) ? this.secDomainName + url : url
-          location.href = url;
-          break;
-        }
-      }
-    },
-    heightChange() {
-      console.log("开始发生改变");
-      this.heightAll = document.documentElement.clientHeight;
-      this.height = this.heightAll - 116 - this.bottomAppList.length * 46;
-    }
-  },
-  watch: {
-    appList: {
-      handler() {
-        this.handleAppList();
-      },
-      deep: true
-    }
-  }
-};
-</script>
-<style></style>
-
-<style rel="stylesheet" scoped>
-.app-menu-fixed li.c-theme {
-  background: #fff;
-}
-
-.el-menu-vertical-demo {
-  position: absolute;
-  width: 98px;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  transition: width 0.43s;
-  z-index: 1002;
-}
-
-.el-menu-vertical-demo.is-active {
-  width: 50px;
-}
-
-.app-scroll-container {
-  margin-top: 100px;
-  overflow: auto;
-  background: inherit;
-}
-
-.app-scroll-container .el-menu {
-  background: none;
-}
-
-.el-menu-vertical {
-  width: 100%;
-  height: 100%;
-
-  border-right: none;
-}
-
-.el-menu-vertical .el-menu-item {
-  height: 44px;
-  line-height: 44px;
-  font-size: 14px;
-  font-weight: 500;
-  text-align: center;
-  padding: 0 !important;
-  color: #fff;
-  font-weight: bold;
-  font-family: "微软雅黑";
-}
-
-.el-menu-vertical .el-menu-item a {
-  width: 4em;
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.el-menu-item.is-active {
-  background: #fff;
-}
-
-.logo-container {
-  display: block;
-  text-align: center;
-  border-radius: 50%;
-  height: 70px;
-  width: 70px;
-  margin: 20px auto 10px;
-  overflow: hidden;
-  background: #fff;
-}
-
-.logo-container img {
-  /*margin-top: 10px;*/
-  /*margin-bottom: 20px;*/
-  width: 100%;
-  height: 100%;
-}
-
-.tool-menu-svg {
-  font-size: 14px;
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  z-index: 12;
-}
-
-.app-scroll-container.scroll-container {
-  background: none !important;
-}
-
-.app-menu-fixed hr {
-  border: none;
-  height: 2px;
-  background: #41495b;
-  margin-bottom: 10px;
-}
-
-.app-menu-fixed ul li {
-  height: 46px;
-  line-height: 46px;
-  color: #fff;
-  font-size: 14px;
-  font-weight: bold;
-  text-align: center;
-}
-
-.app-menu-fixed ul li i {
-  margin-right: 8px;
-}
-
-.app-menu-fixed ul li.is-active {
-  color: #363e50;
-  background: #fff;
-}
-</style>
+<template>
+  <div :class="{ 'is-active': sidebar.appNavOpen }" class="el-menu-vertical-demo"
+    :style="{ 'height': heightAll + 'px' }">
+    <div class="tool-menu-svg">
+      <a class="logo-container" @click="navigator">
+        <!-- :href="indexHref" -->
+        <img :src="logoImg" />
+      </a>
+    </div>
+    <div class="app-scroll-container" :style="{ height: height + 'px' }">
+      <el-menu :default-active="appActive" @select="handleSelect" class="el-menu-vertical">
+        <el-menu-item v-for="item in topAppList" :key="item.proappMenuCode" :index="item.proappMenuCode"
+          @click="navBar(item)">
+          <!-- :href="item.menuAction" -->
+          <a :title="item.menuName" slot="title">{{ item.menuName }}</a>
+        </el-menu-item>
+      </el-menu>
+    </div>
+    <div class="app-menu-fixed">
+      <hr />
+      <ul>
+        <li v-for="(item, index) in bottomAppList" :key="index"
+          :class="[item.proappModelCode == appActive ? 'c-theme' : '']">
+          <a @click="openHref(item)" :class="[item.proappMenuCode == appActive ? 'c-theme' : '']">
+            <i :class="['iconfont', item.menuDefaultClass ? item.menuDefaultClass : 'icon-caidan-shi']"></i>
+            {{ item.menuName }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { getProappinfo } from "#/api/login";
+import ScrollBar from "#/components/ScrollBar";
+export default {
+  components: { ScrollBar },
+  data() {
+    return {
+      logoImg: require("../assets/logo.png"),
+      indexHref: "#",
+      appActive: null, // 当前点击的项目名称
+      height: 800,
+      topAppList: [], // 上面菜单
+      bottomAppList: [], //下面菜单
+      proappEnvOpentype: window.sessionStorage.getItem("proappEnvLayout")
+        ? JSON.parse(window.sessionStorage.getItem("proappEnvLayout"))
+          .proappEnvOpentype
+        : null, //默认是null
+      heightAll: document.documentElement.clientHeight,
+      secDomainName: null
+    };
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  created() {
+
+    this.getAppInfo();
+    console.log(this.$route.meta.menuCode, "this.$route.meta.menuCode");
+    let menuCode = sessionStorage.getItem('menuCode') ? sessionStorage.getItem('menuCode') : null
+    if (this.$route.path && this.$route.meta) {
+      if ('title' in this.$route.meta && 'icon' in this.$route.meta && 'menuCode' in this.$route.meta && 'params' in this.$route.meta && this.$store.name !== '首页') {
+        menuCode = sessionStorage.getItem('menuCode') ? sessionStorage.getItem('menuCode') : localStorage.getItem('menuCode') ? localStorage.getItem('menuCode') : null
+
+      }
+    }
+    this.appActive = this.$route.meta.menuCode ? this.$route.meta.menuCode : menuCode ? menuCode : null;;
+    console.log(this.appActive, "this.appActive ");
+
+  },
+  mounted() {
+    this.handleAppList();
+    this.indexHref = JSON.parse(
+      window.sessionStorage.getItem("proappEnvLayout")
+    ) ? JSON.parse(
+      window.sessionStorage.getItem("proappEnvLayout")
+    ).proappEnvIndex : '';
+    window.addEventListener("resize", this.heightChange);
+    this.secDomainName = sessionStorage.getItem('secDomainName') ? sessionStorage.getItem('secDomainName') : null
+  },
+  methods: {
+    navigator() {
+      window.sessionStorage.setItem("menuCode", '');
+      window.location.href = process.env.API_ROOT + this.indexHref;
+    },
+    openHref(item) {
+      window.sessionStorage.setItem("menuCode", item.proappModelCode);
+      window.localStorage.setItem("menuCode", item.proappModelCode);
+      this.handlerMenu(item);
+    },
+    handleAppList() {
+      this.topAppList = [];
+      this.bottomAppList = [];
+      let menuList = window.sessionStorage.getItem("menuList")
+        ? JSON.parse(window.sessionStorage.getItem("menuList")).menuList
+        : [];
+      menuList.forEach(res => {
+        // 处理菜单top和bottom 的问题
+        if (
+          res.proappMenuConfig === "bottom" &&
+          res.children &&
+          res.children.length > 0
+        ) {
+          this.bottomAppList.push(res);
+        } else if (res.children && res.children.length > 0) {
+          this.topAppList.push(res);
+          // console.log(this.topAppList, "this.topAppList");
+        }
+        this.height =
+          document.documentElement.clientHeight -
+          116 -
+          this.bottomAppList.length * 46;
+      });
+    },
+    getAppInfo() {
+      let imgLogo = JSON.parse(
+        window.sessionStorage.getItem("proappEnvLayout")
+      );
+      if (imgLogo) {
+        if (imgLogo.proappEnvLogo.indexOf('http') > -1) {
+          this.logoImg = imgLogo.proappEnvLogo;
+        } else if (this.secDomainName) {
+          this.logoImg = this.secDomainName + imgLogo.proappEnvLogo;
+        } else {
+          this.logoImg = imgLogo.proappEnvLogo;
+        }
+        // this.indexHref = imgLogo.proappEnvIndexr;
+      } else {
+        getProappinfo().then(data => {
+          // console.log(data, "data");
+          if (data) {
+            // this.indexHref = data.proappEnvIndexr;
+            window.sessionStorage.setItem(
+              "proappEnvLayout",
+              JSON.stringify(data)
+            );
+            this.$store.commit("setProappEnvLayout", data);
+
+            if (data.proappEnvLogo.indexOf('http') > -1) {
+              this.logoImg = data.proappEnvLogo;
+            } else if (this.secDomainName) {
+              this.logoImg = this.secDomainName + data.proappEnvLogo;
+            } else {
+              this.logoImg = data.proappEnvLogo;
+            }
+
+          }
+        });
+      }
+    },
+    navBar(item) {
+      console.log(item, "item");
+      if (location.href.indexOf("localhost") >= 0) {
+        return false;
+      } else {
+        if (item.menuName === '首页') {
+          window.sessionStorage.removeItem("menuCode");
+        } else {
+          window.sessionStorage.setItem("menuCode", item.proappModelCode);
+          window.localStorage.setItem("menuCode", item.proappModelCode);
+        }
+        this.handlerMenu(item);
+      }
+    },
+    handlerMenu(item) {
+      for (let i = 0; i < item.children.length; i++) {
+        let el = item.children[i];
+        if (el.children) {
+          this.handlerMenu(el);
+          break;
+        } else if (el.menuShow == 0) {
+          console.log(el);
+          let url =
+            this.proappEnvOpentype != "/"
+              ? `${el.menuTarget}#/${el.proappMenuPcode}/${el.menuAction}`
+              : `${el.menuTarget}#/${el.menuAction}`;
+          url = this.secDomainName && (url.indexOf('http') == -1) ? this.secDomainName + url : url
+          location.href = url;
+          break;
+        }
+      }
+    },
+    heightChange() {
+      console.log("开始发生改变");
+      this.heightAll = document.documentElement.clientHeight;
+      this.height = this.heightAll - 116 - this.bottomAppList.length * 46;
+    }
+  },
+  watch: {
+    appList: {
+      handler() {
+        this.handleAppList();
+      },
+      deep: true
+    }
+  }
+};
+</script>
+<style></style>
+
+<style rel="stylesheet" scoped>
+.app-menu-fixed li.c-theme {
+  background: #fff;
+}
+
+.el-menu-vertical-demo {
+  position: absolute;
+  width: 98px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  transition: width 0.43s;
+  z-index: 1002;
+}
+
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+
+.app-scroll-container {
+  margin-top: 100px;
+  overflow: auto;
+  background: inherit;
+}
+
+.app-scroll-container .el-menu {
+  background: none;
+}
+
+.el-menu-vertical {
+  width: 100%;
+  height: 100%;
+
+  border-right: none;
+}
+
+.el-menu-vertical .el-menu-item {
+  height: 44px;
+  line-height: 44px;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  padding: 0 !important;
+  color: #fff;
+  font-weight: bold;
+  font-family: "微软雅黑";
+}
+
+.el-menu-vertical .el-menu-item a {
+  width: 4em;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.el-menu-item.is-active {
+  background: #fff;
+}
+
+.logo-container {
+  display: block;
+  text-align: center;
+  border-radius: 50%;
+  height: 70px;
+  width: 70px;
+  margin: 20px auto 10px;
+  overflow: hidden;
+  background: #fff;
+}
+
+.logo-container img {
+  /*margin-top: 10px;*/
+  /*margin-bottom: 20px;*/
+  width: 100%;
+  height: 100%;
+}
+
+.tool-menu-svg {
+  font-size: 14px;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  z-index: 12;
+}
+
+.app-scroll-container.scroll-container {
+  background: none !important;
+}
+
+.app-menu-fixed hr {
+  border: none;
+  height: 2px;
+  background: #41495b;
+  margin-bottom: 10px;
+}
+
+.app-menu-fixed ul li {
+  height: 46px;
+  line-height: 46px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.app-menu-fixed ul li i {
+  margin-right: 8px;
+}
+
+.app-menu-fixed ul li.is-active {
+  color: #363e50;
+  background: #fff;
+}
+</style>

package/src/views/layout/components/NavMenu.vue

@@ -1,15 +1,15 @@
-<template>
-  <section class="nav-menu"></section>
-</template>
-<script>
-export default {};
-</script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-.nav-menu {
-  width: 200px;
-  background: red;
-  height: 100%;
-}
-</style>
-
-
+<template>
+  <section class="nav-menu"></section>
+</template>
+<script>
+export default {};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.nav-menu {
+  width: 200px;
+  background: red;
+  height: 100%;
+}
+</style>
+
+