364 lines
7.9 KiB
Vue
364 lines
7.9 KiB
Vue
<template>
|
|
<view class="set_person_data">
|
|
<view class="set_head">
|
|
<view class="set_img">
|
|
<image :src="img ? img : BASE_IMG_URL+'headImg.png'" mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="set_name" @click="changeHeaderImg">
|
|
<view>修改头像</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>姓名</view>
|
|
<view class="form_input">
|
|
<input type="text" v-model="name" placeholder-style="font-size:30rpx;color: #999;" placeholder="姓名" />
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>部门职务</view>
|
|
<view class="form_input">
|
|
<input type="text" v-model="post" placeholder-style="font-size:30rpx;color: #999;" placeholder="点击填写" />
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form_li">
|
|
<view>员工编号</view>
|
|
<view class="form_input">
|
|
<input type="text" v-model="num" placeholder-style="font-size:30rpx;color: #999;" placeholder="点击填写" />
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form_li">
|
|
<view>性别</view>
|
|
<picker @change="changeSex" :range="sexList" :range-key="'name'" :value="sexIndex">
|
|
<view class="form_right">
|
|
<view style="color: #999;" v-if="sex == 1">男</view>
|
|
<view style="color: #999;" v-if="sex == 2">女</view>
|
|
<view style="color: #999;" v-if="!sex">未知</view>
|
|
<view class="iconfont icon-arrows_right"></view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="fllow_form_li">
|
|
<view>邮箱</view>
|
|
<view class="form_input">
|
|
<input type="text" v-model="email" placeholder="点击填写邮箱" placeholder-style="font-size:30rpx;color: #999;"/>
|
|
</view>
|
|
</view>
|
|
<view class="fllow_form">
|
|
<view><text>*</text>手机号</view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view class="form_input" style="color: #999;">
|
|
<button
|
|
type="default"
|
|
class="buttonNumber"
|
|
@getphonenumber="getPhone"
|
|
open-type="getPhoneNumber">
|
|
{{mobile?mobile:'获取手机号'}}</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
<!-- #ifndef MP-WEIXIN -->
|
|
<view class="form_input">
|
|
<input type="text" v-model="mobile" placeholder="点击填写手机号" placeholder-style="font-size:30rpx;color: #999;"/>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
|
|
<view class="fllow_form_li">
|
|
<view>我的上级</view>
|
|
<view class="form_input">
|
|
<view>{{parent_name ? parent_name : ''}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click="saveInfo">保存</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { netGetUserInfo, netEditUserInfo, netBindPhone, uploadUrl } from '@/api/index.js'
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
id:'',
|
|
name:'', //姓名
|
|
img:'', //头像
|
|
email:'', //邮箱
|
|
sex:'', //性别 0未知 1男 2女
|
|
post:'', //岗位
|
|
num:'', //员工编号
|
|
mobile:'', //手机号
|
|
department_id:'', //部门id
|
|
department_name:'', //部门名称
|
|
parent_id:'', //上级 id
|
|
parent_name:'', //上级 名称
|
|
sexList:[
|
|
{id:1,name:'男'},
|
|
{id:2,name:'女'}
|
|
],
|
|
sexIndex:null,
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getInfo()
|
|
},
|
|
methods: {
|
|
getInfo() {
|
|
netGetUserInfo().then(res=>{
|
|
res = res.data
|
|
this.id = res.id
|
|
this.name = res.name
|
|
this.img = res.img
|
|
this.email = res.email
|
|
this.sex = res.sex
|
|
this.post = res.post
|
|
this.num = res.num
|
|
this.mobile = res.mobile
|
|
this.department_name = res.department_name
|
|
this.parent_name = res.parent_name
|
|
this.department_id = res.department_id
|
|
this.parent_id = res.parent_id
|
|
})
|
|
},
|
|
changeSex(e) {
|
|
this.sexIndex = e.detail.value
|
|
this.sex = this.sexList[e.detail.value].id
|
|
},
|
|
getPhone(e) {
|
|
if(e.detail.errMsg == "getPhoneNumber:ok"){
|
|
let encryptedData = e.detail.encryptedData
|
|
let iv = e.detail.iv
|
|
let code = ''
|
|
uni.login({
|
|
success:(res)=>{
|
|
code = res.code
|
|
let params = {
|
|
encryptedData,iv,code
|
|
}
|
|
this.bindPhone(params)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
bindPhone(params) {
|
|
netBindPhone(params).then(res=>{
|
|
this.mobile = res.data.mobile
|
|
})
|
|
},
|
|
changeHeaderImg() {
|
|
uni.chooseImage({
|
|
sizeType:['compressed'],
|
|
success:(res)=>{
|
|
let file = res.tempFilePaths
|
|
file.forEach(ele=>{
|
|
this.uploadFile(ele)
|
|
})
|
|
}
|
|
})
|
|
},
|
|
uploadFile(file){
|
|
uni.uploadFile({
|
|
url:uploadUrl,
|
|
name:'file',
|
|
header:{
|
|
'token':uni.getStorageSync('token')
|
|
},
|
|
// #ifdef MP-ALIPAY
|
|
fileType:'image',
|
|
// #endif
|
|
filePath: file,
|
|
success:(res)=>{
|
|
let data = JSON.parse(res.data)
|
|
if(data.code == 1) {
|
|
this.img = data.data.url
|
|
}else{
|
|
uni.showToast({
|
|
title:'上传失败',
|
|
icon:'none'
|
|
})
|
|
}
|
|
},
|
|
fail:(err)=>{
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
saveInfo() {
|
|
let {
|
|
id,
|
|
name, //姓名
|
|
img, //头像
|
|
email, //邮箱
|
|
sex, //性别 1男 2女
|
|
post, //岗位
|
|
num, //员工编号
|
|
mobile, //手机号
|
|
department_id, //部门id
|
|
parent_id, //上级 id
|
|
} = this
|
|
if(!name){
|
|
uni.showToast({
|
|
title:'请填写姓名',
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
if(!post){
|
|
uni.showToast({
|
|
title:'请填写部门职务',
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
if(!mobile){
|
|
uni.showToast({
|
|
title:'请填写手机号',
|
|
icon:'none'
|
|
})
|
|
return
|
|
}
|
|
let params = {
|
|
id,
|
|
name, //姓名
|
|
img, //头像
|
|
email, //邮箱
|
|
sex, //性别 1男 2女
|
|
post, //岗位
|
|
num, //员工编号
|
|
mobile, //手机号
|
|
department_id, //部门id
|
|
parent_id, //上级 id
|
|
}
|
|
netEditUserInfo(params).then(res=>{
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},2000)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fllow_form_li{
|
|
padding: 24rpx 24rpx 24rpx 45rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
}
|
|
.fllow_form {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
padding:24rpx;
|
|
}
|
|
.form_right {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 28rpx 5rpx 0 0;
|
|
}
|
|
}
|
|
text {
|
|
color: #f00;
|
|
margin-left: 10rpx;
|
|
}
|
|
.form_input {
|
|
height:60rpx;
|
|
input {
|
|
text-align: right;
|
|
margin-right: 10rpx;
|
|
color: #999;
|
|
padding:0;
|
|
height:60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
.buttonNumber{
|
|
width:300rpx;
|
|
background:#fff;
|
|
font-size:30rpx;
|
|
color:#999;
|
|
padding:0;
|
|
text-align: right;
|
|
border: none;
|
|
&::after{
|
|
border:none;
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
width:680rpx;
|
|
height:80rpx;
|
|
border-radius: 40rpx;
|
|
background:$uni-text-color;
|
|
font-size:26rpx;
|
|
color:#fff;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
margin:100rpx auto;
|
|
}
|
|
.set_person_data {
|
|
font-size: 28rpx;
|
|
|
|
.set_head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 30rpx 0;
|
|
padding: 0 24rpx;
|
|
background-color: #fff;
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
border-top: 1rpx solid #EAEAEA;
|
|
|
|
.set_img {
|
|
image {
|
|
vertical-align: middle;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.set_name {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.set_con {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #fff;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
padding: 0 30rpx 0 24rpx;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
|
|
text {
|
|
color: #ff3b30;
|
|
margin-left: 5rpx;
|
|
}
|
|
|
|
.con_right {
|
|
display: flex;
|
|
}
|
|
}
|
|
.mar-b {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
</style>
|