TALL-MUI-4/components/SearchPopup/SearchPopup.vue

<template>
	<view class="search-box fixed z-10 p-4 w-full bg-white shadow-lg">
		<view class="flex">
			<u-input class="mr-3" v-model="startTimeValue" type="text" :border="true" height="64" @focus="openCal" />
			<u-input v-model="endTimeValue" type="text" :border="true" height="64" @focus="openCal" />
		</view>

		<u-input class="mt-3" v-model="selectedMembers" type="text" :border="true" height="64" @focus="openMember" />
		
		<view class="mt-3 text-center">
			<u-button class="mr-3" size="mini" @click="closePopup">取消</u-button>
			<u-button class="mr-3" type="primary" size="mini" @click="submitSearch(1)">过滤</u-button>
			<u-button type="primary" size="mini" @click="submitSearch(2)">导出</u-button>
		</view>
		
		<u-popup title="请选择角色" mode="bottom" v-model="showMembers" :mask-close-able="false">
			<view class="multiple-select-box">
				<view class="multiple-select-title flex justify-between items-center">
					<view @click="handleCancel">取消</view>
					<view @click="handleOK" class="text-blue-500">确认</view>
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;">
					<view v-for="(item, index) in members" :key="index" @click="changeItem(item)"
						class="multiple-select-item flex items-center justify-between"
						:class="[selectedMemberId.indexOf(item.value) > -1 ? 'selected' : '']"
					>
						<text>{{ item.label }} </text>
						<u-icon name="checkbox-mark" class="icon"></u-icon>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<u-calendar v-if="!source" v-model="showCal" mode="range" @change="change"></u-calendar>
		
		<template v-if="source === 'checkWorkSummary'">
			<u-picker mode="time" v-model="showCal" :params="params" @confirm="selectedStartTime"></u-picker>
			<u-picker mode="time" v-model="showEndCal" :params="params" @confirm="selectedEndTime"></u-picker>
		</template>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import { useStore } from 'vuex';
	import dayjs from 'dayjs';

	const props = defineProps({
		// 打点日期的自定义样式
		members: {
			type: Array,
			default: () => [],
		},
		show: {
			type: Boolean,
			default: false
		},
		source: {
			type: String,
			default: ""
		}
	});
	const emit = defineEmits(['closePopup', 'getClockQuery']);

	const store = useStore();
	let startTimeValue = ref(null); // 当前选择的时间
	let endTimeValue = ref(null); // 当前选择的时间
	let showCal = ref(false); // 日历弹框是否显示
	let showEndCal = ref(false); // 结束时间弹框是否显示

	let showMembers = ref(false); // 用户列表弹框是否显示
	let defaultMembers = ref([]); // 用户选择初始值
	let selectedMemberArr = ref([]);
	let selectedMemberName = ref([]); // 被选中的用户
	let selectedMemberId = ref([]); // 被选中的用户
	let selectedMembers = ref(null);

	let selectedRoles = ref([]);
	
	const params = ref({ year: true, month: true, day: false, hour: false, minute: false, second: false })

	// 打开日历弹框
	function openCal() {
		showCal.value = true;
	}

	// 选择时间
	function change(e) {
		startTimeValue.value = e.startDate;
		endTimeValue.value = e.endDate;
	}
	
	// 打开月份弹框
	function selectedStartTime(e) {
		showEndCal.value = true;
		startTimeValue.value = e.year + '-' + e.month;
	}
	
	// 打开结束月份弹框
	function selectedEndTime(e) {
		endTimeValue.value = e.year + '-' + e.month;
	}

	// 打开用户列表
	function openMember() {
		showMembers.value = true;
		
		// 再次打开弹框,之前的数据显示问题处理（只显示选中且确认的，选中之后未确认但是关闭弹框，之后选中的数据不显示）
		selectedMemberId.value = [];
		let curr = (selectedMembers.value || "").split(",");
		let arr = [];
		selectedMemberArr.value.forEach(member => {
			const index = curr.findIndex(item => item === member.label);
			
			if (index > -1) {
				arr.push(member);
				selectedMemberId.value.push(member.value);
			}
		})
		
		selectedMemberArr.value = [...arr];
	}
	
	// 选择成员
	function changeItem(item) {
		let index = selectedMemberArr.value.findIndex(member => member.value === item.value);
		if (index === -1) {
			selectedMemberArr.value.push(item);
		} else {
			selectedMemberArr.value.splice(index, 1);
		}
		
		selectedMemberName.value = [];
		selectedMemberId.value = [];
		
		selectedMemberArr.value.forEach(item => {
			selectedMemberName.value.push(item.label);
			selectedMemberId.value.push(item.value);
		})
	}
	
	// 确认选中，关闭用户弹可
	function handleOK() {
		showMembers.value = false;
		selectedMembers.value = selectedMemberName.value.toString();
	}
	
	// 关闭用户弹框
	function handleCancel() {
		showMembers.value = false;
	}
	
	// 关闭过滤弹框
	function closePopup() {
		emit('closePopup', false);
	}
	
	// 提交筛选
	function submitSearch(type) {
		if (!startTimeValue.value) {
			uni.showToast({
				title: "请选择开始时间",
				icon: 'none'
			});
			return false;
		}
		
		if (!endTimeValue.value) {
			uni.showToast({
				title: "请选择结束时间",
				icon: 'none'
			});
			return false;
		}
		
		const param = {
			startTime: startTimeValue.value,
			endTime: endTimeValue.value,
			memberIdList: selectedMemberId.value
		}
		
		if (type === 1) {
			emit('getClockQuery', param)
		} else {
			emit('clockExport', param)
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		top: 50px;
	}

	.selected-member {
		padding: 2px 10px;
		min-height: 34px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
	}

	.member-box {
		padding: 0 10px;
		background-color: #fafafa;
		border: 1px solid #e8e8e8;
		border-radius: 2px;
		height: 24px;
		margin: 2px 0;
		margin-right: 4px;
	}
	
	.multiple-select-box {
		background-color: #fff;
	}

	.multiple-select-title {
		height: 45px;
		line-height: 45;
		border-bottom: 1px solid #f4f6f8;
		
		view {
			padding: 0 12px;
		}
	}

	.multiple-select-item {
		padding: 0 40rpx;
		height: 32px;
	}
	
	.multiple-select-item.selected {
		color: #2979ff;
	}
</style>