QTApp_800/pages/work/report/InspectionList.uvue

<template>
	<scroll-view class="container">
		<!-- Banner -->
		<view class="banner">
			<text class="banner-title">检验记录</text>
		</view>
		<view class="card-list" style="flex-direction: row;">
			<uni-tag
			      v-for="(tag,index) in 6" :key="index"
									:text="tag+''"	
									 size="medium"
									 type="primary"
									circle								
									@click="tabsClick(tag)"
									style="width:40rpx;margin: 0 10rpx;"	  
								></uni-tag> 
		</view>

		<!-- 检查报告卡片列表 -->
		<view v-if="reportList.length" class="card-list">
			<view class="card" v-for="item in reportList" :key="item.id"  v-show="current == item.id as number">				
				<view class="divider"></view>
				<view class="info-row">
					<text class="label">序号</text>
					<view class="value">
						<uni-number-box v-model="item.id" disabled></uni-number-box>
					</view>	
				</view>
				<view class="info-row">
					<text class="label">产品码</text>
					<view class="value">
						<input
						    v-model="item.productcode"						    
							disabled
						  ></input>
					</view>
				</view>
				<view class="info-row">
					<text class="label">检测项目</text>
					<view class="value">
						<input
						    v-model="item.invname"						   
							disabled
						  ></input>
					</view>
				</view>
				<view class="info-row">
					<text class="label">性质</text>
					<view class="value">
						<input
						    v-model="item.model"						    
							disabled
						  ></input>
					</view>
				</view>
				<view class="info-row">
					<text class="label">上限要求</text>
					<view class="value">
						<uni-number-box v-model="item.upperlimit" :step="0.1" :min="0.5" disabled></uni-number-box>
					</view>
				</view>
				<view class="info-row">
					<text class="label">下限要求</text>
					<view class="value">
						<uni-number-box v-model="item.lowerlimit" :min="0" disabled></uni-number-box>
					</view>
				</view>
				<!--
				<view class="btn-group">
					<button class="main-btn" @click="viewReport(item.id)">查看报告</button>
				</view>-->
				<view class="divider"></view>
				<view class="info-row">
					<text class="label">实测值小</text>
					<view class="value">
						<uni-number-box v-model="item.minactval" :min="0" ></uni-number-box>
					</view>
				</view>
				<view class="info-row">
					<text class="label">实测值大</text>
					<view class="value">
						<uni-number-box v-model="item.maxactval" :min="0" ></uni-number-box>
					</view>	
				</view>
				<view class="info-row">
					<text class="label">结论</text>	
					<view class="value">
						<input
						    v-model="item.conclusion"
						    class="surround"
						  ></input>
					</view>	
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-else class="empty-card">
			<image src="/static/image/empty.png" class="empty-img" />
			<text class="empty-text">暂无检查检验记录</text>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	type Report = {
		id: number,
		productcode: string,
		invname: string,
		model: string,
		upperlimit: number,
		lowerlimit: number, 
		minactval: number,
		maxactval: number,
		conclusion: string,			
		applyDate: string,
		reportDate: string
	}
		
	var current = ref(1)
	var reportList = ref<Report[]>([]) 
    
	const initReportList = [{
			id: 1,
			productcode:"YH0001",
			invname: '装配间隙',
			model: '定量',
			upperlimit:0.5,
			lowerlimit:0, 
			minactval:0,
			maxactval:0,
			conclusion:'',			
			applyDate: '2025-08-20 09:15',
			reportDate: '2025-08-20 17:30'
		},
		{
			id: 2,
			productcode:"YH0001",
			invname: '装配间隙',
			model: '定量',
			upperlimit:0.5,
			lowerlimit:0, 
			minactval:0,
			maxactval:0,
			conclusion:'',
			applyDate: '2025-08-28 10:00',
			reportDate: '2025-08-28 13:40'
		}
	] as Report[];
	reportList.value = initReportList.filter(item=>item.id == current.value)
	const tabsClick = (obj:number) =>{
		current.value = obj
		reportList.value = initReportList.filter(item=>item.id == current.value)		
	}
    
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f5f7fa;
		flex: 1;
		box-sizing: border-box;
	}

	.banner {
		background: linear-gradient(135deg, #6dd5ed, #2193b0);
		border-radius: 12px;
		padding: 20px 15px;
		margin-bottom: 20px;
		box-shadow: 0 4px 8px rgba(33, 147, 176, 0.3);
	}

	.banner-title {
		color: white;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
	}
	
	.box{
		width: 20px; 
		background-color: #909193;
		border-radius: 7.5px;
	}

	.card-list {
		display: flex;
		flex-direction: column;
	}
	.card-list > .card {
		margin-bottom: 15px;
	}
	/* #ifndef APP-ANDROID */
	.card-list > .card:last-child {
		margin-bottom: 0;
	}
	/* #endif */

	.card {
		background-color: white;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.card-icon {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
		background-color: #eef5ff;
		padding: 10rpx;
	}

	.info-row {
		display: flex;
		flex-direction: row;
		font-size: 14px;
		color: #33475b;
		align-items: center;
		padding: 10px;
	}
	
	.label {
		font-weight: bold;
		color: #102a43;
		min-width: 75px;
	}
	
	.value {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.divider {
		height: 1px;
		background-color: #eee;
		margin: 10px 0;
	}

	.card-info {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		display: flex;
		flex-direction: column;
	}
	.card-info > .card-info-item {
		margin-bottom: 10rpx;
	}
	/* #ifndef APP-ANDROID */
	.card-info > .card-info-item:last-child {
		margin-bottom: 0;
	}
    /* #endif */
	.btn-group {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}

	.main-btn {
		font-size: 28rpx;
		color: white;
		border: none;
		border-radius: 100rpx;
		background: linear-gradient(to right, #36d1dc, #5b86e5);
		box-shadow: 0 6rpx 16rpx rgba(91, 134, 229, 0.3);
		/* #ifndef APP-ANDROID */
		transition: all 0.2s ease-in-out;
		 /* #endif */
	}

/* #ifndef APP-ANDROID */
	.main-btn:active {
		opacity: 0.9;
		transform: scale(0.98);
	}
	/* #endif */

	.empty-card {
		background-color: white;
		border-radius: 20rpx;
		padding: 60rpx 30rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
		text-align: center;
		margin-top: 100rpx;
	}

	.empty-img {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 30rpx;
		opacity: 0.8;
	}

	.empty-text {
		font-size: 30rpx;
		color: #999;
	}
	.surround {
		border: 2px solid #999;
	}
</style>