feat: config business routh

ittpc/src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <router-view/>
+    <transition name="el-fade-in-linear">
+      <router-view/>
+    </transition>
   </div>
 </template>
 

ittpc/src/router/index.js

@@ -2,10 +2,15 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Error from '@/views/error/error'
 import Login from '@/views/login/login'
+import Main from '@/views/modules/main'
+import User from '@/views/modules/user/user'
+import Appointment from '@/views/modules/appointment/appointment'
+import Config from '@/views/modules/config/config'
 
 Vue.use(Router)
 
 export default new Router({
+  mode: 'history',
   routes: [
     {
       path: '/',
@@ -13,6 +18,28 @@ export default new Router({
       name: 'Login',
       component: Login
     },
+    {
+      path: '/main',
+      name: 'Main',
+      component: Main,
+      children: [
+        {
+          path: 'user',
+          name: 'user',
+          component: User
+        },
+        {
+          path: 'appointment',
+          name: 'appointment',
+          component: Appointment
+        },
+        {
+          path: 'config',
+          name: 'config',
+          component: Config
+        }
+      ]
+    },
     {
       path: '*',
       name: 'Error',

ittpc/src/views/login/login.vue

@@ -51,12 +51,20 @@ export default {
       }
     };
   },
-  mounted() {},
+  mounted() {
+    sessionStorage.clear()
+  },
   methods: {
     submitForm (formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          alert('submit!');
+          this.loginLoading = true
+          setTimeout(() => {
+            this.loginLoading = false
+            this.$router.replace({
+              path: '/main/user'
+            })
+          }, 1000);
         } else {
           console.log('error submit!!');
           return false;

ittpc/src/views/modules/appointment/appointment.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+      appointment ,anage
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'appointment',
+    data() {
+        return {
+
+        };
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

ittpc/src/views/modules/config/config.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+      config mansge
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'config',
+    data() {
+        return {
+
+        };
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

ittpc/src/views/modules/main.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="main layout">
+    <el-container>
+      <el-header style="height:70px;">
+        <div class="header-left logo">
+          <img class="logo-img" src="../../assets/logo.png" alt="" srcset="">
+          <h3>ITT运营后台</h3>
+        </div>
+        <div class="header-right userinfo">
+          <div class="headimg"></div>
+          <div class="username">管理员</div>
+          <el-button type="text" @click="handleLogout">退出</el-button>
+        </div>
+      </el-header>
+      <el-container>
+        <el-aside style="width: 200px;">
+          <el-menu style="border:0;" :default-active="defaultActive" class="el-menu-vertical-demo" router @select="menuSelect">
+            <el-menu-item index="/main/user">
+              <i class="el-icon-user-solid"></i>
+              <span slot="title">用户管理</span>
+            </el-menu-item> 
+            <el-menu-item index="/main/appointment">
+              <i class="el-icon-message-solid"></i>
+              <span slot="title">预约管理</span>
+            </el-menu-item>
+            <el-menu-item index="/main/config">
+              <i class="el-icon-s-grid"></i>
+              <span slot="title">配置管理</span>
+            </el-menu-item>
+          </el-menu>
+        </el-aside>
+        <el-main>
+          <el-card class="box-card">
+            <transition name="el-fade-in">
+              <router-view/>
+            </transition>
+          </el-card>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Main',
+  data() {
+    return {
+      defaultActive: '/main/user'
+    };
+  },
+  mounted() {
+    const currentPath = sessionStorage.getItem('currentPath')
+    if (currentPath) {
+      this.defaultActive = currentPath
+    }
+  },
+  methods: {
+    menuSelect (index) {
+      sessionStorage.setItem('currentPath', index)
+    },
+    handleLogout () {
+      this.$confirm('确认退出吗？').then( _=> {
+        sessionStorage.clear()
+        this.$router.replace('/login')
+      }).catch(_ => {});
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.layout {
+  width: 100%;
+  height: 100%;
+  
+}
+.el-header {
+  background-color: #D3DCE6;
+  color: #333;
+  display: flex;
+  justify-content: space-between;
+  .header-left {
+    width: 300px;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .logo-img {
+      width: 50px;
+      height: 50px;
+      margin-right: 20px;
+    }
+  }
+  .header-right {
+    width: 300px;
+    height: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    .headimg {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background-color: #45A6B5;
+    }
+    .username {
+      margin: 0 20px;
+    }
+  }
+}
+  
+  .el-aside {
+    background-color: #fff;
+    color: #333;
+    height: 100%;
+    text-align: center;
+    line-height: 200px;
+  }
+  
+  .el-main {
+    background-color: #f3f5f7;
+    color: #333;
+    padding: 10px;
+    .box-card {
+      height: 99%;
+    }
+  }
+  
+  .el-container {
+    height: 100%;
+  }
+</style>

ittpc/src/views/modules/staff/staff.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+Staff account
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        };
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

ittpc/src/views/modules/user/user.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+    userManage
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'user',
+  data() {
+      return {
+
+      };
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style scoped>
+
+</style>