(feature)初步完成对登录页的调整

jingchenxu · Aug 9, 2019 · 0880fd6 · 0880fd6
1 parent d270670
commit 0880fd6
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 60 deletions.
diff --git a/src/mock/data/menu.json b/src/mock/data/menu.json
@@ -145,7 +145,7 @@
   },
   {
     "mid": 41,
-    "mkey": "404",
+    "mkey": "notfound",
     "mname": "notfound",
     "micon": "md app",
     "mpath": "/404",
@@ -157,7 +157,7 @@
   },
   {
     "mid": 42,
-    "mkey": "505",
+    "mkey": "servererror",
     "mname": "服务端异常",
     "micon": "md app",
     "mpath": "/505",

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -36,6 +36,7 @@ const router:Router = new Router({
       { path: 'usercenter', name: 'usercenter', component: () => import('@/views/mis/set/UserCenter.vue') },
       { path: 'usersetting', name: 'usersetting', component: () => import('@/views/mis/set/UserSetting.vue') },
       { path: 'notfound', name: 'notfound', component: () => import('@/views/mis/exception/NotFound.vue') },
+      { path: 'servererror', name: 'servererror', component: () => import('@/views/mis/exception/ServerError.vue') },
       { path: 'basedetail', name: 'basedetail', component: () => import('@/views/mis/det/BaseDetail.vue') },
       { path: 'advancedetail', name: 'advancedetail', component: () => import('@/views/mis/det/AdvanceDetail.vue') }
     ]

diff --git a/src/store/newapp/index.ts b/src/store/newapp/index.ts
@@ -12,7 +12,10 @@ const state: State = {
 const getters = {
   getCurrentPage: (state: State) => state.currentPage,
   getCachePages: (state: State) => state.cachePages,
-  getCachePagesKeys: (state: State) => state.cachePages,
+  getCachePagesKeys: (state: State) => {
+    let cachePagesKeys = state.cachePages.map(page => page.mkey)
+    return cachePagesKeys
+  },
   getExpandMisMenu: (state: State) => state.expandMisMenu,
   getLoading: (state: State) => state.loading
 }
@@ -47,6 +50,7 @@ const mutations = {
 
 const actions = {
   UPDATECURRENTPAGE: (context: { commit: Commit }, menu: Menu) => {
+    console.dir(menu)
     context.commit('updateCurrentPage', menu)
     context.commit('updateCachePages', menu)
   },

diff --git a/src/views/Login.vue b/src/views/Login.vue
@@ -1,27 +1,29 @@
 <template>
-  <div class="login-container">
-    <div class="login-form-mask"></div>
-    <Form class="login-form" ref="login" :model="form" :rules="rule">
-      <div class="logo-container">
-        <img src="../../public/misimg/myView_Admin.png"/>
-      </div>
-      <FormItem prop="user">
-        <Input size="large" type="text" v-model="form.user" placeholder="Username">
-          <Icon type="ios-person-outline" slot="prepend"></Icon>
-        </Input>
-      </FormItem>
-      <FormItem prop="password">
-        <Input size="large" type="password" v-model="form.password" placeholder="Password">
-          <Icon type="ios-lock-outline" slot="prepend"></Icon>
-        </Input>
-      </FormItem>
-      <FormItem prop="rememberPassword">
-        <Checkbox v-model="form.rememberPassword">记住密码</Checkbox>
-      </FormItem>
-      <FormItem>
-        <Button size="large" :loading="loading" long type="primary" @click="handleLogin('login')">登录</Button>
-      </FormItem>
-    </Form>
+  <div>
+    <div class="login-bg"></div>
+    <div class="login-container">
+      <Form class="login-form" ref="login" :model="form" :rules="rule">
+        <div class="logo-container">
+          <img src="../../public/misimg/myView_Admin.png"/>
+        </div>
+        <FormItem prop="user">
+          <Input size="large" type="text" v-model="form.user" placeholder="Username">
+            <Icon type="ios-person-outline" slot="prepend"></Icon>
+          </Input>
+        </FormItem>
+        <FormItem prop="password">
+          <Input size="large" type="password" v-model="form.password" placeholder="Password">
+            <Icon type="ios-lock-outline" slot="prepend"></Icon>
+          </Input>
+        </FormItem>
+        <FormItem prop="rememberPassword">
+          <Checkbox v-model="form.rememberPassword">记住密码</Checkbox>
+        </FormItem>
+        <FormItem>
+          <Button size="large" :loading="loading" long type="primary" @click="handleLogin('login')">登录</Button>
+        </FormItem>
+      </Form>
+    </div>
   </div>
 </template>
 
@@ -63,42 +65,46 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.login-container {
+.login-bg {
   width: 100%;
   height: 100%;
+  position: absolute;
   background:url('../../public/misimg/bg01.jpg') no-repeat center center;
-  .login-form-mask {
-    width: 400px;
-    height: 370px;
-    padding: 30px 20px;
-    margin: auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    filter: blur(15px);
-    background-color: #22456175;
-  }
+  // filter: blur(1px);
+}
+.login-container {
+  width: 100%;
+  height: 100%;
+  // background:url('../../public/misimg/bg01.jpg') no-repeat center center;
+  // filter: blur(20px);
   .login-form {
-    z-index: 1;
     width: 400px;
     height: 370px;
-    border: 1px solid #173955;
-    padding: 30px 20px;
+    border-radius: 5px;
+    padding: 30px 50px;
     margin: auto;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
+    background-color: #ffffff50;
     .logo-container {
+      z-index: 2;
       height: 80px;
       margin-bottom: 20px;
       img {
         width: 100%;
       }
     }
   }
+  // .login-form::after{
+  //   content: '';
+  //   position: absolute;
+  //   top:0;right:0;bottom:0;left:0;
+  //   filter: blur(20px);
+  //   margin:-30px;
+  //   background-color: #ffffff5e;
+  // }
 }
 </style>
diff --git a/src/views/mis/MisContainer.vue b/src/views/mis/MisContainer.vue
@@ -28,9 +28,11 @@
             <Button long @click="handleExit" type="text">退出</Button>
           </el-popover>
         </el-header>
-        <el-main element-loading-spinner="iconfont mvloading loading-animation" v-loading="getLoading">
+        <el-main>
           <mis-tab-navi :navi-list="getCachePages" :active-navi="getCurrentPage" />
-          <router-view v-if="getLogin" />
+          <keep-alive>
+            <router-view v-if="getLogin" :include="getCachePagesKeys" element-loading-spinner="iconfont mvloading loading-animation" v-loading="getLoading" />
+          </keep-alive>
           <copy-right />
         </el-main>
       </el-container>
@@ -74,7 +76,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['getLogin', 'getExpandMisMenu', 'getLoading', 'getMenu', 'getCurrentPage', 'getCachePages'])
+    ...mapGetters(['getLogin', 'getExpandMisMenu', 'getLoading', 'getMenu', 'getCurrentPage', 'getCachePages', 'getCachePagesKeys'])
   },
   methods: {
     handleSiderTrigger () {
@@ -95,6 +97,17 @@ export default {
       this.$axios.get('/api/getonlineuser').then(res => {
         if (res.success) {
           this.$store.dispatch('UPDATECURRENTUSER', res.data)
+          console.dir(this.$route)
+          let getMenu = this.getMenu
+          let menu = false
+          for (let _menu of getMenu) {
+            if (_menu.mkey === this.$route.name) {
+              menu = _menu
+            }
+          }
+          if (menu) {
+            this.$store.dispatch('UPDATECURRENTPAGE', menu)
+          }
         }
       })
     }

diff --git a/src/views/mis/components/MisMenu/MisMenu.vue b/src/views/mis/components/MisMenu/MisMenu.vue
@@ -19,15 +19,13 @@
       :index="menu.mkey"
       :key="menu.mkey">
         <template slot="title">
-          <Icon style="margin-right: 8px;" :type="menu.micon" />
+          <Icon style="margin-right: 5px;" :type="menu.micon" />
           <span slot="title">{{menu.mname}}</span>
         </template>
-        <!-- <el-menu-item-group> -->
           <el-menu-item
           v-for="secondMenu of menu.child"
           :index="secondMenu.mkey"
           :key="secondMenu.mkey">{{secondMenu.mname}}</el-menu-item>
-        <!-- </el-menu-item-group> -->
       </el-submenu>
     </el-menu>
   </div>

diff --git a/src/views/mis/components/MisTabNavi/MisTabNavi.vue b/src/views/mis/components/MisTabNavi/MisTabNavi.vue
@@ -7,15 +7,7 @@
         </span>
         <div class="tab-navi-scroll">
           <div class="tab-navi">
-            <div :key="menu.mkey" @click="handleTabClick(menu)" v-for="(menu, index) of naviList" class="tab-item">{{menu.mname}}<Icon type="md-close" /></div>
-            <!-- <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div>
-            <div class="tab-item">测试菜单1<Icon type="md-close" /></div> -->
+            <div :class="activeMKey === menu.mkey ? 'active' : ''" :key="menu.mkey" @click="handleTabClick(menu)" v-for="(menu, index) of naviList" class="tab-item">{{menu.mname}}<Icon type="md-close" /></div>
           </div>
         </div>
         <span @click="handleNext" class="tab-navi-next">
@@ -37,6 +29,11 @@ export default {
       type: Object
     }
   },
+  computed: {
+    activeMKey () {
+      return this.activeNavi.mkey
+    }
+  },
   methods: {
     handlePrev () {
 
@@ -98,6 +95,9 @@ export default {
         .tab-item:hover {
           background-color: #f5f7f9;
         }
+        .active {
+          background-color: #f5f7f9;
+        }
       }
     }
     .tab-navi-next {

diff --git a/src/views/mis/exception/NotFound.vue b/src/views/mis/exception/NotFound.vue
@@ -1,5 +1,25 @@
 <template>
-  <div>
+  <div class="not-found">
     <h1>NotFound</h1>
   </div>
 </template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class NotFound extends Vue {
+
+}
+</script>
+
+<style lang="less" scoped>
+.not-found {
+  min-height: 75vh;
+  margin-top: 44px;
+  padding: 0 15px;
+  text-align: center;
+}
+</style>
+
+
diff --git a/src/views/mis/exception/ServerError.vue b/src/views/mis/exception/ServerError.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="server-error">
+    <div class="content">
+      <h1>ServerError</h1>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class ServerError extends Vue {
+
+}
+</script>
+
+<style lang="less" scoped>
+.server-error {
+  min-height: 75vh;
+  margin-top: 44px;
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  .content {
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/views/mis/workspace/WorkSpace.vue b/src/views/mis/workspace/WorkSpace.vue
@@ -1,5 +1,22 @@
 <template>
-  <div>
+  <div class="work-space">
     <h1>WorkSpace</h1>
   </div>
 </template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+
+@Component
+export default class WorkSpace extends Vue {
+
+}
+</script>
+
+<style lang="less" scoped>
+  .work-space {
+    padding: 0 15px;
+    min-height: 75vh;
+    margin-top: 44px;
+  }
+</style>