tqApp-webView/components/tq-car-user/index.vue

<template>
   <u-popup :show="isShow" @close="close" :closeOnClickOverlay="true">	
		<view class="container">
			<view class="search">
				<u-row>
					<u-col :span="2" v-if="multiple">
						<view class="all-choosed">
							<image
								@click="handleChooseAll"
								:src="allChecked?'/static/icon/choosed.png':'/static/icon/nochoose.png'" 
								class="choosed-image">
							</image>
							全选
						</view>
					</u-col>
					<u-col :span="!multiple?12:10">
						<u-search
							v-model="search.text"
							placeholder="关键字搜索" 
							@search="handleSearch"
							@custom="handleSearch"
							:actionStyle="{
								color: '#2979ff'
							}"
						>
						</u-search>
					</u-col>
				</u-row>

			</view>
			<view class="last">
				<u-button type="primary" :plain="true" :disabled="page==1" @click="handleLast"
					:custom-style="{
						borderColor: '#FFF',
						background: '#F2f2f2',
					}"
				>
					<!-- <u-icon name="arrow-up" color="#2979ff" size="28"></u-icon> -->
					<image
						:src="'/static/icon/up.png'" 
						class="option-image">
					</image>
				</u-button>
			</view>
			<view class="list">
				<template v-for="(item,index) in showList">
					<view class="item" :key="index" 
						@click="handleClick(item)"
					>
						<image 
							v-if="multiple"
							:src="item.checked?'/static/icon/choosed.png':'/static/icon/nochoose.png'" 
							class="choosed-image">
						</image>
						<image
							:src="item.icon" 
							class="icon-image">
						</image>
						<view>
							<view class="item-value">
								{{item.label}}<text v-if="item.workStatusName">（{{item.workStatusName}}）</text>
							</view>
							<view class="item-label">
								{{item.deptName}}
							</view>
						</view>
						
					</view>
				</template>
				
				<view class="empty" v-if="showList.length==0">暂无数据</view>
			</view>
			<view class="next">
				<u-button type="primary" :plain="true" :disabled="page==totalPage" @click="handleNext"
					:custom-style="{
						borderColor: '#FFF',
						background: '#F2f2f2',
					}"
				>
					<!-- <u-icon name="arrow-down" color="#2979ff" size="28"></u-icon> -->
					<image
						:src="'/static/icon/down.png'" 
						class="option-image">
					</image>
				</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
import {isArray,clone } from 'lodash'
import {realTimeList} from '@/api/realtimeWatch.js'
import {getImages} from '@/plugins/images'
//资源引入
let car_list_online = getImages('/assetsMobile/images/map/icon/vehicle/car_list_online.png') //行驶在线
let car_list_engin = getImages('/assetsMobile/images/map/icon/vehicle/car_list_engin.png') //停驶在线 
let car_list_unline = getImages('/assetsMobile/images/map/icon/vehicle/car_list_unline.png') //离线

let car_online = getImages('/assetsMobile/images/map/icon/vehicle/car_online.png') //行驶在线--地图
let car_engin = getImages('/assetsMobile/images/map/icon/vehicle/car_engin.png') //停驶在线  -- 地图
let car_unline = getImages('/assetsMobile/images/map/icon/vehicle/car_unline.png') //离线 --地图

let people_list_online = getImages('/assetsMobile/images/map/icon/people/people_list_online.png') //在线
let people_list_unline = getImages('/assetsMobile/images/map/icon/people/people_list_unline.png') //离线

let people_online = getImages('/assetsMobile/images/map/icon/people/people_online.png') //在线--地图
let people_unline = getImages('/assetsMobile/images/map/icon/people/people_unline.png') //离线--地图


export default {
	props: {
		//单页展示数据量
		size: {
			type: Number,
			default: 30
		},
		// 类型 1.人员 2.车辆
		queryType: {
			type: Number,
			default: 2
		},
		// 多选
		multiple: {
			type: Boolean,
			default: false
		},
		// 是否请求图标
		isGetIcon: {
			type: Boolean,
			default: false
		}
	},
    data() {
        return {
			allChecked: false,
           isShow: false,
		   loadding: false,
		   
		   page: 1,
		   total: 0,
		   totalPage: 0,
		   search: {
			   text: ''
		   },
		   
		   orginList: [],
		   resultList: [], //搜索结果集合
		   showList: [], 

        }
    },
	mounted() {
		if (this.isGetIcon) {
			Promise.all([this.$store.dispatch('getVehIcon'),this.$store.dispatch('getUserIcon')]).then((data) => {
				this.getData()
			})
		} else {
			this.getData()
		}
	},
	
    methods: {
		
		show() {
			this.isShow= true;
		},
		handleChooseAll() {
			this.allChecked = !this.allChecked
			this.resultList.map(e => {
				e.checked = this.allChecked
			}) 
		},
		
		
		computeCheckedData() {
			let allLength = this.resultList.length
			let checedLength = this.resultList.filter((e) => e.checked).length
			if(allLength == checedLength) {
				this.allChecked = true
			} else {
				this.allChecked = false
			}
		},
			
		getChoosed() {
			let data = this.orginList.filter((e) => e.checked)
			this.$emit('confirm',data)
		},	
		
		handleClick(e) {
			if(this.multiple) {
				e.checked=!e.checked
				this.computeCheckedData()	
			} else {
				console.log(e,'e')
				this.$emit('confirm',e);
				this.isShow = false;
			}			
		},
		
		handleSearch() {
			this.page = 1
			if(this.search.text) {
				this.resultList = this.orginList.filter((e) => e.label.includes(this.search.text) || e.deptName.includes(this.search.text))
			} else {
				this.resultList = clone(this.orginList)
			}
			this.computeCheckedData()
			this.totalPage = Math.ceil(this.resultList.length / this.size)
			this.handlePageData()	
		},
		//上一页
		handleLast() {
			if(this.page != 1) this.page -= 1;
			this.handlePageData()
		},
		//下一页
		handleNext() {
			if(this.page != this.totalPage) this.page += 1;	
			this.handlePageData()
		},
		//处理分页数据
		handlePageData() {
			let index = (this.page - 1) * this.size
			this.showList = clone(this.resultList).splice(index,this.size)
		},
        getData() {
			let that = this;
			this.loadding = true;
			
		    realTimeList({
				type: this.queryType,
			}).then((res) => {
			    if(isArray(res.data)) {
					
					res.data.forEach((item) => {			
						let iconData = {}
						
						if (this.isGetIcon) {
							if(item.type == 2) {
								iconData = this.getVehIcon(item)
							} else if (item.type == 1) {
								iconData = this.getUserIcon(item)
							}
						}
						
						let obj = {
							...item,
							...iconData,
							checked: false,
						}			
						this.orginList.push(obj);
					})				
					this.$emit('onDataLoad',this.orginList)
					this.handleSearch()
					
				} else {
					this.orginList = [];
					this.showList = [];
					this.page = 1
					this.totalPage = 0
				}
			
		   }).finally(() => {
			   this.loadding = false
		   })
	   },
	   
		close() {
			if(this.multiple) this.getChoosed()
		    this.isShow = false
		},
		
		getVehIcon(item) {
		    //列表图标
		    let listIcon = this.$store.state.icon.vehIcon[2]
		     //地图图标
		     let mapIcon = this.$store.state.icon.vehIcon[1]
		
		    let icon = ""
		    let img = ""
		    if (item.online == "1" && item.engineStatus == "1") {
				
		        icon = listIcon[1][item.vehType]?getImages(listIcon[1][item.vehType]):car_list_online
		        img = mapIcon[1][item.vehType]? getImages(mapIcon[1][item.vehType]):car_online
				
		    } else if (item.online == "1" && item.engineStatus == "0") {
		        icon = listIcon[2][item.vehType]?getImages(listIcon[2][item.vehType]):car_list_engin
		        img = mapIcon[2][item.vehType]? getImages(mapIcon[2][item.vehType]):car_engin
		    } else if (item.online == "0") {
		        icon = listIcon[3][item.vehType]?getImages(listIcon[3][item.vehType]):car_list_unline
		        img = mapIcon[3][item.vehType]?getImages(mapIcon[3][item.vehType]):car_unline
		    } else {
		        icon = listIcon[3][item.vehType]?getImages(listIcon[3][item.vehType]):car_list_unline
		        img = mapIcon[3][item.vehType]?getImages(mapIcon[3][item.vehType]):car_unline
		    }
		    return {
		        icon,
		        img
		    }
		},
		
		getUserIcon(item) {
		    let listIcon = this.$store.state.icon.userIcon[2]
		    //地图图标
		    let mapIcon = this.$store.state.icon.userIcon[1]
		
		    let icon = ""
		    let img = ""
		    if (item.online == "1") {
		       icon = listIcon[1][item.workType]?getImages(listIcon[1][item.workType]):people_list_online
		       img = mapIcon[1][item.workType]? getImages(mapIcon[1][item.workType]):people_online
		    } else {
		        icon = listIcon[3][item.workType]?getImages(listIcon[3][item.workType]):people_list_unline
		        img = mapIcon[3][item.workType]? getImages(mapIcon[3][item.workType]):people_unline
		    }   
		
		    return {
		        icon,
		        img
		    }
		},

	 
    }

}
</script>

<style lang="scss" scoped>
	
	/* 内容satrt */
	.container {
		background: #fff;
		.search {
			padding: 20rpx 40rpx 10rpx 40rpx;
			
			.all-choosed {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
			}
		}
		.list {
			height: calc(85vh - 400rpx);
			padding: 0 20rpx;
			overflow-y: auto;
			
			.item {
				padding: 10rpx 20rpx;
				display: flex;
				align-items: center;				
				 
				.item-value {
					font-size: 22rpx;
				}
				.item-label {
					font-size: 22rpx;
				}
				// border-bottom: 2rpx solid #ddd;
			}
			.empty {
				display: flex;
				align-items: center;
				justify-content: center;
				height: calc(100vh - 400rpx);
				color: #909193;
				min-height: 800rpx;
			}
		}
		
		.last,.next {
			margin: 10rpx 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
	}
	
	/* 内容end */

	
	.choosed-image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.icon-image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.option-image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
</style>