From 5019ed6016b47221321bf395cd102dc4b51b4724 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期一, 05 二月 2024 09:40:43 +0800
Subject: [PATCH] Mr.Shi
---
platform/src/components/common/Header.vue | 174 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 161 insertions(+), 13 deletions(-)
diff --git a/platform/src/components/common/Header.vue b/platform/src/components/common/Header.vue
index 1800c40..7fec636 100644
--- a/platform/src/components/common/Header.vue
+++ b/platform/src/components/common/Header.vue
@@ -6,25 +6,149 @@
<i class="el-icon-s-fold" v-else @click="switchCollapseMenu(null)"></i>
{{title}}
</h2>
- <tagsview class="tags"></tagsview>
+ <div class="user">
+ <el-dropdown trigger="click">
+ <span class="el-dropdown-link">
+ <img v-if="userInfo != null" :src="userInfo.avatar == null ? '@/assets/images/avatar/man.png' : userInfo.avatar" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item @click.native="changePwd">淇敼瀵嗙爜</el-dropdown-item>
+ <el-dropdown-item @click.native="logout">閫�鍑虹櫥褰�</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
</div>
+ <!-- 淇敼瀵嗙爜 -->
+ <GlobalWindow
+ title="淇敼瀵嗙爜"
+ :visible.sync="visible.changePwd"
+ @confirm="confirmChangePwd"
+ @close="visible.changePwd = false"
+ >
+ <el-form :model="changePwdData.form" ref="changePwdDataForm" :rules="changePwdData.rules">
+ <el-form-item label="鍘熷瀵嗙爜" prop="oldPwd" required>
+ <el-input v-model="changePwdData.form.oldPwd" type="password" placeholder="璇疯緭鍏ュ師濮嬪瘑鐮�" maxlength="30" show-password></el-input>
+ </el-form-item>
+ <el-form-item label="鏂板瘑鐮�" prop="newPwd" required>
+ <el-input v-model="changePwdData.form.newPwd" type="password" placeholder="璇疯緭鍏ユ柊瀵嗙爜" maxlength="30" show-password></el-input>
+ </el-form-item>
+ <el-form-item label="纭鏂板瘑鐮�" prop="confirmPwd" required>
+ <el-input v-model="changePwdData.form.confirmPwd" type="password" placeholder="璇峰啀娆¤緭鍏ユ柊瀵嗙爜" maxlength="30" show-password></el-input>
+ </el-form-item>
+ </el-form>
+ </GlobalWindow>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
-import tagsview from "./tagsview.vue"
+import GlobalWindow from './GlobalWindow'
+import { logout, updatePwd } from '@/api/system/common'
export default {
name: 'Header',
- components: { tagsview },
+ components: { GlobalWindow },
+ data () {
+ return {
+ visible: {
+ // 淇敼瀵嗙爜
+ changePwd: false
+ },
+ isWorking: {
+ // 淇敼瀵嗙爜
+ changePwd: false
+ },
+ username: 'bob', // 鐢ㄦ埛鍚�
+ // 淇敼瀵嗙爜寮规
+ changePwdData: {
+ form: {
+ oldPwd: '',
+ newPwd: '',
+ confirmPwd: ''
+ },
+ rules: {
+ oldPwd: [
+ { required: true, message: '璇疯緭鍏ュ師濮嬪瘑鐮�' }
+ ],
+ newPwd: [
+ { required: true, message: '璇疯緭鍏ユ柊瀵嗙爜' }
+ ],
+ confirmPwd: [
+ { required: true, message: '璇峰啀娆¤緭鍏ユ柊瀵嗙爜' }
+ ]
+ }
+ }
+ }
+ },
computed: {
- ...mapState(['menuData']),
+ ...mapState(['menuData', 'userInfo']),
title () {
return this.$route.meta.title
}
},
+ filters: {
+ // 灞曠ず鍚嶇О
+ displayName (userInfo) {
+ if (userInfo == null) {
+ return ''
+ }
+ if (userInfo.realname != null && userInfo.realname.trim().length > 0) {
+ return userInfo.realname
+ }
+ return userInfo.username
+ }
+ },
methods: {
- ...mapMutations(['switchCollapseMenu']),
+ ...mapMutations(['setUserInfo', 'switchCollapseMenu']),
+ // 淇敼瀵嗙爜
+ changePwd () {
+ this.visible.changePwd = true
+ this.$nextTick(() => {
+ this.$refs.changePwdDataForm.resetFields()
+ })
+ },
+ // 纭畾淇敼瀵嗙爜
+ confirmChangePwd () {
+ if (this.isWorking.changePwd) {
+ return
+ }
+ this.$refs.changePwdDataForm.validate((valid) => {
+ if (!valid) {
+ return
+ }
+ // 楠岃瘉涓ゆ瀵嗙爜杈撳叆鏄惁涓�鑷�
+ if (this.changePwdData.form.newPwd !== this.changePwdData.form.confirmPwd) {
+ this.$tip.warning('涓ゆ瀵嗙爜杈撳叆涓嶄竴鑷�')
+ return
+ }
+ // 鎵ц淇敼
+ this.isWorking.changePwd = true
+ updatePwd({
+ oldPwd: this.changePwdData.form.oldPwd,
+ newPwd: this.changePwdData.form.newPwd
+ })
+ .then(() => {
+ this.$tip.apiSuccess('淇敼鎴愬姛')
+ this.visible.changePwd = false
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.isWorking.changePwd = false
+ })
+ })
+ },
+ // 閫�鍑虹櫥褰�
+ logout () {
+ logout()
+ .then(() => {
+ this.setUserInfo(null)
+ this.$router.push({ name: 'login' })
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ }
}
}
</script>
@@ -37,23 +161,47 @@
background: #fff;
height: 100%;
display: flex;
- overflow: hidden;
h2 {
+ width: 50%;
flex-shrink: 0;
- line-height: 48px;
- width: 200px;
+ line-height: $header-height;
font-size: 19px;
+ font-weight: 600;
color: #606263;
- font-weight: normal;
display: inline;
& > i {
font-size: 20px;
margin-right: 12px;
}
}
+ .user {
+ width: 50%;
+ flex-shrink: 0;
+ text-align: right;
+ .el-dropdown-link {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .el-dropdown {
+ top: 2px;
+ height: 100%;
+ }
+ img {
+ width: 32px;
+ position: relative;
+ // top: 10px;
+ margin-right: 10px;
+ }
+ }
}
-// .tags {
-// padding-bottom: 16px;
-// }
-
+// 涓嬫媺鑿滃崟妗�
+.el-dropdown-menu {
+ width: 140px;
+ .el-dropdown-menu__item:hover {
+ background: #E3EDFB;
+ color: $primary-color;
+ }
+}
</style>
--
Gitblit v1.9.3