307 lines
7.8 KiB
Vue
307 lines
7.8 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>
|
|
<uni-section title="部门/单位" type="line">
|
|
<view style="display:flex; justify-content:flex-end;margin-bottom: 12rpx;">
|
|
<button @click="choseDept('dept')" type="default" size="mini" >本部</button>
|
|
<button @click="choseDept('rparty')" type="default" size="mini" >相关方</button>
|
|
<button @click="backPreLevel" type="primary" size="mini" >返回上级</button>
|
|
</view>
|
|
<scroll-view scroll-y="true" style="height: 380rpx;" scroll-top=0 :show-scrollbar="true">
|
|
<uni-list v-if="showDepts.length>0">
|
|
<uni-list-item v-if="item.type!='company'" clickable @click="deptClick(item)" v-for="(item, index) in showDepts" :key="item.id" :title="item.name" thumb="../../../static/common/wenjianjia.png" thumbSize="sm"></uni-list-item>
|
|
</uni-list>
|
|
<view v-if="showDepts.length>0" style="margin-top: 12rpx; text-align: center;">{{showDepts.length}}</view>
|
|
<view v-else style="margin-top: 12rpx; text-align: center;">暂无下级单位</view>
|
|
</scroll-view>
|
|
<view style="height:12rpx"></view>
|
|
</uni-section>
|
|
<view style="height:12rpx"></view>
|
|
<uni-section title="人员" type="line">
|
|
<template v-slot:right>
|
|
{{currentDept.name}}
|
|
</template>
|
|
<uni-search-bar @confirm="searchUser" v-model="search" @clear="clearSearch" placeholder="姓名/手机号">
|
|
</uni-search-bar>
|
|
<uni-list v-if="userLists.length>0">
|
|
<uni-list-item :rightText="item.belong_dept_name" @switchChange="userChecks(item, $event.value)" :clickable="choseType=='single'" @click="userCheck(item)" :showSwitch="choseType=='multi'" :switchChecked="item.checked" v-for="(item, index) in userLists" :key="item.id" :title="item.name" thumb="../../../static/login/userRegister.png" thumbSize="sm"></uni-list-item>
|
|
</uni-list>
|
|
<view v-else style="margin-top: 12rpx; text-align: center;">本级无人员</view>
|
|
<view style="height:12rpx"></view>
|
|
</uni-section>
|
|
<view class="bottomBlock" v-if="choseType=='multi'">
|
|
<view class="checkUserShow">已选：
|
|
<button v-for="(item, index) in selectedUser" :key="item.id" @click="delUser(item, index)" type="default" size="mini" style="margin-left:6rpx">{{item.name}}</button>
|
|
</view>
|
|
<button size="mini" type="primary" class="submitBtn" @click="submitClick">确定</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
type:'',
|
|
search: '',
|
|
choseType: 'single',
|
|
typeName:'',
|
|
level:'dept',
|
|
showDepts:[],
|
|
deptLists:[],
|
|
userLists:[],
|
|
rpartyLists:[],
|
|
selectedUser:[],
|
|
currentDept:{},
|
|
currentIndex:'',
|
|
currentParent:'',
|
|
currentId:'',
|
|
deptTypeOptions: [{text: '本部', value: 'dept'}, {text: "相关方", value: "rparty"}]
|
|
};
|
|
},
|
|
onLoad(params) {
|
|
this.currentId = this.type = params.type;
|
|
|
|
this.typeName = params.typeName;
|
|
this.choseType = params.choseType?params.choseType:'single';
|
|
this.getDept();
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
searchUser(){
|
|
let that = this;
|
|
if(this.search.length>0){
|
|
that.getUserList({}, this.search, false);
|
|
}
|
|
},
|
|
clearSearch(){
|
|
let that = this;
|
|
that.search = '';
|
|
if (that.currentDept.id){
|
|
that.getUserList(that.currentDept, '', true);
|
|
}
|
|
},
|
|
getDept(){
|
|
let that = this;
|
|
that.$u.api.deptList({
|
|
page: 0,
|
|
type__in: 'dept, rparty, company',
|
|
query: '{id, name, parent, type}'
|
|
}).then(res => {
|
|
that.showDepts = res;
|
|
that.deptLists = res;
|
|
if(res.length>1){
|
|
that.getUserList(res[1])
|
|
}
|
|
})
|
|
},
|
|
choseDept(typestr) {
|
|
let that = this;
|
|
that.showDepts = that.deptLists.filter(item=>{
|
|
return item.type==typestr;
|
|
})
|
|
},
|
|
getUserList(dept, search='', changeDept=true) {
|
|
let that = this;
|
|
let params = {
|
|
page: 0,
|
|
search: search,
|
|
is_active: true,
|
|
query: '{id, name, belong_dept, belong_dept_name}'
|
|
};
|
|
if(dept.id){
|
|
params.depts = dept.id;
|
|
}
|
|
that.$u.api.userList(params).then(res=>{
|
|
that.userLists = res;
|
|
that.sameChose()
|
|
if (changeDept) {
|
|
that.currentDept = dept;
|
|
}
|
|
})
|
|
},
|
|
//点击部门
|
|
deptClick(dept){
|
|
let that = this;
|
|
if(dept.type != 'company'){
|
|
that.getUserList(dept)
|
|
}
|
|
|
|
that.showDepts = that.deptLists.filter(item=>{
|
|
return item.parent==dept.id;
|
|
})
|
|
},
|
|
//返回上一级
|
|
backPreLevel(){
|
|
let that = this;
|
|
if (that.currentDept.parent) {
|
|
let dept = that.deptLists.find(item => item.id === that.currentDept.parent)
|
|
that.deptClick(dept)
|
|
}
|
|
},
|
|
radioChange(e,item){
|
|
let that = this;
|
|
let value = e.detail.value;
|
|
that.currentId = value;
|
|
that.selectedUser = that.userLists.filter(item=>{
|
|
return item.id == value;
|
|
})
|
|
},
|
|
userCheck(item) {
|
|
if(this.choseType == 'single') {
|
|
this.selectedUser = [item]
|
|
this.submitClick()
|
|
}
|
|
|
|
},
|
|
userChecks(item, checked) {
|
|
for (var i=0; i<this.selectedUser.length; i++){
|
|
if(this.selectedUser[i].id==item.id){
|
|
if(checked){return;}
|
|
else{
|
|
this.selectedUser.splice(i, 1);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
if(checked){
|
|
this.selectedUser.push(item)
|
|
}
|
|
},
|
|
delUser(item, index) {
|
|
let that = this;
|
|
that.selectedUser.splice(index, 1);
|
|
for(var x=0; x< that.userLists.length; x++){
|
|
if(that.userLists[x].id == item.id){
|
|
item.checked = false;
|
|
this.$set(this.userLists, x, item);
|
|
// that.userLists[x].checked = false
|
|
}
|
|
}
|
|
|
|
// that.$vm.$forceUpdate();
|
|
},
|
|
sameChose() {
|
|
// 同步显示
|
|
let that = this;
|
|
for(var i=0; i< that.userLists.length; i++){
|
|
// debugger;
|
|
that.userLists[i].checked = false
|
|
for(var x=0; x< that.selectedUser.length; x++){
|
|
if(that.selectedUser[x].id == that.userLists[i].id){
|
|
that.userLists[i].checked = true
|
|
}
|
|
}
|
|
}
|
|
},
|
|
submitClick(){
|
|
if (this.selectedUser.length === 0){
|
|
uni.showToast({
|
|
title: '未选择任何人员',
|
|
icon: "none"
|
|
})
|
|
return
|
|
}
|
|
let pages = getCurrentPages(); //获取所有页面栈实例列表
|
|
let nowPage = pages[ pages.length - 1]; //当前页页面实例
|
|
let prevPage = pages[ pages.length - 2 ]; //上一页页面实例
|
|
if(this.choseType == 'single'){
|
|
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;
|
|
width: 80%;
|
|
}
|
|
.submitBtn{
|
|
position: absolute;
|
|
bottom: 40upx;
|
|
right: 30upx;
|
|
background-color: #ff7000;
|
|
width: 20%;
|
|
}
|
|
</style>
|