aiot-app/pages/warehouse/inventoryAllocation/components/AssetsCard.vue

<template>
	<view class="listBox">
		<view class="listBox-sel">
			<uni-icons class="shanchu" v-if="type == 'output'" custom-prefix="iconfont" type="icon-shanchu" size="24" @click="deleteItem" color="#fa3534"></uni-icons>
		</view>
		<view class="listBox-con">
			<view class="listBox-top">
				<view class="listBox-name">
					{{ item.categoryName }}
				</view>
			</view>
			<view class="listBox-top">
				<view class="listBox-name">
					{{ item.categoryCode }}
				</view>
			</view>
			<view class="listBox-bottom">
				<view>牌号：{{ item.brandNum }}</view>
				<view>型号：{{ item.modelType }}</view>
				<view>规格：{{ item.specification }}</view>
				<view>批次号：{{ item.batchNo }}</view>
				<view>计量数量：{{ item.measureQuantity }}({{ item.measureUnit }})</view>
				<view class="w100">包装编码：{{ item.packageNo }}</view>
				<view>包装数量：{{ item.packingQuantity }}({{ item.packingUnit }})</view>
				<view>重量：{{ item.weight }}({{ item.weightUnit }})</view>
				<view>发货条码：{{ item.barcodes }}</view>
				<view>物料代号：{{ item.materielDesignation }}</view>
				<view>客户代号：{{ item.clientCode }}</view>
				<view>刻码：{{ item.engrave }}</view>
				<view class="w100">仓库：{{ item.warehouseName }}</view>
				<view class="w100">区域：{{ getLocation(item) }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { tableHeader } from '../../common'
	import DetailDialog from './DetailDialog'
	import { mapActions, mapGetters } from 'vuex'
	export default {
		components: { DetailDialog },
		props: {
			item: {
				type: Object,
				default: () => ({})
			},
			isApproval: {
				type: Boolean,
				default: false
			},
			type: String
		},
		data() {
			return {}
		},
		computed: {
			// ...mapGetters(['getDictValue']),
			tableHeader() {
				return tableHeader(this.item.assetType)
			},
			curUnit() {
				return this.item.isUnpack
					? this.item.unit || (this.item.detailReqList && this.item.detailReqList[0] && this.item.detailReqList[0].unit)
					: this.item.minPackUnit || (this.item.detailReqList && this.item.detailReqList[0] && this.item.detailReqList[0].minPackUnit)
			}
		},
		created() {
			// this.requestDict('物品类型')
		},
		methods: {
			getLocation(item) {
				if (item.areaName && item.goodsShelfName && item.goodsAllocationName) {
					return item.areaName + '/' + item.goodsShelfName + '/' + item.goodsAllocationName
				} else if (item.areaName && item.goodsShelfName) {
					return item.areaName + '/' + item.goodsShelfName
				} else if (item.areaName) {
					return item.areaName
				} else {
					return ''
				}
			},
			// ...mapActions('dict', ['requestDict']),
			deleteItem() {
				this.$emit('deleteItem')
			},
			handleChange(e) {
				if (this.type === 'input') {
					this.item.inputChecked = !!e.detail.value.length
				} else {
					this.$set(this.item, 'checked', !!e.detail.value.length)
				}
			},
			goDetail({ id }) {
				// uni.navigateTo({
				//   url: `/pages/warehouse/enterHouse/details?&id=${id}`
				// })
			},
			handleDetail(item) {
				if (this.type === 'detail' && !item.detailReqList?.length) {
					return
				}

				this.$refs.detailRef.open(item, this.cargoSpaceId, res => {
					if (this.type === 'output') {
						this.$set(item, 'curDetailReqList', res)
					} else {
						this.$set(
							item,
							'detailReqList',
							res.filter(i => i.checked)
						)
					}
				})
			}
		}
	}
</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%;
			// display: flex;
			// flex-wrap: wrap;
			// justify-content: space-between;
			align-items: center;
			padding: 0 18rpx 0 0;

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

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

			.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;
				}
				.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>