@hbisty/qj-common 5.0.4

package/src/views/imgSwiper/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <ol class="demand-img flex">
+    <li :key="index" @click="preview(1)" v-for="(l, index) in authImgs">
+      <img v-lazy="l" alt />
+    </li>
+  </ol>
+</template>
+<script>
+export default {
+  props: {
+    authImgs: {
+      type: Array,
+      default: []
+    }
+  },
+  methods: {
+    preview(index) {
+      this.$imagePreview({
+        images: this.authImgs,
+        index: index
+      });
+    }
+  }
+};
+</script>
+<style lang="scss">
+.demand-img img {
+  width: 100px;
+  height: 100px;
+  margin-right: 10px;
+}
+.pswp {
+  z-index: 2100 !important;
+}
+</style>

package/src/views/layout/Layout.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="app-wrapper" :class="[sidebar.opened ? 'hideSidebar' : '', customColor]">
+    <left-nav></left-nav>
+    <!-- <div class="nav-left">
+      <nav-menu></nav-menu>
+    </div>-->
+
+    <div class="left-menu-container" :class="{ 'is-collapse': sidebar.appNavOpen }">
+      <sidebar class="sidebar-container" style="background:#fff" @getFirstLevelMenu="getFirstLevelMenu"></sidebar>
+      <div class="main-container">
+        <navbar @themeClick="themeClick" :firstLevelMenu="firstLevelMenu" :secondLevelMenu="secondLevelMenu"
+          :thirdLevelMenu="thirdLevelMenu">
+          <Internationalization @handleCommand="handleCommand"></Internationalization>
+        </navbar>
+        <app-main :style="{ height: height + 'px' }"></app-main>
+        <!-- <app-footer></app-footer> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Internationalization from "#/views/pc/Internationalization";
+import "#/iconShop/iconfont.css";
+import { mapGetters } from "vuex";
+import LeftNav from "./components/LeftNavbar";
+import { Navbar, Sidebar, AppMain, AppFooter, NavMenu } from "./components";
+export default {
+  name: "layout",
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    AppFooter,
+    LeftNav,
+    NavMenu,
+    Internationalization
+  },
+  data() {
+    return {
+      isIndex: false,
+      isCollapse: false,
+      height: document.documentElement.clientHeight - 54,
+      customColor: "custom-409eff",
+      theme: "#409eff",
+      firstLevelMenu: null,
+      secondLevelMenu: null,
+      thirdLevelMenu: null
+    };
+  },
+  computed: {
+    ...mapGetters(["sidebar"])
+  },
+  mounted() {
+    if ((process.env.APP_PATH === "index" && !this.$route.meta.menuCode) || this.$route.name == "首页") {
+      if (!this.sidebar.opened) {
+        this.$store.dispatch("ToggleSideBar");
+      }
+      this.isIndex = true;
+    } else {
+      this.$store.commit('TOGGLE_SIDEBAR1')
+    }
+    window.addEventListener("resize", this.heightChange);
+    this.$store.dispatch("GetInfo");
+  },
+  methods: {
+    /*    toggleSideBar() {
+      this.$store.dispatch("ToggleSideBar");
+    },*/
+    heightChange(val) {
+      this.height = document.documentElement.clientHeight - 50;
+    },
+    getFirstLevelMenu(title, second, third) {
+      // console.log(title, second, third, "title, second, third");
+      this.firstLevelMenu = title;
+      this.secondLevelMenu = second;
+      this.thirdLevelMenu = third;
+    },
+    toggleCollapse(val) {
+      this.isCollapse = val;
+    },
+    themeClick(color) {
+      //主题切换
+      this.customColor = "custom-" + color;
+      this.theme = "#" + color;
+      let bodyHtml = document.getElementsByTagName("body")[0];
+      // bodyHtml
+      bodyHtml.className = this.customColor;
+    },
+    handleCommand(item) {
+      console.log(this.$i18n, 'this.$i18nthis.$i18n')
+      if (this.$i18n) {
+        this.$i18n.locale = item.id;
+      }
+
+    }
+  },
+  activated() {
+    if ((process.env.APP_PATH === "index" && !this.$route.meta.menuCode) || this.$route.name == "首页") {
+      if (!this.sidebar.opened) {
+        this.$store.dispatch("ToggleSideBar");
+      }
+      this.isIndex = true;
+    } else {
+      this.$store.commit('TOGGLE_SIDEBAR1')
+    }
+    window.addEventListener("resize", this.heightChange);
+    this.$store.dispatch("GetInfo");
+  },
+  watch: {
+    $route: {
+      handler() {
+        console.log(this.$route);
+        if ((process.env.APP_PATH === "index" && !this.$route.meta.menuCode) || this.$route.name == "首页") {
+          if (!this.sidebar.opened && !(this.$route.path == "/404")) {
+            this.$store.dispatch("ToggleSideBar");
+          }
+        } else {
+          this.sidebar.opened = false;
+        }
+      }
+    }
+  }
+};
+</script>
+<style>
+.el-menu.navbar.el-menu--horizontal {
+  background-color: #fff !important;
+}
+
+html {
+  height: 100%;
+  overflow: hidden;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "../../../src/styles/mixin.scss";
+
+.app-wrapper {
+  // display: -webkit-flex; /* Safari */
+  // display: flex;
+  @include clearfix;
+  position: relative;
+  height: 100%;
+
+  // width: 100%;
+  .left-menu-container {
+    position: relative;
+    margin-left: 98px;
+    transition: all 0.4s;
+
+    .sidebar-container {
+      border-right: solid 1px #e5e5e5;
+      /*box-shadow: 2px 1px 5px #c0c7cf;*/
+    }
+  }
+
+  .is-collapse {
+    margin-left: 50px;
+  }
+
+  .nav-collapsed img {
+    position: absolute;
+    top: 48%;
+    left: -30px;
+    z-index: 1001;
+    width: 30px;
+    transition: 0.38s;
+    transform-origin: 50% 50%;
+    transform: rotateY(0deg);
+    cursor: pointer;
+  }
+}
+
+.hideSidebar {
+  .nav-collapsed img {
+    left: 0;
+    transform: rotateY(180deg);
+  }
+}
+</style>

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

@@ -0,0 +1,20 @@
+<template>
+  <section class="app-main">
+    <transition name="el-fade-in-linear" mode="out-in">
+      <keep-alive>
+        <router-view></router-view>
+      </keep-alive>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AppMain",
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
+};
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+    <div class="footer">
+        <span>@2018</span>
+        <span>copyright</span>
+    </div>
+</template>
+<script>
+export default {
+    
+}
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .footer{
+        height: 40px;
+        line-height: 40px;
+        border-top: 1px solid #e6e6e6;
+        span{
+            margin-left: 30px;
+        }
+    }
+</style>
+

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

@@ -0,0 +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>

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

@@ -0,0 +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>
+
+