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

<template>
	<view>
		<u-navbar title="申请人列表" title-color="#101010">
			
		</u-navbar>
		
		<view class="search-box">
			<u-search  @custom="getApprovalList(true)"
			 
			 placeholder="搜索授权用户" bg-color="#f2f4f6" height="80" :show-action="true" v-model="keyword">
		
		
			</u-search>
		
		</view>
		
		<!-- 列表 -->
		<view class="member-list">
			<view class="item-info"  v-for="(item,i) in list" @click="infoBtn(item)" >
				<view class="item"  >
					<view class="infos">
						<view class="name">
							{{item.createByName}}
						</view>
						<view class="tel-time">
							<span class="tel" >{{item.createByPhone}}</span>
						
						</view>
						
						
					
					</view>
								
					<!-- 通过 -->
					<view class="infos3" v-if="item.status==0">
						
						<view class="infos2">
							<view class="pass" @click="switchBtnApi(item,1)"  >
								通过
							</view>
							<view class="passNo" @click="switchBtnApi(item,2)"  >
								拒绝
							</view>
						</view>
						<view  style="    color: #999999;">
							<span class="tel" >{{item.createTime}}</span>
						</view>
					</view>
					
					<!-- 已通过 -->
					<view class="passed" style="text-align: end;" v-else >
						<view>
							{{item.statusN}}
						</view>
						<view >
							<span class="tel" >{{item.createTime}}</span>
						</view>
					</view>
				</view>
				<view  >
					<view class="remark"  style="width: 100%;" >
						<textarea style="background-color: #f5f5f5;height: 100rpx;width: 90%;padding: 20rpx;border-radius: 5px;margin: 20rpx;font-size: 28rpx;" v-model="item.vmodelremark"  disabled   >
							
						</textarea>
					</view>
				</view>
				
				
				
			</view>
		</view>
		<u-divider :isnone="list.length==0"
		nonetext="暂无记录" border-color="#CFD2D5">
			已经到底了</u-divider>
			
			<u-popup v-model="show"  mode="bottom">
				<view class="popup2" >
					<view class="title">
						{{userName}}-权限管理
						<view class="title2">返回上一页面可继续分配权限</view>
					</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">
								{{replaceLastTwoWords(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>
</template>

<script>
		import * as API from '@/apis/pagejs/managementList.js'
	export default {
		data() {
			return {
				keyword:"",
				pass:false,
				pageIndex: 1,
				recordsTotal: 0,
				list:[],
				
				meterList:[],
				meterListIn:[],
				userId:"",
				userName:"",
				show:false,
				
			}
		},
		onReady() {
			
			this.getApprovalList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		
		methods: {
			
			infoBtn(item){
				if(0){
					//测试用
					this.getAuthorizedUserDetails(item.createBy)
				}
				if(item.status==1){
					uni.showToast({
						title: "返回上一页面可分配权限",
						icon: "none"
					})
				}
			},
			vmodelremark(item){
				var remark=(item.informationTitle?'申请授权：'+item.informationTitle:'')+
				
				(item.remark?'\n申请备注：'+item.remark:'')
				item.vmodelremark=remark
			},
			
			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"
					})
				})
			},
			
			switchBtnApiMethod(node,key){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.approvalNext({
					id:node.id,
					status:key
				}).then((res) => {
					uni.hideLoading();
					if(key==1){
						this.getAuthorizedUserDetails(node.createBy)
						this.userName=node.createByName
					}
					this.getApprovalList(true)
				}).catch(error => {
					
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			switchBtnApi(node,key){
				uni.showModal({
					confirmColor:`${key==1?'#3CC51F':'red'}`,
					confirmText:`${key==1?'通过':'拒绝'}`,
					content: `确认是否要"${key==1?'通过':'拒绝'}"${node.createByName}`,
					title: "提示",
					success:res=> {
						if(res.confirm){
							this.switchBtnApiMethod(node,key);
						}
					}
				})
				console.log(node,key)
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getApprovalList();
			},
			getApprovalList(bl) {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.list = [];
					this.pageIndex = 1;
				}
				API.approvalList({
					pageIndex:this.pageIndex,
					pageSize:20,
					nameOrPhone:this.keyword
				}).then((res) => {
				 
					uni.hideLoading();
						this.list = [
							...this.list,
							...res.data.data
						];
						
						for(var i in this.list){
							var obj=this.list[i]
							this.vmodelremark(obj)
						}
						this.recordsTotal = res.data.recordsTotal;
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style>

</style>


<style lang="scss" scoped>
	
	
	.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{
	  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;
		
		      justify-content: space-between;
	  }
	  .photo{
		  img{
			  width: 80rpx;
			  height: 80rpx;
			  border-radius: 50px;
		  }
	  }
	  .infos2{
		  display: flex;
		  align-items: center;
		 
		justify-content: space-between;
	  }
	  .infos{
		  margin-left: 16rpx;
		  .name{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
		  }
		  .tel-time{
			  
			  font-size: 24rpx;
			  margin-top: 4rpx;
			  .tel{
				  color: rgba(119,119,119,1);
			  }
			  .time{
				  color: #999999;
				  margin-left: 16rpx;
			  }
		  }
	  }
	  .pass{
		  width: 120rpx;
		  height: 56rpx;
		  line-height: 56rpx;
		  border-radius: 50px;
		  background-color: rgba(0,185,98,1);
		  color: rgba(255,255,255,1);
		  text-align: center;
		  margin-left: auto;
	  }
	  .passNo{
		 
	  		  width: 120rpx;
	  		  height: 56rpx;
	  		  line-height: 56rpx;
	  		  border-radius: 50px;
	  		  background-color: #CCCCCC ;
	  		  color: rgba(255,255,255,1);
	  		  text-align: center;
	  		  margin-left: 20rpx;
			 
	  }
	  .passed{
		  margin-left: auto;
		  color: rgba(153,153,153,1);
	  }
	 
	  
  }
 
 
  // 人员权限管理
  .popup2{
  	  padding: 32rpx 0;
  	  .title{
  		  color: rgba(16,16,16,1);
  		  font-size: 36rpx;
  		  font-weight: bold;
  		  text-align: center;
  	  }
	  .title2{
	    		  color: red;
	    		  font-size: 32rpx;
	    		  font-weight: 400;
	    		  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>