hls_crm/pagesA/profile/staff/stafflist/editStaff.vue

327 lines
7.5 KiB
Vue

<template>
<view>
<view class="fllow_form">
<view style="padding-left: 25rpx;">头像</view>
<view class="form_right" @click="changeHeaderImg">
<view>
<image class="headerimg" :src="img ? img : BASE_IMG_URL+'headImg.png'" mode="scaleToFill"></image>
</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 style="padding-left: 25rpx;">性别</view>
<picker @change="changeSex" :range="sexArr" :value="sexindex" :range-key="'name'">
<view class="form_right" >
<view>{{sexname ? sexname : '点击选择'}}</view>
<view class="iconfont icon-arrows_right"></view>
</view>
</picker>
</view>
<view class="fllow_form">
<view style="padding-left: 25rpx;">昵称</view>
<view class="form_input">
<input type="text" v-model="nickname" placeholder-style="font-size:30rpx;color: #999;" placeholder="请输入昵称" />
</view>
</view>
<view class="fllow_form">
<view><text>*</text>角色</view>
<picker @change="changeRole" :disabled="type != 1" :range="roleList" :value="roleIndex" :range-key="'name'">
<view class="form_right" >
<view>{{roleList[roleIndex] ? roleList[roleIndex].name : '点击选择'}}</view>
<view class="iconfont icon-arrows_right"></view>
</view>
</picker>
</view>
<view class="fllow_form">
<view style="padding-left: 25rpx;">员工编号</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">
<view><text>*</text>手机号</view>
<view class="form_input">
<input type="text" v-model="mobile" placeholder-style="font-size:30rpx;color: #999;" placeholder="请输入手机号"/>
</view>
</view>
<view class="fllow_form">
<view style="padding-left: 25rpx;">邮箱</view>
<view class="form_input">
<input type="text" v-model="email" placeholder-style="font-size:30rpx;color: #999;" placeholder="请输入邮箱"/>
</view>
</view>
<tki-tree ref="tkitree"
:selectParent="true"
:foldAll="true"
:range="departmentList"
:rangeKey="'name'"
confirmColor="#008EFF"
@confirm="selectDepartment"
/>
<view class="fllow_form">
<view style="padding-left: 25rpx;">岗位</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">
<view style="padding-left: 25rpx;">上级</view>
<view class="form_right" @click="moreClick">
<view>{{parent_name ? parent_name : '点击选择上级'}}</view>
<view class="iconfont icon-arrows_right"></view>
</view>
</view>
<view class="btn_g bg-blue button-hover round" @click="submitInfo">
保存
</view>
</view>
</template>
<script>
import { netEditStaff, netDepartmentList, netStaffDetail, netPassStaffInfo, uploadUrl } from '@/api/index.js'
import tkiTree from "@/components/tki-tree/tki-tree.vue"
import { BASE_IMG_URL } from '@/util/api.js'
export default{
components: {tkiTree},
data(){
return{
id:'',
img:'',
name:'',
sex:'',
sexname:'',
nickname:'',
num:'',
mobile:'',
email:'',
department_name:'',
post:'',
parent_id:'',
parent_name:'',
BASE_IMG_URL:BASE_IMG_URL,
sexArr:[{id:1,name:'男'},{id:2,name:'女'}],
sexindex:null,
parentObj:null, //上级
roleList:[
{id:3,name:'部门经理'},
{id:4,name:'部门主管'},
{id:5,name:'组长'},
{id:6,name:'员工'}
],
roleIndex:3,
type:null, //1 待审核员工
}
},
onLoad(options) {
this.id = options.id
if(options.type){
this.type = options.type
}
//获取 员工 详情
this.getDetail()
},
onShow() {
if(uni.getStorageSync('parentinfo')){
this.parentObj = uni.getStorageSync('parentinfo')
}
},
//监听 页面 卸载
onUnload() {
uni.removeStorageSync('parentinfo')
},
methods:{
getDetail() {
netStaffDetail({id:this.id}).then(res=>{
res = res.data
this.img = res.img
this.name = res.name
this.sex = res.sex
this.sexname = res.sex == 1 ? '男' : '女'
this.nickname = res.nickname
this.num = res.num
this.mobile = res.mobile
this.email = res.email
this.department_name = res.department_name
this.post = res.post
this.parent_id = res.parent_id
this.parent_name = res.parent_name
})
},
//头像
changeHeaderImg() {
uni.chooseImage({
count:1,
sizeType:['compressed'],
success:(res)=>{
let file = res.tempFilePaths[0]
this.uploadFile(file)
}
})
},
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)
}
})
},
//性别
changeSex(e) {
this.sexindex = e.detail.value
this.sex = this.sexArr[e.detail.value].id
this.sexname = this.sexArr[e.detail.value].name
},
//上级
moreClick() {
uni.navigateTo({
url: '/pagesA/crm/selectMember/selectMember?type=1'
})
},
//角色
changeRole(e) {
this.roleIndex = e.detail.value
},
submitInfo() {
let {
id,
img,
name,
sex,
nickname,
num,
email,
mobile,
post,
parent_id,
parentObj,
roleList,
roleIndex
} = this
if(!name){
uni.showToast({
title:'请填写姓名',
icon:'none'
})
return
}
if(!mobile){
uni.showToast({
title:'请填写手机号',
icon:'none'
})
return
}
let params = {
id,
img,
name,
sex,
nickname,
num,
mobile,
email,
post,
role:roleList[roleIndex].id,
parent_id: parentObj ? parentObj.id : parent_id
}
if(this.type == 1) {
netPassStaffInfo(params).then(res=>{
uni.showToast({
title: res.msg,
icon:'none'
})
setTimeout(()=>{
uni.navigateBack({
delta:1
})
},2000)
})
}else{
netEditStaff(params).then(res=>{
uni.showToast({
title: res.msg,
icon:'none'
})
setTimeout(()=>{
uni.navigateBack({
delta:1
})
},2000)
})
}
}
}
}
</script>
<style lang="scss" scoped>
.fllow_form {
display: flex;
justify-content: space-between;
background-color: #fff;
border-bottom: 1rpx solid #EAEAEA;
padding:30rpx 24rpx 30rpx 30rpx;
:first-child{
flex-shrink: 0;
}
.form_right {
display: flex;
flex-wrap: wrap;
color: #999;
text-align: right;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
}
.theme {
color: #5ca9fe;
}
text {
color: #f00;
margin-left: 10rpx;
}
.form_input {
input {
text-align: right;
margin-right: 10rpx;
}
}
}
.surebtn{
}
</style>