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.state === 'done',
					'bg-yellow': item.state === 'doing',
					'bg-black': item.state === 'waiting'
				  }">{{ 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,
		state : 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: "3/3",
		state: "done"

	}, {
		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",
		state: "doing"
	}, {
		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",
		state: "waiting"
	}] 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 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>