admin/vue/src/components/main/NavHeader.vue

<template>
  <div id="header">
    <el-row class="info" type="flex" justify="end" align="middle">
      <el-button class="info-btn" icon="el-icon-user-solid" type="text">
        {{ $store.state.userInfo.userId }}
      </el-button>
      <el-button class="info-btn" icon="el-icon-setting" type="text" @click="update = true">
        修改密码
      </el-button>
      <el-button class="info-btn" icon="el-icon-switch-button" type="text" @click="$store.commit('logout')">
        注销登录
      </el-button>
    </el-row>
    <el-row class="menu-row">
      <el-menu class="el-menu-demo" :default-active="activeGroup" mode="horizontal" background-color="#FFF" text-color="#000" active-text-color="#4669e7">
        <el-menu-item v-for="item in $store.state.menuGroups" :key="item.id" :index="item.id" @click="clickGroup(item)">
          {{ item.title }}
          <!-- <i :class="item.desc"></i> -->
        </el-menu-item>
      </el-menu>
      <el-radio-group v-model="active" fill="#edf2f7" text-color="#4669e7">
        <el-radio-button v-for="item in menus" :label="item.href">
          {{ item.title }}
        </el-radio-button>
      </el-radio-group>
    </el-row>
    <el-dialog title="修改密码" :visible.sync="update" width="40%" top="15vh" :close-on-click-modal="false"
      @keydown.enter.native="confirm()">
      <el-form ref="update" :model="user" :rules="rules" label-width="180px">
        <el-form-item label="旧密码" prop="key">
          <el-input type="password" v-model="user.key"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newKey">
          <el-input type="password" v-model="user.newKey"></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="reKey">
          <el-input type="password" v-model="user.reKey" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="update = false;"> 取 消 </el-button>
        <el-button type="primary" @click="confrim"> 确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop,
    Watch
  } from 'vue-property-decorator';
  import md5 from 'js-md5';
  import {
    password
  } from '@/static/tool/validate.js';

  @Component
  export default class NavHeader extends Vue {
    menus = [];
    active = 'home';
    activeGroup = 'home';
    update = false;
    user = {};
    rules = {
      key: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
      }],
      newKey: [{
        validator: password,
        trigger: 'blur'
      }],
      reKey: [{
        validator: this.reKey,
        trigger: 'blur'
      }]
    };

    clickGroup(group) {
      this.activeGroup = group.id
      this.menus = group.children
      const children = group.children
      if (children.length == 0) {
        this.active = group.href
      } else {
        this.active = children[0].href
      }
    }

    clickMenu(id) {
      this.active = id
    }

    toHome() {
      this.clickGroup(this.$store.state.menuGroups[0])
    }

    confrim() {
      const that = this
      this.$refs.update.validate((valid) => {
        if (valid) {
          const param = JSON.parse(JSON.stringify(that.user));
          param.userId = that.$store.state.userInfo.userId;
          param.key = md5(param.key)
          param.newKey = md5(param.newKey)
          delete param.reKey;
          that.$post('um/update/password', param).then(rsp => {
            if (rsp) {
              that.update = false;
              that.user = {};
              that.$store.commit('logout')
            }
          });
        } else {
          return false
        }
      });
    }

    reKey(rule, value, callback) {
      if (!value) {
        callback(new Error('请重复输入新密码'));
      } else if (value != this.user.newKey) {
        callback(new Error('两次输入的新密码不一致'));
      }else{
        callback();
      }
    }

    @Watch('active')
    activeChang(n, o) {
      this.$router.push('/' + n)
    }

    created() {}
    mounted() {} // 生命周期 - 挂载完成（可以访问DOM元素
    beforeCreate() {} // 生命周期 - 创建之前
    beforeMount() {} // 生命周期 - 挂载之前
    beforeUpdate() {} // 生命周期 - 更新之前
    updated() {} // 生命周期 - 更新之后
    beforeDestroy() {} // 生命周期 - 销毁之前
    destroyed() {} // 生命周期 - 销毁完成
    activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>

  .info {
    background-color: cadetblue;
    height: 50px;
    padding-right: 100px;
  }

  .info-btn {
    font-size: 17px;
    color: #2D3748;
    margin-left: 30px !important;
  }

  .menu-row {
    background-color: #FFFFFF;
    /* padding-left: 20px; */
  }
</style>