jiaoyuju_fawen/bureau-of-education/pages/postView/selectPeople/index.vue

<template>
	<view class="selectPeople">
		<u-navbar ref="uNavbar" :border-bottom="false" :back-icon-color="setNav.backColor" :is-back="setNav.isdisPlayNavTitle"
		 :title-size="setNav.size" :title-bold="setNav.bold" :title="setNav.navTitle" :title-color="setNav.color" :background="setNav"></u-navbar>
		<view class="selectBox">
			<view class="navs">
				<view class="nav" @click="setNavs(0)" :class="active == 0 ? 'active' : ''">按部门</view>
				<view class="nav" @click="setNavs(1)" :class="active == 1 ? 'active' : ''">按角色</view>
				<view class="nav" @click="setNavs(2)" :class="active == 2 ? 'active' : ''">按组</view>
			</view>
			<view class="box" v-if="active === 0">
				<view class="list" v-for="(item, index) in data">
					<view class="head"  @click="deptUser(item)">
						<view class="tite">{{item.label}}</view>
						<image v-if="!item.isSl" src="../../../static/img/icon_xzry_xl.png"></image>
						<image v-else src="../../../static/img/icon_xzry_sl.png"></image>
					</view>
					<view class="section" v-if="item.isSl">
						<view class="allSelect" @click="selectAll(item)">
							<image v-if="!item.isAll" src="../../../static/img/icon_qx_normal.png"></image>
							<image v-else src="../../../static/img/icon_qx_selected.png"></image>
							<text>全选</text>
						</view>
						<view class="select" @click="select(ls)" v-for="(ls, i) in item.userList">{{ls.userName}}</view>
					</view>
				</view>
			</view>
			<view class="box" v-if="active === 1">
				<view class="list" v-for="(item, index) in data1">
					<view class="head"  @click="rolesUser(item)">
						<view class="tite">{{item.label}}</view>
						<image v-if="!item.isSl" src="../../../static/img/icon_xzry_xl.png"></image>
						<image v-else src="../../../static/img/icon_xzry_sl.png"></image>
					</view>
					<view class="section" v-if="item.isSl">
						<view class="allSelect" @click="selectAll(item)">
							<image v-if="!item.isAll" src="../../../static/img/icon_qx_normal.png"></image>
							<image v-else src="../../../static/img/icon_qx_selected.png"></image>
							<text>全选</text>
						</view>
						<view class="select" @click="select(ls)" v-for="(ls, i) in item.userList">{{ls.userName}}</view>
					</view>
				</view>
			</view>
			<view class="box" v-if="active === 2">
				<view class="list" v-for="(item, index) in data2">
					<view class="head" @click="groupUser(item)">
						<view class="tite">{{item.label}}</view>
						<image v-if="!item.isSl"  src="../../../static/img/icon_xzry_xl.png"></image>
						<image v-else  src="../../../static/img/icon_xzry_sl.png"></image>
					</view>
					<view class="section" v-if="item.isSl">
						<view class="allSelect" @click="selectAll(item)">
							<image v-if="!item.isAll" src="../../../static/img/icon_qx_normal.png"></image>
							<image v-else src="../../../static/img/icon_qx_selected.png"></image>
							<text>全选</text>
						</view>
						<view class="select" @click="select(ls)" v-for="(ls, i) in item.userList">{{ls.userName}}</view>
					</view>
				</view>
			</view>
			
			<view class="exhibition">
				<view class="empty" @click="delAll()">
					<image src="../../../static/img/icon_plsc.png"></image>
					<view>清空</view>
				</view>
				<view class="lis">
					<view class="li" @click="del(item)" v-for="(item, index) in selectData" :key="index">{{item.nickName}}<image  src="../../../static/img/icon_xzry_close.png"></image>
					</view>
				</view>
				<view class="btn" @click="jump()">确认</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setNav: {
					backgroundColor: '#fff', //背景色
					color: '#000', //字体颜色
					bold: true,
					size: '36',
					backColor: '#000',
					isdisPlayNavTitle: true, //是否显示返回按钮
					navTitle: '选择人员' //导航标题
				},
				active: 0,
				data: [],
				data1: [],
				data2: [],
				selectData: []
			}
		},
		onLoad() {
			this.getDepts()
		},
		methods: {
			setNavs (type) {
				this.active = type
				switch (type){
					case 0:
						this.getDepts()
						break;
					case 1:
						this.getRoles()
						break;
					default:
						this.getGroups()
						break;
				}
			},
			async getDepts () {
				let res = await this.$u.get('system/dept/treeselect')
				if (res.code == 200) {
					this.data = res.data.map(item => {
						return Object.assign({}, item, {
							isAll: false,
							isSl: false,
							userList: []
						})
					})
				} else {
					this.data = []
				}
			},
			async getGroups () {
				let res = await this.$u.get('system/group/list')
				console.log(res)
				if (res.code == 200) {
					this.data2 = res.data.map(item => {
						return Object.assign({}, item, {
							label: item.groupName,
							isAll: false,
							isSl: false,
							userList: []
						})
					})
				} else {
					this.data2 = []
				}
			},
			async getRoles () {
				let res = await this.$u.get('system/role/list')
				console.log(res)
				if (res.code == 200) {
					this.data1 = res.rows.map(item => {
						return Object.assign({}, item, {
							label: item.roleName,
							isAll: false,
							isSl: false,
							userList: []
						})
					})
				} else {
					this.data1 = []
				}
			},
			async rolesUser(item) {
				let res = await this.$u.get('system/role/user/' + item.id)
				item.userList = res.data
				item.isSl = !item.isSl
			},
			async deptUser(item) {
				let res = await this.$u.get('system/dept/user/' + item.id)
				item.userList = res.data
				item.isSl = !item.isSl
			},
			async groupUser(item) {
				let res = await this.$u.get('system/group/user/' + item.id)
				item.userList = res.data
				item.isSl = !item.isSl
			},
			delAll () {
				this.data.map(item => {
					item.isAll = false
				})
				this.data1.map(item => {
					item.isAll = false
				})
				this.data2.map(item => {
					item.isAll = false
				})
				this.selectData = []
			},
			del (item) {
				var result = this.selectData.filter(list => list.nickName !== item.nickName )
				this.selectData = result
			},
			selectAll (item) {
				// 全选
				let users = item.userList.map(item1 => item1.nickName)
				if (!item.isAll) {
					item.isAll = true
					item.userList.map(item1 => {
						var result = this.selectData.some(list => list.nickName === item1.nickName )
						if (!result) {
							this.selectData.push(item1)
						}
					})
				} else {
					item.isAll = false
					this.selectData = this.selectData.filter(item1 => users.indexOf(item1.nickName) == -1)
				}
			},
			select (item) {
				var result = this.selectData.some(list => list.nickName === item.nickName )
				if (!result) {
					this.selectData.push(item)
				}
			},
			jump () {
				uni.setStorageSync('selectData', JSON.stringify(this.selectData))
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectPeople {
		background-color: #fff;
		height: 100%;
		.selectBox {
			display: flex;
			flex-direction: column;
			height: calc(100% - 44px);
		}
		.navs {
			display: flex;
			align-items: center;
			height: 90rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 2rpx 0px rgba(227, 227, 227, 0.3);

			.nav {
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				margin: 0 32rpx;

				&.active {
					color: #009FE8;
				}

			}
		}

		.box {
			padding: 0 32rpx;
			flex: 1;
			overflow: hidden;
			overflow-y: auto;
			.list {
				// 
				border-bottom: 1px solid #CDCDCD;

				.head {
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;
					color: #343434;

					image {
						width: 20rpx;
						height: 12rpx;
					}
				}

				.section {
					.allSelect {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-weight: 500;
						color: #009FE8;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 12rpx;
						}
					}

					.select {
						font-size: 28rpx;
						color: #343434;
						margin: 40rpx 0;
					}
				}
			}
		}

		.exhibition {
			padding: 32rpx;

			.empty {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 24rpx;
				color: #FF3131;

				image {
					width: 20rpx;
					height: 24rpx;
					margin-right: 12rpx;
				}
			}

			.lis {
				height: 270rpx;
				border: 1px solid #A7A7A7;
				border-radius: 6rpx;
				display: flex;
				margin-top: 16rpx;
				margin-bottom: 26rpx;
				flex-wrap: wrap;
				overflow-y: auto;
				.li {
					padding: 0 20rpx;
					height: 56rpx;
					background: #D2E5ED;
					border-radius: 28rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #343434;
					display: flex;
					align-items: center;
					margin: 20rpx;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 16rpx;
					}
				}
			}

			.btn {
				height: 90rpx;
				background: #009FE8;
				border-radius: 6px;
				color: #fff;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
</style>