jp-housekeep-manage/pages/managementList/managementList.vue

<template>
	<view>
		<u-navbar title="授权管理" title-color="#101010"  :is-back="isback"  >
			<view slot="right" v-if="list.length"
			 
			 @click="deleteShow=!deleteShow">
			
				<img v-if="deleteShow==true" src="@/assets/img/arcoDesign-select-all.svg" alt="" /> 
				<span v-else style="color: red;" >删除</span>
				<!-- <img  src="@/assets/img/riLine-list-settings-line.svg" alt="" /> -->
			</view>
		</u-navbar>
		<view class="search-box">
			<u-search  @custom="getAuthorizedUserList(true)"
			
			placeholder="搜索授权用户" bg-color="#f2f4f6" height="80" :show-action="true" v-model="keyword">
		
		
			</u-search>
		
		</view>
		
		<view class="member-list-main">
			
		<!-- 列表 -->
		<view class="member-list">
			<checkbox-group @change="checkboxChange">
			<view class="item-info" v-for="(item,i)  in list" :key="i" >
				<!-- <view class="photo">
					<img src="@/assets/img/PEokWS2@3x.png" alt="" />
				</view> -->
				<view class="item" >
				<view class="infos">
					<view class="name">
						{{item.name}}
					</view>
					<view class="tel">
						{{item.phone}}
					</view>
				</view>
				
				<view class="button" @click="getAuthorizedUserDetails(item.id),userName=item.name" v-if="!deleteShow">
					权限管理
				</view>
				<!-- 单选框 -->
				<view class="radio-box" v-if="deleteShow">
				
					<checkbox :value="item.id"></checkbox>
					
				
				</view>
				</view>
				
			</view>
			
			</checkbox-group>
			
		</view>
			<u-divider :isnone="list.length==0"
			nonetext="暂无记录" border-color="#CFD2D5">
				已经到底了</u-divider>
		</view>
		<view class="bottom">
			<view class="button qr-code"
			@click="gotoUrl('/pages/managementList/authorizedQRCode')"
			>
				 <img src="@/assets/img/riLine-qr-code-line 1.svg" alt="" /> 授权二维码
			</view>
			
			<view class="button list-button" @click="gotoUrl('/pages/managementList/applicantsList')" >
				 <img src="@/assets/img/riLine-contacts-line.svg" alt="" /> 申请人列表
				 <view class="bot" v-if="approvalListNum">
				 	{{approvalListNum}}
				 </view>
			</view>
		</view>
		<!-- 删除 -->
		<view class="delete" v-if="deleteShow" @click="deletePopupQuery">
			<view class="icon">
				<img src="@/assets/img/riLine-delete-bin-7-line 1.svg" alt="" />
			</view>
			<view class="text">
				删除
			</view>
		</view>
		<!-- 删除确认弹框 -->
		<u-popup v-model="deletePopup" mode="bottom" border-radius="12">
			<view class="popup">
				<view class="headline">
					删除人员
				</view>
				<view class="hint">
					要删除选中的人员吗？
				</view>
				<view class="btn-box">
					<view class="cancel" @click="deletePopup=false">
						取消
					</view>
					<view class="confirm" @click="deletePopupApi" >
						确认删除
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 人员权限管理 -->
		<view>
				<u-popup v-model="show"  mode="bottom">
					<view class="popup2" >
						<view class="title">
							{{userName}}-权限管理
						</view>
						<scroll-view scroll-y="true" style="height: 600rpx;" >
							
						
						<u-checkbox-group style="    width: 100%;" @change="checkboxGroupChange">
						<view class="content">
							
							<view class="item" v-for="(item,i) in meterList"  >
								<view class="item-title">
									{{item.name}}
								</view>
								<view class="item-radio">
								<!-- 	<label class="radio">
										<radio value="" /><text></text>
									</label> -->
									
									<u-checkbox 
												
													v-model="item.checked" 
												
													:name="item.id"
												></u-checkbox>
								</view>
							</view>
							

						</view>
						</u-checkbox-group>
						<u-divider border-color="#CFD2D5">
							已经到底了</u-divider>
						</scroll-view>
						<view class="popup-bottom">
							<view class="button cancel" @click="show=false">
								取消
							</view>
							<view class="button save"  @click="submitBtn()" >
								保存
							</view>
						</view>
						
					</view>
				</u-popup>
				
			</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/managementList.js'
	
	export default {
		data() {
			return {
				keyword:"",
				deleteShow:false,
				deletePopup:false,
				deleteIds: "",
				pageIndex: 1,
				recordsTotal: 0,
				
				show:false,
				list:[],
				approvalListNum:0,
				meterList:[],
				meterListIn:[],
				userId:"",
				userName:"",
				isback:false,
			}
		},
		onLoad(op){
			if(op.isback){
				this.isback=op.isback
			}
		},
		onReady() {
			//this.getAuthorizedUserList()
			
		},
		onShow() {
			this.getAuthorizedUserList(true)
			this.getApprovalList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			deletePopupQuery() {
				if (this.deleteIds != '') {
					this.deletePopup = true
				} else {
					uni.showToast({
						title: "请至少勾选一项",
						icon: "none"
					})
				}
			
			},
			deletePopupApi() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.authorizedUserDelete({
					userIds: this.deleteIds
				}).then((response) => {
					uni.hideLoading();
					this.deletePopup = false
					this.deleteShow = false
					this.deleteIds = ""
					
					this.getAuthorizedUserList(true)
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			checkboxChange(e) {
				var sz = e.detail.value;
				console.log(sz)
				this.deleteIds = sz.join()
			
			},
			submitBtn(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var meterIds="";
				if(this.meterListIn.length){
					meterIds=this.meterListIn.join()
				}
				
				API.authorizedUserSave({
					userId:this.userId,
					meterIds:meterIds,
				}).then((res) => {
					//this.userId=id;
					uni.hideLoading();
					//this.meterList=res.data.meterList;
					this.show=false
					uni.showModal({
						title:"提示",
						content:"设置成功",
						showCancel:false,
					})
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			
			checkboxGroupChange(e){
				console.log(e)
				this.meterListIn=e
			},
			getAuthorizedUserDetails(id) {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.authorizedUserDetails({
					userId:id,
					
				}).then((res) => {
					this.userId=id;
					uni.hideLoading();
					this.meterList=res.data.meterList;
					this.show=true
					this.meterListIn=[]
					for(var i in this.meterList){
						var obj=this.meterList[i]
						if(obj.checked){
							this.meterListIn.push(obj.id)
						}
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getAuthorizedUserList();
			},
			getAuthorizedUserList(bl) {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.list = [];
					this.pageIndex = 1;
				}
				API.authorizedUserList({
					pageIndex:this.pageIndex,
					pageSize:20,
					nameOrPhone:this.keyword
				}).then((res) => {
				 
					uni.hideLoading();
						this.list = [
							...this.list,
							...res.data.data
						];
						this.recordsTotal = res.data.recordsTotal;
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getApprovalList() {
			
				API.approvalList({
					status:0
				}).then((res) => {
					
					this.approvalListNum= res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style>
	page{
		padding-bottom: 100px;
	}
</style>


<style lang="scss" scoped>
	/deep/.u-slot-right {
		padding-right: 32rpx;
		padding-left: 16rpx;
		line-height: 30px;
		background-color: #fff;
		img {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}
	}
	
	.search-box {
		padding: 16rpx 32rpx;
		position: sticky;
		top: 88rpx;
		z-index: 999;
		background-color: rgba(255,255,255,1);
	
		/deep/.u-content {
			border-radius: 8px !important;
		}
	
		;
	
		/deep/.u-search {
			position: relative
		}
	
		;
	
		/deep/.u-action {
			width: 96rpx;
			line-height: 56rpx;
			border-radius: 4px;
			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			text-align: center;
			z-index: 9999;
			position: absolute;
			right: 12rpx;
		}
	}
.member-list-main{
	  padding-bottom: 120rpx ;
}
  // 列表
  .member-list{
	  background: #fff;
	 
	   .item-info{
	   		   padding: 32rpx 0;
	   		   margin: 0 32rpx;
	   		   border-bottom: 1px solid rgba(244,244,244,1);;
	   		       border-bottom: 1px solid #f4f4f4;
	   }
	  .item{
		 
		  display: flex;
		  align-items: center;
		
	  }
	  .photo{
		  img{
			  width: 80rpx;
			  height: 80rpx;
			  border-radius: 50px;
		  }
	  }
	  .infos{
		  margin-left: 16rpx;
		  .name{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
		  }
		  .tel{
			  color: rgba(119,119,119,1);
			  font-size: 24rpx;
			  margin-top: 4rpx;
		  }
	  }
	  .button{
		  width: 144rpx;
		  height: 56rpx;
		  line-height: 56rpx;
		  border-radius: 50px;
		  background-color: rgba(22,119,255,1);
		  color: rgba(255,255,255,1);
		  text-align: center;
		  margin-left: auto;
	  }
	  .radio-box{
		  margin-left: auto;
	  }
	  
  }
 
 
  .bottom{
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #fff;
	  padding: 20rpx 32rpx;
	  display: flex;
	  justify-content: space-between;
	  img{
		  width: 40rpx;
		  height: 40rpx;
		  margin-right: 8rpx;
	  }
	  .button{
		  width: 328rpx;
		  height: 80rpx;
		  line-height: 80rpx;
		  border-radius: 4px;
		  font-size: 32rpx;
		  text-align: center;
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .qr-code{
		  
		  background-color: rgba(22,119,255,1);
		  color: rgba(255,255,255,1);
		 
		  
	  }
	  .list-button{
		  background-color: rgba(222,225,228,1);
		  color: rgba(51,51,51,1);
		  position: relative;
	  }
	  .bot{
		  width: 40rpx;
		  height: 40rpx;
		  line-height: 40rpx;
		  border-radius: 10px;
		  background-color: rgba(244,60,50,1);
		  color: rgba(255,255,255,1);
		  font-size: 24rpx;
		  text-align: center;
		  position: absolute;
		  top: -10rpx;
		  right:-10rpx;
	  }
  }
 
 // 删除
.delete {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 120rpx;

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

		.text {
			color: rgba(51, 51, 51, 1);
			font-size: 20rpx;
		}
	} 
 
 .popup {
 	padding: 32rpx;
 	text-align: center;
 
 	.headline {
 		color: rgba(16, 16, 16, 1);
 		font-size: 36rpx;
 		font-weight: bold;
 	}
 
 	.hint {
 		color: rgba(16, 16, 16, 1);
 		font-size: 32rpx;
 		margin-top: 40rpx;
 	}
 
 	.btn-box {
 		margin-top: 82rpx;
 		display: flex;
 		justify-content: space-between;
 
 		.cancel {
 			width: 328rpx;
 			line-height: 80rpx;
 			border-radius: 4px;
 			background-color: rgba(222, 225, 228, 1);
 			color: rgba(51, 51, 51, 1);
 			font-size: 32rpx;
 		}
 
 		.confirm {
 			width: 328rpx;
 			line-height: 80rpx;
 			border-radius: 4px;
 			background-color: rgba(255, 68, 68, 1);
 			color: rgba(255, 255, 255, 1);
 			font-size: 32rpx;
 		}
 	}
 }
 
  // 人员权限管理
  .popup2{
	  padding: 32rpx 0;
	  .title{
		  color: rgba(16,16,16,1);
		  font-size: 36rpx;
		  font-weight: bold;
		  text-align: center;
	  }
	  .content{
		  width: 100%;
		  margin-bottom: 24rpx;
		  .item{
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  padding: 28rpx 30rpx;
			  border-bottom: 1px solid rgba(245,245,245,1);
		  }
	  }
	  .popup-bottom{
		  display: flex;
		  justify-content: space-between;
		  padding: 0 32rpx;
		  .button{
			  width: 328rpx;
			  height: 80rpx;
			  line-height: 80rpx;
			  border-radius: 4px;
			  
			  font-size: 32rpx;
			  text-align: center;
		  }
		  .cancel{
			  background-color: rgba(222,225,228,1);
			  color: rgba(51,51,51,1);
		  }
		  .save{
			  background-color: rgba(22,119,255,1);
			  color: rgba(255,255,255,1);
		  }
	  }
  }
 
</style>