aiot-app/pages/warehouse/reportLoss/detail.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="报损报溢详情" @clickLeft="back"></uni-nav-bar>

		<view>
			<CellInfo label="报损报溢编码" :value="infoData.code"></CellInfo>
			<CellInfo label="名称" :value="infoData.name"></CellInfo>
			<CellInfo label="报损报溢部门" :value="infoData.executeGroupName"></CellInfo>
			<CellInfo label="报损报溢人" :value="infoData.executorName"></CellInfo>
			<!-- <CellInfo label="审核人部门" :value="infoData.auditDeptName"></CellInfo>
			<CellInfo label="审核人" :value="infoData.auditName"></CellInfo> -->
			<CellInfo label="备注" :value="infoData.remark"></CellInfo>
		</view>
		<uni-section title="报损报溢明细" type="line">
			<view class="order-box">盘点工单{{ formData.workOrderCode }}</view>
			<view v-for="(item, index) in formData.list" :key="index" class="list-card">
				<view class="status" :style="{ color: colorInfo[item.status] }">
					<text>{{ statusInfo[item.status] }}</text>
					<text>数量：{{ item[countInfo[item.status]] }}</text>
				</view>
				<view class="row first">
					<view class="col" style="width: 100%">
						<text class="main">{{ item.categoryName }}</text>
						{{ item.categoryCode }}
					</view>
					<view class="col" style="width: 100%">
						<text class="main">包装编码：</text>
						{{ item.packageNo }}
					</view>
					<view class="col" style="width: 100%">
						<text class="main">仓库：</text>
						{{ item.info.warehouseName }}
					</view>
				</view>
				<view class="row">
					<view class="col">
						<text class="label">包装数量：</text>
						{{ item.info.packingCountBase }}
					</view>
					<view class="col">
						<text class="label">包装单位：</text>
						{{ item.info.packingUnit }}
					</view>
					<view class="col">
						<text class="label">重量：</text>
						{{ item.info.weight }}
					</view>
					<view class="col">
						<text class="label">重量单位：</text>
						{{ item.info.weightUnit }}
					</view>
					<view class="col">
						<text class="label">批次号：</text>
						{{ item.batchNo }}
					</view>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import { getReportPlanDetailById } from '@/api/warehouseManagement'
	import CellInfo from '@/components/CellInfo.vue'
	export default {
		components: { CellInfo },
		data() {
			return {
				pickerIndex: 0,
				statusInfo: {
					2: '盘盈',
					3: '丢失',
					4: '破损'
				},
				countInfo: {
					2: 'surplusQuantity',
					3: 'loseQuantity',
					4: 'wornQuantity'
				},
				colorInfo: {
					2: 'red',
					3: 'green',
					4: 'black'
				},
				statusOption: [
					{
						label: '盘盈',
						value: '2',
						numKey: 'surplusQuantity'
					},
					{
						label: '丢失',
						value: '3',
						numKey: 'loseQuantity'
					},
					{
						label: '破损',
						value: '4',
						numKey: 'wornQuantity'
					}
				],
				deptList: [],
				userList: [],
				infoData: {
					auditId: '',
					auditName: '',
					verifyDeptCode: '',
					verifyDeptName: '',
					workOrderCode: '',
					list: []
				},
				formData: {}
			}
		},
		onLoad({ id }) {
			this.getDetail(id)
		},
		methods: {
			async getDetail(id) {
				getReportPlanDetailById(id).then(res => {
					this.infoData = res
					this.formData.workOrderCode = res.info[0].code
					this.formData.list = res.info[0].planDetailVOList
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footBox {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.mainBox {
		padding-bottom: 90rpx;
		/deep/ .list-cell {
			padding: 10rpx 0;
		}
		.order-box {
			color: #7f7f7f;
			background-color: rgba(215, 215, 215, 0.729411764705882);
			line-height: 44rpx;
			border-radius: 44rpx;
			text-align: center;
			font-size: 28rpx;
			margin: 0 20rpx;
		}

		.list-card {
			border-bottom: 6rpx solid #f2f2f2;
			position: relative;
			.status {
				padding: 6rpx 20rpx;
				font-weight: bold;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f2f2f2;
			}
			.del {
				position: absolute;
				color: $uni-color-order-error !important;
				bottom: 5rpx;
				right: 10rpx;
				font-size: 50rpx !important;
			}
			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				flex-wrap: wrap;
				padding: 10rpx 20rpx;
				color: #7d7d7d;

				&.first {
					color: #000;
					font-size: 28rpx;
					border-bottom: 1rpx solid #f2f2f2;
					.col {
						width: 100%;
					}
				}

				.col {
					width: 50%;
				}
				.label {
					margin-right: 10rpx;
					display: inline-block;
					width: 180rpx;
					text-align: right;
				}
				.main {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>