QTApp_800/pages/work/download/DownloadList.uvue

<template>
	<view class="info-row btn-panel">
		<button class="btn btn-first" @click="download">
			下载数据
		</button>
		<button class="btn btn-second" @click="upload">
			上传数据
		</button>
	</view>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<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="process-value" :class="{
					'bg-green': item.status === 3,
					'bg-yellow': item.status === 2,
					'bg-black': item.status === 1
				  }">{{ item.progress }}</text>
			</view>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import { getList } from '@/api/work';
		
	type Download = {
		pdid : number,
		workorder : string,
		invname : string,
		productno : string,
		graphid : string,
		cardno : string,
		processno : string,
		ver : string,
		updatetime : string,
		progress : string,
		status : number
	}
	var initDownloads = [] as Download[]
	var downloads = ref<Download[]>([]);
	
	// #ifdef APP-ANDROID	 
	 getList('app_product', null, null).then((res:UTSJSONObject) => {
	  		console.log(res)
			let dataList = res?.['data'] as UTSJSONObject[] ?? Array<UTSJSONObject>()
			if(dataList!=null && dataList.length>0){
				dataList.forEach(item =>{
					if(item!=null){
						let download = JSON.parse<Download>(item.toJSONString());
						if(download!=null){
							initDownloads.push(download)
						}
					}
				});
			}
			console.log(initDownloads)
			downloads.value = initDownloads
	  })		
	// #endif
		
		// #ifdef H5
		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: "3/3",
			status: 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: "2/4",
			status: 2
		}, {
			pdid: 3,
			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",
			status: 1
		}] as Download[];
		// #endif
	

	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 scope>
	.container {
		padding: 24rpx;
		background-color: #f0f4f8;
		flex: 1;
		display: flex;
		flex-direction: column;
		font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
		/* #ifndef APP-ANDROID */
		min-height: 100vh;
		/* #endif */
		height: 120rpx;
	}

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

	.btn-panel {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 5rpx;
		margin-right: 5rpx;
	}

	.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: #00aaff;
		color: #fff;
		border: none;
		border-radius: 32rpx;
		padding: 2rpx 30rpx;
		font-size: 24rpx;
		font-weight: bold;
		/* #ifndef APP-ANDROID */
		transition: background-color 0.3s ease;
		/* #endif */
		margin-top: 30rpx;
	}

	.process-value {
		width: 120rpx;
		min-width: 100rpx;
		text-align: center;
		border-radius: 10rpx;
	}

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

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

	.bg-black {
		background-color: #102a43;
	}
	
	.btn-first {
		margin-left: 5rpx;
	}
	.btn-second {
		margin-right: 5rpx;
	}
</style>