picture/vue/src/components/main/NavHeader.vue

<template>
  <div id="header">
    <el-row>
      <el-col :span="12">
        <el-row class="menu-row">
          <el-menu class="el-menu-demo" :default-active="activeGroup" mode="horizontal" 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.name }}
            </el-menu-item>
          </el-menu>
          <el-radio-group :size="$store.state.size" v-model="active">
            <el-radio-button v-for="item in menus" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </el-row>
      </el-col>
      <el-col :span="12">
        <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 :size="$store.state.size" icon="el-icon-setting" type="info" @click="update = true">
            修改密码
          </el-button>
          <el-button :size="$store.state.size" icon="el-icon-switch-button" type="info"
            @click="$store.commit('logout')">
            注销登录
          </el-button>
        </el-row>
      </el-col>
    </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="password">
          <el-input type="password" v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" v-model="user.newPwd"></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="rePwd">
          <el-input type="password" v-model="user.rePwd" 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 = {
      password: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
      }],
      newPwd: [{
        validator: password,
        trigger: 'blur'
      }],
      rePwd: [{
        validator: this.reKey,
        trigger: 'blur'
      }]
    };

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

    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.password = md5(param.password)
          param.newPwd = md5(param.newPwd)
          delete param.rePwd;
          that.$post('public/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.newPwd) {
        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: 80px;
    padding-right: 100px;
  }

  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }

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

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