aiot-app/pages/warehouse/outHouse/addStock.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="物品类型" class="required-form" borderBottom prop="assetType">
				<view class="assetType_box" @click="openPicker">{{ assetTypeName ? assetTypeName : '请选择产品类型' }}</view>
			</u-form-item>
			<u-form-item label="出库场景" class="required-form" prop="bizType" borderBottom>
				<picker :disabled="!!(productList && productList.length)" @change="e => handlePicker(e, outputSceneState, 'bizType')" :value="pickerIndex" :range="outputSceneState" range-key="text">
					<u-input :value="sceneStateFilter(formData.bizType)" :disableColor="!!(productList && productList.length) ? '#F5F7FA' : '#fff'" placeholder="请选择" disabled type="select" />
				</picker>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="来源单据" prop="documentSource" borderBottom>
				<u-input type="text" placeholder="请输入" v-model="formData.sourceBizNo" />
			</u-form-item>
			<u-form-item label="出库登记人" prop="createUserName" borderBottom>
				<u-input disableColor="#ffffff" :value="formData.createUserName" placeholder="请选择" disabled type="text" />
			</u-form-item>
			<u-form-item class="required-form" label="领料部门" prop="deliveryName" borderBottom>
				<view class="assetType_box" @click="openDepartmentPicker">{{ formData.extInfo.verifyDeptName ? formData.extInfo.verifyDeptName : '请选择领料部门' }}</view>
			</u-form-item>
			<u-form-item class="required-form" label="领料人" prop="deliveryPhone" borderBottom>
				<view class="assetType_box" @click="openUserPicker">{{ formData.fromUser ? formData.fromUser : '请选择领料人' }}</view>
			</u-form-item>
			<u-form-item label="备注" prop="remark" borderBottom>
				<u-input disableColor="#ffffff" :value="formData.remark" placeholder="请输入内容" type="text" />
			</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 class="footBox">
			<view class="reg" @click="submit">
				<uni-icons custom-prefix="iconfont" size="20" color="#fff"></uni-icons>
				提交
			</view>
		</view>
		<!-- 选择物品类型 -->
		<ba-tree-picker ref="treePicker" :multiple="true" @select-change="confirm" title="选择物品类型" :localdata="goodsLists" valueKey="id" textKey="name" childrenKey="child" />
		<!-- 选择领料部门 -->
		<ba-tree-picker
			ref="departmentPicker"
			:multiple="false"
			@select-change="departmentConfirm"
			title="选择领料部门"
			:localdata="departmentOption"
			valueKey="id"
			textKey="name"
			childrenKey="children" />
		<!-- 选择领料人 -->
		<ba-tree-picker ref="userPicker" :multiple="false" @select-change="userConfirm" title="选择领料人" :localdata="userOption" valueKey="id" textKey="name" childrenKey="children" />
	</view>
</template>

<script>
	// import ScanCode from '@/components/ScanCode.vue'
	import { toTreeData } from '@/utils/utils.js'
	import {
		getTreeByGroup,
		contactQueryByCategoryIdsAPI,
		getCode,
		getCategoryPackageDisposition,
		getWarehouseList,
		getAssetNum,
		storage,
		qualityInspectionTwo,
		submitTwo
	} from '@/api/warehouseManagement'
	import { listOrganizations, getUserPage } from '@/api/common'
	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 dictMixins from '@/mixins/dictMixins.js'
	export default {
		components: {
			WarehouseChoose,
			baTreePicker,
			UploadFileNew
		},
		data() {
			return {
				userOption: [], // 用户列表
				departmentOption: [], // 部门列表
				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'
		},
		beforeDestroy() {
			uni.$off('setSelectList') // 每次进来先 移除全局自定义事件监听器
		},
		onLoad() {
			this.getListItems() // 物品类型
			this.initDeptData() // 部门列表
			const userInfo = uni.getStorageSync('userInfo')
			this.formData.createUserName = userInfo.name
			uni.$on('setSelectList', async data => {
				if (data?.length) {
					console.log(data)
					setTimeout(() => {
						this.detailOpen = !this.detailOpen
						this.$refs.collapse && this.$refs.collapse.resize()
					}, 0)
				}
			})
			// 明细信息填写
			uni.$on('batchNumBack', productList => {
				if (productList?.length) {
					this.productList = productList
				}
			})
		},
		mounted() {
			// this.getAddDetails();
		},
		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: {
			// 部门列表
			async initDeptData() {
				let deptTreeList = await listOrganizations()
				this.departmentOption = toTreeData({
					data: deptTreeList,
					idField: 'id',
					parentIdField: 'parentId'
				})
			},
			async getStaffList(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let res = await getUserPage({
					groupId: id,
					size: 9999,
					page: 1
				})
				uni.hideLoading()
				this.userOption = res.list
			},
			// 打开领料部门选择器
			openDepartmentPicker() {
				this.$refs.departmentPicker._show()
			},
			// 打开领料人选择器
			openUserPicker() {
				this.$refs.userPicker._show()
			},
			sceneStateFilter(bizType) {
				if (bizType) {
					return this.outputSceneState.filter(item => item.value == bizType)[0].text
				}
			},
			formatter(dataTime) {
				return dayjs(dataTime).format('YYYY-MM-DD HH:mm:ss')
			},
			openPicker() {
				this.$refs.treePicker._show()
			},
			// 获取物品列表
			getListItems() {
				getTreeByGroup({ type: 2 }).then(res => {
					this.goodsLists = res
				})
			},
			selectType() {
				if (!this.formData.extInfo.assetType) {
					uni.showToast({
						title: '请选择出库类型',
						icon: 'none'
					})
					return
				}
				if (!this.formData.bizType) {
					uni.showToast({
						title: '请选择出库场景',
						icon: 'none'
					})
					return
				}
				// const storageKey = Date.now() + ''
				// uni.setStorageSync(storageKey, this.warehousingMaterialList)
				uni.navigateTo({
					url: '/pages/warehouse/outHouse/selectOutType?assetType=' + this.formData.extInfo.assetType
				})
			},
			userConfirm(data, name) {
				this.formData.fromId = data[0]
				this.formData.fromUser = name
			},
			departmentConfirm(data, name, allList) {
				this.formData.extInfo.verifyDeptCode = data[0]
				this.formData.extInfo.verifyDeptName = name
				this.formData.fromId = ''
				this.formData.fromUser = ''
				this.getStaffList(data[0])
			},
			confirm(data, name, allList) {
				this.assetTypeName = name
				this.formData.extInfo.assetType = allList.map(item => item.id)
			},
			// 抬头下拉信息保存
			handlePicker(e, list, idKey, nameKey) {
				if (idKey) {
					this.formData[idKey] = list[e?.detail.value]?.value
				}
				if (nameKey) {
					this.formData[nameKey] = list[e?.detail.value]?.text
				}
				this.$nextTick(() => {
					if (idKey === 'assetType' || idKey === 'bizType') {
						this.$refs.formRef.validateField(idKey)
					}
				})
			},
			// 部门确认
			deptConfirm(data, name) {
				this.formData.deptName = name
				this.formData.deptCode = data[0]
			},
			// 部门确认
			verifyDeptConfirm(data, name) {
				this.formData.verifyDeptCode = data[0]
				this.formData.verifyDeptName = name
				this.formData.verifyId = ''
				this.formData.verifyName = ''
				this.getUser(data[0])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBox {
		padding-bottom: 120rpx;

		/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;
			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: 670rpx;
					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>