qj-common 4.3.0 → 4.3.2

package/src/views/layout-default/Layout.vue

@@ -1,134 +1,134 @@
-<template>
-  <div class="app-wrapper" :class="[sidebar.opened ? 'hideSidebar' : '',customColor]">
-    <!-- <el-container>
-      <el-aside  ><sidebar class="sidebar-container"></sidebar></el-aside>
-      <el-container>
-        <el-header><navbar></navbar></el-header>
-        <el-main><app-main :style="{height:height+'px'}"></app-main></el-main>
-        <el-footer><app-footer></app-footer></el-footer>
-      </el-container>
-    </el-container>-->
-    <left-nav></left-nav>
-    <div class="left-menu-container" :class="{'is-collapse': sidebar.appNavOpen}">
-      <sidebar class="sidebar-container"></sidebar>
-
-      <div class="main-container">
-        <!-- <div v-if="!isIndex" class="nav-collapsed" @click="toggleSideBar">
-            <img src="./assets/open.png">
-        </div>-->
-        <navbar @themeClick="themeClick"></navbar>
-        <theme-picker :theme="theme"></theme-picker>
-        <app-main :style="{height:height+'px'}"></app-main>
-        <!-- <app-footer></app-footer> -->
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import "#/iconShop/iconfont.css";
-import { mapGetters } from "vuex";
-import LeftNav from "./components/LeftNavbar";
-import { Navbar, Sidebar, AppMain, AppFooter } from "./components";
-import ThemePicker from "#/components/ThemePicker";
-
-export default {
-  name: "layout",
-  components: {
-    Navbar,
-    Sidebar,
-    AppMain,
-    AppFooter,
-    LeftNav,
-    ThemePicker
-  },
-  data() {
-    return {
-      isIndex: false,
-      isCollapse: false,
-      height: document.documentElement.clientHeight - 50,
-      customColor: "custom-409eff",
-      theme: "#409eff"
-    };
-  },
-  computed: {
-    ...mapGetters(["sidebar"])
-  },
-  mounted() {
-    if (process.env.APP_PATH === "index") {
-      if (!this.sidebar.opened) {
-        this.$store.dispatch("ToggleSideBar");
-      }
-      this.isIndex = true;
-    }
-    window.addEventListener("resize", this.heightChange);
-    this.$store.dispatch("GetInfo");
-  },
-  methods: {
-    /*    toggleSideBar() {
-      this.$store.dispatch("ToggleSideBar");
-    },*/
-    heightChange(val) {
-      this.height = document.documentElement.clientHeight - 58 - 60;
-    },
-    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;
-    }
-  }
-};
-</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 {
-  @include clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  .left-menu-container {
-    position: relative;
-    margin-left: 126px;
-    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>
+<template>
+  <div class="app-wrapper" :class="[sidebar.opened ? 'hideSidebar' : '',customColor]">
+    <!-- <el-container>
+      <el-aside  ><sidebar class="sidebar-container"></sidebar></el-aside>
+      <el-container>
+        <el-header><navbar></navbar></el-header>
+        <el-main><app-main :style="{height:height+'px'}"></app-main></el-main>
+        <el-footer><app-footer></app-footer></el-footer>
+      </el-container>
+    </el-container>-->
+    <left-nav></left-nav>
+    <div class="left-menu-container" :class="{'is-collapse': sidebar.appNavOpen}">
+      <sidebar class="sidebar-container"></sidebar>
+
+      <div class="main-container">
+        <!-- <div v-if="!isIndex" class="nav-collapsed" @click="toggleSideBar">
+            <img src="./assets/open.png">
+        </div>-->
+        <navbar @themeClick="themeClick"></navbar>
+        <theme-picker :theme="theme"></theme-picker>
+        <app-main :style="{height:height+'px'}"></app-main>
+        <!-- <app-footer></app-footer> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import "#/iconShop/iconfont.css";
+import { mapGetters } from "vuex";
+import LeftNav from "./components/LeftNavbar";
+import { Navbar, Sidebar, AppMain, AppFooter } from "./components";
+import ThemePicker from "#/components/ThemePicker";
+
+export default {
+  name: "layout",
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    AppFooter,
+    LeftNav,
+    ThemePicker
+  },
+  data() {
+    return {
+      isIndex: false,
+      isCollapse: false,
+      height: document.documentElement.clientHeight - 50,
+      customColor: "custom-409eff",
+      theme: "#409eff"
+    };
+  },
+  computed: {
+    ...mapGetters(["sidebar"])
+  },
+  mounted() {
+    if (process.env.APP_PATH === "index") {
+      if (!this.sidebar.opened) {
+        this.$store.dispatch("ToggleSideBar");
+      }
+      this.isIndex = true;
+    }
+    window.addEventListener("resize", this.heightChange);
+    this.$store.dispatch("GetInfo");
+  },
+  methods: {
+    /*    toggleSideBar() {
+      this.$store.dispatch("ToggleSideBar");
+    },*/
+    heightChange(val) {
+      this.height = document.documentElement.clientHeight - 58 - 60;
+    },
+    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;
+    }
+  }
+};
+</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 {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  .left-menu-container {
+    position: relative;
+    margin-left: 126px;
+    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-default/components/AppMain.vue

@@ -1,19 +1,19 @@
-<template>
-  <section class="app-main">
-    <transition name="fade" mode="out-in">
-      <!-- <router-view :key="key"></router-view> -->
-      <router-view></router-view>
-    </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>
+<template>
+  <section class="app-main">
+    <transition name="fade" mode="out-in">
+      <!-- <router-view :key="key"></router-view> -->
+      <router-view></router-view>
+    </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-default/components/Footer.vue

@@ -1,22 +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>
-
+<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-default/components/LeftNavbar.vue

@@ -1,164 +1,164 @@
-<template>
-  <div :class="{'is-active':sidebar.appNavOpen}" class="el-menu-vertical-demo">
-    <div class="tool-menu-svg">
-      <a class="logo-container" @click="navigator">
-        <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 appList.list"
-          :key="item.menuJspath"
-          :index="item.menuJspath || item.proappMenuCode"
-        >
-          <a :href="item.menuAction">
-            <!--  <i class="iconfont icon-shangpinguanli" :class="item.proappMenuRemark"></i> -->
-          </a>
-          <a :href="item.menuAction" slot="title">{{ item.menuName}}</a>
-        </el-menu-item>
-      </el-menu>
-    </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: "/paas/index",
-      appActive: process.env.APP_PATH, // 当前点击的项目名称
-      height: document.documentElement.clientHeight - 58
-    };
-  },
-  computed: {
-    ...mapGetters(["appList", "sidebar"])
-  },
-  created() {
-    this.getAppInfo();
-  },
-  // mounted() {
-  //   console.log(this.appList, "console.log");
-  // },
-  methods: {
-    navigator() {
-      window.sessionStorage.setItem("menuCode", '');
-      window.location.href = process.env.API_ROOT + this.indexHref;
-    },
-    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);
-    },
-    getAppInfo() {
-      let imgLogo = JSON.parse(
-        window.sessionStorage.getItem("proappEnvLayout")
-      );
-      if (imgLogo) {
-        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);
-            this.logoImg = data.proappEnvLogo;
-          }
-        });
-      }
-    }
-  }
-};
-</script>
-<style>
-</style>
-
-<style rel="stylesheet" scoped>
-.el-menu-vertical-demo {
-  position: absolute;
-  width: 126px;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  transition: width 0.43s;
-  /* background: #2c4158; */
-}
-.el-menu-vertical-demo.is-active {
-  width: 50px;
-}
-.app-scroll-container {
-  margin-top: 60px;
-  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;
-  text-indent: -10px;
-  color: #fff;
-}
-.el-menu-item.is-active {
-  background: #eee;
-}
-.logo-container {
-  display: block;
-  text-align: center;
-  border-radius: 50%;
-  height: 48px;
-  width: 48px;
-  margin: 5px auto;
-  overflow: hidden;
-}
-.logo-container img {
-  /*margin-top: 10px;*/
-  /*margin-bottom: 20px;*/
-  max-width: 145px;
-  max-height: 60px;
-}
-.tool-menu-svg {
-  font-size: 14px;
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  z-index: 12;
-  background: inherit;
-  /* box-shadow: -5px 2px 10px 0 #303747; */
-}
-
-.app-scroll-container.scroll-container {
-  background: none !important;
-}
-</style>
-
+<template>
+  <div :class="{'is-active':sidebar.appNavOpen}" class="el-menu-vertical-demo">
+    <div class="tool-menu-svg">
+      <a class="logo-container" @click="navigator">
+        <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 appList.list"
+          :key="item.menuJspath"
+          :index="item.menuJspath || item.proappMenuCode"
+        >
+          <a :href="item.menuAction">
+            <!--  <i class="iconfont icon-shangpinguanli" :class="item.proappMenuRemark"></i> -->
+          </a>
+          <a :href="item.menuAction" slot="title">{{ item.menuName}}</a>
+        </el-menu-item>
+      </el-menu>
+    </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: "/paas/index",
+      appActive: process.env.APP_PATH, // 当前点击的项目名称
+      height: document.documentElement.clientHeight - 58
+    };
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  created() {
+    this.getAppInfo();
+  },
+  // mounted() {
+  //   console.log(this.appList, "console.log");
+  // },
+  methods: {
+    navigator() {
+      window.sessionStorage.setItem("menuCode", '');
+      window.location.href = process.env.API_ROOT + this.indexHref;
+    },
+    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);
+    },
+    getAppInfo() {
+      let imgLogo = JSON.parse(
+        window.sessionStorage.getItem("proappEnvLayout")
+      );
+      if (imgLogo) {
+        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);
+            this.logoImg = data.proappEnvLogo;
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+<style>
+</style>
+
+<style rel="stylesheet" scoped>
+.el-menu-vertical-demo {
+  position: absolute;
+  width: 126px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  transition: width 0.43s;
+  /* background: #2c4158; */
+}
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+.app-scroll-container {
+  margin-top: 60px;
+  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;
+  text-indent: -10px;
+  color: #fff;
+}
+.el-menu-item.is-active {
+  background: #eee;
+}
+.logo-container {
+  display: block;
+  text-align: center;
+  border-radius: 50%;
+  height: 48px;
+  width: 48px;
+  margin: 5px auto;
+  overflow: hidden;
+}
+.logo-container img {
+  /*margin-top: 10px;*/
+  /*margin-bottom: 20px;*/
+  max-width: 145px;
+  max-height: 60px;
+}
+.tool-menu-svg {
+  font-size: 14px;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  z-index: 12;
+  background: inherit;
+  /* box-shadow: -5px 2px 10px 0 #303747; */
+}
+
+.app-scroll-container.scroll-container {
+  background: none !important;
+}
+</style>
+