zcdsj
/
factory_mp_old
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 人员选择优化，多选暂时有问题

This commit is contained in:
caoqianming 2023-04-12 08:37:00 +08:00
parent ca87016f7d
commit c7e16e8168
2 changed files with 415 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

267
pages/comm/userSelect/index - 副本.vue Normal file
View File

@ -0,0 +1,267 @@
<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" type="primary"> 返回上一级 </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>

249
pages/comm/userSelect/index.vue
View File

@ -7,27 +7,38 @@
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>
<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>
<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" />
<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>
<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>
@ -38,6 +49,8 @@ export default {
data() {
return {
type:'',
search: '',
choseType: 'single',
typeName:'',
level:'dept',
showDepts:[],
@ -45,125 +58,93 @@ export default {
userLists:[],
rpartyLists:[],
selectedUser:[],
currentDept:'',
currentDept:{},
currentIndex:'',
currentParent:'',
currentId:''
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() {
this.getDept();
this.getRparty();
},
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',
type__in: 'dept, rparty, company',
query: '{id, name, parent, type}'
}).then(res => {
console.log(res);
that.showDepts = res;
that.deptLists = res;
if(res.length>1){
that.getUserList(res[1])
}
})
},
getRparty(){
choseDept(typestr) {
let that = this;
that.$u.api.deptList({
that.showDepts = that.deptLists.filter(item=>{
return item.type==typestr;
})
},
getUserList(dept, search='', changeDept=true) {
let that = this;
let params = {
page: 0,
type__in: 'rparty',
query: '{id, name, parent, type}'
}).then(res => {
console.log(res);
that.rpartyLists = res;
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,index){
deptClick(dept){
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=>{
if(dept.type != 'company'){
that.getUserList(dept)
}
that.showDepts = that.deptLists.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 = [];
if (that.currentDept.parent) {
let dept = that.deptLists.find(item => item.id === that.currentDept.parent)
that.deptClick(dept)
}
},
radioChange(e,item){
@ -174,13 +155,69 @@ export default {
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(){
debugger;
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
// });
@ -257,11 +294,13 @@ export default {
.checkUserShow{
padding-left:20upx;
line-height: 150upx;
width: 80%;
}
.submitBtn{
position: absolute;
bottom: 40upx;
right: 30upx;
background-color: #ff7000;
width: 20%;
}
</style>