550 lines
12 KiB
Vue
550 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="uinfo_view">
|
|||
|
|
<view class="form-box-ud" style="border-radius: 10upx;">
|
|||
|
|
<view class="form-item" >
|
|||
|
|
<text class="label">姓 名：</text>
|
|||
|
|
<view class="ipt-box">
|
|||
|
|
<input v-model="realName" type="text" maxlength="120" disabled="true" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item" >
|
|||
|
|
<text class="label">手机号码：</text>
|
|||
|
|
<view class="ipt-box">
|
|||
|
|
<input v-model="mobile" type="text" maxlength="120" disabled="true" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item" >
|
|||
|
|
<text class="label">部 门：</text>
|
|||
|
|
<view class="ipt-box box box-between">
|
|||
|
|
<input style="width: 80%;" v-model="deptText" type="text" maxlength="120" disabled="true" />
|
|||
|
|
<button @tap="showTree" style="height: 70upx;line-height: 70upx; font-size: 28upx;color: white;background-color: #4db4ea;margin: 0px;" @click="editUserInfo()">修改</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- <button class="confirm-btn" @click="editUserInfo()">修改</button> -->
|
|||
|
|
<tki-tree ref="tkitree" :range="range" rangeKey="name" confirmColor="#4e8af7"
|
|||
|
|
@confirm="treeConfirm"
|
|||
|
|
@cancel="treeCancel"
|
|||
|
|
@childrenClick="childrenClick"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {mapMutations} from 'vuex';
|
|||
|
|
import{updateUserInfo,getCodeInfo,getDeptByParentId} from '@/common/api.js'
|
|||
|
|
import {callbackRequest,alertTip,setStorage,getStorage,devEnv} from '@/common/util.js'
|
|||
|
|
import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
|||
|
|
import dyDatetimePicker from '@/components/dateTime.vue'
|
|||
|
|
import avatar from "../../components/yq-avatar/yq-avatar.vue";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
uniIcons,
|
|||
|
|
dyDatetimePicker,
|
|||
|
|
avatar
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userInfo:getStorage("userInfo"),
|
|||
|
|
showFlag:0,//0 查看，1修改
|
|||
|
|
realName:getStorage("userInfo").realName,
|
|||
|
|
mobile:getStorage("userInfo").mobile,
|
|||
|
|
departmentId:getStorage("userInfo").deptId,
|
|||
|
|
departmentName:getStorage("userInfo").departmentName,
|
|||
|
|
orgId:getStorage("userInfo").orgId,
|
|||
|
|
orgName:getStorage("userInfo").orgName,
|
|||
|
|
deptText:getStorage("userInfo").deptNameUrl,
|
|||
|
|
chooseDept:{},
|
|||
|
|
range:[],
|
|||
|
|
|
|||
|
|
vCode:'',
|
|||
|
|
codeKey:'',
|
|||
|
|
jsq:null,//计时器
|
|||
|
|
btnText:'获取验证码',
|
|||
|
|
headImg:getStorage("userInfo").wxProfile,
|
|||
|
|
headImgB64:getStorage("userInfo").wxProfile,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getDeptByParentId(0,new Array());
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...mapMutations(['login']),
|
|||
|
|
longTap(){
|
|||
|
|
var vconShow = uni.getStorageSync('1001093_vconShow') == null ? '0' : uni.getStorageSync('1001093_vconShow');
|
|||
|
|
if(vconShow == 0){
|
|||
|
|
uni.setStorageSync('1001093_vconShow', "1");
|
|||
|
|
}else{
|
|||
|
|
uni.setStorageSync('1001093_vconShow', "0");
|
|||
|
|
}
|
|||
|
|
console.log(uni.getStorageSync('1001093_vconShow'));
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
childrenClick(e){
|
|||
|
|
var id = e[0].id;
|
|||
|
|
this.getDeptByParentId(id,e);
|
|||
|
|
},
|
|||
|
|
treeConfirm(e) {
|
|||
|
|
this.chooseDept = e[0];
|
|||
|
|
console.log(e);
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认',
|
|||
|
|
content: '请确认是否修改部门',
|
|||
|
|
showCancel: true,
|
|||
|
|
cancelText: '取消',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
let deptText = "";
|
|||
|
|
let deptId = "";
|
|||
|
|
for(let i=0;i<this.chooseDept.parents.length;i++){
|
|||
|
|
deptText+=this.chooseDept.parents[i].name+"/";
|
|||
|
|
deptId+=this.chooseDept.parents[i].id+"/";
|
|||
|
|
}
|
|||
|
|
deptText+=this.chooseDept.name;
|
|||
|
|
deptId+=this.chooseDept.id;
|
|||
|
|
this.editUserInfo(deptText,deptId);
|
|||
|
|
this.deptText = deptText;
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 取消回调事件
|
|||
|
|
treeCancel(e) {
|
|||
|
|
},
|
|||
|
|
// 显示树形选择器
|
|||
|
|
showTree() {
|
|||
|
|
this.$refs.tkitree._show();
|
|||
|
|
},
|
|||
|
|
getSubScript(id,arr){
|
|||
|
|
for(var i=0;i<arr.length;i++){
|
|||
|
|
if(id == arr[i].id){
|
|||
|
|
return i;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getDeptByParentId(parentId,arr){
|
|||
|
|
let params = {
|
|||
|
|
method: getDeptByParentId,
|
|||
|
|
data: {
|
|||
|
|
parentId: parentId
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {
|
|||
|
|
res = res.data;
|
|||
|
|
if (res.returnCode==1) {
|
|||
|
|
if(res.returnData.length==0){
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(parentId==0){
|
|||
|
|
this.range = res.returnData;
|
|||
|
|
}else{
|
|||
|
|
var obj = arr[0];
|
|||
|
|
var parentArr = obj.parents;
|
|||
|
|
if(parentArr.length==0){
|
|||
|
|
for(var i=0;i<this.range.length;i++){
|
|||
|
|
var rangeObj = this.range[i];
|
|||
|
|
if(parentId == rangeObj.id){
|
|||
|
|
this.range[i].children = res.returnData;
|
|||
|
|
this.range[i].show = true;
|
|||
|
|
this.range[i].showChild = true;
|
|||
|
|
this.range[i].open = true;
|
|||
|
|
this.$refs.tkitree._initTree();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
var numArr=[];
|
|||
|
|
var dataArr = this.range;
|
|||
|
|
for(var i=0;i<parentArr.length;i++){
|
|||
|
|
var subScript = this.getSubScript(parentArr[i].id,dataArr);
|
|||
|
|
numArr.push(subScript);
|
|||
|
|
dataArr = dataArr[subScript].children;
|
|||
|
|
}
|
|||
|
|
for(var j=0;j<dataArr.length;j++){
|
|||
|
|
if(parentId == dataArr[j].id){
|
|||
|
|
numArr.push(j);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(numArr.length==2){
|
|||
|
|
this.range[numArr[0]].children[numArr[1]].children = res.returnData;
|
|||
|
|
}else if(numArr.length==3){
|
|||
|
|
this.range[numArr[0]].children[numArr[1]].children[numArr[2]].children = res.returnData;
|
|||
|
|
}else if(numArr.length==4){
|
|||
|
|
this.range[numArr[0]].children[numArr[1]].children[numArr[2]].children[numArr[3]].children = res.returnData;
|
|||
|
|
}
|
|||
|
|
this.$refs.tkitree._initTree()
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
checkPhone (phone) {
|
|||
|
|
if (!(/^1[3456789]\d{9}$/.test(phone))) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
},
|
|||
|
|
testCode(code) {
|
|||
|
|
if(!(/^\d{6}$/.test(code))){
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
return true;
|
|||
|
|
},
|
|||
|
|
getCodeInfo(){
|
|||
|
|
if(this.jsq){return false;}
|
|||
|
|
if (!this.checkPhone(this.uinfo.mobile)) {
|
|||
|
|
alertTip('请填写正确的手机号码','',1000);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
let data = {
|
|||
|
|
"method": getCodeInfo,
|
|||
|
|
"data": {
|
|||
|
|
phone:this.uinfo.mobile
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
callbackRequest(data)
|
|||
|
|
.then(res =>{
|
|||
|
|
if(res.data.returnCode == 1){
|
|||
|
|
this.codeKey = res.data.returnMsg;
|
|||
|
|
alertTip('验证码已发送，请注意查收！','',3000);
|
|||
|
|
this.timer();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//倒计时
|
|||
|
|
timer(){
|
|||
|
|
let i = 60;
|
|||
|
|
let _this = this;
|
|||
|
|
this.jsq = setInterval(function(){
|
|||
|
|
if(i == 0){
|
|||
|
|
_this.btnText = '重新发送';
|
|||
|
|
clearInterval(_this.jsq);
|
|||
|
|
_this.jsq = null;
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
_this.btnText = i+'s';
|
|||
|
|
i--;
|
|||
|
|
},1000);
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
editUserInfo(deptTextUrl,deptIdUrl){
|
|||
|
|
if(!this.realName){
|
|||
|
|
alertTip('请填写姓名','',1000);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if(!this.mobile){
|
|||
|
|
alertTip('请填写手机号','',1000);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (!this.checkPhone(this.mobile)) {
|
|||
|
|
alertTip('请填写正确的手机号码','',1000);
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if(this.chooseDept.id){
|
|||
|
|
this.departmentId = this.chooseDept.id;
|
|||
|
|
this.departmentName = this.chooseDept.name;
|
|||
|
|
this.orgId = this.chooseDept.parents[0].id;
|
|||
|
|
this.orgName =this.chooseDept.parents[0].name;
|
|||
|
|
}
|
|||
|
|
let data = {
|
|||
|
|
"method": updateUserInfo,
|
|||
|
|
"data": {
|
|||
|
|
realName:this.realName,
|
|||
|
|
mobile:this.mobile,
|
|||
|
|
departmentId:this.departmentId,
|
|||
|
|
departmentName:this.departmentName,
|
|||
|
|
orgId:this.orgId,
|
|||
|
|
orgName:this.orgName,
|
|||
|
|
id:this.userInfo.id,
|
|||
|
|
deptIdUrl:deptIdUrl,
|
|||
|
|
deptTextUrl:deptTextUrl
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
callbackRequest(data)
|
|||
|
|
.then(res =>{
|
|||
|
|
res = res.data;
|
|||
|
|
if(res.returnCode == 1){
|
|||
|
|
alertTip('用户信息已修改','',2000);
|
|||
|
|
var userInfo=getStorage("userInfo");
|
|||
|
|
userInfo.deptName = res.returnData.departmentName == null ? '' : res.returnData.departmentName;
|
|||
|
|
userInfo.deptId = res.returnData.department_id == null ? '' : res.returnData.department_id;
|
|||
|
|
userInfo.orgName = res.returnData.orgName == null ? '' : res.returnData.orgName;
|
|||
|
|
userInfo.deptNameUrl = res.returnData.deptNameUrl == null ? '' : res.returnData.deptNameUrl;
|
|||
|
|
userInfo.departmentName = res.returnData.departmentName == null ? '' : res.returnData.departmentName;
|
|||
|
|
userInfo.department_id = res.returnData.department_id == null ? '' : res.returnData.department_id;
|
|||
|
|
userInfo.deptIdUrl = res.returnData.deptIdUrl == null ? '' : res.returnData.deptIdUrl;ss
|
|||
|
|
uni.setStorage({
|
|||
|
|
key: "userInfo",
|
|||
|
|
data: userInfo
|
|||
|
|
})
|
|||
|
|
this.login(userInfo);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '@/static/css/common.scss';
|
|||
|
|
.form-box-ud {
|
|||
|
|
background: #fff;
|
|||
|
|
.form-item {
|
|||
|
|
overflow: hidden;
|
|||
|
|
// border-bottom: 1px solid #eee;
|
|||
|
|
padding: 30upx 20upx 10upx 20upx;
|
|||
|
|
.label {
|
|||
|
|
width: 150upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 50upx;
|
|||
|
|
}
|
|||
|
|
.ipt-box {
|
|||
|
|
margin-left: 40upx;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 70upx;
|
|||
|
|
line-height: 70upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #666;
|
|||
|
|
border: 1px solid #e5e5e5;
|
|||
|
|
padding-left: 20upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
// padding: 40upx 20upx;
|
|||
|
|
}
|
|||
|
|
textarea{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #666;
|
|||
|
|
border: 1px solid #e5e5e5;
|
|||
|
|
padding: 20upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
.radio-group{
|
|||
|
|
font-size: 26upx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 40upx;
|
|||
|
|
min-width: 140upx;
|
|||
|
|
margin-bottom: 20upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.select {
|
|||
|
|
.arrow {
|
|||
|
|
float: right;
|
|||
|
|
width: 16upx;
|
|||
|
|
height: 29upx;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
}
|
|||
|
|
.picker {
|
|||
|
|
height: 50upx;
|
|||
|
|
line-height: 50upx;
|
|||
|
|
font-size: 26upx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-left: 10upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-ccc{
|
|||
|
|
background: #ccc !important;
|
|||
|
|
}
|
|||
|
|
.icon_view {
|
|||
|
|
color: $font-color-light;
|
|||
|
|
margin-left: 2vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uinfo_view {
|
|||
|
|
font-size: $font-lg;
|
|||
|
|
// background: #fff;
|
|||
|
|
min-height:100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u_head {
|
|||
|
|
padding: 4vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head_img {
|
|||
|
|
margin: 40upx auto;
|
|||
|
|
margin-top: 50upx;
|
|||
|
|
width: 190upx;
|
|||
|
|
height:190upx;
|
|||
|
|
box-shadow: 0 0 10rpx 1rpx #f8f8f8;
|
|||
|
|
border: 1px solid #e5e5e5;
|
|||
|
|
border-radius:20upx;
|
|||
|
|
}
|
|||
|
|
.head_img image{
|
|||
|
|
width:100%;
|
|||
|
|
height:100%;
|
|||
|
|
border-radius:20upx;
|
|||
|
|
}
|
|||
|
|
.head_edit {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 41vw;
|
|||
|
|
left: 56vw;
|
|||
|
|
width: 10vw;
|
|||
|
|
height: 10vw;
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.i_img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head_name {
|
|||
|
|
font-size: 40upx;
|
|||
|
|
font-weight: 800;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u_mid {
|
|||
|
|
padding: 4vw;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mid_view {
|
|||
|
|
padding: 4vw 0;
|
|||
|
|
display: flex;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
.code-box .getCodeBtn{
|
|||
|
|
float:right;
|
|||
|
|
width:22vw;
|
|||
|
|
height:50rpx;
|
|||
|
|
background: #ff6600;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
border-radius:4rpx;
|
|||
|
|
font-size:26rpx;
|
|||
|
|
color:#fff;
|
|||
|
|
}
|
|||
|
|
.code-box .tab_rig {
|
|||
|
|
width: 40vw;
|
|||
|
|
height: 25px;
|
|||
|
|
}
|
|||
|
|
.tab_left {
|
|||
|
|
width: 25vw;
|
|||
|
|
text-align: right;
|
|||
|
|
margin-right: 3vw;
|
|||
|
|
line-height:50rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab_rig {
|
|||
|
|
width: 55vw;
|
|||
|
|
line-height:50rpx;
|
|||
|
|
input{
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.confirm-btn {
|
|||
|
|
width: 630upx;
|
|||
|
|
height: 76upx;
|
|||
|
|
line-height: 76upx;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
margin-top: 90upx;
|
|||
|
|
margin-bottom: 60upx;
|
|||
|
|
background: #4db4ea;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: $font-lg;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.ipt-box {
|
|||
|
|
margin-left: 160upx;
|
|||
|
|
input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 50upx;
|
|||
|
|
line-height: 50upx;
|
|||
|
|
font-size: 26upx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select {
|
|||
|
|
margin-left: 0rpx;
|
|||
|
|
width: 60vw;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #666;
|
|||
|
|
.picker{
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
}
|
|||
|
|
.arrow {
|
|||
|
|
float: right;
|
|||
|
|
width: 16upx;
|
|||
|
|
height: 29upx;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
width: 70%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-gray{
|
|||
|
|
background-color: #9A9A9A;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
display: flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-row-reverse {
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*上下排列*/
|
|||
|
|
.box-column {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*上下排列*/
|
|||
|
|
.box-left {
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居右*/
|
|||
|
|
.box-right {
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居左*/
|
|||
|
|
.box-center {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居中*/
|
|||
|
|
.box-between {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*两端对齐*/
|
|||
|
|
.box-align-center {
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-wrap {
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
</style>
|