QTApp_800/pages/work/download/DownloadList.uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1" scroll-y class="container">
	<!-- #endif -->
	    <view class="info-row" >
			<button class="btn" @click="download">
				下载数据
			</button>
			<button class="btn" @click="upload">
				上传数据
			</button>
		</view>	 
	
		<view class="download-card" v-for="(item, index) in downloads" :key="index" @click="enterItem(item.pdid)">
		    <view class="info-row">
		    	<text class="label">工作令：</text>
		    	<text class="value">{{ item.workorder }}</text>
		    </view>
			<view class="info-row">
				<text class="label">产品名称：</text>
				<text class="value">{{ item.invname }}</text>
			</view>
			<view class="info-row">
				<text class="label">图号：</text>
				<text class="value">{{ item.graphid }}</text>
			</view>
			<view class="info-row">
				<text class="label">产品编码：</text>
				<text class="value">{{ item.productno }}</text>
			</view>
			<view class="info-row">
				<text class="label">路卡号：</text>
				<text class="value">{{ item.cardno }}</text>
			</view>
			<view class="info-row">
				<text class="label">工艺编号：</text>
				<text class="value">{{ item.processno }}</text>
			</view>
			<view class="info-row">
				<text class="label">版本号：</text>
				<text class="value">{{ item.ver }}</text>
			</view>
			<view class="info-row">
				<text class="label">最近更新时间：</text>
				<text class="value">{{ item.updatetime }}</text>
			</view>
			<view class="info-row">
				<text class="label">进度：</text>
				<text class="value">{{ item.progress }}</text>
			</view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import {
		ref
	} from 'vue'
	type Download = {
		pdid: number,
		workorder: string,
		invname: string,
		productno: string,
		graphid: string,
		cardno: string,
		processno: string,
		ver: string,
		updatetime: string,
		progress: string
	}
	
	const downloads = [{
		pdid:1,
		workorder:"632-P-01",
		invname:"箱间段",
		productno:"1CFA1040-00#S",
		graphid:"HBJ0100-00",
		cardno: "LK20230707070012",
		processno: "Pb/XXX-E11",
		ver: "A.1",
		updatetime: "2025-06-23",
		progress: "1/3"
		
	},{
		pdid:2,
		workorder:"712-SY-10-6",
		invname:"级间架",
		productno:"1XA1020-00A",
		graphid:"1XC002-00",
		cardno: "LK20250215003",
		processno: "Pb/XXX-E11",
		ver: "B.1",
		updatetime: "2025-08-25",
		progress: "0/4"		
	}] as Download[];
	
	const download = (e: any) => {
		console.log("开始下载...")
	}  
	const upload = (e: any) => {
		console.log("开始上传...")
	} 
	const enterItem = (id:number) => {
		uni.navigateTo({
			url: `/pages/work/download/DownloadDetail?id=${id}`
		});
	}
	
</script>

<style>
  .container {
  	padding: 40rpx;
  	background-color: #f5f7fa;
  	flex: 1;
  	box-sizing: border-box;
  }
  .download-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: 40rpx;
  }
  .download-card .view {
  	margin-bottom: 16rpx;
  }
  
  /* 信息行 */
  .info-row {
  	display: flex;
  	flex-direction: row;
  	font-size: 28rpx;
  	color: #33475b;
  	align-items: center;
  }
  .info-row > .label {
  	margin-left: 10rpx;
  }
  .info-row > .value {
  	margin-left: 10rpx;
  }
  
  .label {
  	font-weight: bold;
  	color: #102a43;
  	min-width: 100rpx;
  }
  
  .value {
  	flex: 1;
  	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
  }
  .btn {
  	align-self: flex-end;
  	background-color: #0000ff;
  	color: #fff;
  	border: none;
  	border-radius: 32rpx;
  	padding: 5rpx 30rpx;
  	font-size: 24rpx;
  	font-weight: bold;
	 /* #ifndef APP-ANDROID */
  	transition: background-color 0.3s ease;
	/* #endif */
	margin-top:30rpx;
  }
</style>