ezhizao_dms_app/pages/reportHistory/index.vue

<template>
	<view v-if="!show" class="time-controls">
		<view class="title">
			<view class="first">请选择日期区间</view>
			<view class="second">注意日期区间最长不超过31天</view>
		</view>
		<uni-section title="开始日期:" type="square" class="uni-row sta">
			<input v-model="startTime" type="date"/>
		</uni-section>
		<uni-section title="结束日期:" type="square" class="uni-row end">
			<input v-model="endTime" type="date"/>
		</uni-section>
		<button @click="handleSearch">查询</button>
	</view>
	<view v-if="show" class="uni-column container">
		<view class="uni-row" style="position: fixed;
		top: 0;width: 100%;
		height: 120rpx;
		z-index: 2;
		margin:0 auto;
		background-color: white;
		justify-content: flex-start;
		align-items: center;
		border-top: 1rpx solid lightgray;
		border-bottom: 1rpx solid lightgray;">
			<uni-section title="选择日期:" type="square" class="uni-row" style="margin-left: 16rpx;">
				<uni-data-select v-model="selectDate" :localdata="dateList" @change="change" :clear="false"
				placeholder="无报工记录"
					style="width: 200rpx;"></uni-data-select>
			</uni-section>
			<uni-section title="总数:" type="square" class="uni-row" style="justify-content: center;align-items: center;">
				{{ total }}
			</uni-section>
			<uni-section title="条数:" type="square" class="uni-row" style="justify-content: center;align-items: center;">
				{{ listDataItem.length }}
			</uni-section>
		</view>
		<view class="scroll-container">

			<view v-for="(item, index) in listDataItem" :key="index" class="list-item">
				<view class="title-container">
					<view class="title uni-row">
						<view class="uni-row">
							<text class="label">批次号:</text>
							<text class="label code"> {{ item['lotCode'] }}</text>
						</view>
						<!-- <view style="color: #1684fc; margin-right: 0;" @click="handleOpenLonInfo">
							<text>批次详情</text>
						</view> -->
					</view>
					<view class="uni-row" style="margin: 10rpx 0 0;">
						<view class="right-info uni-row"> <text class="label">工时</text>
							<text class="label time">{{ item['taskTime'] }}</text>
						</view>
						<view class="right-info uni-row" style="margin-left: 50rpx;"> <text class="label">合格数</text>
							<text class="label number ">{{ item['qualifiedNum'] }}</text>
						</view>
					</view>
				</view>
				<view class="item-info uni-row">
					<text class="label">产品描述</text>
					<text class="label right">{{ item['productDescription'] }}</text>
				</view>
				<!-- <view class="item-info uni-row">
					<text class="label">操作者</text>
					<text class="label right">{{ item['nickName'] }}</text>
				</view> -->
				<view class="item-info uni-row">
					<text class="label">开始时间</text>
					<text class="label right">{{ item['startTime'] ? item['startTime'] : '-' }}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">结束时间</text>
					<text class="label right">{{ item['endTime'] ? item['endTime'] : '-'}}</text>
				</view>
				<view class="item-info uni-row">
					<text class="label">废品数</text>
					<text class="label right">{{ item['rejectSum'] ? item['rejectSum'] : 0 }}</text>
				</view>
				<!-- <view class="item-info uni-row">
					<text class="label">投入数</text>
					<text
						class="label right">{{}}</text>
				</view> -->
				<view class="item-info uni-row">
					<text class="label">设备</text>
					<text class="label right">{{ item['equipmentDetailCode'] }}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- <dialog-lotInfo ref="lotInfo"></dialog-lotInfo> -->
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getDayWorkItemHistory
	} from "@/api/business/dayWorkItem.js"
	import {
		store
	} from '@/store/index.js'
	import {
		toHHmmss
	} from '@/utils/common.js'


	const listData = ref([]) // 回显 	
	const listDataItem = ref([])
	const lotInfo = ref(null) // 详情弹窗
	const selectDate = ref('')
	const dateList = ref([]) // 选择的日期列表
	const show = ref(false)
	const startTime = ref('')
	const endTime = ref('')
	const total = ref(0)

	onLoad(() => {
		
		
	})

	onShow(() => {
		resetPage();
	})

	function resetPage() {
		listData.value = [];
		listDataItem.value = [];
		selectDate.value = '';
		dateList.value = [];
		show.value = false;
		startTime.value = '';
		endTime.value = '';
	}

	function handleSearch() {
		let today = Date.parse(new Date());
		let startTimestamp = Date.parse(new Date(startTime.value));
		let endTimestamp = Date.parse(new Date(endTime.value));
		if(endTimestamp - startTimestamp < 0){
			uni.showToast({
				icon: 'none',
				title: '开始日期不能超过结束日期',
				duration: 2000
			})
			return;
		}
		if(today - endTimestamp < 0 || today - startTimestamp < 0){
			uni.showToast({
				icon: 'none',
				title: '开始或结束日期不能超过今日',
				duration: 2000
			})
			return;
		}
		if(!startTime.value || !endTime.value){
			uni.showToast({
				icon: 'none',
				title: '请选择开始或结束日期',
				duration: 2000
			})
			return;
		}
		if(endTimestamp - startTimestamp > 1000 * 60 * 60 * 24 * 30){
			uni.showToast({
				icon: 'none',
				title: '日期区间最长不超过31天',
				duration: 2000
			})
			return;
		}
		show.value = !show.value
		if(show.value) {
			init();
		}
	}

	function init() {
		uni.showLoading({
			title: '加载中'
		});
		console.log(startTime.value);
		console.log(endTime.value)
		getDayWorkItemHistory(startTime.value,endTime.value).then(res => {
			if (res.code == 200) {
				listData.value = res.rows || [];
				total.value = res.rows.length;
				// 时间戳转工时
				for (var i = 0; i < listData.value.length; i++) {
					let timeStamp = listData.value[i].workingHours;
					listData.value[i].taskTime = toHHmmss(timeStamp);
				}
				// 转为二维数组
				console.log(listData.value)
				const groupedData = listData.value.reduce((accumulator, currentItem) => {
					// 获取当前对象的日期字符串
					const dateString = currentItem.startTime.split(' ')[0];
					// 如果有这个日期，则 push 到对应的数组中，否则创建一个新的数组
					if (accumulator[dateString]) {
						accumulator[dateString].push(currentItem);
					} else {
						accumulator[dateString] = [currentItem];
					}
					return accumulator;
				}, {});
				// 时间下拉
				for (let i = 0; i < Object.keys(groupedData).length; i++) {
					dateList.value[i] = {
						text: Object.keys(groupedData)[i],
						value: Object.keys(groupedData)[i]
					}
				}
				listData.value = groupedData;
				if(dateList.value.length > 0){
					listDataItem.value = listData.value[dateList.value[0].value]
					selectDate.value = dateList.value[0].value;
				}	
				console.log(groupedData)
				uni.hideLoading();
			} else {
				uni.showToast({
					icon: "none",
					title: res.message,
					duration: 2000
				})
				uni.hideLoading();
			}
		})
	}

	function change() {
		listDataItem.value = listData.value[selectDate.value]
	}

	// function handleOpenLonInfo() {
	// 	lotInfo.value.open(); 
	// }
</script>

<style lang="scss">
	.time-controls {
		.title {
			margin: 20% auto 40% auto; 
			
			.first {
				font-size: 48rpx;
				margin: 0 auto;
			}
			
			.second {
				color: red;
				font-size: 24rpx;
				margin: 10rpx auto 0 auto;
			}
		}
		
		.sta {
			justify-content: center;
			align-items: center;
			margin-bottom: 48rpx;
			
			input {
				border:1rpx solid gray;
				border-radius: 8rpx;
				width: 400rpx;
				height: 64rpx;
			}
		}
		
		.end {
			justify-content: center;
			align-items: center;
			margin-bottom: 64rpx;
			
			input {
				border:1rpx solid gray;
				border-radius: 8rpx;
				width: 400rpx;
				height: 64rpx;
			}
		}
		
		button {
			width: 78%;
			background-color: #1684fc;
			color: white;
			margin: 0 auto;
		}
	}

	.container {
		height: 100%;
		background-color: #f5f5f5;
		overflow: auto;
	}


	.scroll-container {
		position: relative;
		top: 140rpx;
	}

	.selected {
		border: 1px solid #1684fc;
	}

	.list-item {
		background-color: #fff;
		position: relative;
		padding: 16rpx;
		padding-bottom: 24rpx;
		margin: 0 24rpx;
		margin-bottom: 24rpx;
		border-radius: 8rpx;

		.title-container {
			margin: 8rpx 0;
			width: 100%;

			.title {
				height: 48rpx;
				justify-content: space-between;
				align-items: center;
				flex: 7;

				.label {
					font-weight: bold;
				}

				.code {
					margin-left: 8rpx;
				}
			}
		}

		.item-info {
			margin-bottom: 8rpx;

			.label {
				font-size: 28rpx;
				width: 152rpx;
				color: #808080;

				&.right {
					flex: 1;
					color: #000000;
				}
			}
		}

		.right-info {

			.label {
				font-size: 28rpx;
			}

			.time {
				margin-left: 8rpx;
				color: #1684fc;
			}

			.number {
				margin-left: 8rpx;
				color: #1684fc;
			}

		}
	}
</style>