aiot-app/pages/warehouse/workOrder/details/AssetsCard.vue

<template>
	<view class="listBox">
		<view class="listBox-con">
			<view class="listBox-top">
				<view class="listBox-name" style="display: flex;">
					<view class="round">{{index}}</view>
					{{ item.categoryName }}
				</view>
			</view>
			<view class="listBox-bottom">
				<view>批次号：{{ item.batchNo }}</view>
				<view class="w100">包装编码：{{ item.packageNo }}</view>
				<view>包装数量：{{ item.info.packingCountBase }}</view>
				<view>包装单位：{{ item.info.packingUnit }}</view>
				<view>重量：{{ item.info.weight }}</view>
				<view>重量单位：{{ item.info.weightUnit }}</view>
				<view>状态：{{ statusInfo[item.status] }}</view>
				<view>数量：{{ item[countInfo[item.status]] }}</view>
				<view class="w100">仓库：{{ item.info.warehouseName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: {
				type: Number,
				default: 0
			},
			item: {
				type: Object,
				default: () => ({
					info: {}
				})
			}
		},
		data() {
			return {
				statusOption: [{
						label: '盘盈',
						value: '2',
						numKey: 'surplusQuantity'
					},
					{
						label: '丢失',
						value: '3',
						numKey: 'loseQuantity'
					},
					{
						label: '破损',
						value: '4',
						numKey: 'wornQuantity'
					}
				],
				statusInfo: {
					2: '盘盈',
					3: '丢失',
					4: '破损'
				},
				countInfo: {
					2: 'surplusQuantity',
					3: 'loseQuantity',
					4: 'wornQuantity'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listBox {
		display: flex;
		// height: 180rpx;
		padding: 20rpx;
		border-bottom: 2rpx solid #e5e5e5;

		.listBox-sel {
			height: 90rpx;
			width: 80rpx;
			// line-height: 90rpx;
			text-align: center;

			checkbox {
				transform: scale(1.2);
			}
		}

		.listBox-con {
			width: 100%;
			padding: 0 16px 8px 8px;

			.listBox-top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 10rpx;

				.listBox-name,
				.listBox-code {
					display: inline-block;
					font-size: $uni-font-size-sm;
					font-weight: bold;
				}
			}

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

			.listBox-bottom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: $uni-font-size-sm;
				flex-wrap: wrap;

				>view {
					width: 50%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					line-height: 24px;
				}

				.input_view {
					display: flex;
					align-items: center;
					justify-content: center;

					.u-input {
						height: 36rpx;
						padding: 0 !important;
						margin-right: 10rpx;
						border: 1px solid #ddd;
					}
				}

				.w100 {
					width: 100%;
				}
			}
		}
	}

	.noDate {
		height: 100%;
	}
</style>