tqApp-webView/components/tq-dept/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"
						>
						</u-search>
					</u-col>
				</u-row>

			</view>
			<view class="last">
				<u-button type="primary" :plain="true" :disabled="page==1" @click="handleLast">
					<u-icon name="arrow-up" color="#2979ff" size="28"></u-icon>
				</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 
							v-if="item.icon"
							:src="item.icon" 
							class="icon-image">
						</image>
						<view>
							<view class="item-value">
								{{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">
					<u-icon name="arrow-down" color="#2979ff" size="28"></u-icon>
				</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
import {isArray,clone } from 'lodash'
import {commonDeptAll} from '@/api/common/system.js'
import {getImages} from '@/plugins/images'
//资源引入
let shujiegou = getImages('/assetsMobile/images/common/shujiegou.png') //行驶在线



export default {
	props: {
		//单页展示数据量
		size: {
			type: Number,
			default: 30
		},
		// 多选
		multiple: {
			type: Boolean,
			default: false
		},
	},
    data() {
        return {
			allChecked: false,
           isShow: false,
		   loadding: false,
		   
		   page: 1,
		   total: 0,
		   totalPage: 0,
		   search: {
			   text: ''
		   },
		   
		   orginList: [],
		   resultList: [], //搜索结果集合
		   showList: [], 

        }
    },
	mounted() {
		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.deptName.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;
			
		    commonDeptAll({
			}).then((res) => {
			    if(isArray(res.data)) {
					
					res.data.forEach((item) => {			
					
						let obj = {
							...item,
							icon: shujiegou,
							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
		},

	 
    }

}
</script>

<style lang="scss" scoped>
	
	/* 内容satrt */
	.container {
		background: #fff;
		.search {
			padding: 20rpx 40rpx 20rpx 40rpx;
			
			.all-choosed {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
			}
		}
		.list {
			height: calc(100vh - 400rpx);
			padding: 0 20rpx;
			overflow-y: auto;
			
			.item {
				padding: 16rpx 20rpx;
				display: flex;
				align-items: center;				
				 
				.item-value {
					font-size: 28rpx;
				}
				.item-label {
					font-size: 28rpx;
				}
				// 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: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.icon-image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
</style>