268 lines
6.3 KiB
Vue
268 lines
6.3 KiB
Vue
<template>
|
|
<view class="componentWrap">
|
|
<uni-nav-bar
|
|
@clickLeft="goBack()"
|
|
class="nav-bar" leftText="人员选择"
|
|
height="110rpx" leftWidth="200rpx"
|
|
leftIcon="left" backgroundColor="#2cade8" color="#fff"
|
|
border fixed statusBar shadow
|
|
></uni-nav-bar>
|
|
|
|
<view class="list-wrap">
|
|
<button @click="backPreLevel"> 返回上一级 </button>
|
|
<view>
|
|
<view v-for="(dept,index) in showDepts" :key="dept.id" class="listItem" @click="deptClick(dept,index)">
|
|
<image class="deptImage" src="../../../static/common/wenjianjia.png"></image>
|
|
<view class="itemName"> {{dept.name}}</view>
|
|
</view>
|
|
<radio-group @change="(e) => radioChange(e)">
|
|
<label class="listItem"v-for="(user,index1) in userLists" :key="user.id">
|
|
<view>
|
|
<radio :value="user.id" :id="user.id" :name=user.name :checked="user.checked" />
|
|
</view>
|
|
<image class="userImage" src="../../../static/login/userRegister.png"></image>
|
|
<view>{{user.name}}</view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="bottomBlock">
|
|
<text v-if="selectedUser.length>0" class="checkUserShow">已选人员：{{selectedUser[0].name}}</text>
|
|
<button size="mini" type="primary" class="submitBtn" @click="submitClick">确定</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
type:'',
|
|
typeName:'',
|
|
level:'dept',
|
|
showDepts:[],
|
|
deptLists:[],
|
|
userLists:[],
|
|
rpartyLists:[],
|
|
selectedUser:[],
|
|
currentDept:'',
|
|
currentIndex:'',
|
|
currentParent:'',
|
|
currentId:''
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
this.currentId = this.type = params.type;
|
|
|
|
this.typeName = params.typeName;
|
|
},
|
|
onShow() {
|
|
this.getDept();
|
|
this.getRparty();
|
|
},
|
|
methods: {
|
|
getDept(){
|
|
let that = this;
|
|
that.$u.api.deptList({
|
|
page: 0,
|
|
type__in: 'dept',
|
|
query: '{id, name, parent, type}'
|
|
}).then(res => {
|
|
console.log(res);
|
|
that.showDepts = res;
|
|
that.deptLists = res;
|
|
})
|
|
},
|
|
getRparty(){
|
|
let that = this;
|
|
that.$u.api.deptList({
|
|
page: 0,
|
|
type__in: 'rparty',
|
|
query: '{id, name, parent, type}'
|
|
}).then(res => {
|
|
console.log(res);
|
|
that.rpartyLists = res;
|
|
})
|
|
},
|
|
//点击部门
|
|
deptClick(dept,index){
|
|
let that = this;
|
|
let showDepts = [];
|
|
let params = {
|
|
page: 0,
|
|
depts: dept.id,
|
|
is_active: true,
|
|
query: '{id, name, belong_dept}'
|
|
};
|
|
if(that.level == 'dept'){
|
|
that.level = 'rparty';
|
|
that.currentIndex = index;
|
|
//获取该部门下的相关方
|
|
showDepts = that.rpartyLists.filter(item=>{
|
|
return item.parent==dept.id;
|
|
})
|
|
//获取该部门下的人员
|
|
if(that.deptLists[index].childreUser){
|
|
that.userLists =that.deptLists[index].childreUser;
|
|
that.userLists
|
|
for(let i = 0;i<that.userLists.length;i++){
|
|
if(that.userLists[i].id==that.currentId){
|
|
that.userLists[i].checked = true
|
|
}
|
|
}
|
|
}else{
|
|
that.$u.api.userList(params).then(res=>{
|
|
let arr = [];
|
|
res.forEach(userItem=>{
|
|
let obj = {};
|
|
obj = userItem;
|
|
obj.checked = false;
|
|
arr.push(obj)
|
|
})
|
|
that.deptLists[index].childreUser = arr;
|
|
that.userLists =arr;
|
|
})
|
|
}
|
|
}else if(that.level == 'rparty'){
|
|
that.level = 'user';
|
|
showDepts = [];
|
|
//获取该相关方下的人员
|
|
that.$u.api.userList(params).then(res=>{
|
|
let arr = [];
|
|
res.forEach(userItem=>{
|
|
let obj = {};
|
|
obj = userItem;
|
|
if(that.currentId!==''&&that.currentId==userItem.id){
|
|
obj.checked = true;
|
|
}else{
|
|
obj.checked = false;
|
|
}
|
|
arr.push(obj)
|
|
})
|
|
that.userLists =arr;
|
|
})
|
|
}
|
|
that.currentDept = dept.id;
|
|
that.currentParent = dept.parent;
|
|
that.showDepts = showDepts;
|
|
},
|
|
//返回上一级
|
|
backPreLevel(){
|
|
let that = this;
|
|
if(that.level == 'user'){//相关方人员选择时
|
|
//获取
|
|
that.level = 'rparty';
|
|
that.showDepts = that.deptList;
|
|
that.currentDept = that.currentParent;
|
|
//获取该部门下的相关方
|
|
that.showDepts = that.rpartyLists.filter(item=>{
|
|
return item.parent==that.currentDept;
|
|
})
|
|
that.userLists = that.deptLists[that.currentIndex].childreUser;
|
|
}else if(that.level == 'rparty'){
|
|
that.level = 'dept';
|
|
that.showDepts = that.deptLists;
|
|
//获取该部门下的人员
|
|
that.userLists = [];
|
|
}
|
|
},
|
|
radioChange(e,item){
|
|
let that = this;
|
|
let value = e.detail.value;
|
|
that.currentId = value;
|
|
that.selectedUser = that.userLists.filter(item=>{
|
|
return item.id == value;
|
|
})
|
|
},
|
|
submitClick(){
|
|
debugger;
|
|
let pages = getCurrentPages(); //获取所有页面栈实例列表
|
|
let nowPage = pages[ pages.length - 1]; //当前页页面实例
|
|
let prevPage = pages[ pages.length - 2 ]; //上一页页面实例
|
|
prevPage.$vm.formData[this.type] = this.selectedUser[0].id;
|
|
prevPage.$vm[this.typeName] = this.selectedUser[0].name;
|
|
// uni.navigateBack({
|
|
// delta: 1
|
|
// });
|
|
// let obj={};
|
|
// obj.type=this.type;
|
|
// obj.id=this.selectedUser[0].id;
|
|
// obj.name=this.selectedUser[0].name;
|
|
// uni.$emit('Selection',obj)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
},
|
|
goBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
>>> .uni-navbar__header,
|
|
>>> .uni-status-bar {
|
|
background-image: linear-gradient(254deg, #0ca7ee 0%, #005aff 100%, #2a8cff 100%, #54bdff 100%),
|
|
linear-gradient(#e60012, #e60012);
|
|
}
|
|
>>> uni-image {
|
|
height: 200upx;
|
|
width: 200upx;
|
|
}
|
|
.componentWrap {
|
|
background-color: #f3fbff;
|
|
padding-bottom: 227rpx;
|
|
}
|
|
.list-wrap {
|
|
width: 720rpx;
|
|
margin: 0 auto;
|
|
background-color: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 32rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 24rpx;
|
|
}
|
|
.listItem{
|
|
display: flex;
|
|
width: 100%;
|
|
padding: 28upx;
|
|
align-items: center;
|
|
border-bottom: 1upx solid #dddddd;
|
|
}
|
|
.deptImage{
|
|
width: 37upx;
|
|
height: 33upx;
|
|
margin-right: 28upx;
|
|
}
|
|
.userImage{
|
|
width: 50upx;
|
|
height: 50upx;
|
|
margin-right: 28upx;
|
|
}
|
|
.itemName{
|
|
line-height: 100%;
|
|
}
|
|
.bottomBlock{
|
|
width: 100%;
|
|
height: 150upx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: #015efe;
|
|
color: #ffffff;
|
|
z-index: 100;
|
|
}
|
|
.checkUserShow{
|
|
padding-left:20upx;
|
|
line-height: 150upx;
|
|
}
|
|
.submitBtn{
|
|
position: absolute;
|
|
bottom: 40upx;
|
|
right: 30upx;
|
|
background-color: #ff7000;
|
|
}
|
|
</style>
|