aiot-app/pages/pda/picking/components/instanceBom.vue

<template>
	<view>


		<view v-for="(item, index) in list" :key="index" @change="e => selectVal(e, item, index)">
			<view class="listBox rx-bs">

				<view class="delete" @click="getDelete(index)">
					<uni-icons custom-prefix="iconfont" type="icon-shanchu" size="24" color="#fa3534"></uni-icons>
				</view>

				<view class="listBox-con">
					<view class="listBox-top rx-bc">
						<view> {{ item.assetName }}</view>
						<view class="code">{{ item.assetCode}}</view>
					</view>

					<view class="listBox-bottom rx">
						<view v-for="(itm, index) in tableH(item.rootCategoryLevelId)" :key="index" class="items">
							{{ itm.label }}：{{ item[itm.prop] }}
						</view>

						<view class="items">
							可用库存：{{ item.number }} {{item.unit}}
						</view>

					</view>

				</view>





			</view>

		</view>

	</view>
</template>

<script>
	import {
		tableHeader
	} from '../../common.js'
	export default {
		props: ['list'],
		data() {
			return {

			}
		},
		methods: {
			tableH(type) {
				return tableHeader(type)
			},

			getDelete(index) {},
		}
	}
</script>

<style lang="scss" scoped>
	.listBox {
		padding: 14rpx 0;
		border-bottom: 2rpx solid $border-color;





		.listBox-con {
			width: 630rpx;
			font-weight: 400;
		}

		.listBox-top {
			margin-top: 6rpx;
			color: #090A0A;
			font-size: 28rpx;
			font-style: normal;
		}

		.listBox-bottom {
			color: #090A0A;
			font-size: 24rpx;
			font-style: normal;
			flex-wrap: wrap;

			.items {
				width: 50%;
				margin-top: 6rpx;
			}
		}
	}
</style>