From 85da22c4861736f7b0cabbc75daecbe4fea1bf80 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期日, 04 七月 2021 21:01:12 +0800 Subject: [PATCH] 周天更改 --- src/pages/systemSettings/index/App.vue | 351 ++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 217 insertions(+), 134 deletions(-) diff --git a/src/pages/systemSettings/index/App.vue b/src/pages/systemSettings/index/App.vue index c477954..e5988b4 100644 --- a/src/pages/systemSettings/index/App.vue +++ b/src/pages/systemSettings/index/App.vue @@ -3,6 +3,7 @@ <div class="container-left"> <div class="left-card" + :class="activeIndex == index ? 'left-card-active' : ''" v-for="(item, index) in menuArr" :key="index" @click="openMenu(item, index)" @@ -27,7 +28,15 @@ @click="openAccount(item, index)" > <div class="touxiang"> - <img :src="item.headpic" alt="" /> + <img + v-if="item.headpic" + :src=" + item.headpic.indexOf('http') > -1 + ? item.headpic + : 'http://' + item.headpic + " + alt="" + /> </div> <span class="user-name">{{ item.username }}</span> </div> @@ -51,13 +60,21 @@ <div class="line"> <div class="name">NTP鏍℃椂</div> - <el-switch v-model="isNtp" active-color="rgba(61, 104, 225, 1)"> + <el-switch + v-model="isNtp" + @change="changeSwitch('isNtp')" + active-color="rgba(61, 104, 225, 1)" + > </el-switch> </div> <div class="line"> <div class="name">鎵嬪姩鏍″</div> - <el-switch v-model="isManual" active-color="rgba(61, 104, 225, 1)"> + <el-switch + v-model="isManual" + @change="changeSwitch('isManual')" + active-color="rgba(61, 104, 225, 1)" + > </el-switch> </div> </div> @@ -73,7 +90,15 @@ > <div class="content-top"> <div class="touxiang-big"> - <img :src="activeAccountItem.headpic" alt="" /> + <img + v-if="activeAccountItem.headpic" + :src=" + activeAccountItem.headpic.indexOf('http') > -1 + ? activeAccountItem.headpic + : 'http://' + activeAccountItem.headpic + " + alt="" + /> </div> <div class="user-desc"> <div class="username"> @@ -99,6 +124,13 @@ <span class="icon iconfont" @click="editNickName" ></span > + </div> + <div class="user-role"> + {{ + activeAccountItem.sysRoles.length + ? activeAccountItem.sysRoles[0].name + : "" + }} </div> </div> </div> @@ -146,7 +178,7 @@ </el-form> <div class="btns"> <div class="cancel" @click="cancelChangePassword">鍙栨秷</div> - <div class="ok">淇濆瓨</div> + <div class="ok" @click="SaveNewPassword('passwordForm')">淇濆瓨</div> </div> </div> @@ -159,23 +191,30 @@ <el-switch v-model="item.selected" active-color="rgba(61, 104, 225, 1)" + @change="fatherChange(item)" > </el-switch> </div> <div v-if="item.children"> - <div class="line" style="margin-left:55px;" v-for="x in item.children" :key="x.id"> - <div class="name">{{ x.name }}</div> - <el-switch - v-model="x.selected" - active-color="rgba(61, 104, 225, 1)" - > - </el-switch> - </div> + <div + class="line" + style="margin-left: 55px" + v-for="x in item.children" + :key="x.id" + > + <div class="name">{{ x.name }}</div> + <el-switch + v-model="x.selected" + active-color="rgba(61, 104, 225, 1)" + @change="childrenChange(item)" + > + </el-switch> </div> + </div> </div> <div class="btns"> <div class="cancel" @click="cancelSet">鍙栨秷</div> - <div class="ok">淇濆瓨</div> + <div class="ok" @click="saveAuth">淇濆瓨</div> </div> </div> @@ -184,9 +223,15 @@ <div class="upload-group"> <div class="upload-jpg" - v-for="(item, index) in jpgArr" + :class=" + selectedPic == index && url !== '' ? 'upload-jpg-mask' : '' + " + v-for="(url, index) in jpgArr" :key="index" - ></div> + @click="pickHeadDefPic(url, index)" + > + <img v-if="url !== ''" :src="url" alt="" srcset="" /> + </div> <el-upload class="upload-demo" @@ -448,10 +493,11 @@ addUser, getUsers, updateUser, + updataUser, updatePassword, deleteUser, getUserMenus, - getSysMenus, + defHeadPics, } from "@/api/user"; import switchBar from "../components/switchBar"; import ipInput from "@/components/subComponents/IPInput"; @@ -470,16 +516,6 @@ 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("璇峰啀娆¤緭鍏ュ瘑鐮�")); @@ -489,30 +525,10 @@ callback(); } }; - var validatePass3 = (rule, value, callback) => { - if (value === "") { - callback(new Error("璇疯緭鍏ュ瘑鐮�")); - } else { - if (this.passwordForm.password !== "") { - this.$refs.passwordForm.validateField("pw"); - } - callback(); - } - }; - var validatePass5 = (rule, value, callback) => { - if (value === "") { - callback(new Error("璇疯緭鍏ュ瘑鐮�")); - } else { - if (this.passwordForm.newPassword !== "") { - this.$refs.passwordForm.validateField("newPw"); - } - callback(); - } - }; var validatePass4 = (rule, value, callback) => { if (value === "") { callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�")); - } else if (value !== this.passwordForm.confirmPassword) { + } else if (value !== this.passwordForm.newPassword) { callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!")); } else { callback(); @@ -541,6 +557,7 @@ showSecInput: false, showYrsInput: false, showMonthInput: false, + selectedPic: null, showDayInput: false, cameraInfo: false, dependentScene: false, @@ -565,7 +582,7 @@ { name: "閫氱敤璁剧疆" }, ], accountArr: [], - jpgArr: [{}, {}, {}, {}, {}, {}, {}, {}, {}], + jpgArr: ["", "", "", "", "", "", "", "", ""], isManual: false, isNtp: true, activePage: "璐︽埛", @@ -602,13 +619,23 @@ trigger: "blur", }, ], - password: [{ validator: validatePass, trigger: "blur" }], + password: [ + { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }, + { min: 6, message: '闀垮害鑷冲皯涓� 6 浣�', trigger: 'blur' } + ], confirmPassword: [{ validator: validatePass2, trigger: "blur" }], }, pwRules: { - pw: [{ validator: validatePass3, trigger: "blur" }], - newPw: [{ validator: validatePass5, trigger: "blur" }], - confirmNewPw: [{ validator: validatePass4, trigger: "blur" }], + // pw: [{ validator: validatePass3, trigger: "blur" }], + curPassword: [ + { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }, + { min: 6, message: '闀垮害鑷冲皯涓� 6 浣�', trigger: 'blur' } + ], + newPassword: [ + { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }, + { min: 6, message: '闀垮害鑷冲皯涓� 6 浣�', trigger: 'blur' } + ], + confirmPassword: [{ validator: validatePass4, trigger: "blur" }], }, }; }, @@ -617,22 +644,28 @@ clearInterval(this.browserTimer); }, mounted() { - // const s = document.getElementsByClassName("left-card")[0]; - // s.style.backgroundColor = "rgba(61, 104, 225, 1)"; - // s.style.color = "#fff"; - this.$nextTick(() => { - this.initClockConf(); - }); - this.fetchUserList(); - this.fetchSysMenus(); + this.fetchDefHeadPic(); }, methods: { - fetchUserList() { + fetchDefHeadPic() { + defHeadPics().then((res) => { + res.data.slice(0, 5).forEach((x, i) => { + this.jpgArr[i] = x; + }); + }); + }, + fetchUserList(showLast = false) { getUsers().then((res) => { this.accountArr = res.data; if (this.accountArr.length) { this.activeAccountItem = this.accountArr[0]; + } + if (showLast) { + this.cancelAdd(); + const lastIdx = this.accountArr.length - 1; + this.openAccount(this.accountArr[lastIdx], lastIdx); + } }); }, @@ -651,12 +684,13 @@ nickname: this.inputNickName, }).then((res) => { this.$message.success(res.msg); - this.fetchUserList(); + this.fetchUserList(true); }); }, openAccount(item, i) { this.activeAccountItem = item; this.activeAccountIndex = i; + this.inAccountDetail = false; }, minusOne(typ) { this.isSyncBrowser = false; @@ -713,11 +747,20 @@ break; } }, + fatherChange(item) { + item.children.forEach((x) => { + x.selected = false; + }); + }, + childrenChange(item) { + let isAllSelected = item.children.every((x) => x.selected == true); + let isAllNotSelected = item.children.every((x) => x.selected == false); + if (isAllSelected) item.selected = true; + if (isAllNotSelected) item.selected = false; + }, getMaxDay() { const maxDay = new Date(+this.syncYrs, +this.syncMonth, 0).getDate(); - if (this.syncDay > maxDay) { - this.syncDay = maxDay; - } + if (this.syncDay > maxDay) this.syncDay = maxDay; }, plusOne(typ) { this.isSyncBrowser = false; @@ -762,7 +805,6 @@ if (num > maxDay) { num = 1; } - // this.syncDay = this.padZero(num); break; default: @@ -770,9 +812,8 @@ } }, submitClock() { - debugger; if (this.syncType === "1") { - if (this.ntpServer === "") { + if (this.ntpServer === "" || this.ntpServer === "...") { this.$notify({ type: "error", message: "NTP 鏈嶅姟鍣ㄥ湴鍧�涓嶈兘涓虹┖", @@ -792,14 +833,13 @@ } else { this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`; } - let requestBody = { + saveClockInfo({ timeZone: this.timezone, ntp: this.syncType === "1", ntpServer: this.ntpServer, interval: this.timeInterval, newTime: this.settime, - }; - saveClockInfo(requestBody).then((rsp) => { + }).then((rsp) => { if (rsp && rsp.success) { this.$notify({ type: "success", @@ -809,19 +849,32 @@ this.initClockConf(); }); }, + flatGetArr(arr, res) { + for (const item of arr) { + if (item.selected) res.push(item.id); + if (item.children) this.flatGetArr(item.children, res); + } + }, + saveAuth() { + let arr = []; + this.flatGetArr(this.sysMenus, arr); + updataUser({ + id: this.activeAccountItem.id, + menuIds: arr, + }).then((res) => { + res.data; + }); + }, formatTime(number, format) { var formateArr = ["Y", "M", "D", "h", "m", "s"]; var returnArr = []; - var date = new Date(number * 1000); returnArr.push(date.getFullYear()); returnArr.push(this.formatNumber(date.getMonth() + 1)); returnArr.push(this.formatNumber(date.getDate())); - returnArr.push(this.formatNumber(date.getHours())); returnArr.push(this.formatNumber(date.getMinutes())); returnArr.push(this.formatNumber(date.getSeconds())); - this.weekday = "鏄熸湡" + "鏃ヤ竴浜屼笁鍥涗簲鍏�".charAt(date.getDay()); for (var i in returnArr) { format = format.replace(formateArr[i], returnArr[i]); @@ -832,7 +885,6 @@ n = +n; return n < 10 ? "0" + n : "" + n; }, - //鏁版嵁杞寲 formatNumber(n) { n = n.toString(); return n[1] ? n : "0" + n; @@ -841,7 +893,8 @@ let param = new FormData(); param.append("file", params.file); uploadHeadPic(param).then((res) => { - this.addForm.headpic = res.data; + let index = this.jpgArr.findIndex((x) => x == ""); + this.$set(this.jpgArr, index, res.data); }); }, initClockConf(ntpTest = false) { @@ -850,6 +903,8 @@ this.timezone = rsp.data.time_zone; if (!ntpTest) { this.syncType = rsp.data.ntp ? "1" : "2"; + this.isNtp = rsp.data.ntp; + this.isManual = !rsp.data.ntp; } if (rsp.data.ntp) { this.ntpServer = rsp.data.ntp_server; @@ -858,22 +913,17 @@ this.timestamp = rsp.data.local_time; if (this.clockTimer === null) { this.runClock(); + if (this.isManual) this.parseTime(); } } }); }, openMenu(item, i) { - const old = document.getElementsByClassName("left-card")[ - this.activeIndex - ]; - old.style.backgroundColor = "initial"; - old.style.color = "rgba(81, 81, 81, 1)"; - this.activePage = item.name; this.activeIndex = i; - const s = document.getElementsByClassName("left-card")[i]; - s.style.backgroundColor = "rgba(61, 104, 225, 1)"; - s.style.color = "#fff"; + if (this.activePage == "鏃ユ湡鏃堕棿") { + this.initClockConf(); + } }, showInput(typ) { this[`show${typ}Input`] = true; @@ -888,9 +938,9 @@ this[`show${typ}Input`] = false; this[`input${typ}`] = ""; }, - syncBrowser(val) { + syncBrowser(enable) { this.isSyncBrowser = val; - if (val == false) { + if (!enable) { clearInterval(this.browserTimer); } else { this.browserTimer = setInterval(() => { @@ -913,12 +963,22 @@ cancelChangePassword() { this.isChangePw = false; this.inAccountDetail = false; + this.$refs['passwordForm'].resetFields() }, - fetchSysMenus() { - getSysMenus().then((rsp) => { - if (rsp && rsp.success) { - this.sysMenus = rsp.data; - console.log(this.sysMenus); + SaveNewPassword(formName) { + this.$refs[formName].validate((valid) => { + if (valid) { + updatePassword({ + oldPwd: this.passwordForm.curPassword, + newPwd: this.passwordForm.newPassword, + }).then( + (res) => { + this.$message.success(res.data); + }, + (err) => { + this.$message.warning("淇濆瓨澶辫触锛�" + err.msg); + } + ); } }); }, @@ -934,6 +994,7 @@ addUser(data).then( (res) => { this.$message.success(res.data); + this.fetchUserList(true); }, (err) => { this.$message.warning("淇濆瓨澶辫触锛�" + err.msg); @@ -944,6 +1005,10 @@ return false; } }); + }, + pickHeadDefPic(url, i) { + this.addForm.headpic = url; + this.selectedPic = i; }, testNTP() { this.ntpTestLoading = true; @@ -992,10 +1057,10 @@ cancelButtonText: "鍙栨秷", }) .then(() => { - debugger; - deleteUser({ + let obj = { ids: [this.activeAccountItem.id], - }).then((res) => { + }; + deleteUser(obj).then((res) => { if (res.success) { this.fetchUserList(); this.$message({ @@ -1009,44 +1074,43 @@ }) .catch(() => {}); }, - openPermission() { - this.inAccountDetail = true; - this.isSetPermission = true; + fetchMenu() { getUserMenus({ userId: this.activeAccountItem.id, }).then((res) => { if (res && res.success) { - res.data.menus.forEach(e => { - - }); + this.sysMenus = res.data; } }); - - // getUserMenus({ userId: row.id }).then(rsp => { - // if (rsp && rsp.success) { - // this.userMenus = rsp.data.menus.map(menu => { - // return menu.id - // }) - // } - // }) + }, + openPermission() { + this.inAccountDetail = true; + this.isSetPermission = true; + this.fetchMenu(); + }, + parseTime() { + debugger; + [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split( + "-" + ); + [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split( + ":" + ); + }, + changeSwitch(str) { + if (str == "isNtp") { + this.isManual = !this[str]; + } else { + this.isNtp = !this[str]; + } + this.syncType = this.isNtp ? "1" : "2"; + if (this.isManual) this.parseTime(); }, }, - watch: { - isManual(v) { - this.isNtp = !v; - v && (this.syncType = "2"); - if (v) { - [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split( - "-" - ); - [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split( - ":" - ); - } - }, - isNtp(v) { - this.isManual = !v; - v && (this.syncType = "1"); + computed: { + isShowAddAccount() { + const info = JSON.parse(sessionStorage.getItem("userInfo")); + return true; }, }, }; @@ -1083,6 +1147,10 @@ .card-text { font-size: 16px; } + } + .left-card-active { + background-color: rgba(61, 104, 225, 1); + color: #fff; } .left-card:hover { background-color: rgba(61, 104, 225, 1); @@ -1249,6 +1317,10 @@ cursor: pointer; } } + .user-role { + margin: 5px 0 0 15px; + font-size: 14px; + } } } .list-btn { @@ -1328,22 +1400,31 @@ .add-account-page { .upload-group { - height: 120px; - width: 350px; + height: 130px; + width: 360px; margin: 0 auto; overflow: hidden; .upload-jpg { - height: 50px; - width: 50px; + height: 46px; + width: 46px; float: left; margin: 0 10px; - background-color: antiquewhite; margin-bottom: 20px; - border-radius: 25px; + background-color: rgba(242, 242, 242, 1); + border: 3px solid transparent; + border-radius: 50%; + cursor: pointer; + img { + height: 46px; + width: 46px; + } + } + .upload-jpg-mask { + border: 3px solid blue; } .upload-jpg-up { - height: 50px; - width: 50px; + height: 52px; + width: 52px; float: left; display: flex; background-color: rgba(242, 242, 242, 1); @@ -1355,6 +1436,8 @@ font-size: 12px; cursor: pointer; } + .loaded-Pic { + } } .fill-group { .p-title { -- Gitblit v1.8.0