some md

src/assets/styles/common-component.less

@@ -48,7 +48,7 @@
     width: 600px;
     box-shadow: 0px 24px 36px 0px rgba(0, 0, 0, 0.3);
     cursor: move;
-    transition: all 0.1s linear;
+    transition: width, height, transform 0.2s linear;
     z-index: 8;
     &-nosition {
       transition: none;

src/components/common/ImagePreview/ImagePreview.vue

@@ -95,6 +95,10 @@ export default {
     headerHide: {
       type: Boolean,
       default: false
+    },
+    loop: {
+      type: Boolean,
+      default: false
     }
   },
   directives: {
@@ -140,12 +144,15 @@ export default {
     this.registfileLoad();
   },
   methods: {
-    visibleChange(visible) {
-      if (!visible) return;
+    initData() {
       if (!this.imageList.length) return;
       this.curIndex = this.initIndex;
       this.curFileChange(this.curIndex);
     },
+    visibleChange(visible) {
+      if (!visible) return;
+      this.initData();
+    },
     curFileChange(val) {
       const index = val || 0;
       this.nosition = true;
@@ -228,7 +235,12 @@ export default {
     },
     showPrev() {
       if (this.isFirst) {
-        this.curIndex = this.lastIndex - 1;
+        if (this.loop) {
+          this.curIndex = this.lastIndex - 1;
+        } else {
+          this.$emit("page-prev");
+          return;
+        }
       } else {
         this.curIndex -= 1;
       }
@@ -237,7 +249,12 @@ export default {
     },
     showNext() {
       if (this.isLast) {
-        this.curIndex = 0;
+        if (this.loop) {
+          this.curIndex = 0;
+        } else {
+          this.$emit("page-next");
+          return;
+        }
       } else {
         this.curIndex += 1;
       }

src/constants/authority.js

@@ -0,0 +1,3 @@
+export default {
+  ADMIN: []
+};

src/main.js

@@ -34,13 +34,7 @@ Vue.config.productionTip = false;
 //   const token = Vue.ls.get("token");
 //   if (to.meta.noRequire) {
 //     // 不需要登录的页面
-//     if (token) {
-//       // 当前状态是已登录
-//       ViewUI.Notice.info({ title: "您已经登录，已自动跳转到主页", duration: 2 });
-//       next({ name: "Home" });
-//     } else {
-//       next();
-//     }
+//     next();
 //   } else {
 //     // 需要登录的路由
 //     if (token) {

src/modules/admin/router.js

@@ -9,15 +9,16 @@ import ClientUser from "./views/ClientUser.vue";
 import Tasks from "./views/Tasks.vue";
 import Analyze from "./views/Analyze.vue";
 
+const workRouter = {
+  path: "/admin/work",
+  name: "Work",
+  component: Work,
+  meta: {
+    title: "工作"
+  }
+};
+
 const routes = [
-  {
-    path: "/admin/work",
-    name: "Work",
-    component: Work,
-    meta: {
-      title: "工作"
-    }
-  },
   {
     path: "overview",
     name: "Overview",
@@ -84,21 +85,20 @@ const routes = [
   }
 ];
 
-export const navs = routes
-  .filter(item => item.name !== "Work")
-  .map(item => {
-    return {
-      name: item.name,
-      title: item.meta.title
-    };
-  });
+export const navs = routes.map(item => {
+  return {
+    name: item.name,
+    title: item.meta.title
+  };
+});
 
 export default [
+  { ...workRouter },
   {
     path: "/admin/:workId(\\d+)",
     name: "AdminHome",
     component: Home,
-    redirect: { name: "Work" },
+    redirect: { name: "Overview" },
     children: routes
   }
 ];

src/modules/login/views/Login.vue

@@ -62,7 +62,14 @@ export default {
     this.$ls.clear();
   },
   methods: {
-    async submit(name) {
+    submit() {
+      // linshi
+      this.$ls.set("token", "1234");
+      this.$router.push({
+        name: "Home"
+      });
+    },
+    async submit1(name) {
       const valid = await this.$refs[name].validate();
       if (!valid) return;
 

src/plugins/utils.js

@@ -189,6 +189,19 @@ function removeHtmlTag(str) {
   return str.replace(/<[^>]+>/g, "");
 }
 
+/**
+ * 驼峰命名
+ * @param {Array} params
+ */
+function humpFormat(params) {
+  return params
+    .map(item => {
+      const lowStr = item.toLowerCase();
+      return lowStr.slice(0, 1).toUpperCase() + lowStr.slice(1);
+    })
+    .join("");
+}
+
 export {
   objTypeOf,
   deepCopy,
@@ -198,5 +211,6 @@ export {
   randomCode,
   qsParams,
   formatDate,
-  removeHtmlTag
+  removeHtmlTag,
+  humpFormat
 };

src/router.js

@@ -1,19 +1,21 @@
 import Vue from "vue";
 import Router from "vue-router";
 
+import Home from "./views/Home";
+import NotFound from "./views/404";
 import login from "./modules/login/router";
-import account from "./modules/account/router";
+// import account from "./modules/account/router";
 // modules
 import admin from "./modules/admin/router";
 import subject from "./modules/subject/router";
+import com from "./modules/com/router";
 
 Vue.use(Router);
-/**
- * 权限控制：
- * 1、不同角色构建不同模块。
- * 2、登录成功之后根据角色注册相应模块。
- * 3、不同模块打包不同文件。（webpackChunkName）
- */
+
+export const roleRouters = {
+  ADMIN: admin,
+  SUBJECT: subject
+};
 
 export default new Router({
   routes: [
@@ -22,10 +24,19 @@ export default new Router({
       name: "Index",
       redirect: { name: "Login" }
     },
+    {
+      path: "/home",
+      name: "Home",
+      component: Home,
+      children: [...admin, ...subject]
+    },
     ...login,
-    ...account,
-    ...admin,
-    ...subject
+    ...com,
+    {
+      path: "*",
+      name: "404",
+      component: NotFound
+    }
     // [lazy-loaded] route level code-splitting
     // {
     //   path: "/about",

src/views/404.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="not-found">
+    not-found -- 404
+  </div>
+</template>
+
+<script>
+export default {
+  name: "not-found",
+  data() {
+    return {};
+  },
+  methods: {}
+};
+</script>

src/views/Home.vue

@@ -1,167 +1,47 @@
 <template>
   <div class="home">
-    <div class="home-header">
-      <div class="head-logo" :class="{ 'head-logo-tiny': isCollapsed }">
-        <!-- big logo 160*40 -->
-        <h1 v-if="!isCollapsed">LOGO</h1>
-        <!-- small logo 40*40 -->
-        <h1 v-else>A</h1>
-      </div>
-      <div class="head-switch" @click="collapsedSider">
-        <Icon :class="rotateIcon" type="md-menu" size="24"></Icon>
-      </div>
-      <div class="head-info">
-        <Breadcrumb>
-          <BreadcrumbItem>
-            <Icon type="md-home" :size="16" style="margin-top: -4px;"></Icon>
-          </BreadcrumbItem>
-          <BreadcrumbItem v-for="(bread, index) in breadcrumbs" :key="index">{{
-            bread
-          }}</BreadcrumbItem>
-        </Breadcrumb>
-      </div>
-      <div class="head-user">
-        <Avatar icon="md-person" />
-        <span class="user-name">{{ username }}</span>
-        <span class="user-logout" @click="logout">
-          <Icon type="md-power" size="20"></Icon>
-        </span>
-      </div>
-    </div>
-
-    <div class="home-navs" :class="{ 'home-navs-tiny': isCollapsed }">
-      <ul>
-        <li class="nav-item" v-for="(nav, index) in navs" :key="index">
-          <div
-            :class="[
-              'nav-item-main',
-              { 'nav-item-main-act': curMain === index }
-            ]"
-            @click="switchNav(nav, index)"
-          >
-            <span class="nav-item-icon nav-item-icon-left">
-              <Icon :type="nav.icon"></Icon>
-            </span>
-            <p class="nav-item-cont">{{ nav.title }}</p>
-            <span
-              class="nav-item-icon nav-item-icon-right"
-              v-if="nav.children && nav.children.length"
-            >
-              <Icon
-                :type="nav.showList ? 'ios-arrow-down' : 'ios-arrow-forward'"
-              ></Icon>
-            </span>
-          </div>
-          <ul
-            class="nav-item-sublist"
-            :class="{ 'nav-sublist-hide': !nav.showList }"
-            v-if="nav.children && nav.children.length"
-            :style="{ height: nav.children.length * 40 + 'px' }"
-          >
-            <li
-              v-for="(subnav, sindex) in nav.children"
-              :key="sindex"
-              :class="[
-                'nav-item-sub',
-                { 'nav-item-sub-act': curSub === index + '-' + sindex }
-              ]"
-              @click="toPage(index, sindex)"
-            >
-              {{ subnav.title }}
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-
-    <div class="home-body" :class="{ 'home-body-big': isCollapsed }">
-      <div class="home-main">
-        <router-view />
-
-        <view-footer></view-footer>
-      </div>
-    </div>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import navs from "@/constants/navs";
+import { roleRouters } from "../router";
+// import { humpFormat } from "@/plugins/utils";
 
 export default {
   name: "home",
   data() {
     return {
-      isCollapsed: false,
-      navs,
-      curMain: 0,
-      curSub: "",
-      avatar: "",
-      breadcrumbs: []
+      validRouters: []
     };
   },
-  computed: {
-    rotateIcon() {
-      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
-    },
-    username() {
-      return this.$store.state.user.realName;
-    }
-  },
-  watch: {
-    $route() {
-      this.actCurNav();
-    }
-  },
   mounted() {
-    this.actCurNav();
+    this.init();
   },
   methods: {
-    collapsedSider() {
-      this.isCollapsed = !this.isCollapsed;
-    },
-    switchNav(item, mainIndex) {
-      if (item.children) {
-        item.showList = !item.showList;
+    init() {
+      const roleCode = "ADMIN";
+      this.getValidRouters(roleRouters[roleCode]);
+      // console.log(this.$route);
+
+      if (this.$route.name === "Home") {
+        // TODO:根据角色跳转不同的路由
+        // this.$router.replace({
+        //   name: humpFormat([roleCode, "home"])
+        // });
       } else {
-        this.breadcrumbs = [item.title];
-        this.curMain = mainIndex;
-        this.curSub = "";
-        this.$router.push({ name: item.router });
-      }
-    },
-    actCurNav() {
-      let router = this.$route.name;
-      this.navs.forEach((item, index) => {
-        if (item.children && item.children.length) {
-          item.children.forEach((elem, pindex) => {
-            if (elem.router === router) {
-              this.curSub = index + "-" + pindex;
-              this.curMain = index;
-              this.breadcrumbs = [item.title, elem.title];
-            }
+        if (!this.validRouters.includes(this.$route.name)) {
+          this.$router.replace({
+            name: "404"
           });
-        } else {
-          if (item.router === router) {
-            this.curMain = index;
-            this.breadcrumbs = [item.title];
-          }
         }
-      });
-      this.navs[this.curMain].showList = true;
+      }
     },
-    toPage(mainIndex, subIndex) {
-      let item = this.navs[mainIndex];
-      this.breadcrumbs = [item.title, item.children[subIndex].title];
-      this.curMain = mainIndex;
-      this.curSub = mainIndex + "-" + subIndex;
-
-      this.$router.push({
-        name: this.navs[mainIndex].children[subIndex].router
+    getValidRouters(routers) {
+      routers.map(router => {
+        this.validRouters.push(router.name);
+        if (router["children"]) this.getValidRouters(router["children"]);
       });
-    },
-    logout() {
-      this.$ls.clear();
-      this.$router.push({ name: "Login" });
     }
   }
 };

src/views/HomeOld.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="home">
+    <div class="home-header">
+      <div class="head-logo" :class="{ 'head-logo-tiny': isCollapsed }">
+        <!-- big logo 160*40 -->
+        <h1 v-if="!isCollapsed">LOGO</h1>
+        <!-- small logo 40*40 -->
+        <h1 v-else>A</h1>
+      </div>
+      <div class="head-switch" @click="collapsedSider">
+        <Icon :class="rotateIcon" type="md-menu" size="24"></Icon>
+      </div>
+      <div class="head-info">
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Icon type="md-home" :size="16" style="margin-top: -4px;"></Icon>
+          </BreadcrumbItem>
+          <BreadcrumbItem v-for="(bread, index) in breadcrumbs" :key="index">{{
+            bread
+          }}</BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+      <div class="head-user">
+        <Avatar icon="md-person" />
+        <span class="user-name">{{ username }}</span>
+        <span class="user-logout" @click="logout">
+          <Icon type="md-power" size="20"></Icon>
+        </span>
+      </div>
+    </div>
+
+    <div class="home-navs" :class="{ 'home-navs-tiny': isCollapsed }">
+      <ul>
+        <li class="nav-item" v-for="(nav, index) in navs" :key="index">
+          <div
+            :class="[
+              'nav-item-main',
+              { 'nav-item-main-act': curMain === index }
+            ]"
+            @click="switchNav(nav, index)"
+          >
+            <span class="nav-item-icon nav-item-icon-left">
+              <Icon :type="nav.icon"></Icon>
+            </span>
+            <p class="nav-item-cont">{{ nav.title }}</p>
+            <span
+              class="nav-item-icon nav-item-icon-right"
+              v-if="nav.children && nav.children.length"
+            >
+              <Icon
+                :type="nav.showList ? 'ios-arrow-down' : 'ios-arrow-forward'"
+              ></Icon>
+            </span>
+          </div>
+          <ul
+            class="nav-item-sublist"
+            :class="{ 'nav-sublist-hide': !nav.showList }"
+            v-if="nav.children && nav.children.length"
+            :style="{ height: nav.children.length * 40 + 'px' }"
+          >
+            <li
+              v-for="(subnav, sindex) in nav.children"
+              :key="sindex"
+              :class="[
+                'nav-item-sub',
+                { 'nav-item-sub-act': curSub === index + '-' + sindex }
+              ]"
+              @click="toPage(index, sindex)"
+            >
+              {{ subnav.title }}
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <div class="home-body" :class="{ 'home-body-big': isCollapsed }">
+      <div class="home-main">
+        <router-view />
+
+        <view-footer></view-footer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import navs from "@/constants/navs";
+
+export default {
+  name: "home",
+  data() {
+    return {
+      isCollapsed: false,
+      navs,
+      curMain: 0,
+      curSub: "",
+      avatar: "",
+      breadcrumbs: []
+    };
+  },
+  computed: {
+    rotateIcon() {
+      return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
+    },
+    username() {
+      return this.$store.state.user.realName;
+    }
+  },
+  watch: {
+    $route() {
+      this.actCurNav();
+    }
+  },
+  mounted() {
+    this.actCurNav();
+    // TODO:获取用户角色信息，动态注册路由，然后跳转路由
+  },
+  methods: {
+    collapsedSider() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+    switchNav(item, mainIndex) {
+      if (item.children) {
+        item.showList = !item.showList;
+      } else {
+        this.breadcrumbs = [item.title];
+        this.curMain = mainIndex;
+        this.curSub = "";
+        this.$router.push({ name: item.router });
+      }
+    },
+    actCurNav() {
+      let router = this.$route.name;
+      this.navs.forEach((item, index) => {
+        if (item.children && item.children.length) {
+          item.children.forEach((elem, pindex) => {
+            if (elem.router === router) {
+              this.curSub = index + "-" + pindex;
+              this.curMain = index;
+              this.breadcrumbs = [item.title, elem.title];
+            }
+          });
+        } else {
+          if (item.router === router) {
+            this.curMain = index;
+            this.breadcrumbs = [item.title];
+          }
+        }
+      });
+      this.navs[this.curMain].showList = true;
+    },
+    toPage(mainIndex, subIndex) {
+      let item = this.navs[mainIndex];
+      this.breadcrumbs = [item.title, item.children[subIndex].title];
+      this.curMain = mainIndex;
+      this.curSub = mainIndex + "-" + subIndex;
+
+      this.$router.push({
+        name: this.navs[mainIndex].children[subIndex].router
+      });
+    },
+    logout() {
+      this.$ls.clear();
+      this.$router.push({ name: "Login" });
+    }
+  }
+};
+</script>