From 08b3ac61106f030eea249d573c4884bd11693c42 Mon Sep 17 00:00:00 2001
From: nidapeng <jp@doumee.com>
Date: 星期五, 08 三月 2024 15:44:15 +0800
Subject: [PATCH] 更改头部
---
admin/src/components/common/CommonHeader.vue | 220 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 220 insertions(+), 0 deletions(-)
diff --git a/admin/src/components/common/CommonHeader.vue b/admin/src/components/common/CommonHeader.vue
new file mode 100644
index 0000000..58ec6c6
--- /dev/null
+++ b/admin/src/components/common/CommonHeader.vue
@@ -0,0 +1,220 @@
+<template>
+ <div class="common-header">
+ <div class="header">
+ <div class="logo">
+ <div> 鍗庢櫉鍥尯</div>
+ <!-- <div class="title-en">Diagnosis of Intelligent Manufacturing Integrated Service Platfrom</div> -->
+ </div>
+ <div class="user">
+ <el-dropdown v-if="isLogined" trigger="click">
+ <span class="el-dropdown-link">
+ <!-- <img v-if="userInfo != null" :src="userInfo.avatar == null ? `${require('@/assets/avatar/man.png')}` : userInfo.avatar" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i> -->
+ <img v-if="userInfo != null" style="width: 30px !important;" src="@/assets/avatar/man.png" 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>
+ <!-- 淇敼瀵嗙爜 -->
+ <GlobalAlertWindow
+ 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>
+ </GlobalAlertWindow>
+ </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import GlobalAlertWindow from './GlobalAlertWindow'
+import { logout, updatePwd } from '@/api/system/common'
+export default {
+ name: 'CommonHeader',
+ components: { GlobalAlertWindow },
+ props: {
+ isLogined: {
+ type: Boolean,
+ default: true
+ }
+ },
+ 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', '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(['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>
+
+<style scoped lang="scss">
+@import "@/assets/style/variables.scss";
+.common-header {
+ background-color: #1457C7;
+}
+.header {
+ overflow: hidden;
+ // background: #fff;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .logo {
+ background: url('../../assets/images/top_ic_chilun@2x.png') no-repeat;
+ box-sizing: border-box;
+ min-width: 280px;
+ height: 70px;
+ padding: 17px 30px;
+ // flex-shrink: 0;
+ line-height: 36px;
+ font-size: 22px;
+ font-weight: 600;
+ color: #fff;
+ // display: inline;
+ .title-en {
+ font-size: 11px;
+ font-weight: 500;
+ color: rgb(202, 214, 238);
+ }
+ }
+ .user {
+ width: 712px;
+ box-sizing: border-box;
+ height: 70px;
+ padding-right: 25px;
+ background: url('../../assets/images/top_ic_bolang@2x.png') no-repeat;
+ flex-shrink: 0;
+ text-align: right;
+ .el-dropdown {
+ top: 10px;
+ color: #fff;
+ }
+ img {
+ width: 32px;
+ position: relative;
+ top: 10px;
+ margin-right: 10px;
+ }
+ }
+}
+// 涓嬫媺鑿滃崟妗�
+.el-dropdown-menu {
+ width: 140px;
+ .el-dropdown-menu__item:hover {
+ background: #E3EDFB;
+ color: $primary-color;
+ }
+}
+</style>
--
Gitblit v1.9.3