From 9320341d835e0c4e4632d8682bddf3444c841457 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 08 七月 2021 15:53:41 +0800
Subject: [PATCH] 修改昵称
---
src/pages/settings/index/App.vue | 150 ++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 120 insertions(+), 30 deletions(-)
diff --git a/src/pages/settings/index/App.vue b/src/pages/settings/index/App.vue
index dfbe342..2589ff2 100644
--- a/src/pages/settings/index/App.vue
+++ b/src/pages/settings/index/App.vue
@@ -84,14 +84,32 @@
v-if="inAccountDetail == false && isAddAccount == false"
>
<div class="content-top">
- <div class="touxiang-big">
+ <div
+ class="touxiang-big"
+ @mouseenter="showChangePic = true"
+ @mouseleave="onLeave"
+ >
<img
v-if="activeAccountItem.headpic"
:src="`data:image/png;base64,${activeAccountItem.headpic}`"
alt=""
/>
- <div class="touxiang-mask" v-if="showChangePic==true">
- <span class="enable">淇敼澶村儚</span>
+ <div class="touxiang-mask" v-show="showChangePic">
+ <span
+ class="enable"
+ v-if="!showJPGArr"
+ @click="showJPGArr = true"
+ >淇敼澶村儚</span
+ >
+ <span
+ class="enable"
+ v-if="addForm.headpic"
+ @click="confirmChangePic"
+ >纭閫夋嫨</span
+ >
+ <span class="enable" v-if="showJPGArr" @click="cacelChoosePic">
+ 鍙栨秷</span
+ >
</div>
</div>
<div class="user-desc">
@@ -101,12 +119,12 @@
>
<span>{{ activeAccountItem.username }}</span>
</div>
- <div class="nickname">
- <span>鏄电О锛�</span>
+ <div class="nick-name">
+ <span class="nick-text">鏄电О锛�</span>
<span v-show="!showInputNickName">{{
activeAccountItem.nickname
}}</span>
- <input
+ <!-- <input
type="text"
class="input-nick"
ref="input-nick"
@@ -114,21 +132,22 @@
v-model="inputNickName"
@blur="hideInputNick"
@keydown.enter="blurInputNick"
- />
- <span class="icon iconfont" @click="editNickName"
- ></span
+ /> -->
+ <el-input
+ size="mini"
+ v-model="inputNickName"
+ v-if="showInputNickName"
+ ></el-input>
+ <span v-show="!showInputNickName" class="icon iconfont" @click="editNickName"
+ ></span
>
</div>
<div class="user-role">
- {{
- activeAccountItem.sysRoles.length
- ? activeAccountItem.sysRoles[0].name
- : ""
- }}
+ {{ activeUserRole }}
</div>
</div>
</div>
- <div class="chang-pic-arr">
+ <div class="chang-pic-arr" v-if="showJPGArr">
<div class="upload-group">
<div
class="upload-jpg"
@@ -149,9 +168,18 @@
</div>
</div>
</div>
- <div class="list-btn" v-if="isChangePic == false">
+ <div class="list-btn" v-if="showJPGArr == false">
<div class="item-btn" @click="showChangePassword">淇敼瀵嗙爜</div>
- <div class="item-btn" @click="deleteAccount">鍒犻櫎璐︽埛</div>
+ <div
+ class="item-btn"
+ v-if="
+ activeUserRole !== '瓒呯骇绠＄悊鍛�' ||
+ (curUserRole == '绠＄悊鍛�' && activeUserRole == '鏅�氱敤鎴�')
+ "
+ @click="deleteAccount"
+ >
+ 鍒犻櫎璐︽埛
+ </div>
<div class="item-btn" @click="openPermission">鏉冮檺璁剧疆</div>
</div>
</div>
@@ -606,7 +634,7 @@
};
return {
showAccount: true,
- showChangePic:false,
+ showChangePic: false,
syncYrs: "",
activeAccountItem: {},
syncMonth: "",
@@ -645,6 +673,7 @@
equipmentDate: "",
roleList: [],
ntpTestLoading: false,
+ showJPGArr: false,
settime: "",
weekday: "",
menuArr: [
@@ -684,7 +713,6 @@
confirmPassword: "",
roleId: "",
},
- isChangePic: true,
rules: {
userName: [
{ required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" },
@@ -733,8 +761,7 @@
getUsers().then((res) => {
this.accountArr = res.data;
if (this.accountArr.length) {
- this.activeAccountItem = this.accountArr[0];
- this.activeAccountIndex = 0;
+ this.activeAccountItem = this.accountArr[this.activeAccountIndex];
}
if (showLast) {
this.cancelAdd();
@@ -746,6 +773,18 @@
blurInputNick() {
this.$refs["input-nick"].blur();
},
+ confirmChangePic() {
+ updateUser({
+ id: this.activeAccountItem.id,
+ headpic: this.addForm.headpic,
+ }).then((res) => {
+ if (res.success) {
+ this.$message.success(res.msg);
+ this.fetchUserList();
+ this.cacelChoosePic();
+ }
+ });
+ },
editNickName() {
this.showInputNickName = true;
this.inputNickName = this.activeAccountItem.nickname;
@@ -753,6 +792,9 @@
},
hideInputNick() {
this.showInputNickName = false;
+ if (this.inputNickName == this.activeAccountItem.nickname) {
+ return;
+ }
updateUser({
id: this.activeAccountItem.id,
nickname: this.inputNickName,
@@ -766,7 +808,9 @@
this.activeAccountIndex = i;
this.inAccountDetail = false;
this.cancelSet();
+ this.cacelChoosePic();
this.fetchMenu();
+ this.showInputNickName = false;
},
minusOne(typ) {
this.isSyncBrowser = false;
@@ -1015,6 +1059,12 @@
this[`show${typ}Input`] = false;
this[`input${typ}`] = "";
},
+ onLeave() {
+ if (this.showJPGArr) {
+ return;
+ }
+ this.showChangePic = false;
+ },
syncBrowser(enable) {
this.isSyncBrowser = enable;
if (!enable) {
@@ -1032,6 +1082,8 @@
showAddAccount() {
this.inAccountDetail = false;
this.isAddAccount = true;
+ this.selectedPic = 0;
+ this.addForm.headpic = this.jpgArr[0];
getRoles().then((res) => {
if (res.success) {
this.roleList = res.data.slice(0, 2);
@@ -1048,6 +1100,12 @@
this.isChangePw = false;
this.inAccountDetail = false;
this.$refs["passwordForm"].resetFields();
+ },
+ cacelChoosePic() {
+ this.addForm.headpic = "";
+ this.showChangePic = false;
+ this.selectedPic = null;
+ this.showJPGArr = false;
},
SaveNewPassword(formName) {
this.$refs[formName].validate((valid) => {
@@ -1070,9 +1128,7 @@
});
},
saveAddAccount(formName) {
- debugger;
this.$refs[formName].validate((valid) => {
- debugger;
if (valid) {
let data = {
username: this.addForm.userName,
@@ -1096,6 +1152,11 @@
});
},
pickHeadDefPic(item, i) {
+ if (this.selectedPic == i) {
+ this.selectedPic = null;
+ this.addForm.headpic = "";
+ return;
+ }
this.addForm.headpic = item.path;
this.selectedPic = i;
},
@@ -1199,9 +1260,12 @@
},
},
computed: {
- isShowAddAccount() {
+ activeUserRole() {
+ return this.activeAccountItem.sysRoles[0].name;
+ },
+ curUserRole() {
const info = JSON.parse(sessionStorage.getItem("userInfo"));
- return true;
+ return info.roleName;
},
},
};
@@ -1429,13 +1493,26 @@
top: 0;
width: 100px;
height: 100px;
- background-color: rgba(0, 0, 0, 0.2);
+ background-color: rgba(0, 0, 0, 0.25);
color: white;
- cursor: pointer;
border-radius: 50%;
display: flex;
justify-content: center;
+ flex-direction: column;
align-items: center;
+ .enable {
+ cursor: pointer;
+ margin: 2px 0;
+ padding: 1px 2px;
+ border-radius: 3px;
+ border: 1px solid transparent;
+ font-size: 14px;
+ }
+ .enable:hover {
+ color: orangered;
+ font-size: 15px;
+ transition: all 0.2s;
+ }
.selected {
font-size: 20px;
}
@@ -1448,7 +1525,7 @@
align-items: baseline;
min-width: 200px;
.username {
- margin: 5px 15px;
+ margin: 4px 15px;
height: 30px;
line-height: 30px;
// width: 90px;
@@ -1457,11 +1534,17 @@
display: flex;
align-items: center;
}
- .nickname {
+ .nick-name {
margin: 5px 15px;
font-size: 14px;
+ display: flex;
+ align-items: center;
+ .nick-text {
+ width: fit-content;
+ text-align: left;
+ }
.input-nick {
- width: 50px;
+ width: 80px;
margin-right: 5px;
}
.iconfont {
@@ -1469,6 +1552,13 @@
margin-left: 5px;
cursor: pointer;
}
+ .el-input--mini {
+ font-size: 14px;
+ width: 100px;
+ .el-input__inner {
+ padding: 0 10px;
+ }
+ }
}
.user-role {
margin: 5px 0 0 15px;
--
Gitblit v1.8.0