From 05d754bb09ba4aeddd60320d33d583d388434c2f Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 15:38:45 +0800
Subject: [PATCH] 树形组件修改
---
src/pages/systemSettings/index/App.vue | 258 +++++++++++++++++++++++++++++++++++---------------
1 files changed, 179 insertions(+), 79 deletions(-)
diff --git a/src/pages/systemSettings/index/App.vue b/src/pages/systemSettings/index/App.vue
index 785be66..ef71b7c 100644
--- a/src/pages/systemSettings/index/App.vue
+++ b/src/pages/systemSettings/index/App.vue
@@ -1,12 +1,12 @@
<template>
- <div class="container">
+ <div class="container" v-if="!showWelcome">
<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)"
+ @click="openMenu(item.name, index)"
>
<span class="icon iconfont"></span>
<span class="card-text">{{ item.name }}</span>
@@ -30,13 +30,10 @@
<div class="touxiang">
<img
v-if="item.headpic"
- :src="
- item.headpic.indexOf('http') > -1
- ? item.headpic
- : 'http://' + item.headpic
- "
+ :src="`data:image/png;base64,${item.headpic}`"
alt=""
/>
+
</div>
<span class="user-name">{{ item.username }}</span>
</div>
@@ -57,7 +54,6 @@
<span class="week">{{ weekday }}</span>
</div>
</div>
-
<div class="line">
<div class="name">NTP鏍℃椂</div>
<el-switch
@@ -92,11 +88,7 @@
<div class="touxiang-big">
<img
v-if="activeAccountItem.headpic"
- :src="
- activeAccountItem.headpic.indexOf('http') > -1
- ? activeAccountItem.headpic
- : 'http://' + activeAccountItem.headpic
- "
+ :src="`data:image/png;base64,${activeAccountItem.headpic}`"
alt=""
/>
</div>
@@ -223,23 +215,30 @@
<div
class="upload-jpg"
:class="
- selectedPic == index && url !== '' ? 'upload-jpg-mask' : ''
+ selectedPic == index? 'upload-jpg-border' : ''
"
- v-for="(url, index) in jpgArr"
+ v-for="(item, index) in jpgArr"
:key="index"
- @click="pickHeadDefPic(url, index)"
+ @click="pickHeadDefPic(item, index)"
>
- <img v-if="url !== ''" :src="url" alt="" srcset="" />
+ <img
+ v-if="item"
+ :src="`data:image/png;base64,${item.path}`"
+ alt=""
+ srcset=""
+ />
+ <div class="img-mask" v-if="selectedPic == index">
+ <span class="icon iconfont enable"></span>
+ </div>
</div>
-
- <el-upload
+ <!-- <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 v-if="loadedPic == ''" class="upload-jpg-up">涓婁紶</div>
+ </el-upload> -->
</div>
<div class="fill-group">
<el-form
@@ -257,11 +256,13 @@
</el-form-item>
<el-form-item prop="roleId">
<div class="p-title">瑙掕壊锛�</div>
- <el-select
- v-model="addForm.roleId"
- placeholder="璇烽�夋嫨瑙掕壊"
- >
- <el-option v-for="(item,i) in roleList" :key="i" :label="item.name" :value="item.id"></el-option>
+ <el-select v-model="addForm.roleId" placeholder="璇烽�夋嫨瑙掕壊">
+ <el-option
+ v-for="(item, i) in roleList"
+ :key="i"
+ :label="item.name"
+ :value="item.id"
+ ></el-option>
</el-select>
</el-form-item>
<el-form-item prop="nickName">
@@ -492,6 +493,44 @@
style="width: 100%"
></generalSettings>
</div>
+ <div class="welcome-page" v-else>
+ <div class="child" @click="openWelcome('璐︽埛',0)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">璐︽埛</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('鏃ユ湡鏃堕棿',1)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">鏃ユ湡鏃堕棿</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('闆嗙兢绠＄悊',2)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">闆嗙兢绠＄悊</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('缃戠粶璁剧疆',3)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">缃戠粶璁剧疆</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('閿洏鍜岃瑷�',4)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">閿洏鍜岃瑷�</span>
+ </div>
+ </div>
+ <div class="child" @click="openWelcome('閫氱敤璁剧疆',5)">
+ <div class="child-info">
+ <span class="icon iconfont welcome-icon"></span>
+ <span class="welcome-title">閫氱敤璁剧疆</span>
+ </div>
+ </div>
+ </div>
</template>
<script>
@@ -549,6 +588,7 @@
activeAccountItem: {},
syncMonth: "",
syncHour: "",
+ showWelcome: true,
syncDay: "",
syncMin: "",
syncSec: "00",
@@ -568,6 +608,7 @@
showMonthInput: false,
selectedPic: null,
showDayInput: false,
+ loadedPic: "",
cameraInfo: false,
dependentScene: false,
timestamp: 0,
@@ -592,7 +633,7 @@
{ name: "閫氱敤璁剧疆" },
],
accountArr: [],
- jpgArr: ["", "", "", "", "", "", "", "", ""],
+ jpgArr: [],
isManual: false,
isNtp: true,
activePage: "璐︽埛",
@@ -618,7 +659,7 @@
password: "",
headpic: "",
confirmPassword: "",
- roleId:""
+ roleId: "",
},
rules: {
userName: [
@@ -661,9 +702,7 @@
methods: {
fetchDefHeadPic() {
defHeadPics().then((res) => {
- res.data.forEach((x, i) => {
- this.jpgArr[i] = x;
- });
+ this.jpgArr = res.data;
});
},
fetchUserList(showLast = false) {
@@ -671,7 +710,7 @@
this.accountArr = res.data;
if (this.accountArr.length) {
this.activeAccountItem = this.accountArr[0];
- this.activeAccountIndex = 0
+ this.activeAccountIndex = 0;
}
if (showLast) {
this.cancelAdd();
@@ -767,11 +806,7 @@
},
childrenChange(item) {
let isAllSelected = item.children.every((x) => x.selected == true);
- item.selected = isAllSelected
- },
- getMaxDay() {
- const maxDay = new Date(+this.syncYrs, +this.syncMonth, 0).getDate();
- if (this.syncDay > maxDay) this.syncDay = maxDay;
+ item.selected = isAllSelected;
},
plusOne(typ) {
this.isSyncBrowser = false;
@@ -874,8 +909,8 @@
menuIds: arr,
}).then((res) => {
if (res.success) {
- this.$message.success(res.msg)
- this.cancelSet()
+ this.$message.success(res.msg);
+ this.cancelSet();
}
});
},
@@ -903,15 +938,14 @@
n = n.toString();
return n[1] ? n : "0" + n;
},
- uploadUserPic(params) {
- let param = new FormData();
- param.append("file", params.file);
- uploadHeadPic(param).then((res) => {
- let index = this.jpgArr.findIndex((x) => x == "");
- this.$set(this.jpgArr, index, res.data);
- this.loadedPic= res.data
- });
- },
+ // uploadUserPic(params) {
+ // let param = new FormData();
+ // param.append("file", params.file);
+ // uploadHeadPic(param).then((res) => {
+ // this.jpgArr.push(res.data);
+ // this.loadedPic = res.data;
+ // });
+ // },
initClockConf(ntpTest = false) {
getClockInfo().then((rsp) => {
if (rsp && rsp.success) {
@@ -933,12 +967,16 @@
}
});
},
- openMenu(item, i) {
- this.activePage = item.name;
+ openMenu(name, i) {
+ this.activePage = name;
this.activeIndex = i;
if (this.activePage == "鏃ユ湡鏃堕棿") {
this.initClockConf();
}
+ },
+ openWelcome(name,i){
+ this.showWelcome = false
+ this.openMenu(name,i)
},
showInput(typ) {
this[`show${typ}Input`] = true;
@@ -954,7 +992,7 @@
this[`input${typ}`] = "";
},
syncBrowser(enable) {
- this.isSyncBrowser = val;
+ this.isSyncBrowser = enable;
if (!enable) {
clearInterval(this.browserTimer);
} else {
@@ -972,7 +1010,7 @@
this.isAddAccount = true;
getRoles().then((res) => {
if (res.success) {
- this.roleList= res.data
+ this.roleList = res.data;
}
});
},
@@ -980,6 +1018,7 @@
this.inAccountDetail = false;
this.isAddAccount = false;
this.$refs["addForm"].resetFields();
+ this.selectedPic = null;
},
cancelPassword() {
this.isChangePw = false;
@@ -994,9 +1033,9 @@
newPwd: this.passwordForm.newPassword,
}).then(
(res) => {
- if(res.success) {
+ if (res.success) {
this.$message.success(res.msg);
- this.cancelPassword()
+ this.cancelPassword();
}
},
(err) => {
@@ -1030,8 +1069,8 @@
}
});
},
- pickHeadDefPic(url, i) {
- this.addForm.headpic = url;
+ pickHeadDefPic(item, i) {
+ this.addForm.headpic = item.path;
this.selectedPic = i;
},
testNTP() {
@@ -1111,9 +1150,9 @@
openPermission() {
this.inAccountDetail = true;
this.isSetPermission = true;
- if (this.sysMenus.length==0) {
- this.fetchMenu()
- }
+ if (this.sysMenus.length == 0) {
+ this.fetchMenu();
+ }
},
parseTime() {
[this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split(
@@ -1142,6 +1181,50 @@
};
</script>
<style lang="scss">
+.welcome-page {
+ width: 100%;
+ height: 100%;
+ 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%;
+ /* flex: 0 0 16%; */
+ float: left;
+ width: 250px;
+ height: 200px;
+ margin: 50px 57px 30px 57px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ .child-info {
+ display: flex;
+ flex-direction: column;
+ height: 62%;
+ justify-content: space-around;
+ .welcome-icon {
+ font-size: 72px;
+ }
+ .welcome-title {
+ font-size: 18px;
+ }
+ }
+ }
+ .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;
+}
+}
.container {
height: 100%;
display: flex;
@@ -1151,7 +1234,7 @@
box-sizing: border-box;
.container-left {
height: 100%;
- width: 210px;
+ width: 230px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
@@ -1344,7 +1427,8 @@
}
.user-role {
margin: 5px 0 0 15px;
- font-size: 14px; color: darkseagreen;
+ font-size: 14px;
+ color: darkseagreen;
}
}
}
@@ -1430,49 +1514,65 @@
margin: 0 auto;
overflow: hidden;
.upload-jpg {
- height: 46px;
- width: 46px;
+ position: relative;
+ height: 48px;
+ width: 48px;
float: left;
margin: 0 10px;
margin-bottom: 10px;
background-color: rgba(242, 242, 242, 1);
- border: 3px solid transparent;
+ border: 2px solid transparent;
border-radius: 50%;
cursor: pointer;
img {
- height: 46px;
- width: 46px;
+ height: 48px;
+ width: 48px;
+ border-radius: 50%;
+ }
+ .img-mask {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 48px;
+ width: 48px;
+ background-color: rgba(0, 0, 0, 0.3);
+ color: white;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .selected {
+ font-size: 22px;
+ }
}
}
- .upload-jpg-mask {
- border: 3px solid blue;
+ .upload-jpg-border {
+ border: 2px solid cornflowerblue;
}
.upload-jpg-up {
- height: 52px;
- width: 52px;
+ height: 48px;
+ width: 48px;
float: left;
display: flex;
background-color: rgba(242, 242, 242, 1);
- margin: 0 10px;
- margin-bottom: 10px;
- border-radius: 25px;
+ border: 2px solid transparent;
+ border-radius: 50%;
+
justify-content: center;
align-items: center;
font-size: 12px;
cursor: pointer;
}
- .loaded-Pic {
- }
}
.fill-group {
.p-title {
- height: 34px;
+ height: 34px;
text-align: left;
}
- .el-form-item{
+ .el-form-item {
.el-select {
- width: 100%;
-}
+ width: 100%;
+ }
}
}
}
--
Gitblit v1.8.0