QTApp_800/pages/work/process/ProcessList.uvue

<template>
	<view class="record-card flex-row">
		<!-- <uni-tag class="tag-circle" v-for="(tag,index) in 6" :key="index" :text="tag+''" size="medium" type="primary" circle
			@click="tabsClick(tag)"></uni-tag> -->
		<view class="tag-circle" v-for="(tag,index) in maxcount" :key="index" @click="tabsClick(tag)"
		:class="{'checked-tag' : tag === current}">
			<text class="circle" :class="{
							'bg-green': tag<=2,
							'bg-yellow': tag%3 === 0,
							'bg-red': tag%2 === 0,
							'bg-black': tag>=4
						  }">{{tag}}</text>
		</view>
	</view>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->

		<!-- 		<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="processList.length" class="card-list">
			<view class="card card-view" v-for="item in processList" :key="item.id" v-show="current == item.id">
				<view class="info-row">
					<text class="label info-text">序号</text>
					<view class="value info-text">
						<uni-number-box v-model="item.id" disabled></uni-number-box>
					</view>
				</view>
				<view class="info-row">
					<text class="label info-text">产品码</text>
					<view class="value info-text">
						<input v-model="item.productcode" class="surround" disabled></input>
					</view>
				</view>
				<view class="info-row">
					<text class="label info-text">检测项目</text>
					<view class="value info-text">
						<input v-model="item.invname" class="surround" disabled></input>
					</view>
				</view>
				<view class="info-row">
					<text class="label info-text">分类</text>
					<view class="value info-text">
						<input v-model="item.model" class="surround" disabled></input>
					</view>
				</view>
				<view class="info-row">
					<text class="label info-text">上限要求</text>
					<view class="value info-text">
						<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 info-text">下限要求</text>
					<view class="value info-text">
						<uni-number-box v-model="item.lowerlimit" :min="0" disabled></uni-number-box>
					</view>
				</view>

				<view class="divider"></view>
				<view class="info-row">
					<text class="label info-text">实测值小</text>
					<view class="value info-text">
						<uni-number-box v-model="item.minactval" :min="0"></uni-number-box>
					</view>
				</view>
				<view class="info-row">
					<text class="label info-text">实测值大</text>
					<view class="value info-text">
						<uni-number-box v-model="item.maxactval" :min="0"></uni-number-box>
					</view>
				</view>
				<view class="info-row">
					<text class="label info-text">结论</text>
					<view class="value info-text">
						<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>

		<view class="info-row btn-panel">
			<button class="btn btn-first" @click="tabsClick(current-1)" v-if="current > 1">
				前一项
			</button>
			<button class="btn btn-second" @click="tabsClick(current+1)" v-if="current < maxcount">
				下一项
			</button>
		</view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import {
		ref
	} from 'vue'

	type Process = {
		id : number,
		productcode : string,
		invname : string,
		model : string,
		upperlimit : number,
		lowerlimit : number,
		minactval : number,
		maxactval : number,
		conclusion : string,
		applyDate : string,
		reportDate : string
	}
	//检查项目最大数量
	var maxcount = 5
	var current = ref(1)
	var processList = ref<Process[]>([])

	const initProcessList = [{
		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 Process[];

	processList.value = initProcessList.filter(item => item.id == current.value);
	const tabsClick = (obj : number) => {
		current.value = obj
		processList.value = initProcessList.filter(item => item.id == current.value)
	}
</script>

<style scoped>
	.container {
		padding: 40rpx;
		background-color: #f5f7fa;
		height: 100%;
		box-sizing: border-box;
	}

	.banner {
		background: linear-gradient(135deg, #6dd5ed, #2193b0);
		border-radius: 24rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 16rpx rgba(33, 147, 176, 0.3);
	}

	.banner-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
	}

	.box {
		width: 40rpx;
		background-color: #909193;
		border-radius: 15rpx;
	}

	.card-list {
		display: flex;
		flex-direction: column;
	}

	.card-list .card-view {
		margin-bottom: 30rpx;
	}

	.card {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 6rpx 20rpx 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;
		/* #ifdef APP-NVUE */
		font-size: 28rpx;
		color: #33475b;
		/* #endif */
		align-items: center;
		padding: 20rpx;
	}

	.info-row .info-text {
		margin-right: 10rpx;
	}

	.label {
		font-weight: bold;
		color: #102a43;
		min-width: 150rpx;
	}

	.value {
		flex: 1;
		/* #ifdef APP-NVUE */
		white-space: nowrap;
		text-overflow: ellipsis;
		/* #endif */
		overflow: hidden;
	}

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

	.card-info {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		display: flex;
		flex-direction: column;
	}

	.card-info .card-info-view {
		margin-bottom: 10rpx;
	}

	.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: 1px solid silver;
		border-radius: 10rpx;
	}

	.record-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx 32rpx;
		box-shadow: 0 8rpx 15rpx rgba(0, 43, 92, 0.1);
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
	}

	.flex-row {
		flex-direction: row;
	}

	.tag-circle {
		width: 60rpx;
		height: 60rpx;
		margin: 0 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.circle {
		height: 50rpx;
		width: 50rpx;
		background-color: #004a99;
		text-align: center;
		color: #fff;
		line-height: 50rpx;
		border-radius: 50rpx;
	}
	
	.checked-tag {
		height: 60rpx;
		width: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #ffffff;
		box-shadow: 0 0 0 2rpx #007aff;
		position: relative;
		z-index: 10;
	}

	.bg-green {
		background-color: seagreen;
	}

	.bg-yellow {
		background-color: yellow;
	}

	.bg-black {
		background-color: #102a43;
	}

	.bg-red {
		background-color: red;
	}

	.btn-panel {
		position: relative;
		width: 100%;
		height: 90rpx;
		overflow: visible;
	}

	.btn {
		position: absolute;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: #00aaff;
		color: #fff;
		border: 0 none;
		border-radius: 25rpx;
	}

	.btn-first {
		left: 15rpx;
	}

	.btn-second {
		right: 15rpx;
	}
</style>