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>
|