qj-common 4.3.0 → 4.3.2

package/src/views/layout-default/components/Sidebar/SidebarItem.vue

@@ -1,67 +1,67 @@
-<template>
-  <div class="menu-wrapper el-menu-custom">
-    <template v-for="item in routes[0].children" v-if="!item.hidden&&item.meta">
-      <el-submenu v-if="item.children" :index="item.name||item.path" :key="item.name">
-        <template slot="title">
-          <span v-if="item.meta&&item.meta.title && !item.hidden">{{item.meta.title}}</span>
-        </template>
-
-        <template v-for="child in item.children" v-if="item.children">
-          <sidebar-item
-            :is-nest="true"
-            class="nest-menu"
-            v-if="child.children&&child.children.length>0"
-            :routes="[child]"
-            :key="child.path"
-          ></sidebar-item>
-
-          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
-            <el-menu-item :index="item.path+'/'+child.path">
-              <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
-            </el-menu-item>
-          </router-link>
-        </template>
-      </el-submenu>
-      <el-menu-item v-else :index="'/'+ item.path ">
-        <router-link :to=" '/'+ item.path " :key="item.path">
-          <span v-if="item.meta&&item.meta.title&& !item.hidden">{{item.meta.title}}</span>
-        </router-link>
-      </el-menu-item>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "SidebarItem",
-  props: {
-    routes: {
-      type: Array
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    }
-  },
-  mounted() {
-    console.log(this.routes, "=====++++==");
-    // this.loadData();
-  }
-};
-</script>
-<style rel="stylesheet" scoped>
-.menu-wrapper li.el-menu-item:focus,
-.menu-wrapper li.el-menu-item:hover,
-.menu-wrapper li.el-menu-item.is-active {
-  background-color: #fff !important;
-}
-.menu-wrapper li.el-menu-item {
-  height: 48px;
-  line-height: 44px;
-}
-</style>
-<style>
-.menu-wrapper {
-  font-size: 12px !important;
-}
-</style>
+<template>
+  <div class="menu-wrapper el-menu-custom">
+    <template v-for="item in routes[0].children" v-if="!item.hidden&&item.meta">
+      <el-submenu v-if="item.children" :index="item.name||item.path" :key="item.name">
+        <template slot="title">
+          <span v-if="item.meta&&item.meta.title && !item.hidden">{{item.meta.title}}</span>
+        </template>
+
+        <template v-for="child in item.children" v-if="item.children">
+          <sidebar-item
+            :is-nest="true"
+            class="nest-menu"
+            v-if="child.children&&child.children.length>0"
+            :routes="[child]"
+            :key="child.path"
+          ></sidebar-item>
+
+          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
+            <el-menu-item :index="item.path+'/'+child.path">
+              <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
+            </el-menu-item>
+          </router-link>
+        </template>
+      </el-submenu>
+      <el-menu-item v-else :index="'/'+ item.path ">
+        <router-link :to=" '/'+ item.path " :key="item.path">
+          <span v-if="item.meta&&item.meta.title&& !item.hidden">{{item.meta.title}}</span>
+        </router-link>
+      </el-menu-item>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarItem",
+  props: {
+    routes: {
+      type: Array
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    console.log(this.routes, "=====++++==");
+    // this.loadData();
+  }
+};
+</script>
+<style rel="stylesheet" scoped>
+.menu-wrapper li.el-menu-item:focus,
+.menu-wrapper li.el-menu-item:hover,
+.menu-wrapper li.el-menu-item.is-active {
+  background-color: #fff !important;
+}
+.menu-wrapper li.el-menu-item {
+  height: 48px;
+  line-height: 44px;
+}
+</style>
+<style>
+.menu-wrapper {
+  font-size: 12px !important;
+}
+</style>

package/src/views/layout-default/components/Sidebar/index.vue

@@ -1,59 +1,59 @@
-<template>
-  <div style="background:rgb(234, 237, 241)">
-    <div class="app-title">{{appList.name}}</div>
-    <scroll-bar>
-      <el-menu
-        mode="vertical"
-        class="el-menu-vertical-demo"
-        :default-active="$route.path"
-        background-color="#eaedf1"
-        @select="handleSelect"
-      >
-        <sidebar-item :routes="routes"></sidebar-item>
-      </el-menu>
-    </scroll-bar>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import SidebarItem from "./SidebarItem";
-import ScrollBar from "#/components/ScrollBar";
-
-export default {
-  components: { SidebarItem, ScrollBar },
-  methods: {
-    handleSelect(key, keyPath) {
-      console.log(key, keyPath);
-    }
-  },
-  computed: {
-    ...mapGetters(["appList"]),
-    routes() {
-      return this.$router.options.routes;
-    }
-  }
-};
-</script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-.sidebar-container {
-}
-.el-menu-vertical-demo {
-  padding-top: 48px;
-}
-.app-title {
-  height: 47px;
-  line-height: 48px;
-  text-align: center;
-  color: #333;
-  font-weight: bold;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  background: #fff;
-  font-size: 14px;
-  border-bottom: solid 1px #e5e5e5;
-  background: #f3f3f3;
-}
-</style>
-
+<template>
+  <div style="background:rgb(234, 237, 241)">
+    <div class="app-title">{{appList.name}}</div>
+    <scroll-bar>
+      <el-menu
+        mode="vertical"
+        class="el-menu-vertical-demo"
+        :default-active="$route.path"
+        background-color="#eaedf1"
+        @select="handleSelect"
+      >
+        <sidebar-item :routes="routes"></sidebar-item>
+      </el-menu>
+    </scroll-bar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import SidebarItem from "./SidebarItem";
+import ScrollBar from "#/components/ScrollBar";
+
+export default {
+  components: { SidebarItem, ScrollBar },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    }
+  },
+  computed: {
+    ...mapGetters(["appList"]),
+    routes() {
+      return this.$router.options.routes;
+    }
+  }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.sidebar-container {
+}
+.el-menu-vertical-demo {
+  padding-top: 48px;
+}
+.app-title {
+  height: 47px;
+  line-height: 48px;
+  text-align: center;
+  color: #333;
+  font-weight: bold;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  background: #fff;
+  font-size: 14px;
+  border-bottom: solid 1px #e5e5e5;
+  background: #f3f3f3;
+}
+</style>
+

package/src/views/layout-default/components/index.js

@@ -1,4 +1,4 @@
-export { default as Navbar } from './Navbar'
-export { default as Sidebar } from './Sidebar'
-export { default as AppMain } from './AppMain'
-export { default as AppFooter } from './Footer'
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as AppMain } from './AppMain'
+export { default as AppFooter } from './Footer'

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

@@ -1,140 +1,140 @@
-<template>
-  <div style="background:#ebeff2" :class="[customColor]">
-    <navbar></navbar>
-    <el-container class="theme-main-center">
-      <left-nav @toggle="toggleCollapse"></left-nav>
-      <el-container>
-        <app-main></app-main>
-      </el-container>
-    </el-container>
-    <app-footer></app-footer>
-  </div>
-</template>
-
-<script>
-import "#/iconShop/iconfont.css";
-import { mapGetters } from "vuex";
-import LeftNav from "./components/LeftNavbar";
-import { Navbar, Sidebar, AppMain, AppFooter } from "./components";
-import Breadcrumb from "#/components/Breadcrumb";
-
-export default {
-  name: "layout",
-  components: {
-    Navbar,
-    Sidebar,
-    AppMain,
-    AppFooter,
-    LeftNav,
-    Breadcrumb
-  },
-  data() {
-    return {
-      isIndex: false,
-      isCollapse: false,
-      height: "auto",
-      customColor: "custom-2c4158"
-    };
-  },
-  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 - 40;
-    },
-    toggleCollapse(val) {
-      this.isCollapse = val;
-    }
-  }
-};
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import "~#/styles/mixin.scss";
-.theme-main-center {
-  max-width: 1200px;
-  width: 100%;
-  margin: 0 auto;
-}
-
-.app-main {
-  min-height: inherit;
-  background: inherit !important;
-}
-</style>
-<style rel="stylesheet/scss" lang="scss">
-@import "~#/styles/wf-ui.scss";
-/*  .btn-inner{float: right;width: 78px;height:30px;font-size: 12px;margin: 8px;line-height: 6px;}
-  .btn-outer{width:84px;height:38px;font-size: 14px;}
-  .btn-del{background-color: rgb(229, 98, 34);}
-  .last-table{border-right: 2px solid #eee;}*/
-//盒模型
-html,
-body,
-#app {
-  height: 100%;
-  overflow: auto;
-}
-body {
-  font-family: MicrosoftYaHei;
-}
-.t-box {
-  display: flex;
-}
-.t-box-flex1 {
--moz-box-flex: 1;
--webkit-box-flex: 1;
-box-flex: 1;
-width:auto
-}
-.t-box-flex2 {
-  -moz-box-flex: 2;
--webkit-box-flex: 2;
-box-flex: 2;
-  width: auto;
-}
-.t-box-flex3 {
- -moz-box-flex: 3;
--webkit-box-flex: 3;
-box-flex: 3;
-  width: auto;
-}
-.t-box-center {
-  box-align: center;
-}
-.t-center {
-  text-align: center;
-}
-.t-right {
-  text-align: right;
-}
-.vertical-horizontal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.vertical {
-  display: flex;
-  align-items: center;
-}
-.w1200 {
-  width: 1200px;
-}
-.m0a {
-  margin: 0 auto;
-}
-</style>
+<template>
+  <div style="background:#ebeff2" :class="[customColor]">
+    <navbar></navbar>
+    <el-container class="theme-main-center">
+      <left-nav @toggle="toggleCollapse"></left-nav>
+      <el-container>
+        <app-main></app-main>
+      </el-container>
+    </el-container>
+    <app-footer></app-footer>
+  </div>
+</template>
+
+<script>
+import "#/iconShop/iconfont.css";
+import { mapGetters } from "vuex";
+import LeftNav from "./components/LeftNavbar";
+import { Navbar, Sidebar, AppMain, AppFooter } from "./components";
+import Breadcrumb from "#/components/Breadcrumb";
+
+export default {
+  name: "layout",
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain,
+    AppFooter,
+    LeftNav,
+    Breadcrumb
+  },
+  data() {
+    return {
+      isIndex: false,
+      isCollapse: false,
+      height: "auto",
+      customColor: "custom-2c4158"
+    };
+  },
+  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 - 40;
+    },
+    toggleCollapse(val) {
+      this.isCollapse = val;
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~#/styles/mixin.scss";
+.theme-main-center {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.app-main {
+  min-height: inherit;
+  background: inherit !important;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss">
+@import "~#/styles/wf-ui.scss";
+/*  .btn-inner{float: right;width: 78px;height:30px;font-size: 12px;margin: 8px;line-height: 6px;}
+  .btn-outer{width:84px;height:38px;font-size: 14px;}
+  .btn-del{background-color: rgb(229, 98, 34);}
+  .last-table{border-right: 2px solid #eee;}*/
+//盒模型
+html,
+body,
+#app {
+  height: 100%;
+  overflow: auto;
+}
+body {
+  font-family: MicrosoftYaHei;
+}
+.t-box {
+  display: flex;
+}
+.t-box-flex1 {
+-moz-box-flex: 1;
+-webkit-box-flex: 1;
+box-flex: 1;
+width:auto
+}
+.t-box-flex2 {
+  -moz-box-flex: 2;
+-webkit-box-flex: 2;
+box-flex: 2;
+  width: auto;
+}
+.t-box-flex3 {
+ -moz-box-flex: 3;
+-webkit-box-flex: 3;
+box-flex: 3;
+  width: auto;
+}
+.t-box-center {
+  box-align: center;
+}
+.t-center {
+  text-align: center;
+}
+.t-right {
+  text-align: right;
+}
+.vertical-horizontal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.vertical {
+  display: flex;
+  align-items: center;
+}
+.w1200 {
+  width: 1200px;
+}
+.m0a {
+  margin: 0 auto;
+}
+</style>

package/src/views/layout-default/theme/darkBlue/components/AppMain.vue

@@ -1,38 +1,38 @@
-<template>
-  <section class="app-main">
-    <el-container class="top-position">当前位置：<breadcrumb></breadcrumb></el-container>
-    <transition name="fade" mode="out-in">
-      <router-view></router-view>
-    </transition>
-  </section>
-</template>
-
-<script>
-import Breadcrumb from "#/components/Breadcrumb";
-export default {
-  components: {
-    Breadcrumb
-  },
-  name: "AppMain",
-  computed: {
-    // key() {
-    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
-    // }
-  }
-};
-</script>
-<style scoped>
-.app-main {
-  width: 100%;
-}
-.top-position {
-  height: 60px;
-  line-height: 60px;
-  background: #fff;
-  font-size: 14px;
-  color: #666;
-  padding-left: 35px;
-  margin-bottom: 10px;
-}
-</style>
-
+<template>
+  <section class="app-main">
+    <el-container class="top-position">当前位置：<breadcrumb></breadcrumb></el-container>
+    <transition name="fade" mode="out-in">
+      <router-view></router-view>
+    </transition>
+  </section>
+</template>
+
+<script>
+import Breadcrumb from "#/components/Breadcrumb";
+export default {
+  components: {
+    Breadcrumb
+  },
+  name: "AppMain",
+  computed: {
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
+};
+</script>
+<style scoped>
+.app-main {
+  width: 100%;
+}
+.top-position {
+  height: 60px;
+  line-height: 60px;
+  background: #fff;
+  font-size: 14px;
+  color: #666;
+  padding-left: 35px;
+  margin-bottom: 10px;
+}
+</style>
+