...

src/components/GlobalHeader/AvatarDropdown.vue

@@ -0,0 +1,165 @@
+<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="permission" @click="goPermission">
+            <a-icon type="user" />
+            组织结构（权限管理）
+          </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>