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

<template>
	<view class="listBox">
		<view :class="type != 'output'?'':'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="card_box">
			<view class="item_box flex_between">
				<view class="rx-sc">
					<view class="round">{{index}}</view>
					<view class="orderId">{{item.categoryCode}}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce100 rx-sc">
					<view class="lable">物品名称：</view>
					<view class="single-line-ellipsis">{{ item.categoryName }}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">牌号：</view>
					<view>{{ item.brandNum }}</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view class="lable">型号：</view>
					<view>{{item.modelType}}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">规格：</view>
					<view>{{item.specification}}</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view class="lable">批次号：</view>
					<view>{{item.batchNo}}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">计量数量：</view>
					<view>{{ item.measureQuantity }}({{ item.measureUnit }})</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce100 rx-sc">
					<view class="lable">包装编码：</view>
					<view>{{ item.packageNo }}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">包装数量：</view>
					<view>{{ item.packingQuantity }}({{ item.packingUnit }})</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view class="lable">重量：</view>
					<view>{{ item.weight }}({{ item.weightUnit }})</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">发货条码：</view>
					<view>{{ item.barcodes }}</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view class="lable">物料代号：</view>
					<view>{{ item.materielDesignation }}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce50 rx-sc">
					<view class="lable">客户代号：</view>
					<view>{{ item.clientCode }}</view>
				</view>
				<view class="item_one perce50 rx-sc">
					<view class="lable">刻码：</view>
					<view>{{ item.engrave }}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce100 rx-sc">
					<view class="lable">仓库：</view>
					<view>{{ item.warehouseName }}</view>
				</view>
			</view>
			<view class="item_box rx-bc">
				<view class="item_one perce100 rx-sc">
					<view class="lable">区域：</view>
					<view>{{ getLocation(item)  }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		tableHeader
	} from '../../common'
	import DetailDialog from './DetailDialog'
	import {
		mapActions,
		mapGetters
	} from 'vuex'
	export default {
		components: {
			DetailDialog
		},
		props: {
			index: {
				type: Number,
				default: 0
			},
			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;
		margin-top: 10px;
		border-bottom: 2rpx solid #e5e5e5;

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

			checkbox {
				transform: scale(1.2);
			}
		}
	}


	.card_box {
		width: 100vw;
		padding: 0 32rpx 16rpx 16rpx;
		box-sizing: border-box;
		// border-top: 2rpx solid #E1E1E1;


		.item_box {
			margin-top: 10rpx;

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

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

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;
			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				width: 50%;
			}

			.perce100 {
				width: 100%;
			}
		}

		.flex_between {
			display: flex;
			justify-content: space-between;
		}
	}

	.single-line-ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 200px;
	}
</style>