smartSchoolClockApp/pages/powerSet/powerSet.vue

<template>
	<view class="container">
		<view class="placeholder"></view>
		<!-- 头部分段选择器区域 -->
		<view class="control">
			<uni-segmented-control :current="current" :values="items" styleType="text" @clickItem="onClickItem" activeColor="#0082FC"></uni-segmented-control>
		</view>

		<!-- 搜索栏区域 -->
		<view class="search">
			<uni-search-bar bgColor="#fff" placeholder="请输入姓名" cancelButton="none" v-model="searchValue" @clear="clear" @input="getSearchData"></uni-search-bar>
		</view>

		<!-- 权限人物区域 -->
		<view class="choose" v-if="chooseList.length">
			<view class="box" v-for="item in chooseList" :key="item.id">
				<view class="name">{{ item.name }}</view>
				<view class="icon" @click="handleDelete(item)"><img src="../../static/imgs/close.png" /></view>
			</view>
		</view>

		<!-- 搜索人员展示区域 -->
		<view class="list" v-if="list.length">
			<!-- 每一个人员区域 -->
			<view class="item" v-for="item in list" :key="item.id" @click="handleAdd(item)">{{ item.name }} -- {{ item.identityType }} -- {{ item.idCard }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			items: ['管理员', '子管理员'],
			current: 0,
			searchValue: '',
			roleId: 2,
			list: [],
			chooseList: [],
			typeValue: '管理员'
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		// 获取权限列表数据
		async getData() {
			let res = await this.$myRequest_clockIn({
				url: '/attendance/api/system/user/list',
				data: {
					roleId: this.roleId,
					size: 9999
				}
			})
			// console.log(res);
			if (res.code == 200) {
				this.chooseList = res.data.list
			}
		},
		// 获取搜索列表的数据
		async getSearchData() {
			if (this.searchValue) {
				let res = await this.$myRequest_clockIn({
					url: '/attendance/api/system/user/list',
					data: {
						name: this.searchValue,
						size: 9999
					}
				})
				// console.log(res);
				if (res.code == 200) {
					this.list = res.data.list
					this.list.forEach(ele => {
						if (ele.identityType == 0) {
							ele.identityType = '其他'
						} else if (ele.identityType == 1) {
							ele.identityType = '学生'
						} else if (ele.identityType == 4) {
							ele.identityType = '教职工'
						} else if (ele.identityType == 5) {
							ele.identityType = '校友'
						} else if (ele.identityType == 6) {
							ele.identityType = '访客'
						} else if (ele.identityType == 7) {
							ele.identityType = '临时人员'
						}
					})
				}
			}
		},
		// 清空搜索框回调
		clear() {
			this.list = []
		},
		// 分段器点击回调
		onClickItem(e) {
			this.list = []
			this.searchValue = ''
			// console.log(e.currentIndex);
			if (e.currentIndex == 0) {
				this.roleId = 2
				this.typeValue = '管理员'
			} else {
				this.roleId = 3
				this.typeValue = '子管理员'
			}
			this.getData()
		},
		// × 图标点击回调
		handleDelete(item) {
			uni.showModal({
				title: '提示',
				content: `确定将 ${item.name} 从${this.typeValue}列表中删除吗？`,
				success: async res => {
					if (res.confirm) {
						let res = await this.$myRequest_clockIn({
							url: '/attendance/api/system/role/update/user',
							method: 'put',
							header: {
								'content-type': 'application/json'
							},
							data: {
								id: this.roleId,
								addIds: [],
								removeIds: [item.id]
							}
						})
						// console.log(res);
						if (res.code == 200 && res.data) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							setTimeout(() => {
								this.searchValue = ''
								this.list = []
								this.getData()
							}, 1500)
						}
					} else if (res.cancel) {
					}
				}
			})
		},
		// 点击添加回调
		handleAdd(item) {
			// 判断当前用户是否已经拥有该权限
			let temList = []
			this.chooseList.forEach(ele => {
				temList.push(ele.id)
			})
			let flag = temList.includes(item.id)

			if (flag) {
				uni.showModal({
					title: '提示',
					content: `当前用户已经是${this.typeValue}，请勿重复设置`,
					showCancel: false
				})
			} else {
				uni.showModal({
					title: '提示',
					content: `确定将 ${item.name} 设置成${this.typeValue}吗？`,
					success: async res => {
						if (res.confirm) {
							let res = await this.$myRequest_clockIn({
								url: '/attendance/api/system/role/update/user',
								method: 'put',
								header: {
									'content-type': 'application/json'
								},
								data: {
									id: this.roleId,
									addIds: [item.id],
									removeIds: []
								}
							})
							// console.log(res);
							if (res.code == 200 && res.data) {
								uni.showToast({
									title: '添加成功',
									icon: 'success'
								})
								setTimeout(() => {
									this.searchValue = ''
									this.list = []
									this.getData()
								}, 1500)
							}
						} else if (res.cancel) {
						}
					}
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-width: 100vw;
	min-height: 100vh;
	background-color: #f2f2f2;

	.placeholder {
		height: 20rpx;
	}

	.control {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 750rpx;
		height: 86rpx;
		background-color: #fff;
	}

	.search {
		box-sizing: border-box;
		margin-top: 20rpx;
		padding: 0 30rpx;
		width: 750rpx;
		height: 90rpx;
		border-radius: 170rpx;
		background-color: #fff;
	}

	.choose {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
		margin-top: 20rpx;
		padding: 30rpx;
		width: 690rpx;
		border-bottom: 1rpx solid #e5e5e5;
		background-color: #fff;

		.box {
			display: flex;
			align-items: center;
			width: 150rpx;
			height: 60rpx;

			.name {
				flex: 2;
				text-align: center;
				font-size: 28rpx;
			}

			.icon {
				flex: 1;
				display: flex;
				align-items: center;
				height: 50rpx;

				img {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.list {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		padding-top: 22rpx;
		width: 750rpx;
		border-bottom: 1rpx solid #e5e5e5;
		background-color: #fff;

		.item {
			margin-bottom: 30rpx;
			margin-left: 65rpx;
			height: 41rpx;
			font-size: 28rpx;
		}
	}
}

// 解决输入框不居中问题
::v-deep .uni-searchbar {
	padding: 10rpx;
}
</style>