supervision-uniapp/components/police-picker.vue

<template>
	<view class="police-c">
		<view class="police-item-tag-box">
			<view v-for="item in activePolices" class="police-item-tag  police-item-tag_small">{{ item.name.substring(item.name.length - 2) }}</view>
		</view>
		<button size="small" @tap="show = true" class="add-btn">
			<uni-icons type="plusempty" size="20"></uni-icons>
		</button>
	</view>
	<view class="police-picker-container" v-if="show">
		<view class="header">
			<view class="hidden-btn" @tap="show = false">
				<uni-icons type="left" size="20"></uni-icons>
			</view>
			<uni-easyinput prefixIcon="search" type="text" placeholder="搜索" v-model="query.name" />
		</view>
		<!-- <uni-data-picker :localdata="departs" :border="false"
			:map="{text:'shortName', value: 'id'}" v-model="query.departId" /> -->
		<view class="police-container">
			<view class="police-item" v-for="item in polices" @tap="handleChange(item)">
				<checkbox :checked="activePolices.findIndex(police => item.empNo === police.empNo) !== -1" @tap.stop="handleChange(item)" />
				<view class="police-item-tag">{{ item.name.substring(item.name.length - 2) }}</view>
				<view>{{ item.name }}</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-left">
				<view>已选择（{{ activePolices.length }}）：</view>
				<view class="police-item-tag-container">
					<view class="police-item-tag-box">
						<view v-for="item in activePolices" class="police-item-tag  police-item-tag_small">{{ item.name.substring(item.name.length - 2) }}</view>
					</view>
				</view>
			</view>
			<button type="primary" @tap="show = false">确定</button>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref, watch, defineProps, defineEmits } from 'vue';
import { listPolice } from '@/api/police'
import {
		departTree
	} from '@/api/depart'

	const props = defineProps({
		modelValue: {
			type: Array,
			default: []
		},
		departId: {
			type: String,
			default: ''
		}
	})
	
	const emit = defineEmits(['update:modelValue'])
	
	const show = ref(false);
	const polices = ref([]);
	const query = ref({
			current: 1,
			size: 16,
			departBranch: true,
	})
	
	watch(() => props.modelValue, (val) => {
		if (val) {
			polices.value = val
		} else {
			polices.value = []
		}
	})
		
	watch(() => props.departId, (val) => {
		query.value.departId = val;
		getPolice()
	})
	
	const activePolices = ref(props.modelValue || []);
	
	function handleChange(police) {
		const index = activePolices.value.findIndex(item => item.empNo === police.empNo);
		if (index === -1) {
			activePolices.value.push({
				name: police.name,
				empNo: police.empNo,
			})
			emit('update:modelValue', activePolices.value)
		} else {
			activePolices.value.splice(index, 1)
			emit('update:modelValue', activePolices.value)
		}
	}
	
	const departs = ref([])
	const departId = ref('')
	onMounted(() => {
		getPolice()
		departTree().then(data => {
			departs.value = data[0].children
		})
	})
	
	watch(() => query.value.name, () => {
		getPolice()
	})
	
	function getPolice() {
		listPolice(query.value).then(data => {
			polices.value = data.records
		})
	}
	
	
</script>

<style lang="scss" scoped>
	.police-picker-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #f5f5f5;
		z-index: 9999;
		.header {
			display: flex;
			padding: 24rpx;
			padding-left: 0;
			display: flex;
			align-items: center;
			gap: 0 12rpx;
			background-color: #fff;
			margin-bottom: 12rpx;
			position: relative;
			.hidden-btn {
				height: 37px;
				width: 37px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.police-item {
			
			background-color: #fff;
			height: 88rpx;
			line-height: 88rpx;
			display: flex;
			gap: 0 24rpx;
			align-items: center;
			padding-left: 24rpx;
			
		}
		.footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			background-color: #fff;
			button {
				margin: 0;
			}
			.footer-left {
				display: flex;
				align-items: center;
				width: calc(100% - 64px);
			}
		}
		
	}
	
	.police-container {
		max-height: 82vh;
		overflow: auto;
	}
	
	.police-item-tag {
		background-color: var(--primary-color);
		color: #fff;
		height: 72rpx;
		width: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 10rpx;
		&_small {
			height: 52rpx;
			width: 52rpx;
			line-height: 52rpx;
			font-size: 12px;
		}
	}
	.add-btn {
		height: 52rpx;
		width: 52rpx;
		line-height: 52rpx;
		padding: 0;
	}
	.police-item-tag-container {
		width: calc(100% - 200rpx);
		overflow: hidden;
	}
	.police-item-tag-box {
		display: flex;
		gap: 0 12rpx;
		width: max-content;
	}
	.police-c {
		display: flex;
		gap: 0 12rpx;
	}
</style>