aiot-app/pages/warehouse/outHouse/details.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="出库详情" @clickLeft="back">
			<!-- @clickRight="handleScan"
      right-icon="scan"
    > -->
			<!--右菜单-->
			<template slot="float">
				<!-- <view class="nav-icon-caozuo rightNav" @click="getsure">
					<u-button type="success" size="small" class="u-reset-button" text="确定"></u-button>
				</view> -->
			</template>
		</uni-nav-bar>
		<view class="main">
			<view class="row">
				<view class="row-item">
					<text class="t1">出库单号</text>
					<text class="t2">{{ formData.bizNo }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">物品类型</text>
					<text class="t2">{{ getGoodsListsLabel(formData.extInfo.assetType) }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">出库场景</text>
					<text
						class="t2">{{ outputSceneState.filter(item => item.value == formData.bizType)[0].text }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item">
					<text class="t1">来源单据</text>
					<text class="t2">{{ formData.sourceBizNo }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item" @click="timeShow = true">
					<text class="t1">出库登记人</text>
					<text class="t2">{{ formData.extInfo.createUserName }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item" @click="timeShow = true">
					<text class="t1">领料人</text>
					<text class="t2">{{ formData.fromUser}}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item" @click="timeShow = true">
					<text class="t1">领料部门</text>
					<text class="t2">{{ formData.extInfo.verifyDeptName }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item" @click="timeShow = true">
					<text class="t1">状态</text>
					<text class="t2">{{ statusLabelList[formData.verifyStatus]}}</text>
				</view>
			</view>
			<view class="row">
				<view class="row-item" @click="timeShow = true">
					<text class="t1">备注</text>
					<text class="t2">{{ formData.remark}}</text>
				</view>
			</view>
		</view>

		<uni-collapse ref="collapse" v-model="collapseOpen">
			<uni-collapse-item :typeOpen="1" title="" name="collapse1" :open="true" :key="detailOpen"
				:show-animation="true">
				<template v-slot:title>
					<view class="detail-box">
						<view data-v-41027c34="" class="uni-collapse-item__title-wrap">
							<view data-v-41027c34=""
								class="uni-collapse-item__title-box uni-collapse-item__title-box-base">
								<text data-v-41027c34="" class="tag tag-base"><text></text></text>
								<text data-v-41027c34="" class="uni-collapse-item__title-text"><text>出库明细</text></text>
							</view>
						</view>
						<!-- <u-button type="primary" size="small" text="扫码添加" @click.native.stop="selectType"></u-button> -->
						<!-- <u-button type="success" size="small" class="selectEnterType" text="手动添加" @click.native.stop="selectType"></u-button> -->
					</view>
				</template>

				<u-form labelPosition="left" :model="{ productList: productList }" ref="lisrFormRef" labelWidth="150"
					:rules="listRules" errorType="none" labelAlign="right" :labelStyle="{
						fontSize: '28rpx'
					}">
					<view class="listContent">
						<view class="listBox" v-for="(item, index) in productList" :key="index">
							<view class="main" :class="{ save: item.isSave }">
								<view class="row">
									<view class="row-item">
										<text class="t1">物品名称</text>
										<text class="t2">{{ item.categoryName }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">物品编码</text>
										<text class="t2">{{ item.categoryCode }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item" style="display: flex;width: 100%;">
										<text class="t1">包装规格</text>
										<view style="display: flex;"><u-tag style="display: flex;margin-right: 10px;"
												v-for="ite in item.packingSpecificationLabel" :text="ite"></u-tag>
										</view>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">批次号</text>
										<text class="t2">{{ item.batchNo }}</text>
									</view>
									<view class="row-item">
										<text class="t1">是否拆包</text>
										<text class="t2">{{ item.isUnpack ? '是' : '否' }}</text>
									</view>

								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">数量</text>
										<text class="t2">{{ item.packingQuantity }}</text>
									</view>
									<view class="row-item">
										<text class="t1">包装单位</text>
										<text class="t2">{{ item.packingUnit }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">仓库</text>
										<text class="t2">{{ item.warehouseName }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">供应商</text>
										<text class="t2">{{ item.supplierName }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">计量数量</text>
										<text class="t2">{{ item.measureQuantity }}</text>
									</view>
									<view class="row-item">
										<text class="t1">计量单位</text>
										<text class="t2">{{ item.measureUnit }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">重量</text>
										<text class="t2">{{ item.weight }}</text>
									</view>
									<view class="row-item">
										<text class="t1">重量单位</text>
										<text class="t2">{{ item.weightUnit }}</text>
									</view>
								</view>
							</view>
							<view class="main">
								<view class="selectTime">
									<view class="title">包装列表</view>
								</view>
								<u-list class="z_list" style="height: 100% !important">
									<view class="material rx-ss" v-for="(ite, idx) in item.outInDetailRecordRequestList"
										:key="idx">
										<view class="content_table">
											<view class="item">
												<view class="lable rx-cc">序号</view>
												<view class="content">{{ idx + 1 }}</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">包装编码</view>
												<view class="content">{{ ite.packageNo }}</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">包装数量({{ ite.packingUnit }})</view>
												<view class="content">{{ ite.packingQuantity }}</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">计量数量({{ ite.measureUnit }})</view>
												<view class="content">{{ ite.measureQuantity }}</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">物料代号</view>
												<view class="content">{{ ite.materielDesignation }}</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">客户代号</view>
												<view class="content">{{ ite.clientCode }}</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">刻码</view>
												<view class="content">{{ ite.engrave }}</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">重量({{ ite.weightUnit }})</view>
												<view class="content">
													{{ ite.weight }}
												</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">质检状态</view>
												<view class="content">
													{{ qualityResults[ite.status] }}
												</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">采购日期</view>
												<view class="content">
													{{ ite.purchaseDate }}
												</view>
											</view>
											<view class="item">
												<view class="lable rx-cc">生产日期</view>
												<view class="content">
													{{ ite.productionDate }}
												</view>
											</view>
										</view>
									</view>
								</u-list>
							</view>
						</view>
					</view>
				</u-form>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	// import ScanCode from '@/components/ScanCode.vue'
	import {
		getInboundDetailsById,
		getTreeByGroup,
		getInboundDetailsByBizNo
	} from '@/api/warehouseManagement'
	import {
		getByCode
	} from '@/api/pda/common'
	import dayjs from 'dayjs'
	import {
		outputSceneState
	} from '../common'
	import {
		post,
		postJ,
		get,
		getJ
	} from '@/utils/api.js'
	import WarehouseChoose from '@/components/WarehouseChoose'
	import {
		warehousingType,
		inputStatus,
		emergencyState,
		warehousingMaterialListTable,
		getDictName,
		materialType
	} from '../enum.js'
	import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
	// import addDetails from '@/components/addDetails'
	import UploadFileNew from '@/components/UploadFileNew'
	// import { getRuleNo } from '@/utils/utils.js'
	// import dictMixins from '@/mixins/dictMixins.js'
	export default {
		components: {
			WarehouseChoose,
			baTreePicker,
			UploadFileNew
		},
		// mixins: [dictMixins],
		data() {
			return {
				statusLabelList: ['未提交', '审核中', '审核通过', '已驳回'],
				goodsLists: [], // 物品类型
				assetTypeName: '', // 物品类型名称
				timeShow: false,
				packingSpecificationOption: [], // 包装规格
				currentPackingSpecificationOption: [], // 当前包装规格
				currentSupplierListOption: [], // 当前供货商
				warehouseListOption: [], // 仓库列表
				currentTypeTime: Number(new Date()), // 当前时间类型的时间
				storageTime: '', // 入库时间
				currentProductIndex: null, // 当前产品索引
				currentPackingIndex: null, // 当前包装索引
				packingUnitsShow: false,
				typeTimeShow: false,
				suppliersShow: false,
				warehouseShow: false,
				timeTypeShow: false,
				statusShow: false,
				dictCodeList: [], // 字典列表
				curDateType: 'purchaseDate',
				qualityResultsOption: [
					[{
							label: '合格',
							value: 1
						},
						{
							label: '不合格',
							value: 2
						}
					]
				], // 质检状态 0未检 1已检
				qualityResults: {
					1: '合格',
					2: '不合格'
				}, // 质检结果 1合格 2不合格
				curDateTypeLabel: {
					purchaseDate: '采购日期',
					productionDate: '生产日期'
				},
				timeTypeOption: [
					[{
							name: '采购日期',
							prop: 'purchaseDate'
						},
						{
							name: '生产日期',
							prop: 'productionDate'
						}
					]
				], // 时间类型
				collapseOpen: 'collapse1',
				emergencyState,
				warehousingType,
				materialType,
				outputSceneState,
				inputStatus,
				getDictName,
				detailOpen: false,
				codeOpen: false,
				deptList: [], //部门
				supplierList: [], //供应商
				formData: {
					type: 1, // 入库
					bizType: '1', // 入库场景
					storageTime: '', // 入库时间
					extInfo: {}, // 扩展信息
					sourceBizNo: '', // 来源单据编号
					fromUser: '', // 送货人
					remark: '' // 备注
				},
				statusList: [{
						id: 1,
						name: '紧急'
					},
					{
						id: 2,
						name: '中等'
					},
					{
						id: 1,
						name: '普通'
					}
				], //紧急状态
				pickerIndex: 0,
				productList: [],
				userList: [],
				rules: {
					assetType: {
						type: 'number',
						required: true,
						message: '请选择入库产品类型',
						trigger: ['blur', 'change']
					},
					bizType: {
						type: 'number',
						required: true,
						message: '请选择入库场景',
						trigger: ['blur', 'change']
					}
					// contentImage: {
					//   type: 'array',
					//   required: true,
					//   message: '请上传附件',
					//   trigger: ['blur', 'change']
					// }
				},
				settingIndex: 0
			}
		},
		onShow() {
			this.collapseOpen = 'collapse1'
		},
		onLoad(options) {
			this.getListItems() // 物品类型
			if (options.id) {
				getInboundDetailsById(options.id).then(res => {
					this.productList = res.outInDetailList.map(item => {
						return {
							...item,
							packingSpecificationLabel: item.extField.packingSpecification ? item.extField
								.packingSpecification.split(',') : [],
							isSave: true
						}
					})
					this.formData = res
				})
			} else {
				getInboundDetailsByBizNo(options.bizNo).then(res => {
					this.productList = res.outInDetailList.map(item => {
						return {
							...item,
							packingSpecificationLabel: item.extField.packingSpecification ? item.extField
								.packingSpecification.split(',') : [],
							isSave: true
						}
					})
					this.formData = res
				})
			}
		},
		computed: {
			listRules() {
				return this.productList.reduce((cur, pre, index) => {
					return {
						...cur,
						[`productList.${index}.batchNo`]: {
							type: 'string',
							required: true,
							trigger: ['blur', 'change']
						},
						[`productList.${index}.packingQuantity`]: {
							type: 'number',
							required: true,
							trigger: ['blur', 'change']
						},
						[`productList.${index}.packingUnit`]: {
							type: 'string',
							required: true,
							trigger: ['blur', 'change']
						},
						[`productList.${index}.warehouseId`]: {
							type: 'string',
							required: true,
							trigger: ['blur', 'change']
						}
					}
				}, {})
			}
		},
		methods: {
			getGoodsListsLabel(assetType) {
				let arr = assetType ? assetType.split(',') : []
				let label = arr.reduce((pre, cur) => {
					console.log(cur)
					console.log(pre)
					return (pre ? pre + '/' : '') + this.goodsLists.find(item => item.id == cur)?.name
				}, '')
				return label
			},
			formatter(dataTime) {
				return dayjs(dataTime).format('YYYY-MM-DD HH:mm:ss')
			},
			// 获取物品列表
			getListItems() {
				getTreeByGroup({
					type: 2
				}).then(res => {
					this.goodsLists = res
				})
			}
		}
	}
</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;
				}
			}
		}

		.ckmx {
			color: #70b603;
			font-size: 28rpx;
			font-weight: bold;
			padding: 20rpx;
			display: flex;
			justify-content: flex-end;
		}
	}

	.collapse {
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}

	/deep/.cLine .u-line:nth-child(1) {
		border-bottom: none !important;
	}

	.detail-box {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;

		/deep/uni-button {
			margin: 0 !important;
			width: 180rpx;
		}

		.selectEnterType {
			margin-left: 10rpx !important;
		}
	}

	.footBox {
		position: fixed;
		left: 0px;
		bottom: 0px;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 100%;
			height: 100%;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.reg {
			background: $u-success-dark;
		}

		.add {
			background: $uni-color-primary;
		}

		.uni-icons {
			margin-right: 8rpx !important;
		}
	}

	.listBox {
		padding: 20rpx 10rpx;
		border-bottom: 1px #f2f2f2 solid;
		position: relative;

		&.code {
			.label {
				width: 120rpx !important;
			}
		}

		.z_list {
			height: 100% !important;
			max-height: 500rpx;

			.material {
				margin-top: 10rpx;

				.left {
					width: 40rpx;
				}

				.zdy_check {
					width: 30rpx;
					height: 30rpx;
					border: 2rpx solid #c8c9cc;
					border-radius: 4rpx;
				}

				.check_active {
					background: $theme-color;
					border: 2rpx solid $theme-color;

					/deep/ .u-icon__icon {
						color: #fff !important;
					}
				}

				.content_table {
					width: 100%;
					border: 2rpx solid $border-color;


					.item {
						display: flex;
						border-bottom: 2rpx solid $border-color;

						.lable {
							width: 200rpx;
							text-align: center;
							background-color: #f7f9fa;
							font-size: 26rpx;
							border-right: 2rpx solid $border-color;
							flex-shrink: 0;
						}

						.ww80 {
							width: 80rpx;
						}

						.content {
							width: 500rpx;
							min-height: 64rpx;
							font-size: 28rpx;
							line-height: 28rpx;
							font-style: normal;
							font-weight: 400;
							padding: 18rpx 8rpx;
							box-sizing: border-box;
							word-wrap: break-word;
							flex-grow: 1 !important;
						}

						.input_box {
							padding: 0 !important;
						}

						.content_num {
							display: flex;
							align-items: center;
							padding: 0 4rpx;

							/deep/ .uni-input-input {
								width: 200rpx;
								border: 2rpx solid #f0f8f2;
								background: #f0f8f2;
								color: $theme-color;
							}

							.unit {
								padding: 0 4rpx;
								font-size: 28rpx;
								color: #404446;
							}
						}

						&:last-child {
							border-bottom: none;
						}
					}

				}
			}
		}

		.more {
			position: absolute;
			bottom: 26rpx;
			right: 30rpx;
			font-size: 28rpx;
			color: #666;
		}
	}

	.selectTime {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 10px;

		.title {
			flex: 1;
			font-size: 28rpx;
			font-weight: bold;
		}

		.timeBox {
			display: flex;
			width: 500rpx;

			.firstBtn {
				margin-right: 10rpx;
			}
		}
	}

	.listBox:last-child {
		border: none !important;
	}

	.textBox {
		border: 1px #f2f2f2 solid;
		height: 160px;
		display: block;
		width: auto !important;
	}

	.saveBtn {
		width: 50%;
		margin: 40rpx auto;
	}

	.top-css {
		border-bottom: 1px solid rgb(207, 204, 204);
	}

	.footBox-container {
		// height: 100rpx;
		width: 100vw;
	}

	.footBox {
		position: fixed;
		left: 0px;
		bottom: 0px;
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 100%;
			height: 100%;
			text-align: center;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.add {
			background: $uni-color-success;
		}

		.reg {
			background: $u-success-dark;
		}

		.uni-icons {
			margin-right: 8rpx !important;
			font-weight: bold;
		}
	}
</style>