aiot-app/pages/pda/feeding/bill/index.vue

<template>
	<view class="content-box">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="投料单" background-color="#F7F9FA" color="#000"
			@clickLeft="back"></uni-nav-bar>


		<view class="list_box">
			<u-list @scrolltolower="scrolltolower" key="dataList">

				<view class="card_box " v-for="(item, index) in dataList" :key="index">
					<view class="item_box rx-bc">
						<view class="round">{{index + 1}}</view>
						<view class="time">投料时间:{{item.createTime}} </view>
					</view>

					<view v-for="(it,idx) in item.orderInfoList" :key="idx">
						<workOrderBom :item='it' :isDetails='true'></workOrderBom>

						<deviceBom v-if='it.equipmentList.length != 0' :list='it.equipmentList'></deviceBom>

						<modelBom v-if='it.modelList.length != 0' :list='it.modelList'>
						</modelBom>

						<instanceBom v-if='it.instanceList.length != 0' :list='it.instanceList'></instanceBom>

						<packingBom v-if='it.packingList.length != 0' :list='it.packingList'>></packingBom>

					</view>




				</view>

			</u-list>
		</view>

	</view>
</template>

<script>
	import workOrderBom from '../components/workOrderBom.vue'
	import deviceBom from '../components/deviceBom.vue'
	import modelBom from '../components/modelBom.vue'
	import instanceBom from '../components/instanceBom.vue'
	import packingBom from '../components/packingBom.vue'
	import {
		feedByOrderIds
	} from '@/api/pda/feeding.js'
	export default {
		components: {
			workOrderBom,
			deviceBom,
			modelBom,
			instanceBom,
			packingBom
		},
		data() {
			return {
				ids: [],
				dataList: [],
			}
		},

		onLoad(option) {
			this.ids = [option.id]
			this.getList()
		},

		methods: {


			async getList() {
				const res = await feedByOrderIds(this.ids)
				this.dataList = res

			},


			scrolltolower() {}
		}
	}
</script>

<style lang="scss" scoped>
	.content-box {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

	}

	.item_box {
		margin-top: 10rpx;
		margin-bottom: 16rpx;
		width: 706rpx;

		.round {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 50%;
			background: $theme-color;
			color: #fff;
			text-align: center;
			font-size: 20rpx;
		}

		.time {
			color: #000;
			font-family: PingFang HK;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			margin-left: 16rpx;
		}

	}


	.list_box {
		flex: 1;
		overflow: hidden;
		padding: 4rpx 0;

		.u-list {
			height: 100% !important;
		}

		.card_box {
			padding: 16rpx 24rpx;
		}


	}
</style>