From 9e1e058b057fc6ef0a9baf636f230c21f1282797 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 07 七月 2025 15:26:23 +0800
Subject: [PATCH] ss
---
admin/src/components/common/Header.vue | 206 ++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 192 insertions(+), 14 deletions(-)
diff --git a/admin/src/components/common/Header.vue b/admin/src/components/common/Header.vue
index a812472..f4709ae 100644
--- a/admin/src/components/common/Header.vue
+++ b/admin/src/components/common/Header.vue
@@ -4,26 +4,185 @@
<h2>
<i class="el-icon-s-unfold" v-if="menuData.collapse" @click="switchCollapseMenu(null)"></i>
<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" style="color: white">
+ <img v-if="userInfo != null" :src="userInfo.avatar == null ? '@/assets/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: '',
+ // 淇敼瀵嗙爜寮规
+ changePwdData: {
+ form: {
+ oldPwd: '',
+ newPwd: '',
+ confirmPwd: ''
+ },
+ rules: {
+ oldPwd: [
+ { required: true, message: '璇疯緭鍏ュ師濮嬪瘑鐮�' }
+ ],
+ newPwd: [
+ { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' },
+ { validator: this.validatePassword, trigger: 'blur' },
+ ],
+ 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()
+ })
+ },
+ validatePassword(rule, value, callback) {
+ if (!value) {
+ callback(new Error('璇疯緭鍏ュ瘑鐮�'))
+ } else {
+ const lengthValid = /^.{6,20}$/.test(value)
+ const hasLetter = /[a-zA-Z]/.test(value)
+ const hasNumber = /[0-9]/.test(value)
+ const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(value)
+
+ const typesCount = [hasLetter, hasNumber, hasSpecial].filter(Boolean).length
+
+ if (!lengthValid) {
+ callback(new Error('瀵嗙爜闀垮害闇�涓�6鍒�20涓瓧绗�'))
+ } else if (typesCount < 2) {
+ callback(new Error('瀵嗙爜闇�鍖呭惈瀛楁瘝銆佹暟瀛楀強鐗规畩瀛楃涓殑鑷冲皯涓ょ'))
+ } else {
+ callback() // 楠岃瘉閫氳繃
+ }
+ }
+ },
+ /**
+ * 纭畾淇敼瀵嗙爜
+ */
+ 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.visible.changePwd = false
+ setTimeout(() => {
+ this.$dialog.attentionConfirm('瀵嗙爜淇敼鎴愬姛锛岃閲嶆柊鐧诲綍', null, '閲嶆柊鐧诲綍').then(() => {
+ this.logout()
+ })
+ }, 300)
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ .finally(() => {
+ this.isWorking.changePwd = false
+ })
+ })
+ },
+ /**
+ * 閫�鍑虹櫥褰�
+ */
+ logout () {
+ logout()
+ .then(() => {
+ this.setUserInfo(null)
+ this.$cache.twoFA.removePassword()
+ this.$router.push({ name: 'login' })
+ })
+ .catch(e => {
+ this.$tip.apiFailed(e)
+ })
+ }
}
}
</script>
@@ -33,25 +192,44 @@
.header {
overflow: hidden;
padding: 0 25px;
- background: #fff;
+ background: #0c6ce3;
height: 100%;
display: flex;
- overflow: hidden;
h2 {
+ width: 50%;
flex-shrink: 0;
- line-height: 48px;
+ line-height: $header-height;
font-size: 19px;
- color: #606263;
- font-weight: normal;
+ font-weight: 600;
+ color: white;
display: inline;
& > i {
font-size: 20px;
margin-right: 12px;
}
}
+ .user {
+ width: 50%;
+ flex-shrink: 0;
+ color: white;
+ text-align: right;
+ .el-dropdown {
+ top: 2px;
+ }
+ 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