You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
578 lines
17 KiB
578 lines
17 KiB
<template> |
|
<view class="page"> |
|
<view class="block"> |
|
<view class="p-title"> |
|
<image class="icon" src="https://eduvessel.com/images/occupationlab/user.svg" mode="widthFix"></image> 账号信息 |
|
</view> |
|
<view class="form-list"> |
|
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
|
<view class="avatar-left"> |
|
<image class="avatar" :src="hrUserInfo.avatar" mode=""></image> |
|
</view> |
|
<view class="val">修改头像</view> |
|
<uni-icons class="arrow" type="right" size="18" color="#ababab"></uni-icons> |
|
</button> |
|
<view class="line"> |
|
<view class="name">账号</view> |
|
<view class="readonly">{{ userAccount.account }}</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">学号</view> |
|
<input type="text" placeholder="请输入学号" v-model="userAccount.workNumber" /> |
|
</view> |
|
<view class="line"> |
|
<view class="name">手机号</view> |
|
<view class="val">{{ userAccount.phone }}</view> |
|
<view class="action" @click="$util.to('/user/phone/phone')">更换</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">邮箱</view> |
|
<view class="val">{{ hrUserInfo.email }}</view> |
|
<view class="action" @click="$util.to('/user/email/email')">{{ hrUserInfo.email ? '更换' : '添加'}}</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">密码</view> |
|
<view class="val">xxxxxx</view> |
|
<view class="action" @click="$util.to('/user/password/password')">更换</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="block"> |
|
<view class="p-title"> |
|
<image class="icon" src="https://eduvessel.com/images/occupationlab/basic.svg" mode="widthFix"></image> 基本信息 |
|
</view> |
|
<view class="form-list"> |
|
<view class="line"> |
|
<view class="name">姓名</view> |
|
<input type="text" placeholder="请输入姓名" v-model="hrUserInfo.userName" /> |
|
</view> |
|
<view class="line"> |
|
<view class="name">性别</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择性别" popup-title="请选择性别" preload :clear-icon="false" :localdata="sex" v-model="hrUserInfo.sex"></uni-data-picker> |
|
</view> |
|
<view class="line"> |
|
<view class="name">出生日期</view> |
|
<uni-datetime-picker class="picker-date" type="date" placeholder="请选择出生日期" :clear-icon="false" v-model="hrUserInfo.dateBirth" /> |
|
<!-- <uni-icons class="arrow" type="right" size="18" color="#ababab"></uni-icons> --> |
|
</view> |
|
<view class="line"> |
|
<view class="name">身份证号</view> |
|
<input type="text" placeholder="请输入身份证号" v-model="hrUserInfo.idNumber" /> |
|
<uni-icons class="arrow" type="right" size="18" color="#ababab"></uni-icons> |
|
</view> |
|
<view class="line"> |
|
<view class="name">所在国家</view> |
|
<view class="readonly">中国</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">所在省份</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择省份" popup-title="请选择省份" preload :clear-icon="false" :localdata="provinces" v-model="hrUserInfo.provinceId" @change="getCity"></uni-data-picker> |
|
</view> |
|
<view class="line"> |
|
<view class="name">所在城市</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择城市" popup-title="请选择城市" preload :clear-icon="false" :localdata="cities" v-model="hrUserInfo.cityId" :readonly="!hrUserInfo.provinceId"></uni-data-picker> |
|
</view> |
|
<view class="line"> |
|
<view class="name">受教育程度</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择受教育程度" popup-title="请选择受教育程度" preload :clear-icon="false" :localdata="educationDegreeList" v-model="hrUserInfo.educationDegree"></uni-data-picker> |
|
</view> |
|
<view class="line"> |
|
<view class="name">当前所在学校</view> |
|
<view class="readonly">{{ hrUserInfo.schoolName }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="block"> |
|
<view class="arch-title"> |
|
<view class="p-title"> |
|
<image class="icon" src="https://eduvessel.com/images/occupationlab/files.svg" mode="widthFix"></image> 个人档案 |
|
</view> |
|
<uni-icons class="plus" type="plus" size="20" color="#007EFF" @click="addArch"></uni-icons> |
|
</view> |
|
|
|
<view class="archives"> |
|
<view v-for="(archive, i) in archivesList" :key="i" class="form-list archive" v-show="!i || showArch"> |
|
<view class="line"> |
|
<view class="name">职业</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择职业" popup-title="请选择职业" preload :clear-icon="false" :localdata="occupationList" v-model="archive.personalCareerId"></uni-data-picker> |
|
</view> |
|
<view class="line"> |
|
<view class="name">所在国家</view> |
|
<view class="readonly">中国</view> |
|
</view> |
|
<view class="line"> |
|
<view class="name">学校名称</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择学校" popup-title="请选择学校" preload :clear-icon="false" :localdata="schoolList" v-model="archive.schoolId"></uni-data-picker> |
|
</view> |
|
<view class="line"> |
|
<view class="name">专业学科</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择专业学科" popup-title="请选择专业学科" preload :clear-icon="false" :localdata="subjectList" v-model="archive.disciplineId" @change="e => getItemProfessionalClass(e, i)"></uni-data-picker> |
|
</view> |
|
<view class="line"> |
|
<view class="name">专业类</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择专业类" popup-title="请选择专业类" preload :clear-icon="false" :localdata="archive.ProfessionalClassList" v-model="archive.professionalClassId" :readonly="!archive.disciplineId" @change="e => getItemProfessional(e, i)"></uni-data-picker> |
|
</view> |
|
<view class="line"> |
|
<view class="name">专业</view> |
|
<uni-data-picker class="picker-input" placeholder="请选择专业" popup-title="请选择专业" preload :clear-icon="false" :localdata="archive.ProfessionalList" v-model="archive.professionalId" :readonly="!archive.professionalClassId"></uni-data-picker> |
|
</view> |
|
<uni-icons v-if="i" class="del" type="trash" size="20" color="#ccc" @click="delArchive(i)"></uni-icons> |
|
</view> |
|
</view> |
|
<view class="fold" v-if="archivesList.length > 1"> |
|
<view :class="['fold-inner', { active: showArch }]" @click="showArch = !showArch"> |
|
展开更多 |
|
<uni-icons class="icon" type="bottom" size="20" color="#007EFF"></uni-icons> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="btn-wrap"> |
|
<view class="btn" @click="submit">保存</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import OSS from '@/libs/Oss/upload' |
|
import { queryProvince, queryCity, querySchool, queryUserInfoDetails, updateAvatars, courseDiscipline, courseProfessionalClass, courseProfessional, updatePersonCenter, deleteProfile } from '@/apis/modules/user.js' |
|
export default { |
|
data() { |
|
return { |
|
hrUserInfo: { |
|
name:'', |
|
workNumber:'', |
|
password:"", |
|
phone:'', |
|
email:'', |
|
provinceName:'', |
|
cityName:'', |
|
schoolName:'', |
|
professionalName:'', |
|
experimentName:'', |
|
sex: 1, |
|
dateBirth: '', |
|
educationDegree: '' |
|
}, |
|
userAccount: { |
|
account: '', |
|
}, |
|
sex: [{ |
|
text: '男', |
|
value: 1 |
|
}, { |
|
text: '女', |
|
value: 2 |
|
}], |
|
occupationList: [{ |
|
value: 1, |
|
text: '学生' |
|
},{ |
|
value: 2, |
|
text: '老师' |
|
}], |
|
provinces:[], |
|
cities: [], |
|
educationDegreeList: [ |
|
{ |
|
text: '专科', |
|
value: 1 |
|
}, |
|
{ |
|
text: '本科', |
|
value: 2 |
|
}, |
|
{ |
|
text: '硕士', |
|
value: 3 |
|
}, |
|
{ |
|
text: '博士', |
|
value: 4 |
|
}, |
|
{ |
|
text: '其他', |
|
value: 5 |
|
} |
|
], |
|
subjectList: [], //专业学科 |
|
schoolList: [], |
|
showArch: false, |
|
archivesList: [], |
|
archivesForm: { |
|
personalCareerId: '', |
|
schoolId: '', |
|
schoolName: '', |
|
ProfessionalClassList: [], |
|
professionalClassId: '', |
|
professionalClassName: '', |
|
ProfessionalList: [], |
|
disciplineId: '', |
|
disciplineName: '', |
|
professionalId: '', |
|
professionalName: '', |
|
}, |
|
} |
|
}, |
|
onShow() { |
|
this.getInfo() |
|
this.getProvince() |
|
this.getSchool() |
|
this.getSubject() |
|
}, |
|
methods: { |
|
// 获取个人信息 |
|
async getInfo() { |
|
const { result } = await queryUserInfoDetails() |
|
const { hrUserInfo: u, personalFileList: p } = result |
|
u.avatar = u.userAvatars || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' |
|
this.hrUserInfo = u |
|
this.userAccount = result.userAccount |
|
|
|
u.provinceId && this.getCity() |
|
|
|
if (p.length) { |
|
p.forEach(async (e, k) => { |
|
e.ProfessionalClassList = [] |
|
e.ProfessionalList = [] |
|
this.$set(e, 'subjectList', this.subjectList) |
|
this.$set(e, 'disciplineId', e.disciplineId ? e.disciplineId : '') |
|
this.$set(e, 'disciplineName', e.disciplineName ? e.disciplineName : '') |
|
this.$set(e, 'professionalClassId', e.professionalClassId ? e.professionalClassId : '') |
|
this.$set(e, 'professionalClassName', e.professionalClassName ? e.professionalClassName : '') |
|
this.$set(e, 'professionalId', e.professionalId ? e.professionalId : '') |
|
this.$set(e, 'professionalName', e.professionalName ? e.professionalName : '') |
|
this.$set(e, 'schoolId', e.schoolId ? e.schoolId : '') |
|
this.$set(e, 'schoolName', e.schoolName ? e.schoolName : '') |
|
|
|
if (e.disciplineId) { |
|
const { list } = await courseProfessionalClass({ disciplineId: e.disciplineId }) |
|
list.forEach(e => { |
|
e.value = e.professionalClassId |
|
e.text = e.professionalClassName |
|
}) |
|
this.$set(e, 'ProfessionalClassList', list) |
|
} |
|
if (e.professionalClassId) { |
|
const { list } = await courseProfessional({ professionalClassId: e.professionalClassId }) |
|
list.forEach(e => { |
|
e.value = e.professionalId |
|
e.text = e.professionalName |
|
}) |
|
this.$set(e, 'ProfessionalList', list) |
|
} |
|
}) |
|
this.archivesList = p |
|
} else { |
|
this.concatArch() |
|
} |
|
}, |
|
|
|
// 获取省份 |
|
async getProvince() { |
|
const { list } = await queryProvince() |
|
list.forEach(e => { |
|
e.value = e.provinceId |
|
e.text = e.provinceName |
|
}) |
|
this.provinces = list |
|
}, |
|
// 获取城市 |
|
async getCity(val) { |
|
if (this.hrUserInfo.provinceId) { |
|
const { list } = await queryCity({ |
|
provinceId: this.hrUserInfo.provinceId |
|
}) |
|
list.forEach(e => { |
|
e.value = e.cityId |
|
e.text = e.cityName |
|
}) |
|
this.cities = list |
|
} else { |
|
this.cities = [] |
|
} |
|
if (val) this.hrUserInfo.cityId = '' |
|
}, |
|
// 获取学校 |
|
async getSchool(){ |
|
const { list } = await querySchool() |
|
list.forEach(e => { |
|
e.value = e.schoolId |
|
e.text = e.schoolName |
|
}) |
|
this.schoolList = list |
|
}, |
|
// 上传头像回调 |
|
onChooseAvatar(e) { |
|
OSS(e.detail.avatarUrl, ({ url }) => { |
|
updateAvatars(url).then(res => { |
|
this.getInfo() |
|
}).catch(e => {}) |
|
}) |
|
}, |
|
|
|
|
|
foldArch() { |
|
this.showArch = !this.showArch |
|
}, |
|
// 获取学科类别 |
|
async getSubject(){ |
|
const { list } = await courseDiscipline() |
|
list.forEach(e => { |
|
e.value = e.disciplineId |
|
e.text = e.disciplineName |
|
}) |
|
this.subjectList = list |
|
}, |
|
// 清除学科类别 |
|
clearClass(){ |
|
this.archivesForm.professionalClassId = '', |
|
this.archivesForm.professionalId = '' |
|
}, |
|
clearItemClass(index){ |
|
this.archivesList[index].professionalClassId = '' |
|
this.archivesList[index].professionalClassName = '' |
|
this.archivesList[index].professionalId = '' |
|
this.archivesList[index].professionalName = '' |
|
}, |
|
async getItemProfessionalClass(e, index){ |
|
this.clearItemClass(index) |
|
if(e.detail.value.length){ |
|
const id = e.detail.value[0].value |
|
let obj = {} |
|
obj = this.subjectList.find(r =>{ |
|
return r.disciplineId === id |
|
}); |
|
const { list } = await courseProfessionalClass({ disciplineId: id }) |
|
list.forEach(e => { |
|
e.value = e.professionalClassId |
|
e.text = e.professionalClassName |
|
}) |
|
this.archivesList.map(e =>{ |
|
if(e.disciplineId == id){ |
|
e.ProfessionalClassList = list |
|
e.disciplineName = obj.disciplineName |
|
} |
|
}) |
|
} |
|
}, |
|
// 清除专业类 |
|
clearProfess(){ |
|
this.archivesForm.professionalId = '' |
|
}, |
|
clearItemProfess(index){ |
|
this.archivesList[index].professionalId = '' |
|
this.archivesList[index].professionalName = '' |
|
}, |
|
async getItemProfessional(e, index){ |
|
this.clearItemProfess(index) |
|
if(e.detail.value.length){ |
|
const id = e.detail.value[0].value |
|
const { list } = await courseProfessional({ professionalClassId: id }) |
|
list.forEach(e => { |
|
e.value = e.professionalId |
|
e.text = e.professionalName |
|
}) |
|
this.archivesList.map(e =>{ |
|
if(e.professionalClassId == id){ |
|
let obj = {} |
|
obj = e.ProfessionalClassList.find(r =>{ |
|
return r.professionalClassId === id |
|
}) |
|
e.ProfessionalList = list |
|
e.professionalClassName = obj.professionalClassName |
|
} |
|
}) |
|
} |
|
}, |
|
getItemStuGrade(item){ |
|
if(item){ |
|
this.archivesList.map(e =>{ |
|
if(e.professionalId == item){ |
|
let obj = {} |
|
obj = e.ProfessionalList.find(r =>{ |
|
return r.professionalId === item; |
|
}) |
|
e.professionalName = obj.professionalName |
|
} |
|
}) |
|
} |
|
}, |
|
concatArch() { |
|
this.archivesList = this.archivesList.concat({ |
|
countries: '中国', |
|
personalCareerId: '', |
|
schoolId: '', |
|
schoolName: '', |
|
subjectList: this.subjectList, |
|
disciplineId: '', |
|
disciplineName: '', |
|
ProfessionalClassList: [], |
|
professionalClassId: '', |
|
professionalClassName: '', |
|
ProfessionalList: [], |
|
professionalId: '', |
|
professionalName: '', |
|
personalFileId: '' |
|
}) |
|
}, |
|
addArch() { |
|
let isEmpty = false |
|
this.archivesList.forEach((n,k) => { |
|
if(!n.personalCareerId) isEmpty = true |
|
}) |
|
if(isEmpty) return this.$util.errMsg('请选择职业') |
|
this.showArch = true |
|
this.concatArch() |
|
}, |
|
delArchive(i) { |
|
const that = this |
|
uni.showModal({ |
|
title: '提示', |
|
content: '确定要删除吗？', |
|
success(res) { |
|
if (res.confirm) { |
|
const id = that.archivesList[i].personalFileId |
|
that.archivesList.splice(i, 1) |
|
id && deleteProfile(id) |
|
} |
|
} |
|
}) |
|
}, |
|
|
|
// 保存 |
|
async submit() { |
|
const { hrUserInfo: u, userAccount: a } = this |
|
if (u.idNumber && !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(u.idNumber)) return this.$util.errMsg('请输入正确的身份证号码！') |
|
let personalFileList = [] |
|
this.archivesList.forEach((n,k) => { |
|
n.personalCareerId && personalFileList.push({ |
|
disciplineId: n.disciplineId, |
|
disciplineName: n.disciplineName, |
|
personalCareerId: n.personalCareerId, |
|
personalFileId: n.personalFileId, |
|
professionalClassId: n.professionalClassId, |
|
professionalClassName: n.professionalClassName, |
|
professionalId: n.professionalId, |
|
professionalName: n.professionalName, |
|
provinceId: n.provinceId, |
|
provinceName: n.provinceName, |
|
schoolId: n.schoolId, |
|
schoolName: n.schoolName, |
|
userId: u.userId |
|
}) |
|
}) |
|
const data = { |
|
userId: u.userId, |
|
userAccountList: [{ |
|
id: a.accountId, |
|
account: a.account, |
|
userId: a.userId, |
|
}], |
|
hrUserInfo: { |
|
provinceId: u.provinceId, |
|
cityId: u.cityId, |
|
countries: '中国', |
|
dateBirth: u.dateBirth, |
|
educationDegree: u.educationDegree, |
|
idNumber: u.idNumber, |
|
schoolId: u.schoolId, |
|
sex: u.sex, |
|
userId: u.userId, |
|
userName: u.userName, |
|
wechatId: u.wechatId |
|
}, |
|
personalFileList, |
|
} |
|
updatePersonCenter(data) |
|
this.$util.sucMsg('保存成功') |
|
setTimeout(() => { |
|
uni.switchTab({ |
|
url: '/pages/person/person' |
|
}) |
|
}, 1500) |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.page { |
|
padding-bottom: 130rpx; |
|
} |
|
.avatar-btn { |
|
position: relative; |
|
display: flex; |
|
align-items: center; |
|
padding: 14rpx 0; |
|
line-height: 0; |
|
text-align: left; |
|
border: 0; |
|
border-bottom: 1px solid #E6E8ED; |
|
background-color: transparent; |
|
border-radius: 0; |
|
outline: none; |
|
&:after { |
|
display: none; |
|
} |
|
.avatar-left { |
|
width: 200rpx; |
|
} |
|
.avatar { |
|
width: 60rpx; |
|
height: 60rpx; |
|
margin-right: 20rpx; |
|
border: 0; |
|
border-radius: 50%; |
|
} |
|
.val { |
|
color: #7d7d7d; |
|
} |
|
.arrow { |
|
position: absolute; |
|
top: 44rpx; |
|
right: 20rpx; |
|
} |
|
} |
|
.arch-title { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
} |
|
.archives { |
|
padding-bottom: 20rpx; |
|
.archive { |
|
position: relative; |
|
padding: 30rpx; |
|
margin-bottom: 30rpx; |
|
border: 1px dashed #d2d2d2; |
|
border-radius: 20rpx; |
|
|
|
.del { |
|
position: absolute; |
|
top: 10rpx; |
|
right: 10rpx; |
|
} |
|
} |
|
} |
|
.fold { |
|
padding-bottom: 20rpx; |
|
text-align: center; |
|
font-size: 24rpx; |
|
color: #006EFF; |
|
|
|
.fold-inner { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
.icon { |
|
transition: .5s; |
|
} |
|
&.active .icon { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
</style>
|
|
|