From 18dfd3d183e68db6306b34500813cca8f8c689c9 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 29 四月 2021 10:08:30 +0800
Subject: [PATCH] 系统维护和系统设置
---
src/pages/systemSettings/index/App.vue | 373 ++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 267 insertions(+), 106 deletions(-)
diff --git a/src/pages/systemSettings/index/App.vue b/src/pages/systemSettings/index/App.vue
index b13a647..34950a2 100644
--- a/src/pages/systemSettings/index/App.vue
+++ b/src/pages/systemSettings/index/App.vue
@@ -22,6 +22,8 @@
class="account-card"
v-for="(item, index) in accountArr"
:key="index"
+ ref="account-card"
+ @click="openAccount(item, index)"
>
<div class="touxiang">
<img src="" alt="" />
@@ -64,14 +66,35 @@
v-if="activePage == '璐︽埛' || activePage == '鏃ユ湡鏃堕棿'"
>
<div class="account-right" v-if="activePage == '璐︽埛'">
- <div class="account-content" v-if="inAccountDetail == false">
+ <div
+ class="account-content"
+ v-if="inAccountDetail == false && isAddAccount == false"
+ >
<div class="content-top">
<div class="touxiang-big"></div>
<div class="user-desc">
- <div class="username">椋炲埄娴�</div>
+ <div class="username">
+ <span class="icon iconfont" style="margin-right: 5px"
+ ></span
+ >
+
+ <span>椋炲埄娴�</span>
+ </div>
<div class="nickname">
- <span>鍏斿厰</span>
- <span class="icon iconfont"></span>
+ <span>鏄电О锛�</span>
+ <span v-show="!showInputNickName">{{ inputNickName }}</span>
+ <input
+ type="text"
+ class="input-nick"
+ ref="input-nick"
+ v-show="showInputNickName"
+ v-model="inputNickName"
+ @blur="hideInputNick"
+ @keydown.enter="hideInputNick"
+ />
+ <span class="icon iconfont" @click="editNickName"
+ ></span
+ >
</div>
</div>
</div>
@@ -85,26 +108,38 @@
<div class="change-pw" v-if="inAccountDetail && isChangePw">
<div class="title">淇敼瀵嗙爜</div>
- <div class="p-title">褰撳墠瀵嗙爜锛�</div>
+ <el-form
+ :model="passwordForm"
+ :rules="rules"
+ ref="passwordForm"
+ class="password-form"
+ >
+ <el-form-item>
+ <div class="p-title">褰撳墠瀵嗙爜锛�</div>
- <el-input
- placeholder="蹇呭～"
- v-model="input1"
- show-password
- ></el-input>
- <div class="p-title">鏂板瘑鐮侊細</div>
- <el-input
- placeholder="蹇呭～"
- v-model="input2"
- show-password
- ></el-input>
- <div class="p-title">纭瀵嗙爜锛�</div>
- <el-input
- placeholder="蹇呭～"
- v-model="input3"
- show-password
- ></el-input>
-
+ <el-input
+ placeholder="蹇呭～"
+ v-model="passwordForm.curPassword"
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <div class="p-title">鏂板瘑鐮侊細</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="passwordForm.newPassword"
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <div class="p-title">纭瀵嗙爜锛�</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="passwordForm.confirmPassword"
+ show-password
+ ></el-input>
+ </el-form-item>
+ </el-form>
<div class="btns">
<div class="cancel" @click="cancelChangePassword">鍙栨秷</div>
<div class="ok">淇濆瓨</div>
@@ -142,7 +177,7 @@
</div>
</div>
- <div class="add-account-page" v-if="inAccountDetail && isAddAccount">
+ <div class="add-account-page" v-if="isAddAccount">
<div class="title">娣诲姞璐︽埛</div>
<div class="upload-group">
<div
@@ -150,7 +185,7 @@
v-for="(item, index) in jpgArr"
:key="index"
></div>
- <div
+ <!-- <div
class="upload-jpg"
style="height: 0px; visibility: hidden"
></div>
@@ -165,33 +200,47 @@
<div
class="upload-jpg"
style="height: 0px; visibility: hidden"
- ></div>
+ ></div> -->
</div>
<div class="fill-group">
- <div class="p-title">鐢ㄦ埛鍚嶏細</div>
- <el-input
- placeholder="蹇呭～"
- v-model="input1"
- show-password
- ></el-input>
- <div class="p-title">鏄电О</div>
- <el-input
- placeholder="閫夊～"
- v-model="input2"
- show-password
- ></el-input>
- <div class="p-title">瀵嗙爜锛�</div>
- <el-input
- placeholder="蹇呭～"
- v-model="input3"
- show-password
- ></el-input>
- <div class="p-title">纭瀵嗙爜锛�</div>
- <el-input
- placeholder="蹇呭～"
- v-model="input3"
- show-password
- ></el-input>
+ <el-form
+ :model="addForm"
+ :rules="rules"
+ ref="addForm"
+ class="add-form"
+ >
+ <el-form-item>
+ <div class="p-title">鐢ㄦ埛鍚嶏細</div>
+
+ <el-input
+ placeholder="蹇呭～"
+ v-model="addForm.userName"
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <div class="p-title">鏄电О锛�</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="addForm.nickName"
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <div class="p-title">瀵嗙爜锛�</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="addForm.password"
+ show-password
+ ></el-input>
+ </el-form-item>
+ <el-form-item>
+ <div class="p-title">纭瀵嗙爜锛�</div>
+ <el-input
+ placeholder="蹇呭～"
+ v-model="addForm.confirmPassword"
+ show-password
+ ></el-input>
+ </el-form-item>
+ </el-form>
</div>
<div class="btns">
<div class="cancel" @click="cancelAdd">鍙栨秷</div>
@@ -337,31 +386,39 @@
</div>
<div class="adjust-bar">
<div class="minus" @click="minusOne('mth')">-</div>
- <div class="middle">
-
- <span v-show="!showMonthInput">{{ syncMonth }}</span>
+ <div class="middle" @click="showInput('Month')">
+ <span v-show="!showMonthInput">{{ syncMonth }}</span>
<input
class="input-box"
v-show="showMonthInput"
- ref="iptYrs"
- oninput="value=value.replace(/[^\d]/g,'');if(value.length>4)value=value.slice(0,4);"
+ ref="iptMonth"
+ oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>12)value='12'"
type="text"
v-model="inputMonth"
@blur="hideInput('Month')"
@keydown.enter="hideInput('Month')"
/>
鏈�
-
-
</div>
-
-
<div class="plus" @click="plusOne('mth')">+</div>
</div>
<div class="adjust-bar">
<div class="minus" @click="minusOne('day')">-</div>
- <div class="middle">{{ syncDay }} 鏃�</div>
+ <div class="middle" @click="showInput('Day')">
+ <span v-show="!showDayInput">{{ syncDay }}</span>
+ <input
+ class="input-box"
+ v-show="showDayInput"
+ ref="iptDay"
+ oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>31)value='31'"
+ type="text"
+ v-model="inputDay"
+ @blur="hideInput('Day')"
+ @keydown.enter="hideInput('Day')"
+ />
+ 鏃�
+ </div>
<div class="plus" @click="plusOne('day')">+</div>
</div>
</div>
@@ -437,10 +494,13 @@
browserTimer: null,
timezone: "",
isRealtime: false,
+ inputNickName: "鍏斿厰",
showHourInput: false,
showMinInput: false,
showSecInput: false,
showYrsInput: false,
+ showMonthInput: false,
+ showDayInput: false,
timestamp: 0,
inAccountDetail: false,
@@ -473,6 +533,21 @@
inputMin: "",
inputSec: "",
inputYrs: "",
+ showInputNickName: false,
+ inputMonth: "",
+ inputDay: "",
+ passwordForm: {
+ curPassword: "",
+ newPassword: "",
+ confirmPassword: "",
+ },
+ activeAccount: 0,
+ addForm: {
+ userName: "",
+ nickName: "",
+ password: "",
+ confirmPassword: "",
+ },
};
},
beforeDestroy() {
@@ -490,6 +565,22 @@
});
},
methods: {
+ editNickName() {
+ this.showInputNickName = true;
+ this.$refs["input-nick"].focus();
+ },
+ hideInputNick() {
+ this.showInputNickName = false;
+ },
+ openAccount(item, i) {
+ this.$refs[`account-card`].forEach((x) => {
+ x.style.backgroundColor = "rgba(248, 248, 248, 1)";
+ x.style.color = "#2c3e50";
+ });
+ this.$refs[`account-card`][i].style.backgroundColor =
+ "rgba(61, 104, 225, 1)";
+ this.$refs[`account-card`][i].style.color = "#fff";
+ },
minusOne(typ) {
this.isSyncBrowser = false;
this.syncBrowser(false);
@@ -602,6 +693,7 @@
}
},
submitClock() {
+ debugger;
if (this.syncType === "1") {
if (this.ntpServer === "") {
this.$notify({
@@ -612,7 +704,7 @@
} else if (this.timeInterval === "") {
this.timeInterval = 1;
}
- } else {
+ } else if (this.isSyncBrowser) {
if (this.settime === "") {
this.$notify({
type: "error",
@@ -620,6 +712,8 @@
});
return false;
}
+ } else {
+ this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`;
}
let requestBody = {
timeZone: this.timezone,
@@ -727,7 +821,7 @@
},
openChangePw() {},
showAddAccount() {
- this.inAccountDetail = true;
+ this.inAccountDetail = false;
this.isAddAccount = true;
},
cancelAdd() {
@@ -803,11 +897,9 @@
this.isNtp = !v;
v && (this.syncType = "2");
if (v) {
- [
- this.syncYrs,
- this.syncMonth,
- this.syncDay,
- ] = this.equipmentDate.split("-");
+ [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split(
+ "-"
+ );
[this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(
":"
);
@@ -867,32 +959,38 @@
border-right: 5px solid rgba(248, 248, 248, 1);
box-sizing: border-box;
.account-left {
- .account-list {
- height: 530px;
- }
+
.add-account {
color: rgba(61, 104, 225, 1);
+ margin-top: 50px;
+
.iconfont {
cursor: pointer;
- font-size: 30px;
+ font-size: 32px;
}
}
.account-card {
- height: 40px;
- background-color: goldenrod;
+ height: 50px;
+ background-color: rgba(248, 248, 248, 1);
margin-bottom: 10px;
display: flex;
align-items: center;
padding: 0 20px;
+ box-sizing: border-box;
+ border-radius: 10px;
+ cursor: pointer;
.touxiang {
- height: 30px;
- width: 30px;
- background-color: green;
+ height: 35px;
+ width: 35px;
+ background-color: bisque;
+ border-radius: 17.5px;
}
.user-name {
margin-left: 10px;
+ font-size: 14px;
}
}
+
}
.datetime-left {
.time-card {
@@ -953,28 +1051,46 @@
.account-right {
.account-content {
.content-top {
- height: 150px;
- background-color: antiquewhite;
+ height: 120px;
+ width: 350px;
+ margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
+ margin-bottom: 20px;
.touxiang-big {
width: 100px;
height: 100px;
- background-color: indigo;
+ background-color: bisque;
+ border-radius: 50px;
}
.user-desc {
- background-color: khaki;
height: 100px;
- width: 150px;
display: flex;
flex-direction: column;
align-items: baseline;
+ min-width: 200px;
.username {
margin: 5px 15px;
+ height: 30px;
+ line-height: 30px;
+ width: 90px;
+ text-align: left;
+ font-size: 15px;
+ display: flex;
+ align-items: center;
}
.nickname {
margin: 5px 15px;
+ font-size: 14px;
+ .input-nick {
+ width: 50px;
+ margin-right: 5px;
+ }
+ .iconfont {
+ font-size: 14px;
+ margin-left: 5px;
+ }
}
}
}
@@ -985,15 +1101,56 @@
align-items: center;
.item-btn {
width: 500px;
- height: 50px;
- background-color: rgba(240, 240, 240, 1);
- margin-bottom: 10px;
+ height: 45px;
+ background-color: #f0f0f0;
+ margin-bottom: 15px;
+ border-radius: 10px;
+ line-height: 45px;
+ font-size: 15px;
+ cursor: pointer;
+ }
+ .item-btn:hover {
+ color: rgba(255, 153, 102, 1);
}
}
+ }
+ .title {
+ height: 30px;
+ line-height: 30px;
+ /* background-color: aliceblue; */
+ margin-bottom: 10px;
+ font-size: 16px;
+ font-weight: 600;
}
.change-pw {
.p-title {
text-align: left;
+ font-size: 15px;
+ margin-top: 5px;
+ }
+ }
+ .el-form-item {
+ margin-bottom: 0;
+ .el-input__inner {
+ background-color: rgba(240, 240, 240, 1);
+ border: none;
+ border-radius: 12px;
+ height: 45px;
+ padding: 0 20px;
+ font-size: 15px;
+ }
+ .el-input__clear {
+ color: dimgray;
+ font-size: 17px;
+ line-height: 45px;
+ }
+ .el-input__suffix {
+ right: 1px;
+ top: -0.5px;
+ width: 45px;
+ // background-color: rgba(61, 104, 225, 1);
+ /* color: white; */
+ border-radius: 12px;
}
}
.permission {
@@ -1013,17 +1170,21 @@
}
.add-account-page {
- background-color: lightcyan;
- padding: 10px 50px;
+ // background-color: lightcyan;
+ // padding: 10px 50px;
.upload-group {
- background-color: lightgrey;
- height: 100px;
- display: flex;
+ height: 120px;
+ width: 350px;
+ margin: 0 auto;
+ overflow: hidden;
.upload-jpg {
- height: 40px;
- width: 40px;
- background-color: lightcoral;
+ height: 50px;
+ width: 50px;
+ float: left;
+ margin: 0 10px;
+ background-color: antiquewhite;
margin-bottom: 20px;
+ border-radius: 25px;
}
}
.fill-group {
@@ -1219,18 +1380,18 @@
.middle {
font-size: 14px;
}
- .input-box {
- width: 80px;
- border: none;
- border-radius: 5px;
- height: 25px;
- font-size: 18px;
- text-align: center;
- }
+ .input-box {
+ width: 80px;
+ border: none;
+ border-radius: 5px;
+ height: 25px;
+ font-size: 18px;
+ text-align: center;
+ }
- .input-box:focus {
- outline: none;
- }
+ .input-box:focus {
+ outline: none;
+ }
.minus {
width: 50px;
height: 50px;
@@ -1257,12 +1418,12 @@
.btns {
display: flex;
justify-content: space-between;
- margin-top: 200px;
+ margin-top: 20px;
.cancel {
height: 40px;
width: 48%;
-
+ cursor: pointer;
border-radius: 8px;
background-color: rgba(240, 240, 240, 1);
line-height: 40px;
@@ -1271,7 +1432,7 @@
.ok {
height: 40px;
width: 48%;
-
+ cursor: pointer;
border-radius: 8px;
background-color: rgba(61, 104, 225, 1);
color: #fff;
--
Gitblit v1.8.0