ezhizao_dms_h5/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" style="padding-top: 12px;" />
		</uni-section>
		<uni-section title="结束日期:" type="square" class="uni-row end">
			<input v-model="endTime" type="date" style="padding-top: 12px;" />
		</uni-section>
		<button @click="handleSearch">查询</button>
	</view>

	<view v-if="show" class="uni-column container">

		<view class="uni-row" style="position: fixed;
		top: 43px;width: 100%;
		height: 120rpx;
		z-index: 2;
		margin:0 auto;
		background-color: white;
		flex-direction: column;
		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> -->

			<view class="tab-container">
				<view :class="['tab-item', editStatus === false ? 'active': '']" @click="handleCheckTabHis()">历史报工
				</view>
				<view :class="['tab-item', editStatus === true ? 'active': '']" @click="handleCheckTab()">已完成报工</view>
			</view>

			<view style="width: 100%;">
				<uni-section title="时间范围:" type="square" class="uni-row"
					style="justify-content: start;align-items: center;margin-left: 20rpx;">
					{{ startTime }}&nbsp; ~ &nbsp;{{endTime}}
				</uni-section>

				<!-- <view style="width: 100%;font-size: 28rpx; text-align: left; margin-left: 16rpx;">时间范围：{{ startTime }}&nbsp; ~ &nbsp;{{endTime}}</view> -->
				<!-- <uni-section title="条数:" type="square" class="uni-row" style="justify-content: center;align-items: center;">
				{{ listDataItem.length }}
			</uni-section> -->
			</view>
		</view>

		<view class="scroll-container" v-if="!editStatus">

			<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 class="scroll-container" v-if="editStatus">

			<view v-for="(item, index) in listDaywork" :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"> <text class="label">工序</text>
							<text class="label time">{{ item['processAlias'] }}</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">{{ item['equipmentDetailCode'] }}</text>
					<view class="uni-row" style="justify-content: flex-end;margin-left: 20px;"
						v-if="item['adoptStatus'] && item['adoptStatus'] != null">
						<text>交检状态:</text>
						<text v-if="item['adoptStatus'] == 1" style="color: #67c337;">正常</text>
						<text v-if="item['adoptStatus'] == 2" style="color: red;">反选</text>
					</view>
				</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 listDaywork = ref([])
	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)
	const editStatus = ref(false)
	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 || [];
				listDataItem.value = res.rows || [];
				console.log(listData.value)
				total.value = res.rows.length;
				// 时间戳转工时
				for (var i = 0; i < listDataItem.value.length; i++) {
					let timeStamp = listDataItem.value[i].workingHours;
					listDataItem.value[i].taskTime = toHHmmss(timeStamp);
				}
				// 转为二维数组
				console.log(listDataItem.value)
				const groupedData = listDataItem.value.reduce((accumulator, currentItem) => {
					// 获取当前对象的日期字符串
					const dateString = currentItem.startTime.split(' ')[0];
					// 如果有这个日期，则 push 到对应的数组中，否则创建一个新的数组
					if (accumulator[dateString]) {
						accumulator[dateString].push(currentItem);
					} else {
						accumulator[dateString] = [currentItem];
					}
					return accumulator;
				}, {});

				var hasEndTime = false
				// 0718
				for (var i = 0; i < listData.value.length; i++) {
					var current = listData.value[i];
					var found = false;
					var endTimeStatus = "";
					for (var j = 0; j < listDaywork.value.length; j++) {
						if (listDaywork.value[j].dayworkId === current.dayworkId && listDaywork.value[j]
							.processStepNumber === current.processStepNumber) {
							listDaywork.value[j].qualifiedNum += current.qualifiedNum;
							listDaywork.value[j].rejectSum += current.rejectSum;
							if (listDaywork.value[j].equipmentDetailCode != null && listDaywork.value[j]
								.equipmentDetailCode != undefined && listDaywork.value[j].equipmentDetailCode !=
								listDaywork.value[j].equipmentDetailCode) {
								listDaywork.value[j].equipmentDetailCode = listDaywork.value[j]
									.equipmentDetailCode + "," + current.equipmentDetailCode
							}
							found = true;
							break;
						}
					}

					if (current.status == 3) {
						console.log("999")
						hasEndTime = true
						endTimeStatus = current.endTime;
						console.log(endTimeStatus)
					}
					if (!hasEndTime && current.status != 3) {
						console.log("777")
						endTimeStatus = null;
					}
					if (!found && current.status == 3) {
						console.log()
						listDaywork.value.push({
							processAlias: current.process.processAlias,
							equipmentDetailCode: current.equipmentDetailCode,
							lotCode: current.lotCode,
							productDescription: current.productDescription,
							daywork: current.daywork,
							dayworkId: current.dayworkId,
							processId: current.processId,
							qualifiedNum: current.qualifiedNum,
							rejectSum: current.rejectSum,
							endTime: endTimeStatus,
							adoptStatus: current.adoptStatus == null ? null : current.adoptStatus

						});
					}
				}

				console.log(listData.value);
				console.log(listDaywork.value);
				uni.hideLoading();
			} else {
				uni.showToast({
					icon: "none",
					title: res.message,
					duration: 2000
				})
				uni.hideLoading();
			}
		})
	}

	function handleCheckTab() {
		editStatus.value = true
	}

	function handleCheckTabHis() {
		editStatus.value = false
	}

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

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

<style lang="scss">
	.time-controls {
		align-items: center;

		.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;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}


	.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;
			}

		}
	}

	.tab-container {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 32px;
		justify-content: space-around;

		.table-item {
			display: flex;
			flex-direction: row;
			flex: 1;
			font-size: 14px;
			color: #666;
			align-items: center;
			justify-content: center;
		}
	}

	.tab-item.active {
		color: rgba(25, 137, 250, 1);

		font-weight: 700;
	}
</style>