xs-common-plugins 1.0.6 → 1.0.10

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

@@ -1,67 +1,67 @@
-<template>
-  <div class="menu-wrapper">
-    <template v-if="item.subItems.length == 0">
-      <template v-if="item.title">
-        <app-link :to="getUrl(item.url, item)">
-          <el-menu-item  :class="{'submenu-title-noDropdown':!isNest}" :index="item.id">  
-            <item :title="item.title" :icon="item.icon"  />
-          </el-menu-item>
-        </app-link>
-      </template>
-    </template>
-    <el-submenu v-else ref="subMenu" :index="item.id" popper-append-to-body>
-      <template slot="title">
-        <item v-if="item.title" :title="item.title" :icon="item.icon" />
-      </template>
-      <sidebar-item
-        v-for="child in item.subItems"
-        :key="child.id"
-        :is-nest="true"
-        :item="child"
-        class="nest-menu"
-      />
-    </el-submenu>
-  </div>
-</template>
-
-<script>
-import Item from "./Item";
-import AppLink from "./Link";
-import FixiOSBug from "./FixiOSBug";
-
-export default {
-  name: "SidebarItem",
-  components: { Item, AppLink },
-  mixins: [FixiOSBug],
-  props: {
-    // route object
-    item: {
-      type: Object,
-      required: true
-    },
-    isNest: {
-      type: Boolean,
-      default: false
-    },
-    basePath: {
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
-    // TODO: refactor with render function
-    this.onlyOneChild = null;
-    return {};
-  },
-  methods: {
-    getUrl (url, item) {
-      if(process.env.NODE_ENV == 'development') {
-        return url
-      } else {
-        return item.host + item.url
-      }
-    }
-  }
-};
-</script>
+<template>
+  <div class="menu-wrapper">
+    <template v-if="item.subItems.length == 0">
+      <template v-if="item.title">
+        <app-link :to="getUrl(item.url, item)">
+          <el-menu-item  :class="{'submenu-title-noDropdown':!isNest}" :index="item.id">  
+            <item :title="item.title" :icon="item.icon"  />
+          </el-menu-item>
+        </app-link>
+      </template>
+    </template>
+    <el-submenu v-else ref="subMenu" :index="item.id" popper-append-to-body>
+      <template slot="title">
+        <item v-if="item.title" :title="item.title" :icon="item.icon" />
+      </template>
+      <sidebar-item
+        v-for="child in item.subItems"
+        :key="child.id"
+        :is-nest="true"
+        :item="child"
+        class="nest-menu"
+      />
+    </el-submenu>
+  </div>
+</template>
+
+<script>
+import Item from "./Item";
+import AppLink from "./Link";
+import FixiOSBug from "./FixiOSBug";
+
+export default {
+  name: "SidebarItem",
+  components: { Item, AppLink },
+  mixins: [FixiOSBug],
+  props: {
+    // route object
+    item: {
+      type: Object,
+      required: true
+    },
+    isNest: {
+      type: Boolean,
+      default: false
+    },
+    basePath: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
+    // TODO: refactor with render function
+    this.onlyOneChild = null;
+    return {};
+  },
+  methods: {
+    getUrl (url, item) {
+      if(process.env.NODE_ENV == 'development') {
+        return url
+      } else {
+        return item.host + item.url
+      }
+    }
+  }
+};
+</script>

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

@@ -1,114 +1,114 @@
-<template>
-  <div :class="{ 'has-logo': showLogo }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :unique-opened="true"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item
-          v-for="route in getMenuList"
-          :key="route.id"
-          :item="route"
-          :base-path="route.url"
-        />
-      </el-menu>
-    </el-scrollbar>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import Logo from "./Logo";
-import SidebarItem from "./SidebarItem";
-import variables from "@/styles/variables.scss";
-
-import { createMenuId } from "@/common/createMenuId";
-//TODO
-export default {
-  data() {
-    return {
-      devMenuList: [],
-    };
-  },
-  props: {
-    fromItem: {
-      type: Number,
-      default: 0
-    }
-  },
-  components: { SidebarItem, Logo },
-  computed: {
-    ...mapGetters(["sidebar", "menuList"]),
-    activeMenu() {
-      const route = this.$route;
-      const { path } = route;
-      if (route.path) {
-        return createMenuId(route.path);
-      }
-      const realUrl = decodeURIComponent(path).replace(`/child-frame/`, "");
-      return realUrl;
-    },
-    showLogo() {
-      // return this.$store.state.settings.sidebarLogo;
-    },
-    variables() {
-      return variables;
-    },
-    isCollapse() {
-      return !this.sidebar.opened;
-    },
-    getMenuList () {
-      if(process.env.NODE_ENV === 'development') {
-        return this.devMenuList
-      } 
-      return this.menuList
-    }
-  },
-  created() {
-    if (process.env.NODE_ENV == "development") {
-      let router = this.$root.$router.options.routes.find(
-        item => item.path === "/"
-      );
-      let { subItems } =  this.formatRouter(router, {url:'/'})
-      this.devMenuList = subItems || []
-    }
-  },
-  methods: {
-    formatRouter (obj, parent) {
-      let item = {
-        title: obj.meta && obj.meta.title || '',
-        icon: obj.meta && obj.meta.icon || '',
-        hide: obj.meta && obj.meta.hidden || false,
-        url: '',
-        host: window.location.host,
-        subItems:  [],
-        id: ''
-      }
-      if(parent.url == '/') {
-        obj.url =  obj.path
-      } else {
-        obj.url = parent.url + '/'+ obj.path 
-      }
-      item.url = obj.url
-      item.id = createMenuId(item.url)
-      if(obj.children && obj.children.length > 0) {
-        let list = []
-        obj.children.forEach((it)=>{
-          list.push(this.formatRouter(it, obj))
-        })
-        if(!list.every(i => i['hide'] === true)) {
-          item.subItems = list.filter(item => item['hide'] !== true)
-        }
-      }
-      return item
-    }
-  }
-};
-</script>
+<template>
+  <div :class="{ 'has-logo': showLogo }">
+    <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :unique-opened="true"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item
+          v-for="route in getMenuList"
+          :key="route.id"
+          :item="route"
+          :base-path="route.url"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import Logo from "./Logo";
+import SidebarItem from "./SidebarItem";
+import variables from "@/styles/variables.scss";
+
+import { createMenuId } from "@/common/createMenuId";
+//TODO
+export default {
+  data() {
+    return {
+      devMenuList: [],
+    };
+  },
+  props: {
+    fromItem: {
+      type: Number,
+      default: 0
+    }
+  },
+  components: { SidebarItem, Logo },
+  computed: {
+    ...mapGetters(["sidebar", "menuList"]),
+    activeMenu() {
+      const route = this.$route;
+      const { path } = route;
+      if (route.path) {
+        return createMenuId(route.path);
+      }
+      const realUrl = decodeURIComponent(path).replace(`/child-frame/`, "");
+      return realUrl;
+    },
+    showLogo() {
+      // return this.$store.state.settings.sidebarLogo;
+    },
+    variables() {
+      return variables;
+    },
+    isCollapse() {
+      return !this.sidebar.opened;
+    },
+    getMenuList () {
+      if(process.env.NODE_ENV === 'development') {
+        return this.devMenuList
+      } 
+      return this.menuList
+    }
+  },
+  created() {
+    if (process.env.NODE_ENV == "development") {
+      let router = this.$root.$router.options.routes.find(
+        item => item.path === "/"
+      );
+      let { subItems } =  this.formatRouter(router, {url:'/'})
+      this.devMenuList = subItems || []
+    }
+  },
+  methods: {
+    formatRouter (obj, parent) {
+      let item = {
+        title: obj.meta && obj.meta.title || '',
+        icon: obj.meta && obj.meta.icon || '',
+        hide: obj.meta && obj.meta.hidden || false,
+        url: '',
+        host: window.location.host,
+        subItems:  [],
+        id: ''
+      }
+      if(parent.url == '/') {
+        obj.url =  obj.path
+      } else {
+        obj.url = parent.url + '/'+ obj.path 
+      }
+      item.url = obj.url
+      item.id = createMenuId(item.url)
+      if(obj.children && obj.children.length > 0) {
+        let list = []
+        obj.children.forEach((it)=>{
+          list.push(this.formatRouter(it, obj))
+        })
+        if(!list.every(i => i['hide'] === true)) {
+          item.subItems = list.filter(item => item['hide'] !== true)
+        }
+      }
+      return item
+    }
+  }
+};
+</script>

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

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

package/src/views/layout/index.vue

@@ -1,105 +1,105 @@
-<template>
-  <div :class="classObj" class="app-wrapper">
-    <sidebar class="sidebar-container" :from-item="selectMenu" /> 
-    <div class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar />
-      </div>
-      <app-main />
-    </div>
-  </div>
-</template>
-
-<script>
-import { Navbar, Sidebar, AppMain } from "./components";
-import { main } from '@/utils/getMenu'
-export default {
-  name: "Layout",
-  components: {
-    Navbar,
-    Sidebar,
-    AppMain
-  },
-  data() {
-    return {
-      selectMenu: 0
-    };
-  },
-  computed: {
-    sidebar() {
-      return this.$store.state.app.sidebar;
-    },
-    fixedHeader() {
-      // return this.$store.state.settings.fixedHeader;
-    },
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-      }
-    }
-  },
-  methods: {
-    async toSider(item, val) {
-      await this.$router.push({
-        name: "child-frame",
-        params: {
-          val,
-          query: {
-            t: +new Date() // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
-          }
-        }
-      });
-      this.selectMenu = item;
-    },
-    addLocalMenu(onLineMenuList) {
-      return onLineMenuList;
-    }
-  },
-  mounted() {
-    main()
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/mixin.scss';
-@import '../../styles/variables.scss';
-.app-wrapper {
-  @include clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  &.mobile.openSidebar {
-    position: fixed;
-    top: 0;
-  }
-}
-.drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
-}
-
-.fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 9;
-  width: calc(100% - #{$sideBarWidth});
-  transition: width 0.28s;
-}
-
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
-}
-
-.mobile .fixed-header {
-  width: 100%;
-}
-</style>
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <sidebar class="sidebar-container" :from-item="selectMenu" /> 
+    <div class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <navbar />
+      </div>
+      <app-main />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Navbar, Sidebar, AppMain } from "./components";
+import { main } from '@/utils/getMenu'
+export default {
+  name: "Layout",
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain
+  },
+  data() {
+    return {
+      selectMenu: 0
+    };
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar;
+    },
+    fixedHeader() {
+      // return this.$store.state.settings.fixedHeader;
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+      }
+    }
+  },
+  methods: {
+    async toSider(item, val) {
+      await this.$router.push({
+        name: "child-frame",
+        params: {
+          val,
+          query: {
+            t: +new Date() // 保证每次点击路由的query项都是不一样的，确保会重新刷新view
+          }
+        }
+      });
+      this.selectMenu = item;
+    },
+    addLocalMenu(onLineMenuList) {
+      return onLineMenuList;
+    }
+  },
+  mounted() {
+    main()
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/mixin.scss';
+@import '../../styles/variables.scss';
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
+
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
+
+.mobile .fixed-header {
+  width: 100%;
+}
+</style>