aiot-app/pages/warehouse/hwQrcode/index.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="详情" @clickLeft="back">
		</uni-nav-bar>
		<view class="main" v-if="query.type == '库区'">
			<view class="row">
				<view class="row-item">
					<text class="t1">所属仓库</text>
					<text class="t2">{{ formData.warehouseName }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">库区编号</text>
					<text class="t2">{{ formData.code }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">库区名称</text>
					<text class="t2">{{ formData.name }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">库区类型</text>
					<text class="t2">{{ formData.typeName }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">库区属性</text>
					<text class="t2">{{ formData.attributeName }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">库区位置</text>
					<text class="t2">{{ formData.address }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">库区长（cm）</text>
					<text class="t2">{{ formData.areaLength }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">库区宽（cm）</text>
					<text class="t2">{{ formData.areaWide }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">库区高（cm）</text>
					<text class="t2">{{ formData.areaHigh }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货架数量</text>
					<text class="t2">{{ formData.num }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">备注</text>
					<text class="t2">{{ formData.areaRemark }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">货架编号</text>
					<text class="t2">{{ areaShelf }}</text>
				</view>
			</view>
		</view>
        <view class="main" v-if="query.type == '货架'">
			<view class="row">
				<view class="row-item">
					<text class="t1">所属仓库</text>
					<text class="t2">{{ formData.warehouseName }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">库区编号</text>
					<text class="t2">{{ formData.warehouseAreaCode }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货架编号</text>
					<text class="t2">{{ formData.goodsshelvesCode }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货架行数</text>
					<text class="t2">{{ formData.goodsshelvesLine }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货架列数</text>
					<text class="t2">{{ formData.goodsshelvesColumn }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货架长（cm）</text>
					<text class="t2">{{ formData.goodsshelvesLength }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货架宽（cm）</text>
					<text class="t2">{{ formData.goodsshelvesWide }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货架高（cm）</text>
					<text class="t2">{{ formData.goodsshelvesHigh }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货位数量</text>
					<text class="t2">{{ formData.stockLocationList.length }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">是否规则</text>
					<text class="t2">{{ formData.isRegular == 1 ? '是' : '否' }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">备注</text>
					<text class="t2">{{ formData.areaRemark }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">货位编号</text>
					<text class="t2">{{ goodShelf }}</text>
				</view>
			</view>
		</view>
        <view class="main" v-if="query.type == '货位'">
			<view class="row">
				<view class="row-item">
					<text class="t1">所属仓库</text>
					<text class="t2">{{ formData.warehouseName }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">库区编号</text>
					<text class="t2">{{ formData.warehouseAreaCode }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货架编号</text>
					<text class="t2">{{ formData.warehouseAreaGoodsCode }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">货位编号</text>
					<text class="t2">{{ formData.goodsAllocationCode }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货位长（cm）</text>
					<text class="t2">{{ formData.goodsAllocationLength }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货位宽（cm）</text>
					<text class="t2">{{ formData.goodsAllocationWide }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">货位高（cm）</text>
					<text class="t2">{{ formData.goodsAllocationHigh }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">限重（kg）</text>
					<text class="t2">{{ formData.weightLimit }}</text>
				</view>
			</view>
            <view class="row">
				<view class="row-item">
					<text class="t1">基本货位容积（cm³）</text>
					<text class="t2">{{ formData.volumeUnit }}</text>
				</view>
			</view>
     
            <view class="row">
				<view class="scroll_box">
                    <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
                        <uni-table border stripe emptyText="暂无更多数据" style="width: 100%;">
                            <uni-tr style="width: 100%;">
                                <uni-th width="50" align="center">序号</uni-th>
                                <uni-th width="120" align="center">物品编码</uni-th>
                                <uni-th width="120" align="center">名称</uni-th>
                                <uni-th width="100" align="center">型号</uni-th>
                                <uni-th width="100" align="center">规格</uni-th>
                                <uni-th width="150" align="center">数量</uni-th>
                            </uni-tr>
                            <!-- 表格数据行 -->
                            <uni-tr v-for="(item, index) in formData.productList" :key="index">
                                <uni-td>
                                    <view>{{index+Number(1)}}</view>
                                </uni-td>
                                <uni-td>
                                    <view class="ellipsis">
                                        {{ item.code }}
                                    </view>
                                </uni-td>
                                <uni-td>
                                    <view>{{ item.name }}</view>
                                </uni-td>
                                <uni-td>
                                    <view>{{ item.modelType }}</view>
                                </uni-td>
                                <uni-td>
                                    <view>{{ item.specification }}</view>
                                </uni-td>
                                <uni-td>
                                    <view>{{ item.availableCount }}</view>
                                </uni-td>
                            </uni-tr>
                        </uni-table>
                    </scroll-view>
                </view>
			</view>
		</view>
	</view>
</template>

<script>
	// import ScanCode from '@/components/ScanCode.vue'
	import {
		wmsQrcodeScan
	} from '@/api/warehouseManagement'
	import {
		warehouseDefinition_areaType,
        warehouseDefinition_areaAttribute
	} from '@/enum/dict.js'

	export default {
		components: {
			
		},
		data() {
			return {
                query: {},
				formData: {},
			}
		},
		onShow() {
			
		},
		onLoad(options) {
            this.query = options
            console.log(this.query)

			wmsQrcodeScan({code: this.query.type + ':' +this.query.id }).then(res => {
				console.log(res)
                res.typeName = warehouseDefinition_areaType.find(item => item.code == res.type)?.label || ''
                res.attributeName = warehouseDefinition_areaAttribute.find(item => item.code == res.attribute)?.label || ''
				this.formData = res
			})
		},
		computed: {
            areaShelf() {
                const codelist = this.formData?.warehouseGoodsShelvesList?.map(item => item.goodsshelvesCode) || []
                return codelist.join(',');
            },
            goodShelf() {
                const codelist = this.formData?.stockLocationList?.map(item => item.goodsAllocationCode) || []
                return codelist.join(',');
            }
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.mainBox {
		/deep/.required-form .u-form-item__body__left__content__label::before {
			content: '*';
			color: red;
		}
	}

	.main {
		padding: 0 30rpx;

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1px dashed #dedede;

			.row-item {
				.t1 {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					margin-right: 20rpx;
				}

				.t2 {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
    .scroll_box {
		flex: 1;
		overflow: scroll;

		.scroll-Y {
			height: 100%;
		}
	}

    /deep/.uni-table {
		min-width: 100vw !important;
		font-size: 28rpx;

		.uni-table-td,
		.uni-table-th {
			padding: 10rpx !important;
			text-align: center !important;
			font-size: 28rpx;
			color: #000000;
		}
	}
</style>