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: [],
				qianpiInfo: ''
			}
		},
		onLoad(options) {
			this.qianpiInfo = options.qianpi
			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(",")
					console.log('getApp().globalData.peoList', getApp().globalData.peoList)
					console.log('getApp().globalData.peoIdList', getApp().globalData.peoIdList)
					console.log('this.qianpiInfo', this.qianpiInfo)
					if (this.qianpiInfo == 'qianpi') {
						uni.$emit('query', {
							a: 4
						})
					} else {
						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>