mes_mobile/pages/production/productionOrder.vue

<template>
	<!-- 生产工单 -->
	<view class="pagepaddings">
		<view v-for="(item,index) in list" :key="index" class="detail_list contentboxsty font13">
			<view @click="toDetail(item.id)">
				<view class="list_top">
					<view class="top_left">
						工单号:{{item.order_sn}}
					</view>
					<view class="top_right">
						工单详情 <text class="iconfont icon-gengduo"></text>
					</view>
				</view>
				<view class="list_content font13">
					<view class="list_centre">
						<view class="centre_left">
							<view class="">
								算法出材率
							</view>
							<view class="percentage font24">
								{{item.algorithm}}%
							</view>
						</view>
						<view class="centre_left">
							<view class="">
								实际出材率
							</view>
							<view class="percentage font24">
								{{item.reality}}%
							</view>
						</view>
					</view>
					<view class="list_below">
						<view class="row">
							<view class="row_left">
								<text>状态：</text>
								<text>{{item.review_status_label}}</text>
							</view>
							<view class="row_right">
								<text>加工规格：</text>
								<text>{{item.order_spec}}</text>
							</view>
						</view>
						<view class="row">
							<view class="row_left">
								<text>生产开始：</text>
								<text>{{item.plan_date}}</text>
							</view>
							<view class="row_right">
								<text>工单耗时：</text>
								<text>{{item.timeConsuming}}</text>
							</view>
						</view>
						<view class="row">
							<view class="row_left">
								<text>工单数量：</text>
								<text>{{item.order_number}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onShow(){
			this.listData();
		},
		methods: {
			listData(){
				this.$api.postFuncLoading('/order.list',{page: 1,pageSize: 15}).then(res=>{
					this.list = res.data.rows
					
					
				})
			},
			//跳转工单详情
			toDetail(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/production/productionDetail?id='+id
				})
			},
		}
	}
</script>

<style lang="scss">
.detail_list{
	.list_centre{display: flex;text-align: center;padding-bottom: 10px;
		view{flex: 1;}
		.percentage{color: #00B68D;}
	}
	.list_below{padding-bottom: 12px;
		.row{display: flex;padding-top: 10px;
			view{flex: 1;}
		}
	}
	
}
</style>