From b8198734a140076cd392b1ce194aa9aee2aaa0db Mon Sep 17 00:00:00 2001
From: wl <173@qq.com>
Date: 星期四, 03 十一月 2022 17:46:32 +0800
Subject: [PATCH] 图片管理 视频管理 右上角个人中心 驾驶舱管理
---
src/views/layout/components/Header/index.vue | 100 +++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 86 insertions(+), 14 deletions(-)
diff --git a/src/views/layout/components/Header/index.vue b/src/views/layout/components/Header/index.vue
index 60dbf0b..840e9af 100644
--- a/src/views/layout/components/Header/index.vue
+++ b/src/views/layout/components/Header/index.vue
@@ -3,8 +3,8 @@
<el-header>
<!-- 宸︿晶鑿滃崟 -->
<div class="header-left">
- <div class="menu-left__item" v-for="(item,index) in menuLeftList" :key="item.id" @click="changeActive(index)">
- <span :class="item.checked ? 'my-active':''">{{item.label}}</span>
+ <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)">
+ <span :class="item.checked ? 'my-active' : ''">{{ item.label }}</span>
</div>
</div>
<!-- 鍙充晶鑿滃崟 -->
@@ -14,61 +14,100 @@
<el-input suffix-icon="el-icon-search" v-model="keyword" placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�"></el-input>
</div>
<!-- 鐧诲綍鐢ㄦ埛 -->
- <div class="menu-right__item user" @mousemove="flag.user=true" @mouseleave="flag.user=false">
+ <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false">
<el-avatar :size="20" :src="user.icon" v-if="user.icon"></el-avatar>
<el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else>
</el-avatar>
- <span style="padding: 0 5px;">{{user.username? user.username:'Admin'}}</span>
+ <span style="padding: 0 5px;">{{ user.username}}</span>
<i class="el-icon-arrow-down"></i>
<!-- 鐢ㄦ埛鎿嶄綔 -->
<div class="user-card" v-if="flag.user" @mouseleave="flag.user = false">
<el-card class="box-card">
- <div class="user-card__item">淇敼瀵嗙爜</div>
- <div style="margin-top: 10px;" class="user-card__item">鍩烘湰淇℃伅</div>
+ <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div>
+ <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div>
</el-card>
</div>
</div>
<!-- 娑堟伅 -->
- <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave=" flag.message = false ">
+ <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false">
<el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600">
<el-badge :value="50" :max="99" class="item">
<i class="el-icon-message-solid"></i>
</el-badge>
</el-tooltip>
<!-- 娑堟伅鎿嶄綔 -->
- <div class="message-card" v-if="flag.message" @mouseleave=" flag.message = false ">
+ <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false">
<el-card class="box-card">
<div class="card-header">
<span>娑堟伅涓績</span>
<el-button type="text">鎺ユ敹璁剧疆</el-button>
</div>
<div v-for="item in menuMessageList" :key="item.id" class="message-card__item">
- <span class="label">{{item.label}}</span>
- <span>({{item.num}})</span>
+ <router-link to='/home/operate/message/messageIndex'>
+ <span @click="" class="label">{{ item.label }}</span>
+ </router-link>
+ <span>({{ item.num }})</span>
</div>
</el-card>
</div>
</div>
<!-- 璁剧疆 -->
- <div class="menu-right__item btn">
+ <!-- <div class="menu-right__item btn">
<el-tooltip effect="dark" content="璐︽埛璁剧疆" placement="bottom-end" :hide-after="1000">
<i class="el-icon-s-tools"></i>
</el-tooltip>
- </div>
+ </div> -->
<!-- 閫�鍑虹櫥褰� -->
<div class="menu-right__item btn" @click="loginout">
<el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000">
<i class="el-icon-switch-button"></i>
</el-tooltip>
</div>
+ <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog"
+ :before-close="handleClose">
+ <updatePassword />
+ </el-dialog>
+ <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible"
+ :before-close="handleClose">
+ <el-form :model="user" class="info" label-width="6vw">
+ <el-form-item label="鐢ㄦ埛ID" min-width="6">
+ <el-input v-model="user.id"></el-input>
+ </el-form-item>
+ <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10">
+ <el-input v-model="user.nickName"></el-input>
+ </el-form-item>
+ <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8">
+ <el-input v-model="user.username"></el-input>
+ </el-form-item>
+ <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7">
+ <el-input v-model="user.mobile"></el-input>
+ </el-form-item>
+ <!-- <el-form-item prop="departName" label="鎵�灞為儴闂�" min-width="8">
+ <el-input v-model="user.mobile"></el-input>
+ </el-form-item> -->
+ <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8">
+ <el-input v-model="user.jobTitle"></el-input>
+ </el-form-item>
+ <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10">
+ <el-input v-model="user.createTime"></el-input>
+ </el-form-item>
+ </el-form>
+
+ </el-dialog>
</div>
</el-header>
</template>
<script>
+import updatePassword from "./updatePassword";
export default {
+ components: {
+ updatePassword
+ },
data() {
return {
+ baseInformationVisible: false,
+ updatePasswordDialog: false,
menuLeftList: [
{
label: '椹鹃┒鑸�',
@@ -123,6 +162,31 @@
this.getLoginInfo();
},
methods: {
+ baseInfo() {
+ this.baseInformationVisible = true;
+ const name = sessionStorage.getItem('name');
+ this.$axios({
+ method: 'get',
+ url: 'sccg/admin/info?name=' + name,
+ })
+ .then(res => {
+ sessionStorage.setItem('user', JSON.stringify(res.data));
+ this.user = res.data.user;
+ })
+ },
+ handleClose(done) {
+ this.$confirm("纭鍏抽棴锛�")
+ .then((_) => {
+ this.dialogUpload = false;
+ // this.dialogUpdate = false;
+ done();
+ })
+ .catch((_) => { });
+ },
+ //淇敼瀵嗙爜
+ updatePassword() {
+ this.updatePasswordDialog = true;
+ },
// 閫�鍑哄姛鑳�
loginout() {
this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', {
@@ -150,7 +214,7 @@
getLoginInfo() {
const info = JSON.parse(sessionStorage.getItem('user'));
if (info) {
- this.user = info;
+ this.user = info;
} else {
const name = sessionStorage.getItem('name');
this.$axios({
@@ -159,7 +223,7 @@
})
.then(res => {
sessionStorage.setItem('user', JSON.stringify(res.data));
- this.user = res.data;
+ this.user = res.data.user;
})
}
}
@@ -168,6 +232,12 @@
</script>
<style lang="scss" scoped>
+ ::v-deep .el-form{
+ padding: 3vh 5vw;
+ .el-form-item__label{
+ color: #4b9bb7;
+ }
+}
.el-header {
background-color: #071a38;
color: #333;
@@ -240,6 +310,7 @@
top: 60px;
width: 120px;
z-index: 3000;
+
.user-card__item {
padding: 5px 0;
@@ -273,6 +344,7 @@
width: 180px;
left: -50px;
z-index: 3000;
+
:deep(.el-card__body) {
padding: 0;
}
--
Gitblit v1.8.0