jp-youdian-Inspection/pages/team/stationAdd.vue

<template>
	<view>
		<u-navbar title="关联场站管理" title-color="#101010"></u-navbar>
		<view class="top">
			<view class="search">
				<view class="searchBox">
					<u-search shape="square" placeholder="使用站点名称/编号搜索" maxlength="12" v-model="testName"
						:show-action="false" :animation="true"></u-search>
					<u-button type="primary" size="mini" @click="testBtn">搜素</u-button>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" 
			 @click="userHaveBtn(item)"
			 :key="index">
				<view class="b1">
					<view class="v1">
						{{item.stationNo}}<span class="y">|</span>{{item.name}}
					</view>
					
				
					<view class="v2" :class="{
						v3:item.inspectionCycle
					}">
						{{item.inspectionCycle?'巡检周期：'+item.inspectionCycle+'天':'未设置'}}
					</view>
				</view>
				
				
				
				
				<u-icon v-if="!item.userHave"
				color="#1677FF"
				  size="40"
				  name="plus-circle-fill"
				></u-icon>
				<u-icon v-else
				color="red"
				  size="40"
				  name="minus-circle-fill"
				></u-icon>
			</view>
			
			<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
			
			
		</view>

		<view class="floating-button">
			<view class="class1">
				已关联<span style="color: #1677ff;">{{userHaveNum}}</span>个充电站
			</view>
			<view class="class2">
				<u-checkbox-group>
					<u-checkbox v-model="radiovalue"  	@change="radioChange" 
					shape="circle">全选</u-checkbox>
				</u-checkbox-group>
				
				<view class="button " @click="submit">
			
					关联场站
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTeam.js'

	export default {
		data() {
			return {
				addInfo:{},
				list: [],
				listForm: {
					pageIndex: 1,
					pageSize: 999,
					recordsTotal: 1,
					status: 0,
				},
				radiovalue:false,
				id: "",
				testName: "",
				queryName: "",
			};
		},
		onLoad(op) {
			this.id = op.id
			this.getInfo()
			
		},
		onShow() {
			
		},
		onReachBottom() {
			if (this.list.length < this.listForm.recordsTotal) {
				this.myLoadmore();
			}
		},
		computed:{
			userHaveNum(){
				var list=this.list.filter(item=>{
					return  item.userHave
				})
				return list.length
			}
		},
		methods: {
			userHaveBtn(item){
				if(this.radiovalue){
					this.radiovalue=false
					
				}
				item.userHave=!item.userHave
			},
			getInfo() {
			
				API.teamUser({
					id:this.id
				}).then((res) => {
			
					this.addInfo=res.data.user
					if(this.addInfo.authorizedStationEnabled==false){
						this.radiovalue=true
					}
					this.getList()
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			
			},
			myLoadmore() {
				this.listForm.pageIndex += 1;
				this.getList()
			},
			
			submit(){
				var list=[]
				var str=""
				if(this.radiovalue){
					str="-1"
				}else{
					list=this.list.filter(item=>{
						return  item.userHave
					})
					if(list.length==this.listForm.recordsTotal){
						str="-1"
					}else{
						var str=list.map(item=>{
							return item.id
						}).join(',')
					}
					
				}
			
				
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.updateUserStation({
					id:this.id,
					stationIds:str,
				}).then((res) => {
				
					const eventChannel = this.getOpenerEventChannel();
					
					eventChannel.emit('acceptDataFromOpenerPage', {})
					uni.hideLoading();
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: "操作成功",
						success: res1 => {
							if (res1.confirm) {
								uni.navigateBack()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})
				
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
			},
			radioChange(e){
			
				console.log(e,this.radiovalue)
				
				this.list.forEach(item=>{
						item.userHave=e.value
				})
				
			},
			
			showqueryName(item) {
				if (this.queryName) {
					var name = item.stationName+item.stationNo
					return name.indexOf(this.queryName) != -1

				} else {
					return true
				}
			},
			testBtn() {

				this.queryName = this.testName
				this.getList(1)
			},

			getList(bl) {
				if (bl) {
					this.listForm.pageIndex = 1
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.listForm.id = this.id
				this.listForm.queryContent=this.queryName
				
				API.teamUserStationUpdateList(this.listForm).then((res) => {

					
					 this.list=res.data.data
					if(this.radiovalue){
						 this.list.forEach(item=>{
							 item.userHave=true
						 })
					}
					this.listForm.recordsTotal=res.data.recordsTotal
					
					uni.hideLoading();

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding-top: 20rpx;
		    padding-bottom: 60px;
		.item:not(:last-child) {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		}

		.item {
			padding: 24rpx 32rpx;
			background: #fff;
			// display: flex;
			// flex-direction: column;
			    display: flex;
			    flex-direction: row;
			    justify-content: space-between;
			.vquery {
				display: flex;
				align-items: center;
			}

			.buildMode {
				font-size: 24rpx;
				border: 2rpx solid #bbbbbb;
				border-radius: 8rpx;
				color: #1677ff;
				padding: 2rpx 8rpx;
				margin: 0 8rpx;

			}

			.buildMode1 {
				color: #1677ff;
				border: 2rpx solid #1677ff;
			}

			.buildMode2 {
				color: #4CAF50;
				border: 2rpx solid #4CAF50;
			}

			.qName {
				color: #FF5100
			}

			.v1 {
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
			}

			.y {
				margin: 0 8rpx;
				color: rgba(119, 119, 119, 1);

			}

			
			.v2 {
				color: red;
				font-size: 24rpx;
				    white-space: pre;
			}
			.v3 {
				color: rgba(119, 119, 119, 1);
				font-size: 24rpx;
			}

		}
	}

	.top {

		border-bottom: 2rpx solid #e8e8e8;

	}

	.search {

		padding: 16rpx 32rpx;
		background: #fff;


		.searchBox {
			display: flex;
			align-items: center;
			background: #F2F2F2;
			padding: 2rpx 16rpx;
			border-radius: 16rpx;
			justify-content: space-between;
		}
	}
	
	
	.floating-button {
		z-index: 999;
		position: fixed;
		bottom: 0;
	
		width: 100%;
		
		height: 150rpx;
		    border-top: 1px solid #e8e8e8;
		background-color: rgba(255, 255, 255, 1);
		.class1{
			padding-left: 36rpx;
		}
		.class2{
			display: flex;
			justify-content: space-around;
			
		}
		
		.button {
			margin-top: 24rpx;
			border-radius: 50px;
			height: 80rpx;
			width: 60%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;
	
			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
		}
		
	}
</style>