VPNWeb/naf/layout/user.vue

<template>
  <div class="container">
    <el-avatar class="avatar" :size="40" :src="circleUrl" :icon="circleUrl == null ? 'el-icon-user-solid' : ''"></el-avatar>
    <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
            {{ name }}
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
            <!-- <el-dropdown-item>系统任务</el-dropdown-item>
            <el-dropdown-item>系统消息</el-dropdown-item>
            <el-dropdown-item>退出系统</el-dropdown-item> -->
        </el-dropdown-menu>
    </el-dropdown>
    <dialog-drawer type="dialog" :visible="visible" title="修改密码" @close="visible = false">
      <template v-slot:content>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="原密码" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpassword">
            <el-input v-model="form.newpassword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </template>
    </dialog-drawer>
  </div>
</template>

<script>
import dialogDrawer from '@naf/data/dialog -drawer'
import { mapActions } from 'vuex'
export default {
  components: {
    dialogDrawer
  },
  data () {
    return {
      circleUrl: null,
      form: {},
      visible: false,
      rules: {
        password: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newpassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    name () {
      const name = sessionStorage.getItem('name') || ''
      return name
    }
  },
  methods: {
    ...mapActions(['editPwa']),
    handleCommand () {
      this.visible = true
    },
    async onSubmit () {
      const userName = sessionStorage.getItem('userName')
      const res = await this.editPwa({ ...this.form, userName })
      if (res.errcode === 0) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        sessionStorage.clear()
      } else {
        this.$message.error(res.errmsg)
      }
      this.visible = false
    }
  },
  mounted () {}
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  .avatar {
    margin-top: 8%;
    margin-right: 5%;
  }
  .el-dropdown-link{
    color: #fff;
    line-height: 4em;
  }
}
</style>