From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 16:40:17 +0800
Subject: [PATCH] all
---
src/pages/settings/index/index.vue | 216 +++++++++++++++++++++++++++++++----------------------
1 files changed, 127 insertions(+), 89 deletions(-)
diff --git a/src/pages/settings/index/App.vue b/src/pages/settings/index/index.vue
similarity index 91%
rename from src/pages/settings/index/App.vue
rename to src/pages/settings/index/index.vue
index b935d5f..0cad7cf 100644
--- a/src/pages/settings/index/App.vue
+++ b/src/pages/settings/index/index.vue
@@ -15,9 +15,9 @@
<div
class="container-center"
- v-if="activePage == '璐︽埛' || activePage == '鏃ユ湡鏃堕棿'"
+ v-if="activeIndex == 0 || activeIndex == 1"
>
- <div class="account-left" v-if="activePage == '璐︽埛'">
+ <div class="account-left" v-if="activeIndex == 0">
<div class="account-list">
<div
class="account-card"
@@ -33,23 +33,21 @@
:src="`data:image/png;base64,${item.headpic}`"
alt=""
/>
+ <span class="user-name">{{ item.username }}</span>
</div>
- <span class="user-name">{{ item.username }}</span>
- <el-tag
- style="margin-left: 100px"
- size="mini"
- v-if="item.id == curUserID"
- >鎴戠殑</el-tag
- >
+ <el-tag size="mini" v-if="item.id == curUserID">鎴戠殑</el-tag>
</div>
</div>
- <div class="add-account">
+ <div class="add-account" v-if="curUserRole != '鏅�氱敤鎴�'">
<!-- <span class="icon iconfont" @click="openAdd"></span> -->
- <i class="el-icon-circle-plus" style="font-size: 38px;
-" @click="openAdd"></i>
+ <i
+ class="el-icon-circle-plus"
+ style="font-size: 38px"
+ @click="openAdd"
+ ></i>
</div>
</div>
- <div class="datetime-left" v-if="activePage == '鏃ユ湡鏃堕棿'">
+ <div class="datetime-left" v-if="activeIndex == 1">
<div class="time-card">
<div class="head">
<span class="icon iconfont"></span>
@@ -84,9 +82,9 @@
</div>
<div
class="container-right"
- v-if="activePage == '璐︽埛' || activePage == '鏃ユ湡鏃堕棿'"
+ v-if="activeIndex == 0 || activeIndex == 1"
>
- <div class="account-right" v-if="activePage == '璐︽埛'">
+ <div class="account-right" v-if="activeIndex == 0">
<div
class="account-content"
v-if="inAccountDetail == false && isAddAccount == false"
@@ -189,15 +187,18 @@
<div class="item-btn" @click="showChangePassword">淇敼瀵嗙爜</div>
<div
class="item-btn"
- v-if="
- activeUserRole !== '瓒呯骇绠＄悊鍛�' ||
- (curUserRole == '绠＄悊鍛�' && activeUserRole == '鏅�氱敤鎴�')
- "
+ v-if="isShowDeleteAccount"
@click="deleteAccount"
>
鍒犻櫎璐︽埛
</div>
- <div class="item-btn" @click="openPermission">鏉冮檺璁剧疆</div>
+ <div
+ v-if="isShowPermitBtn"
+ class="item-btn"
+ @click="openPermission"
+ >
+ 鏉冮檺璁剧疆
+ </div>
</div>
</div>
@@ -304,18 +305,18 @@
<div class="fill-group">
<el-form
:model="addForm"
- :rules="rules"
+ :rules="addRules"
ref="addForm"
class="add-form"
>
<el-form-item prop="userName">
<div class="p-title">鐢ㄦ埛鍚嶏細</div>
<el-input
- placeholder="蹇呭～锛岄暱搴︿负2~10浣嶅瓧绗︼紝涓嶈兘浠ユ暟瀛楀紑澶淬�佷笉鍏佽鏈夋眽瀛�"
+ placeholder="蹇呭～锛岄暱搴︿负 2 ~ 10 浣嶅瓧绗︼紝涓嶈兘浠ユ暟瀛楀紑澶达紝涓嶅厑璁稿寘鍚眽瀛�"
v-model="addForm.userName"
></el-input>
</el-form-item>
- <el-form-item prop="roleId">
+ <el-form-item prop="roleId" v-if="curUserRole != '鏅�氱敤鎴�'">
<div class="p-title">瑙掕壊锛�</div>
<el-select v-model="addForm.roleId" placeholder="璇烽�夋嫨瑙掕壊">
<el-option
@@ -329,14 +330,14 @@
<el-form-item prop="nickName">
<div class="p-title">鏄电О锛�</div>
<el-input
- placeholder="閫夊～"
+ placeholder="閫夊～锛岄暱搴︿负 2 ~ 10 浣嶅瓧绗�"
v-model="addForm.nickName"
></el-input>
</el-form-item>
<el-form-item prop="password">
<div class="p-title">瀵嗙爜锛�</div>
<el-input
- placeholder="蹇呭～"
+ placeholder="蹇呭～锛岃嚦灏戜负 6 浣�"
v-model="addForm.password"
show-password
></el-input>
@@ -358,7 +359,7 @@
</div>
</div>
- <div class="datetime-right" v-if="activePage == '鏃ユ湡鏃堕棿'">
+ <div class="datetime-right" v-if="activeIndex == 1">
<div class="ntp-time" v-if="isNtp">
<el-form label-width="160px">
<el-form-item label="鏈嶅姟鍣ㄥ湴鍧�">
@@ -538,30 +539,34 @@
</div>
<clusterManagement
- v-if="activePage == '闆嗙兢绠＄悊'"
+ v-if="activeIndex == 2"
style="width: 100%"
></clusterManagement>
<netSettings
- v-if="activePage == '缃戠粶璁剧疆'"
+ v-if="activeIndex == 3"
style="width: 100%"
></netSettings>
<keyboardLanguage
- v-if="activePage == '閿洏鍜岃瑷�'"
+ v-if="activeIndex == 4"
style="width: 100%"
></keyboardLanguage>
<generalSettings
- v-if="activePage == '閫氱敤璁剧疆'"
+ v-if="activeIndex == 5"
style="width: 100%"
></generalSettings>
</div>
<div class="welcome-page" v-else>
- <div class="child" @click="openWelcome(item, i)" v-for="(item,i) in menuArr" :key="i">
+ <div
+ class="child"
+ @click="openWelcome(item, i)"
+ v-for="(item, i) in menuArr"
+ :key="i"
+ >
<div class="child-info">
<span class="icon iconfont welcome-icon">{{ item.icon }}</span>
- <span class="welcome-title">{{item.name}}</span>
+ <span class="welcome-title">{{ item.name }}</span>
</div>
</div>
-
</div>
</template>
@@ -585,6 +590,8 @@
import netSettings from "../views/NetSettings";
import keyboardLanguage from "../views/keyboardLanguage";
import generalSettings from "../views/generalSettings";
+import { pad0 } from "@/api/utils";
+
export default {
name: "settings",
components: {
@@ -596,7 +603,8 @@
generalSettings,
},
data() {
- var validatePass2 = (rule, value, callback) => {
+ var v2 = (rule, value, callback) => {
+ console.log("rule", rule);
if (value === "") {
callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
} else if (value !== this.addForm.password) {
@@ -605,11 +613,26 @@
callback();
}
};
- var validatePass4 = (rule, value, callback) => {
+ var v4 = (rule, value, callback) => {
+ console.log("rule", rule);
if (value === "") {
callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
} else if (value !== this.passwordForm.newPassword) {
callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
+ } else {
+ callback();
+ }
+ };
+ const v1 = (rule, value, callback) => {
+ if (value.trim() === "") {
+ callback(new Error("璇疯緭鍏ョ敤鎴峰悕"));
+ this.addForm.userName = "";
+ } else if (isNaN(Number(value[0])) == false) {
+ callback(new Error("涓嶈兘浠ユ暟瀛楀紑澶�"));
+ } else if (/[\u4E00-\u9FA5]/g.test(value)) {
+ callback(new Error("涓嶈兘杈撳叆姹夊瓧"));
+ } else if (value.length < 2 || value.length > 10) {
+ callback(new Error("闀垮害涓� 2 - 10 涓瓧绗�"));
} else {
callback();
}
@@ -670,7 +693,7 @@
jpgArr: [],
isManual: false,
isNtp: true,
- activePage: "璐︽埛",
+ // activePage: "璐︽埛",
activeIndex: 0,
clockTimer: null,
inputHour: "",
@@ -695,24 +718,18 @@
confirmPassword: "",
roleId: "",
},
- rules: {
- userName: [
- { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "blur" },
- {
- min: 2,
- max: 10,
- message: "闀垮害鍦� 2 鍒� 10 涓瓧绗�",
- trigger: "blur",
- },
+ addRules: {
+ userName: [{ validator: v1, trigger: "blur" }],
+ nickName: [
+ { min: 2, max: 10, message: "闀垮害涓� 2 - 10 浣�", trigger: "blur" },
],
password: [
{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" },
{ min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" },
],
- confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
+ confirmPassword: [{ validator: v2, trigger: "blur" }],
},
pwRules: {
- // pw: [{ validator: validatePass3, trigger: "blur" }],
curPassword: [
{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" },
{ min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" },
@@ -721,7 +738,7 @@
{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "blur" },
{ min: 6, message: "闀垮害鑷冲皯涓� 6 浣�", trigger: "blur" },
],
- confirmPassword: [{ validator: validatePass4, trigger: "blur" }],
+ confirmPassword: [{ validator: v4, trigger: "blur" }],
},
};
},
@@ -752,7 +769,6 @@
}
});
},
-
confirmChangePic() {
updateUser({
id: this.activeAccountItem.id,
@@ -789,8 +805,10 @@
this.activeAccountIndex = i;
this.inAccountDetail = false;
this.cancelSet();
+ this.cancelAdd();
this.cacelChoosePic();
this.fetchMenu();
+ this.cancelPassword();
this.showInputNickName = false;
},
minusOne(typ) {
@@ -803,25 +821,25 @@
if (num == -1) {
num = 23;
}
- this.syncHour = this.padZero(num);
+ this.syncHour = pad0(+num);
break;
case "min":
num = +this.syncMin - 1;
if (num == -1) {
num = 59;
}
- this.syncMin = this.padZero(num);
+ this.syncMin = pad0(+num);
break;
case "sec":
num = +this.syncSec + 1;
if (num == -1) {
num = 59;
}
- this.syncSec = this.padZero(num);
+ this.syncSec = pad0(+num);
break;
case "yrs":
num = +this.syncYrs - 1;
- this.syncYrs = this.padZero(num);
+ this.syncYrs = pad0(+num);
break;
case "mth":
num = +this.syncMonth - 1;
@@ -829,7 +847,7 @@
num = 12;
this.minusOne("yrs");
}
- this.syncMonth = this.padZero(num);
+ this.syncMonth = pad0(+num);
break;
case "day":
num = +this.syncDay - 1;
@@ -842,7 +860,7 @@
).getDate();
num = maxDay;
}
- this.syncDay = this.padZero(num);
+ this.syncDay = pad0(+num);
break;
default:
break;
@@ -867,32 +885,32 @@
if (num == 24) {
num = 0;
}
- this.syncHour = this.padZero(num);
+ this.syncHour = pad0(+num);
break;
case "min":
num = +this.syncMin + 1;
if (num == 60) {
num = 0;
}
- this.syncMin = this.padZero(num);
+ this.syncMin = pad0(+num);
break;
case "sec":
num = +this.syncSec + 1;
if (num == 60) {
num = 0;
}
- this.syncSec = this.padZero(num);
+ this.syncSec = pad0(+num);
break;
case "yrs":
num = +this.syncYrs + 1;
- this.syncYrs = this.padZero(num);
+ this.syncYrs = pad0(+num);
break;
case "mth":
num = +this.syncMonth + 1;
if (num == 13) {
num = 1;
}
- this.syncMonth = this.padZero(num);
+ this.syncMonth = pad0(+num);
break;
case "day":
num = +this.syncDay + 1;
@@ -900,7 +918,7 @@
if (num > maxDay) {
num = 1;
}
- this.syncDay = this.padZero(num);
+ this.syncDay = pad0(+num);
break;
default:
break;
@@ -979,10 +997,6 @@
}
return format;
},
- padZero(n) {
- n = +n;
- return n < 10 ? "0" + n : "" + n;
- },
formatNumber(n) {
n = n.toString();
return n[1] ? n : "0" + n;
@@ -1009,9 +1023,8 @@
});
},
openMenu(name, i) {
- this.activePage = name;
this.activeIndex = i;
- if (this.activePage == "鏃ユ湡鏃堕棿") {
+ if (this.activeIndex == 1) {
this.initClockConf();
}
},
@@ -1027,7 +1040,7 @@
},
hideInput(typ) {
if (this[`input${typ}`]) {
- this[`sync${typ}`] = this.padZero(this[`input${typ}`]);
+ this[`sync${typ}`] = pad0(+this[`input${typ}`]);
}
this[`show${typ}Input`] = false;
this[`input${typ}`] = "";
@@ -1059,7 +1072,7 @@
this.addForm.headpic = this.jpgArr[0].path;
getRoles().then((res) => {
if (res.success) {
- this.roleList = res.data.slice(0, 2);
+ this.roleList = res.data;
}
});
},
@@ -1087,6 +1100,7 @@
if (this.passwordForm.curPassword == "") {
data = {
userId: this.activeAccountItem.id,
+ oldPwd: "",
newPwd: this.passwordForm.newPassword,
};
} else {
@@ -1098,8 +1112,10 @@
updatePassword(data).then(
(res) => {
if (res.success) {
- this.$message.success(res.msg);
- this.cancelPassword();
+ this.$message.success("瀵嗙爜" + res.msg);
+ setTimeout(() => {
+ this.cancelPassword();
+ }, 1000);
}
},
(err) => {
@@ -1254,6 +1270,31 @@
const info = JSON.parse(sessionStorage.getItem("userInfo"));
return info.id;
},
+ isShowDeleteAccount() {
+ if (this.curUserRole == "瓒呯骇绠＄悊鍛�") {
+ if (this.activeUserRole == "瓒呯骇绠＄悊鍛�") {
+ return false;
+ }
+ return true;
+ } else if (this.curUserRole == "绠＄悊鍛�") {
+ if (this.activeUserRole == "鏅�氱敤鎴�") {
+ return true;
+ }
+ return false;
+ }
+ return false;
+ },
+ isShowPermitBtn(){
+ if (this.curUserRole == "绠＄悊鍛�") {
+ if (this.activeUserRole == "鏅�氱敤鎴�") {
+ return true
+ }
+ return false
+ }else if (this.curUserRole == "鏅�氱敤鎴�"){
+ return false
+ }
+ return true
+ },
},
};
</script>
@@ -1264,13 +1305,10 @@
background-color: #f5f5f5;
display: -ms-flexbox;
padding: 0 50px;
- -webkit-box-sizing: border-box;
box-sizing: border-box;
.child {
box-sizing: border-box;
background-color: white;
- -webkit-box-flex: 0;
- -ms-flex: 0 0 33.3%;
float: left;
width: 250px;
height: 200px;
@@ -1280,6 +1318,9 @@
justify-content: center;
align-items: center;
cursor: pointer;
+ -moz-box-shadow: 2px 2px 4px rgb(226, 226, 226);
+ -webkit-box-shadow: 2px 2px 4px rgb(226, 226, 226);
+ box-shadow: 2px 2px 4px rgb(226, 226, 226);
.child-info {
display: flex;
flex-direction: column;
@@ -1294,11 +1335,11 @@
}
}
.child:hover {
- -moz-box-shadow: 5px 5px 10px #ddd;
- -webkit-box-shadow: 5px 5px 10px #ddd;
- box-shadow: 5px 5px 10px #ddd;
- transform: translate3d(0, -2.5px, 0);
- transition: all 0.3s;
+ -moz-box-shadow: 5px 5px 15px rgb(218, 218, 218);
+ -webkit-box-shadow: 5px 5px 15px rgb(218, 218, 218);
+ box-shadow: 5px 5px 15px rgb(218, 218, 218);
+ transform: translate3d(0, -3px, 0);
+ transition: all 0.4s;
}
}
.container {
@@ -1351,8 +1392,9 @@
border-right: 5px solid rgba(248, 248, 248, 1);
box-sizing: border-box;
.account-left {
- .account-list{
- height: 530px;
+ height: 100%;
+ .account-list {
+ height: calc(85%);
overflow: auto;
}
.add-account {
@@ -1373,11 +1415,11 @@
box-sizing: border-box;
border-radius: 10px;
cursor: pointer;
+ justify-content: space-between;
+
.touxiang {
- height: 35px;
- width: 35px;
- background-color: bisque;
- border-radius: 17.5px;
+ display: flex;
+ align-items: center;
img {
border: none;
@@ -1465,12 +1507,10 @@
.touxiang-big {
width: 100px;
height: 100px;
- background-color: bisque;
position: relative;
border-radius: 50px;
img {
border: none;
-
width: 100px;
height: 100px;
position: relative;
@@ -1555,7 +1595,6 @@
}
.list-btn {
display: flex;
-
flex-direction: column;
align-items: center;
.item-btn {
@@ -1731,7 +1770,6 @@
text-decoration: underline;
}
}
-
}
.manual-time {
.clock-wrap {
--
Gitblit v1.8.0