water_dealer-agent/src/components/GlobalHeader/AvatarDropdown.vue

<template>
  <div>
    <a-dropdown v-if="currentUser && currentUser.name" placement="bottomRight">
      <span class="ant-pro-account-avatar">
        <a-avatar v-if="currentUser.avatar" :src="currentUser.avatar" class="antd-pro-global-header-index-avatar" size="small" />
        <a-avatar v-else src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" class="antd-pro-global-header-index-avatar" size="small" />
        <!-- <img class="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> -->
        <!-- <a-avatar v-else style="color: #f56a00; backgroundColor: #fde3cf" class="antd-pro-global-header-index-avatar" size="small">U</a-avatar> -->
        <span>{{ currentUser.name }} ({{ currentUser.type }})</span>
      </span>
      <template v-slot:overlay>
        <a-menu :selected-keys="[]" class="ant-pro-drop-down menu">
          <a-menu-item key="changePwd" @click="changePassword">
            <a-icon type="lock" />
            修改密码
          </a-menu-item>
          <a-menu-item key="logout" @click="handleLogout">
            <a-icon type="logout" />
            退出登录
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <span v-else>
      <a-spin :style="{ marginLeft: 8, marginRight: 8 }" size="small" />
    </span>
    <a-modal v-model="visible" title="修改密码" on-ok="handleOk">
      <a-form-item>
        <a-input
          placeholder="请输入密码"
          size="large"
          type="password"
          oninput="value=value.replace(/[, ]/g,'')"
          onkeyup="value=value.replace(/[, ]/g,'')"
          onblur="value=value.replace(/\s+/g,'')"
          v-model="postData.passWord">
          <template v-slot:prefix>
            <a-icon :style="{ color: 'rgba(0,0,0,.25)' }" type="lock" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          placeholder="请再次输入密码"
          size="large"
          type="password"
          oninput="value=value.replace(/[, ]/g,'')"
          onkeyup="value=value.replace(/[, ]/g,'')"
          onblur="value=value.replace(/\s+/g,'')"
          v-model="postData.passWordAgain">
          <template v-slot:prefix>
            <a-icon :style="{ color: 'rgba(0,0,0,.25)' }" type="lock" />
          </template>
        </a-input>
      </a-form-item>
      <template slot="footer">
        <a-button key="back" @click="visible = false">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          确认
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue'
import { password } from '@/api/login'

export default {
  name: 'AvatarDropdown',
  props: {
    currentUser: {
      type: Object,
      default: () => null
    },
    menu: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
       loading: false,
       visible: false,
       postData: {
         passWord: '',
         passWordAgain: ''
       }
    }
  },
  methods: {
    goPermission () {
      if (this.$route.name !== 'PermissionsIndex') {
        this.$router.push({ name: 'PermissionsIndex' })
      }
    },
    handleToCenter () {
      if (this.$route.name !== 'UserCenter') {
        this.$router.push({ name: 'UserCenter' })
      }
    },
    handleToSettings () {
      if (this.$route.name !== 'SecuritySettings') {
        this.$router.push({ name: 'SecuritySettings' })
      }
    },
    handleLogout (e) {
      Modal.confirm({
        title: this.$t('layouts.usermenu.dialog.title'),
        content: this.$t('layouts.usermenu.dialog.content'),
        onOk: () => {
          return this.$store.dispatch('Logout').then(() => {
            this.$router.replace({ name: 'login' })
          })
        },
        onCancel () {
        }
      })
    },
    changePassword () {
      this.visible = true
    },
    handleOk () {
      this.loading = true
      password({
        password: this.postData.passWord,
        password_confirmation: this.postData.passWordAgain
      }).then(res => {
        this.loading = false
        this.visible = false
        this.postData.passWord = ''
        this.postData.passWordAgain = ''
        this.$notification.success({
          message: res
        })
      }).catch(err => {
        this.loading = false
        this.visible = true
        this.$notification.error({
          message: err.message
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-drop-down {
  /deep/ .action {
    margin-right: 8px;
  }

  /deep/ .ant-dropdown-menu-item {
    min-width: 160px;
  }
}
</style>