waterElectricityMinApp/pagesClockIn/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: {
									'Authorization': uni.getStorageSync("token")
								},
								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: {
										'Authorization': uni.getStorageSync("token")
									},
									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>