From 3ef852b93c3166b3eed443d25cd8785c093d594f Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 21 六月 2021 20:29:26 +0800
Subject: [PATCH] 系统设置接口对接
---
src/pages/systemSettings/index/App.vue | 215 ++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 153 insertions(+), 62 deletions(-)
diff --git a/src/pages/systemSettings/index/App.vue b/src/pages/systemSettings/index/App.vue
index 34950a2..c4a9817 100644
--- a/src/pages/systemSettings/index/App.vue
+++ b/src/pages/systemSettings/index/App.vue
@@ -20,15 +20,16 @@
<div class="account-list">
<div
class="account-card"
+ :class="activeAccountIndex == index ? 'account-card-active' : ''"
v-for="(item, index) in accountArr"
:key="index"
ref="account-card"
@click="openAccount(item, index)"
>
<div class="touxiang">
- <img src="" alt="" />
+ <img :src="item.headpic" alt="" />
</div>
- <span class="user-name">{{ item.name }}</span>
+ <span class="user-name">{{ item.username }}</span>
</div>
</div>
<div class="add-account">
@@ -71,18 +72,21 @@
v-if="inAccountDetail == false && isAddAccount == false"
>
<div class="content-top">
- <div class="touxiang-big"></div>
+ <div class="touxiang-big">
+ <img :src="activeAccountItem.headpic" alt="" />
+ </div>
<div class="user-desc">
<div class="username">
<span class="icon iconfont" style="margin-right: 5px"
></span
>
-
- <span>椋炲埄娴�</span>
+ <span>{{ activeAccountItem.username }}</span>
</div>
<div class="nickname">
<span>鏄电О锛�</span>
- <span v-show="!showInputNickName">{{ inputNickName }}</span>
+ <span v-show="!showInputNickName">{{
+ activeAccountItem.nickname
+ }}</span>
<input
type="text"
class="input-nick"
@@ -90,7 +94,7 @@
v-show="showInputNickName"
v-model="inputNickName"
@blur="hideInputNick"
- @keydown.enter="hideInputNick"
+ @keydown.enter="blurInputNick"
/>
<span class="icon iconfont" @click="editNickName"
></span
@@ -110,11 +114,11 @@
<el-form
:model="passwordForm"
- :rules="rules"
+ :rules="pwRules"
ref="passwordForm"
class="password-form"
>
- <el-form-item>
+ <el-form-item prop="pw">
<div class="p-title">褰撳墠瀵嗙爜锛�</div>
<el-input
@@ -123,7 +127,7 @@
show-password
></el-input>
</el-form-item>
- <el-form-item>
+ <el-form-item prop="newPw">
<div class="p-title">鏂板瘑鐮侊細</div>
<el-input
placeholder="蹇呭～"
@@ -131,7 +135,7 @@
show-password
></el-input>
</el-form-item>
- <el-form-item>
+ <el-form-item prop="confirmNewPw">
<div class="p-title">纭瀵嗙爜锛�</div>
<el-input
placeholder="蹇呭～"
@@ -185,22 +189,15 @@
v-for="(item, index) in jpgArr"
:key="index"
></div>
- <!-- <div
- class="upload-jpg"
- style="height: 0px; visibility: hidden"
- ></div>
- <div
- class="upload-jpg"
- style="height: 0px; visibility: hidden"
- ></div>
- <div
- class="upload-jpg"
- style="height: 0px; visibility: hidden"
- ></div>
- <div
- class="upload-jpg"
- style="height: 0px; visibility: hidden"
- ></div> -->
+
+ <el-upload
+ class="upload-demo"
+ action="https://jsonplaceholder.typicode.com/posts/"
+ :show-file-list="false"
+ :http-request="uploadUserPic"
+ >
+ <div class="upload-jpg-up">涓婁紶</div>
+ </el-upload>
</div>
<div class="fill-group">
<el-form
@@ -209,22 +206,21 @@
ref="addForm"
class="add-form"
>
- <el-form-item>
+ <el-form-item prop="userName">
<div class="p-title">鐢ㄦ埛鍚嶏細</div>
-
<el-input
placeholder="蹇呭～"
v-model="addForm.userName"
></el-input>
</el-form-item>
- <el-form-item>
+ <el-form-item prop="nickName">
<div class="p-title">鏄电О锛�</div>
<el-input
placeholder="蹇呭～"
v-model="addForm.nickName"
></el-input>
</el-form-item>
- <el-form-item>
+ <el-form-item prop="password">
<div class="p-title">瀵嗙爜锛�</div>
<el-input
placeholder="蹇呭～"
@@ -232,7 +228,7 @@
show-password
></el-input>
</el-form-item>
- <el-form-item>
+ <el-form-item prop="confirmPassword">
<div class="p-title">纭瀵嗙爜锛�</div>
<el-input
placeholder="蹇呭～"
@@ -244,7 +240,7 @@
</div>
<div class="btns">
<div class="cancel" @click="cancelAdd">鍙栨秷</div>
- <div class="ok">淇濆瓨</div>
+ <div class="ok" @click="saveAddAccount('addForm')">淇濆瓨</div>
</div>
</div>
</div>
@@ -270,8 +266,6 @@
size="small"
:controls="false"
></el-input-number>
- <!-- :disabled="syncType === '2'" -->
- <!-- :disabled="syncType === '2'" -->
<el-button
type="text"
@click="testNTP"
@@ -450,17 +444,8 @@
</template>
<script>
-import {
- getDevInfo,
- getAlarmConfig,
- saveDevInfo,
- saveAlarmConfig,
- getClockInfo,
- saveClockInfo,
- testNTPserver,
- getResourceConfig,
- saveResourceConfig,
-} from "@/api/system";
+import { getClockInfo, saveClockInfo, testNTPserver } from "@/api/system";
+import { uploadHeadPic, addUser, getUsers, updateUser,updatePassword } from "@/api/user";
import switchBar from "../components/switchBar";
import ipInput from "@/components/subComponents/IPInput";
import clusterManagement from "../views/clusterManagement";
@@ -478,9 +463,29 @@
generalSettings,
},
data() {
+ var validatePass = (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("璇疯緭鍏ュ瘑鐮�"));
+ } else {
+ if (this.addForm.checkPass !== "") {
+ this.$refs.addForm.validateField("checkPassword");
+ }
+ callback();
+ }
+ };
+ var validatePass2 = (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"));
+ } else if (value !== this.addForm.password) {
+ callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
+ } else {
+ callback();
+ }
+ };
return {
showAccount: true,
syncYrs: "",
+ activeAccountItem: {},
syncMonth: "",
syncHour: "",
syncDay: "",
@@ -494,7 +499,7 @@
browserTimer: null,
timezone: "",
isRealtime: false,
- inputNickName: "鍏斿厰",
+ inputNickName: "",
showHourInput: false,
showMinInput: false,
showSecInput: false,
@@ -522,7 +527,7 @@
{ name: "閿洏鍜岃瑷�" },
{ name: "閫氱敤璁剧疆" },
],
- accountArr: [{ name: "璐濊拏" }, { name: "鏈辫开" }, { name: "鍗″皵" }],
+ accountArr: [],
jpgArr: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
isManual: false,
isNtp: true,
@@ -541,13 +546,24 @@
newPassword: "",
confirmPassword: "",
},
- activeAccount: 0,
+ activeAccountIndex: 0,
addForm: {
userName: "",
nickName: "",
password: "",
+ headpic: "",
confirmPassword: "",
},
+ rules: {
+ password: [{ validator: validatePass, trigger: "blur" }],
+ confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
+ // age: [{ validator: checkAge, trigger: "blur" }],
+ },
+ pwRules:{
+ pw: [{ validator: validatePass3, trigger: "blur" }],
+ newPw: [{ validator: validatePass3, trigger: "blur" }],
+ confirmNewPw: [{ validator : validatePass4, trigger: "blur" }],
+ }
};
},
beforeDestroy() {
@@ -559,27 +575,41 @@
s.style.backgroundColor = "rgba(61, 104, 225, 1)";
s.style.color = "#fff";
this.$nextTick(() => {
- // this.initSysinfo();
- // this.initResourceConfig();
this.initClockConf();
});
+
+ this.fetchUserList();
},
methods: {
+ fetchUserList() {
+ getUsers().then((res) => {
+ this.accountArr = res.data;
+ if (this.accountArr.length) {
+ this.activeAccountItem = this.accountArr[0];
+ }
+ });
+ },
+ blurInputNick() {
+ this.$refs["input-nick"].blur();
+ },
editNickName() {
this.showInputNickName = true;
+ this.inputNickName = this.activeAccountItem.nickname;
this.$refs["input-nick"].focus();
},
hideInputNick() {
this.showInputNickName = false;
+ updateUser({
+ id: this.activeAccountItem.id,
+ nickname: this.inputNickName,
+ }).then((res) => {
+ this.$message.success(res.msg);
+ this.fetchUserList();
+ });
},
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";
+ this.activeAccountItem = item;
+ this.activeAccountIndex = i;
},
minusOne(typ) {
this.isSyncBrowser = false;
@@ -760,6 +790,13 @@
n = n.toString();
return n[1] ? n : "0" + n;
},
+ uploadUserPic(params) {
+ let param = new FormData();
+ param.append("file", params.file);
+ uploadHeadPic(param).then((res) => {
+ this.addForm.headpic = res.data;
+ });
+ },
initClockConf(ntpTest = false) {
getClockInfo().then((rsp) => {
if (rsp && rsp.success) {
@@ -831,6 +868,29 @@
cancelChangePassword() {
this.isChangePw = false;
this.inAccountDetail = false;
+ },
+ saveAddAccount(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ let data = {
+ username: this.addForm.userName,
+ password: this.addForm.password,
+ nickname: this.addForm.nickName,
+ headpic: this.addForm.headpic,
+ };
+ addUser(data).then(
+ (res) => {
+ this.$message.success(res.data);
+ },
+ (err) => {
+ this.$message.warning("淇濆瓨澶辫触锛�" + err.msg);
+ }
+ );
+ } else {
+ console.log("error submit!!");
+ return false;
+ }
+ });
},
testNTP() {
this.ntpTestLoading = true;
@@ -959,7 +1019,6 @@
border-right: 5px solid rgba(248, 248, 248, 1);
box-sizing: border-box;
.account-left {
-
.add-account {
color: rgba(61, 104, 225, 1);
margin-top: 50px;
@@ -984,13 +1043,24 @@
width: 35px;
background-color: bisque;
border-radius: 17.5px;
+ img {
+ border: none;
+
+ height: 35px;
+ width: 35px;
+ border-radius: 17.5px;
+ }
}
.user-name {
margin-left: 10px;
font-size: 14px;
}
}
-
+
+ .account-card-active {
+ background-color: rgba(61, 104, 225, 1);
+ color: #fff;
+ }
}
.datetime-left {
.time-card {
@@ -1063,6 +1133,13 @@
height: 100px;
background-color: bisque;
border-radius: 50px;
+ img {
+ border: none;
+
+ width: 100px;
+ height: 100px;
+ border-radius: 50px;
+ }
}
.user-desc {
height: 100px;
@@ -1090,6 +1167,7 @@
.iconfont {
font-size: 14px;
margin-left: 5px;
+ cursor: pointer;
}
}
}
@@ -1170,8 +1248,6 @@
}
.add-account-page {
- // background-color: lightcyan;
- // padding: 10px 50px;
.upload-group {
height: 120px;
width: 350px;
@@ -1185,6 +1261,20 @@
background-color: antiquewhite;
margin-bottom: 20px;
border-radius: 25px;
+ }
+ .upload-jpg-up {
+ height: 50px;
+ width: 50px;
+ float: left;
+ display: flex;
+ background-color: rgba(242, 242, 242, 1);
+ margin: 0 10px;
+ margin-bottom: 20px;
+ border-radius: 25px;
+ justify-content: center;
+ align-items: center;
+ font-size: 12px;
+ cursor: pointer;
}
}
.fill-group {
@@ -1219,6 +1309,7 @@
line-height: 40px;
position: relative;
font-size: 14px;
+ margin-bottom: 10px;
}
.ip-input-container {
max-width: none !important;
--
Gitblit v1.8.0