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>

		<u-form labelPosition="left" :model="formData" :rules="rules" ref="formRef" labelWidth="260" labelAlign="right" class="baseForm">
			<u-form-item label="出库单号" borderBottom prop="assetType">
				<view class="assetType_box">{{ formData.bizNo }}</view>
			</u-form-item>
			<u-form-item label="物品类型" borderBottom prop="assetType">
				<view class="assetType_box">
					{{ getGoodsListsLabel(formData.extInfo.assetType) }}
				</view>
			</u-form-item>
			<u-form-item label="出库场景" prop="bizType" borderBottom>
				<view class="assetType_box">{{ outputSceneState.filter(item => item.value == formData.bizType)[0].text }}</view>
			</u-form-item>
			<u-form-item label="来源单据" prop="documentSource" borderBottom>
				<view class="assetType_box">{{ formData.sourceBizNo }}</view>
			</u-form-item>
			<u-form-item label="出库登记人" prop="createUserName" borderBottom>
				<view class="assetType_box" @click="timeShow = true">{{ formData.createUserName }}</view>
			</u-form-item>
			<u-form-item label="领料人" prop="deliveryName" borderBottom>
				<view class="assetType_box" @click="timeShow = true">{{ formData.fromUser }}</view>
			</u-form-item>
			<u-form-item label="领料部门" prop="deliveryPhone" borderBottom>
				<view class="assetType_box" @click="timeShow = true">{{ formData.extInfo.deliveryPhone }}</view>
			</u-form-item>
			<u-form-item label="状态" prop="stautus" borderBottom>
				<view class="assetType_box" @click="timeShow = true">{{ statusLabelList[formData.verifyStatus] }}</view>
			</u-form-item>
			<u-form-item label="备注" prop="remark" borderBottom>
				<view class="assetType_box" @click="timeShow = true">{{ formData.remark }}</view>
			</u-form-item>
		</u-form>

		<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="listTit">
								<view class="name">{{ item.categoryCode }}</view>
							</view>
							<view class="listCont" :class="{ save: item.isSave }">
								<view class="item w100">
									<u-form-item :label="`物品名称`">
										{{ item.categoryName }}
									</u-form-item>
								</view>
								<view class="item w100">
									<u-form-item label="包装规格" prop="packingSpecificationLabel">
										<u-tag style="margin-right: 5rpx" v-for="ite in item.packingSpecificationLabel" :text="ite"></u-tag>
									</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="批次号" :prop="`productList.${index}.batchNo`">
										{{ item.batchNo }}
									</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="数量" :prop="`productList.${index}.packingQuantity`">
										{{ item.packingQuantity }}
									</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="包装单位" :prop="`productList.${index}.packingUnit`">
										{{ item.packingUnit }}
									</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="仓库" :prop="`productList.${index}.warehouseId`">
										{{ item.warehouseName }}
									</u-form-item>
								</view>
								<view class="item w100">
									<u-form-item label="供应商" :prop="`productList.${index}.supplierName`">
										{{ item.supplierName }}
									</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="计量数量" prop="measureQuantity">{{ item.measureQuantity }}</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="计量单位" prop="measureUnit">{{ item.measureUnit }}</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="重量" prop="weight">{{ item.weight }}</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="重量单位" prop="weightUnit">{{ item.weightUnit }}</u-form-item>
								</view>
								<view class="item">
									<u-form-item label="是否拆包" prop="isUnpack">{{ item.isUnpack ? '是' : '否' }}</u-form-item>
								</view>
							</view>
							<u-list @scrolltolower="scrolltolower" 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>
				</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;
		}
	}
	.required-form-text {
		/deep/ .u-form-item__body__right {
			overflow: hidden;
			.u-form-item__body__right__content {
				width: 100%;
				display: inline-block !important;
				width: 100%;
			}
		}
	}
	.picList {
		display: flex;
		align-items: center;
		justify-items: flex-start;
		flex-wrap: wrap;
	}
	/deep/.baseForm {
		.u-form-item__body {
			padding: 0px !important;
		}
		.assetType_box {
			padding: 12rpx 18rpx;
			height: 60rpx;
			box-sizing: border-box;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	/deep/.picList .u-image {
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	/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;
			}
		}
		.listTit {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			/deep/uni-button {
				margin-right: 20rpx;
				width: 100rpx;

				&.assets {
					width: 180rpx;
				}
			}
			.name {
				width: 50%;
				margin-left: 10px;
				overflow: hidden;
				white-space: nowrap;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				font-size: 30rpx;
			}

			.btn {
				display: flex;
				justify-content: flex-end;
			}

			.weight {
				width: 30%;
				font-size: 30rpx;
				margin-left: auto;
				margin-right: 60rpx;
				position: relative;
				display: flex;

				input {
					margin-right: 10rpx;
					border: 1px solid black;
					width: 40%;
					height: 20rpx;
				}
			}

			.weight::after {
				position: absolute;
				right: -30rpx;
				top: 50%;
				content: '';
				background: #eee;
				width: 1px;
				height: 28rpx;
				margin-top: -14rpx;
			}
		}
		.z_list {
			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: 24rpx;
								color: #404446;
							}
						}

						.ww400 {
							/deep/ .uni-input-input {
								width: 400rpx;
							}
						}

						.pd4 {
							padding: 4rpx 8rpx;
						}

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

					.ww55 {
						width: 55%;
					}

					.ww45 {
						width: 45%;
					}

					.ww50 {
						width: 50%;
					}

					.ww30 {
						width: 30%;
					}

					.ww70 {
						width: 70%;
					}

					.ww80 {
						width: 80%;
					}

					.ww20 {
						width: 20%;
					}

					.check {
						width: 30rpx;
						height: 30rpx;
					}

					.tag_box {
						padding: 2rpx 10rpx;
						margin-right: 12rpx;
						background: #e6a23c;
						font-size: 22rpx;
						color: #fff;
						border-radius: 4rpx;
					}
				}
			}
		}
		.more {
			position: absolute;
			bottom: 26rpx;
			right: 30rpx;
			font-size: 28rpx;
			color: #666;
		}
	}

	.listCont {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
		margin-left: 10rpx;

		&.save {
			.u-input {
				border: none;
			}
		}
		.u-input {
			border: 1px solid rgb(229, 229, 229);
			height: 15rpx !important;
		}

		.item {
			width: 47%;
			font-size: 28rpx;
			margin-bottom: 10rpx;
			margin-right: 3%;
			// line-height: 45rpx;
			// overflow: hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
			// -o-text-overflow: ellipsis;
			// color: #000;
			// display: flex;
			/deep/.u-form-item__body {
				padding: 0 !important;
			}
			/deep/.u-input__content__field-wrapper__field,
			/deep/.u-form-item {
				font-size: 28rpx !important;
			}

			text.label {
				width: 120rpx;
				display: inline-block;
				text-align: right;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			/deep/.uni-date__x-input {
				height: 40rpx;
				font-size: 28rpx;
			}

			/deep/.uni-date {
				width: 48%;
				display: inline-block;
				.uni-icons {
					display: none !important;
				}
				.uni-date-x {
					padding: 0 !important;
				}
			}
		}

		.item text {
			color: #666;
		}
	}
	.selectTime {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 10rpx;
		.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);
	}
</style>