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>
		<u-form labelPosition="left" ref="formRef" labelWidth="240" labelAlign="right" class="baseForm">
			<u-form-item label="报损报溢编码" borderBottom prop="code">
				<u-input :value="infoData.code" disableColor="#ffffff" type="text" disabled />
			</u-form-item>
			<u-form-item label="名称" class="required-form" borderBottom prop="name">
				<u-input v-model="infoData.name" disableColor="#ffffff" type="text" disabled />
			</u-form-item>
			<u-form-item label="报损报溢部门" class="required-form" prop="bizScene" borderBottom>
				<u-input v-model="infoData.executeGroupName" disableColor="#ffffff" type="text" disabled />
			</u-form-item>
			<u-form-item label="报损报溢人" class="required-form" prop="reportName" borderBottom>
				<u-input v-model="infoData.executorName" disableColor="#ffffff" type="text" disabled />
			</u-form-item>
			<u-form-item label="备注" prop="remark" borderBottom>
				<u-input v-model="infoData.remark" disableColor="#ffffff" type="text" disabled />
			</u-form-item>
		</u-form>
		<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>
	/deep/.baseForm {
		.u-form-item__body {
			padding: 4px !important;
		}

		.assetType_box {
			padding: 12rpx 18rpx;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 30rpx;
		}
	}

	.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: 66rpx;
			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: flex-start;
				align-items: center;
				flex-wrap: wrap;
				font-size: 28rpx;
				padding: 10rpx 20rpx;
				// color: #7d7d7d;

				&.first {
					// color: #000;
					font-size: 28rpx;
					border-bottom: 1rpx solid #f2f2f2;

					.col {
						min-width: 0%;
					}
				}

				.col {
					min-width: 50%;
					line-height: 24px;
				}

				.label {
					margin-right: 10rpx;
					display: inline-block;
					width: 180rpx;
					text-align: right;
				}

				.main {
					margin-right: 10rpx;
				}
			}
		}
	}
</style>