dingzhou-app/pages/peoChoose/peoChoose.vue

<template>
	<view style="background-color: #fff;padding-bottom: 110rpx;" v-if="deptList.length != 0">
		<u-checkbox-group v-model="checkboxValue1" placement="column" iconPlacement="right"  @change="checkboxChange">
			<u-collapse accordion @open="open">
				<u-collapse-item :title="v.Name" :name="v.No" :key="v.No" v-for="v in deptList"  >
					<view slot="value" style="color: #2979ff;">
						{{idList.indexOf(v.No)==-1?'':'已选'}}
					</view>
					<view class="checkitem" v-for=" i in userList" :key="i.NO" v-if="i.FK_Dept == v.No">
						<u-checkbox :label="i.Name" :name="i.NO" size="24" @change="change2(i)"> </u-checkbox>
					</view>
				</u-collapse-item>
			</u-collapse>
		</u-checkbox-group>
		<view style="position: fixed;bottom: 0;left: 0;width: 100%;height: 100rpx;background-color: #fff;box-sizing: border-box;padding: 20rpx;">
			<u-button type="primary" text="确认" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxValue1:[],
				userList: [],
				deptList: [],
				allUserList: [],
				nameList:[],
				idList:[]
			}
		},
		onLoad(options){
			this.getjsPeo(options)
		},
		onNavigationBarButtonTap(e) {


		},
		methods: {
			//获取下一节点接收人信息
			getjsPeo(options) {
				uni.$u.http.get('/jflow/restful/GenerNextStepNodeEmps', {
					params: {
						workid: options.workid,
						token: uni.getStorageSync('jtoken'),
						flowNo: options.flowNo,
						toNodeID: options.id
					}
				}).then(res => {
					console.log(res)
					if(getApp().globalData.peoList.length != 0){
						this.nameList = getApp().globalData.peoList.split(",")
						this.idList = getApp().globalData.peoDeptList.split(",")
						this.checkboxValue1 = getApp().globalData.peoIdList.split(",")
					}
					this.allUserList = res.Emps;
					this.userList = res.Emps;
					this.$forceUpdate()
					if(res.Depts.length>1&&res.Depts[0].Name=="河北省卫计委综合监督执法局"){
						this.deptList = res.Depts.splice(1)
					}else{
						this.deptList = res.Depts
					}
					
				})
			},
			//选择人员
			checkboxChange(e){
				// console.log(e)
			},
			//折叠面板打开
			open(e){
				// console.log(e)
			},
			change2(e){
				if(this.nameList.indexOf(e.Name)==-1){
					this.nameList.push(e.Name)
					this.idList.push(e.FK_Dept)
				}else{
					this.nameList.splice(this.nameList.indexOf(e.Name),1)
					this.idList.splice(this.nameList.indexOf(e.Name),1)
				}
			},
			submit(){
				if(this.checkboxValue1.length == 0){
					uni.showToast({
						title:"请选择人员",
						icon:"none"
					})
				}else{
					getApp().globalData.peoList = this.nameList.join(",")
					getApp().globalData.peoIdList = this.checkboxValue1.join(",")
					getApp().globalData.peoDeptList = this.idList.join(",")
					uni.$emit('query' , {a : 1})
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkitem{
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-bottom: 1px solid #eaeaea;

	}
	::v-deep .u-collapse-item__content__text{
		background-color: #f7f7f7;
	}
	::v-deep .u-cell__title-text{
		font-size: 32rpx;
	}
</style>