hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-15 05:46:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

资料编辑

Browse Source
This commit is contained in:
zhaofang
2022-09-22 17:25:01 +08:00
parent db6e967821
commit ebf92f4fd0
5 changed files with 242 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
src/views/user/Setting.vue
View File

@@ -1,65 +1,77 @@
<template>
<div class="personSetting">
<!-- <div class="avatar">
<el-avatar :src="avatar" :size="80" alt=""></el-avatar>
<span>{{userInfo.name}}</span>
<el-button type="primary" @click="openAvatar">修改头像</el-button>
</div> -->
<el-form :model="form" label-position="right" label-width="80px">
<el-button type="text" class="passWard-btn" @click="openPassword"><svg-icon icon-class="passWard-edit" style="margin-right: 10px;font-size: 22px;"></svg-icon>修改密码</el-button>
<div class="avatar" @click="openAvatar">
<el-avatar :src="avatar" :size="116" alt=""></el-avatar>
<!-- <span>{{userInfo.name}}</span> -->
<!-- <el-button type="primary" @click="openAvatar">修改头像</el-button> -->
</div>
<!-- <el-form :model="form" label-position="right" label-width="80px"> -->
<div class="informationItem">
<div class="information-header">
<h4>基础信息</h4>
<!-- <el-button type="primary" @click="openPassword">修改密码</el-button> -->
</div>
<el-form-item label="昵称">
<el-input v-model="form.name" disabled></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.gender" disabled>
<el-radio-button :label="1">男</el-radio-button>
<el-radio-button :label="2">女</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="所属部门">
<span class="depart">{{form.departName}}</span>
</el-form-item>
<el-form-item label="生日">
<el-date-picker
v-model="form.birthday" disabled
type="date"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="form.account.mobile" disabled></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="form.account.email" disabled></el-input>
</el-form-item>
<el-form-item label="我的签名">
<el-input type="textarea" :rows="2"></el-input>
</el-form-item>
<div class="dynamic-range">
<span>动态可见范围</span>
<el-radio v-model="radio" label="1">全部动态</el-radio>
<el-radio v-model="radio" label="2">最近半年动态</el-radio>
<el-radio v-model="radio" label="3">最近三个月动态</el-radio>
</div>
<h4>兴趣爱好</h4>
<div class="interest" v-for="(sys,index) in sysTypeListMap" :key="sys.id">
<span>{{sys.name}}</span>
<el-checkbox-group v-model="checkboxGroup" v-if="sys.children.length > 0">
<el-checkbox-button size="medium" v-for="ch in sys.children" :label="ch.id" :key="ch.id">{{ch.name}}</el-checkbox-button>
</el-checkbox-group>
<!-- <ul class="interest-index">
<li v-for="ch in sys.children" :label="ch.id" :key="ch.id">{{ch.name}}</li>
</ul> -->
</div>
<div style="text-align: center;margin-top:56px">
<el-button type="primary" @click="saveHobby()">更改</el-button>
</div>
<ul class="base-info">
<li><label class="label" style="width:32px">姓名</label><span class="info-text">{{form.name}}</span></li>
<li><label class="label">性别</label><span class="info-text">{{form.gender == 1?'男':'女'}}</span></li>
<li><label class="label">所属部门</label><span class="info-text">{{form.departName}}</span></li>
</ul>
<ul class="base-info">
<li><label class="label" style="width:32px">生日</label><span class="info-text">{{form.birthday}}</span></li>
<li><label class="label">手机号</label><span class="info-text">{{form.account.mobile}}</span></li>
<li><label class="label">邮箱</label><span class="info-text">{{form.account.email}}</span></li>
</ul>
</div>
</el-form>
<div class="informationItem">
<div class="information-header">
<h4>个人签名</h4>
</div>
<div class="base-info">
<label class="label" style="width:70px;text-align: left;">我的签名</label>
<p class="info-text" style="width:540px" v-show="!signData.isEdit">{{form.sign}}</p>
<el-input v-show="signData.isEdit" style="width:40%;height:40px" type="textarea" v-model="signData.sign" :rows="1"></el-input>
<el-button v-show="signData.isEdit" style="margin-left:110px" @click="signData.isEdit = false">取消</el-button>
<el-button v-show="signData.isEdit" type="primary" @click="saveSign()">保存</el-button>
<el-button v-show="!signData.isEdit" style="margin-left:110px" type="primary" @click="signData.isEdit = true">编辑</el-button>
</div>
</div>
<div class="informationItem">
<div class="information-header">
<h4>动态可见范围</h4>
</div>
<div class="dynamic-range">
<el-radio v-model="form.dynamic" :label="1">全部动态</el-radio>
<el-radio v-model="form.dynamic" :label="2">最近半年动态</el-radio>
<el-radio v-model="form.dynamic" :label="3">最近三个月动态</el-radio>
<!-- <el-button v-show="dynamicData.isEdit" style="margin-left:110px" @click="dynamicData.isEdit = false">取消</el-button> -->
<el-button style="margin-left:110px" type="primary" @click="saveDynamic()">保存</el-button>
<!-- <el-button v-show="!dynamicData.isEdit" style="margin-left:110px" type="primary" @click="dynamicData.isEdit = true">编辑</el-button> -->
</div>
</div>
<h4>兴趣爱好</h4>
<div class="interest" v-show="!interestIsEdit">
<ul class="interest-ul">
<li class="interest-li" v-for="int in interestList" :key="int.id">{{int.name}}</li>
</ul>
</div>
<div v-show="interestIsEdit">
<div class="interest" v-for="(sys,index) in sysTypeListMap" :key="sys.id">
<span class="interest-title">{{sys.name}}</span>
<div style="width:100%">
<el-checkbox-group v-model="checkboxGroup" v-if="sys.children.length > 0">
<el-checkbox size="medium" border v-for="ch in sys.children" :label="ch.id" :key="ch.id">{{ch.name}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
<div style="text-align: center;margin-top:56px">
<el-button v-show="interestIsEdit" @click="interestIsEdit = false">取消</el-button>
<el-button v-show="interestIsEdit" type="primary" @click="saveHobby()">保存</el-button>
<el-button v-show="!interestIsEdit" type="primary" @click="interestIsEdit = true">编辑</el-button>
</div>
<!-- </div> -->
<!-- </el-form> -->
<el-dialog
title="上传头像"
:visible.sync="dialogVisibleAvatar"
@@ -113,7 +125,7 @@
import accountApi from "@/api/account";
import apiPassword from '@/api/boe/login.js'
import imageUpload from '@/components/ImageUpload/index.vue';
// import apiUserhobby from "@/api/modules/userhobby.js"
import apiUserhobby from "@/api/phase2/userhobby.js"
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default{
components:{imageUpload},
@@ -155,6 +167,10 @@
}
};
return {
signData:{
sign:'',
isEdit:false
},
cities: cityOptions,
checkboxGroup: [],
radio: '1',
@@ -173,12 +189,14 @@
{ validator: validatePass3, trigger: 'blur' }
]
},
sysTypeListMap:[]
sysTypeListMap:[],
interestList:[],//已有兴趣爱好列表
interestIsEdit:false,
}
},
computed: {
...mapGetters(['userInfo']),
...mapGetters(['userInfo','sysTypeMap']),
avatar(){
if(this.userInfo.avatar){
if(this.userInfo.avatar.indexOf('http')==-1){
@@ -214,13 +232,37 @@
});
},
methods:{
saveDynamic() {
userApi.updateDynamic(this.form.dynamic).then(res=>{
if(res.status == 200) {
this.$message.success('修改动态可见范围成功');
}
})
},
saveSign() {
userApi.updateSign(this.signData.sign).then(res=>{
if(res.status == 200){
this.$message.success('我的签名修改成功');
this.form.sign = this.signData.sign;
this.signData.isEdit = false;
}
})
},
getInfo() { //获取用户兴趣关联的id
// apiUserhobby.info().then(res=>{
// if(res.status == 200) {
// let data = res.result.map(item => item.refId);
// this.checkboxGroup = data;
// }
// })
this.checkboxGroup = [];
apiUserhobby.info(this.userInfo.aid).then(res=>{
if(res.status == 200) {
res.result.forEach(item=>{
this.checkboxGroup.push(item.refId);
item.name = this.sysTypeName(item.refId)
})
this.interestList = res.result;
}
})
},
sysTypeName(code){
if(code==''){return '';}
return this.sysTypeMap.get(code);
},
saveHobby(){
let data = []
@@ -234,13 +276,15 @@
refId:item
})
})
// apiUserhobby.update(data).then(res=>{
// if(res.status == 200) {
// this.$message.success('更改成功！')
// } else {
// this.$message.error("更改失败！")
// }
// })
apiUserhobby.update(data).then(res=>{
if(res.status == 200) {
this.interestIsEdit = false;
this.getInfo();
this.$message.success('更改成功！')
} else {
this.$message.error("更改失败！")
}
})
},
...mapActions({
getResOwnerTree: 'resOwner/getResOwnerTree',
@@ -251,7 +295,11 @@
load(){
userApi.detail(this.userInfo.aid).then(res=>{
if(res.status==200){
this.form=res.result
this.form=res.result;
this.signData.sign = res.result.sign;
if(res.result.dynamic == '') {
this.form.dynamic = 0;
}
}
});
},
@@ -332,40 +380,51 @@
border-radius: 4px;
box-shadow: none;
border-left: 1px solid rgba(151,151,151,0.3);
box-shadow: 1px 0 0 0 #fff;
box-shadow: 1px 0 0 0 #fff;
}
.interest{
display: flex;
padding-left: 20px;
.interest-index{
flex: 84%;
.interest-ul{
display: flex;
li{
flex-wrap: wrap;
.interest-li{
width: 146px;
height: 44px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid rgba(151,151,151,0.3);
margin-bottom: 20px;
text-align: center;
line-height: 44px;
font-size: 14px;
color: #333333;
border: 1px solid rgba($color: #979797, $alpha: 0.3);
border-radius: 4px;
margin-right: 44px;
margin-bottom: 22px;
}
}
span{
// width: 80px;
// flex: 1;
.interest-title{
width: 70px;
margin-right: 17px;
color: #333333;
font-size: 14px;
margin-bottom: 20px;
}
.el-checkbox-group{
flex: 84%;
.el-checkbox-button{
margin-bottom: 20px;
}
::v-deep .el-checkbox__input{
display: none;
}
::v-deep .el-checkbox{
width: 146px;
height: 44px;
margin-bottom: 22px;
text-align: center;
line-height: 26px;
margin-left: 0px;
margin-right: 48px;
}
::v-deep .el-checkbox.is-bordered+.el-checkbox.is-bordered{
margin-left: 0px;
}
}
.dynamic-range{
span{
@@ -384,7 +443,21 @@
.personSetting{
background-color: #fff;
box-sizing: border-box;
padding: 60px 0px 0px 205px;
padding: 30px 0px 0px 247px;
// margin: 0 auto;
position: relative;
.avatar{
position: absolute;
left: 86px;
top:56px;
}
.passWard-btn{
position: absolute;
font-size: 16px;
top:45px;
right:45px;
}
::v-deep .el-radio-button__inner{
background: #F4F4F4 !important;
border-radius: 4px !important;
@@ -396,34 +469,36 @@
box-shadow: -1px 0 0 0 #387DF7;
}
.informationItem{
// &:first-of-type{
// margin-top: 10px;
// }
margin-bottom: 82px;
.information-header{
// display: flex;
// justify-content: space-between;
// align-items: center;
// padding: 10px 0;
margin-bottom: 22px;
margin-bottom: 35px;
}
::v-deep .el-form-item{
font-size: 12px;
.el-form-item__label{
color: #333333;
font-weight: 400;
.base-info{
margin: 0;
display: flex;
margin-bottom: 46px;
// flex-direction: row;
// flex-wrap: nowrap;
li{
width: 260px;
// flex-grow: 2;
}
.el-form-item__content{
.el-input__inner{
background: #ffffff;
width: 336px;
height: 34px;
cursor: text;
color:#343434;
border-radius:6px;
}
.el-input__suffix{
display: none;
}
.label{
display: inline-block;
font-size: 16px;
font-weight: 400;
color: #333333;
width: 64px;
margin-right: 20px;
text-align: right;
}
.info-text{
font-size: 14px;
color: #999999;
}
}
}