ezhizao_dms_app/pages/reportHistory/index.vue

<template>
	<view 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: space-around;
		align-items: center;
		border-top: 1rpx solid lightgray;
		border-bottom: 1rpx solid lightgray;">
			<uni-section title="选择日期:" type="square" class="uni-row"> 
				<uni-data-select v-model="selectDate" :localdata="dateList" @change="change"
					:clear="false" style="width: 280rpx;"></uni-data-select>
			</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([])


	onLoad(() => {

	})

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

	function init() {
		uni.showLoading({
			title: '加载中'
		});
		getDayWorkItemHistory().then(res => {
			if (res.code == 200) {
				listData.value = res.rows || [];
				// 时间戳转工时
				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;
				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">
	.container {
		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>