调整界面，增加修改密码

plub/menu.js

@@ -12,32 +12,15 @@ export default [
       }
     ]
   },
-  {
-    name: '系统管理',
-    children: [
-      {
-        name: '系统设置',
-        path: '/advancedConfig/systemctl'
-      },
-      {
-        name: '时间设置',
-        path: '/advancedConfig/date'
-      },
-      {
-        name: '网络工具',
-        path: '/advancedConfig/ping'
-      }
-    ]
-  },
   {
     name: '证书管理',
     children: [
       {
-        name: '证书链管理',
+        name: 'CA证书管理',
         path: '/advancedConfig/cacert'
       },
       {
-        name: '设备证书管理',
+        name: 'VPN证书管理',
         path: '/advancedConfig/devcert'
       }
     ]
@@ -71,5 +54,26 @@ export default [
         path: '/advancedConfig/log/ipsecvpn'
       }
     ]
+  },
+  {
+    name: '系统管理',
+    children: [
+      {
+        name: '系统设置',
+        path: '/advancedConfig/systemctl'
+      },
+      {
+        name: '时间设置',
+        path: '/advancedConfig/date'
+      },
+      {
+        name: '网络工具',
+        path: '/advancedConfig/ping'
+      },
+      {
+        name: '修改密码',
+        path: '/advancedConfig/passwd'
+      }
+    ]
   }
 ]

src/App.vue

@@ -9,6 +9,6 @@ html, body {
   padding: 0;
   margin: 0;
   height: 100vh;
-  overflow: hidden;
+  // overflow: hidden;
 }
 </style>

src/router/index.js

@@ -16,6 +16,7 @@ import sslvpn from '../views/vpn/sslvpn.vue'
 import sslservicevpn from '../views/vpn/sslservicevpn.vue'
 import ipsecvpn from '../views/vpn/ipsecvpn.vue'
 import ipsecservicevpn from '../views/vpn/ipsecservicevpn.vue'
+import passwd from '../views/systemctl/passwd.vue'
 const states = process.env.VUE_APP_END || '0'
 
 Vue.use(VueRouter)
@@ -92,6 +93,11 @@ const routes = [
             path: 'ipsecvpn',
             name: 'ipsecvpn',
             component: states === '0' ? ipsecvpn : ipsecservicevpn
+          },
+          {
+            path: 'passwd',
+            name: 'passwd',
+            component: passwd
           }
         ]
       }

src/store/index.js

@@ -4,6 +4,7 @@ import axios from '../../plub/axios'
 Vue.use(Vuex)
 const api = {
   login: '/api/login',
+  passwd: '/api/passwd',
   devinfo: '/api/devinfo',
   cpu: '/api/cpu',
   memory: '/api/memory',
@@ -52,6 +53,7 @@ const api = {
 }
 export default new Vuex.Store({
   state: {
+    username: sessionStorage.getItem('username'),
     devinfo: {},
     cpudata: {},
     memorydata: {},
@@ -65,6 +67,11 @@ export default new Vuex.Store({
     ssldata: null
   },
   mutations: {
+    login (state, { username, token }) {
+      state.username = username
+      sessionStorage.setItem('username', username)
+      sessionStorage.setItem('token', token)
+    },
     devinfo (state, payload) {
       state.devinfo = payload.data
     },
@@ -109,6 +116,14 @@ export default new Vuex.Store({
     // 登录
     async login ({ commit }, { userName, password }) {
       const res = await axios.post(api.login, { userName, password })
+      if (res.data && res.data.errcode === 0) {
+        commit('login', { username: userName, token: res.data.token })
+      }
+      return res.data
+    },
+    // 登录
+    async changepass ({ commit }, { userName, oldpass, newpass }) {
+      const res = await axios.post(api.passwd, { userName, newpass, oldpass })
       return res.data
     },
     // 获取设备信息

src/views/advancedConfig.vue

@@ -9,7 +9,7 @@
           <template slot="title">
             <span>{{ item.name }}</span>
           </template>
-          <el-menu-item @click="handleOpen(i, `${index}-${x}`)" v-for="(i, x) in item.children" :index="`${index}-${x}`" :key="x">{{ i.name }}</el-menu-item>
+          <el-menu-item @click="handleOpen(i, `${index}-${x}`)" v-for="(i, x) in item.children" :index="i.path" :key="x">{{ i.name }}</el-menu-item>
         </el-submenu>
       </el-menu>
       <router-view class="view" />
@@ -29,11 +29,12 @@ export default {
     }
   },
   mounted () {
-    this.defaultActive = sessionStorage.getItem('menu') || '0-0'
+    // this.defaultActive = sessionStorage.getItem('menu') || '0-0'//
+    this.defaultActive = this.$route.path
   },
   methods: {
     handleOpen (e, i) {
-      sessionStorage.setItem('menu', i)
+      // sessionStorage.setItem('menu', i)
       this.$router.push(`${e.path}`)
     }
   }

src/views/cert/cacert.vue

@@ -1,7 +1,7 @@
 <template>
   <el-container>
     <el-header class="header">
-      <h3>证书链管理</h3>
+      <h3>CA证书管理</h3>
     </el-header>
     <el-main class="main">
       <div class="btnbox">

src/views/cert/cert.vue

@@ -1,7 +1,7 @@
 <template>
   <el-container>
     <el-header class="header">
-      <h3>证书链管理</h3>
+      <h3>VPN证书管理</h3>
     </el-header>
     <el-main class="main">
       <div class="btnbox">

src/views/home.vue

@@ -55,8 +55,9 @@ export default {
 }
 .main {
   width: 90%;
-  height: 85vh;
+  // height: 85vh;
   border: 1px solid #000;
-  margin: 2% auto;
+  margin: 20px auto;
+  padding: 10px;
 }
 </style>

src/views/login.vue

@@ -47,7 +47,7 @@ export default {
       }
       const res = await this.login({ userName: this.userName, password: this.password })
       if (res.errcode === 0) {
-        sessionStorage.setItem('token', res.token)
+        sessionStorage.setItem('tab', '1')
         this.$router.push({ path: '/devinfo' })
       }
     }

src/views/systemctl/date.vue

@@ -1,7 +1,7 @@
 <template>
   <el-container>
     <el-header class="header">
-      <h3>系统设置</h3>
+      <h3>时间设置</h3>
     </el-header>
     <el-main class="main">
       <el-form ref="form" :model="form" label-width="150px">

src/views/systemctl/passwd.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-container>
+    <el-header class="header">
+      <h3>修改密码</h3>
+    </el-header>
+    <el-main class="main">
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="150px">
+        <el-form-item label="用户名:">
+          <el-input :value="username" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="原密码:" :required="true" prop="oldpass">
+          <el-input v-model="form.oldpass" type="password" />
+        </el-form-item>
+        <el-form-item label="新密码:" :required="true"  prop="newpass">
+          <el-input v-model="form.newpass" type="password" />
+        </el-form-item>
+        <el-form-item label="密码确认:" :required="true" prop="confirm">
+          <el-input v-model="form.confirm" type="password" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">保存密码</el-button>
+        </el-form-item>
+      </el-form>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+export default {
+  name: 'passwd',
+  data () {
+    const checkConfirm = () => {
+      return (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'))
+        } else if (value !== this.form.newpass) {
+          callback(new Error('两次输入密码不一致!'))
+        } else {
+          callback()
+        }
+      }
+    }
+    return {
+      form: { },
+      rules: {
+        oldpass: [
+          { required: true, message: '请输入原密码' }
+        ],
+        newpass: [
+          { required: true, message: '请输入新密码' }
+        ],
+        confirm: [
+          { validator: checkConfirm(), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    ...mapActions(['changepass']),
+    // 提交数据
+    async onSubmit () {
+      this.$refs.form.validate(async (valid) => {
+        if (!valid) return false
+        const res = await this.changepass({ ...this.form, userName: this.username })
+        if (res && res.errcode === 0) {
+          this.$message.success('修改密码成功')
+        }
+      })
+    }
+  },
+  computed: {
+    ...mapState(['username'])
+  }
+}
+</script>
+<style lang="less" scoped>
+h3 {
+  width: 90%;
+  text-align: left;
+  text-indent: 1em;
+  line-height: 3em;
+  border-bottom: 2px solid #999;
+}
+.main {
+  width: 80%;
+  margin: 5% auto;
+  .el-input {
+    width: 200px;
+  }
+}
+</style>

src/views/systemctl/ping.vue

@@ -5,9 +5,9 @@
     </el-header>
     <el-main class="main">
       <div class="box">
-        <span>VPN连接目标IP:</span>
-        <el-input v-model="ip" />
-        <el-button type="primary" @click="linkTest">测试连接</el-button>
+        <span>目标地址:</span>
+        <el-input size="small" v-model="ip" />
+        <el-button size="small" type="primary" @click="linkTest">ping</el-button>
       </div>
     </el-main>
   </el-container>
@@ -50,14 +50,21 @@ h3 {
   width: 70%;
   margin: 10% auto;
   .box {
-    display: flex;
+    // display: flex;
+    max-width: 500px;
     span {
-      width: 25%;
+      width: 120px;
       color: #666;
       line-height: 2em;
     }
-    /deep/ .el-input {
-      margin-right: 5%;
+    .el-input {
+      margin-left: 20px;
+      width: 200px;
+    }
+    .el-button {
+      margin-left: 20px;
+      width: 100px;
+      font-size: .9em;
     }
   }
 }