eam-pda/src/pages/outLocation/addForm.vue

<template>
	<!-- 添加维修工单 -->
	<view class="add-form-container">
		<u-form :model="form" ref="formRef" label-width="160rpx">
			<u-form-item label="申请人" prop="applyName" required class='disabled'>
				<u-input v-model="form.applyName" placeholder="请输入申请人" disabled />
			</u-form-item>
			<u-form-item label="申请部门" prop="applyDeptName" required class='disabled'>
				<u-input v-model="form.applyDeptName" placeholder="请输入申请部门" disabled />
			</u-form-item>
			<u-form-item label="审批人" prop="approveName" required class='disabled'>
				<u-input v-model="form.approveName" placeholder="请输入审批人" disabled />
			</u-form-item>
		</u-form>
		<view class="list">
			<view class="title">
				<span>*</span>申领信息
			</view>
			<view class="item " v-for="(item,index) in form.subList" :key="index">
				<view class="item-box">
					<view class="spare-title">
						<view class="title-txt">
							备件名称：{{item.itemName}}
						</view>
					</view>
					<u-row gutter="16">
						<!-- 	<u-col :span="24">
							<view class="dec">
								库位：{{item.locationNumber}}
							</view>
						</u-col> -->

						<u-col :span="24">
							<view class="dec">
								已出库数量:{{item.receiveQty}}
							</view>
						</u-col>
						<u-col :span="24">
							<view class="dec">
								申请数量:{{item.qty}}
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="title">
				<span>*</span>出库信息
			</view>
			<view class="item " v-for="(item,index) in form.itemNumbers" :key="index">
				<view class="item-box">
					<view class="spare-title">
						<view class="title-txt">
							备件名称：{{item.itemName}}
						</view>
					</view>
					<u-row gutter="16">
						<u-col :span="24">
							<view class="dec">
								出库数量：{{item.qty}}
							</view>
						</u-col>
						<u-col :span="24">
							<view class="dec">
								申请数量：{{item.applyQty}}
							</view>
						</u-col>
						<u-col :span="24">
							<view class="dec">
								库位编码：{{item.locationNumber}}
							</view>
						</u-col>
						<!-- <u-col :span="24">
							<view class="dec">
								库位名称：{{item.locationName}}
							</view>
						</u-col> -->
						<u-col :span="24">
							<view class="dec">
								库位类型：{{item.isInAccount == 'FALSE'?'帐外库' :'帐内库'}}
							</view>
						</u-col>
					</u-row>
				</view>
				<u-icon name="minus-circle" color="#aaaaaa" size="60" @click="delSpareParts(item,index)"></u-icon>
			</view>
			<view class="add-btn">
				<u-button type="primary" @click="open"><u-icon name="plus-circle" color="#ffffff"
						size="36"></u-icon>添加备件</u-button>
			</view>
		</view>
		<view class="footer">
			<view class="btns">
				<button class="reset" @click="reset">重置</button>
				<button class="sure" @click="submit" :loading='loading' :disabled='loading'>确定</button>
			</view>
			<view style="height: constant(safe-area-inset-bottom); height: env(safe-area-inset-bottom);"></view>
		</view>
		<!-- 添加备件 -->
		<u-popup v-model="isPopupShow" mode="center" border-radius="14">
			<view class="popup-title">添加备件</view>
			<scroll-view scroll-y="true" style="max-height:60vh;">
				<view class="popup">
					<u-form :model="form1" ref="form1Ref" label-width="180rpx">
						<u-form-item label="库位" prop="locationNumber" required>
							<u-input v-model="form1.locationNumber" placeholder="请输入库位" @blur="blur()"
								@confirm="handelScanMsg" :focus='isFocus' />
				
						</u-form-item>
						<u-form-item :label="`备件名称`" prop="itemNumber" required class="disabled">
							<view class="select">
								<u-input v-model="form1.itemName" placeholder="请选择备件" disabled />
							</view>
						</u-form-item>
						<u-form-item label="申请数量" prop="applyQty" required class="disabled">
							<u-input v-model="form1.applyQty" type="number" disabled placeholder="请输入申请数量" />
						</u-form-item>
						<u-form-item label="已出库数量" prop="receiveQty" required class="disabled">
							<u-input v-model="form1.receiveQty" type="number" disabled placeholder="请输入已出库数量" />
						</u-form-item>
						<u-form-item label="库存数量" prop="stockQty" required class="disabled">
							<u-input v-model="form1.stockQty" type="number" disabled placeholder="请输入库存数量" />
						</u-form-item>
						<u-form-item label="剩余出库数量" prop="totalReception" required class="disabled">
							<u-input v-model="form1.totalReception" type="number" disabled placeholder="请输入出库数量" />
						</u-form-item>
						<u-form-item label="出库数量" prop="qty" required>
							<u-input v-model="form1.qty" type="number" placeholder="请输入出库数量" />
						</u-form-item>
						<u-form-item label="描述" prop="describes">
							<u-input v-model="form1.describes" placeholder="请输入描述" />
						</u-form-item>
					</u-form>
				</view>
			</scroll-view>
			<view class="popup-footer">
				<view @click="isPopupShow = false">取消</view>
				<view class="sure" @click="addSpare">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import * as outLocationApi from "@/api/outLocation"
	import * as locationApi from "@/api/location"
	const { proxy } = getCurrentInstance()

	const loading = ref(false)
	const orderList = ref([])//订单信息
	// 备件弹窗
	const isPopupShow = ref(false)
	const form = ref({
		id: '',
		number: '',
		supplierName: '',
		itemNumbers: [],
		subList: []
	})
	const form1 = ref({
		itemNumber: "",
		itemName: '',
		locationNumber: '',
		applyQty: '',
		receiveQty: '',
		stockQty: '',
		totalReception:'',
		qty: ''
	})
	const isShow = ref(false)
	const isInAccount = ref('FALSE')

	const isFocus = ref(false)
	const msg = ref('')
	// 触发提交表单
	function submit() {
		if (form.value.itemNumbers.length === 0) {
			proxy.$modal.showToast('请添加出库信息')
			return;
		}
		proxy.$modal.confirm('是否添加出库信息').then(() => {
			proxy.$modal.loading('加载中')
			loading.value = true
			outLocationApi.outLocationCreat(form.value).then((res) => {
				proxy.$modal.closeLoading()
				if (res.data) {
					proxy.$modal.showToast('添加成功')
					setTimeout(() => {
						proxy.$tab.navigateBack()
						loading.value = false
					}, 1500)
				} else {
					proxy.$modal.showToast('添加失败')
					loading.value = false
				}
			}).catch(() => {
				proxy.$modal.closeLoading()
				loading.value = false
			})
		})

	}
	// 重置
	function reset() {
		form.value.itemNumbers = []
	}
	// 获取订单信息详情
	async function getInLocationDetail() {
		// let itemNumbers = form.value.itemNumbers.map(item=>{
		// 	return {
		// 		itemNumber:item.itemNumber,
		// 		qty:item.qty,
		// 		locationNumber:item.locationNumber,
		// 	}
		// })
		await outLocationApi.getOutLocationDetail({
			id: form.value.id,
			number: form.value.number,
			// itemNumbers:itemNumbers  || []
		}).then(res => {
			form.value.applyName = res.data.applyName
			form.value.approveName = res.data.approveName
			form.value.applyDeptName = res.data.applyDeptName
			form.value.subList = res.data.subList
		}).catch(() => { })
	}
	// 打开弹窗
	function open() {
		form1.value = {
			itemNumber: "",
			itemName: '',
			locationNumber: '',
			applyQty: '',
			receiveQty: '',
			stockQty: '',
			qty: ''
		}
		isPopupShow.value = true
		isShow.value = false
		isFocus.value = true
	}
	// 添加备件
	function addSpare() {
		// 校验
		if (!form1.value.locationNumber) {
			proxy.$modal.showToast('请选择库位')
			return;
		}
		if (!form1.value.itemNumber) {
			proxy.$modal.showToast(msg.value)
			return;
		}

		if (!form1.value.qty) {
			proxy.$modal.showToast(`请输入数量`)
			return;
		}
		if (Number(form1.value.qty) + Number(form1.value.receiveQty) > Number(form1.value.applyQty)) {
			proxy.$modal.showToast('已出库数量和出库数量不可大于申请数量')
			return;
		}
		if (Number(form1.value.qty) > Number(form1.value.totalReception)) {
			proxy.$modal.showToast('出库数量不可大于剩余出库数量')
			return;
		}
		if (form.value.itemNumbers && form.value.itemNumbers.length > 0) {
			let arr = form.value.itemNumbers.filter(item => item.locationNumber == form1.value.locationNumber)
			if (arr && arr.length > 0) {
				proxy.$modal.showToast('该库位已添加')
				return;
			}
			let arr1 = form.value.subList.filter(item => item.itemNumber == form1.value.itemNumber)
			if (!arr1 || (arr1 && arr1.length == 0)) {
				proxy.$modal.showToast('申领信息没有该备件')
				return;
			}
		}
		form.value.itemNumbers.push(form1.value)
		isPopupShow.value = false
	}
	// 删除备件
	function delSpareParts(item,index) {
		let bol = form.value.itemNumbers.some(cur=>cur.itemNumber == item.itemNumber&&item.isInAccount == 'FALSE'&&cur.isInAccount == 'TRUE')
		if(bol){
			proxy.$modal.showToast('请先删除该备件得帐内库')
			return;
		}
		form.value.itemNumbers.splice(index, 1)
	}
	function getLocation() {
		let itemNumbers = form.value.itemNumbers.map(item=>{
			return {
				itemNumber:item.itemNumber,
				qty:item.qty,
				locationNumber:item.locationNumber,
			}
		})
		locationApi.getOutLocation({
			number: form1.value.locationNumber,
			id: form.value.id,
			itemNumbers:itemNumbers
		}).then(res => {
			if (!res.data) {
			msg.value = res.msg
			form1.value.areaNumber = '';
			form1.value.itemName = '';
			form1.value.itemNumber = '';
			form1.value.receiveQty ='';
			form1.value.applyQty ='';
			form1.value.stockQty = '';
			form1.value.totalReception ='';
			form1.value.isInAccount ='';
			isInAccount.value ='';
				return;
			}
			form1.value.areaNumber = res.data.areaNumber;
			form1.value.itemName = res.data.itemName;
			form1.value.itemNumber = res.data.itemNumber;
			form1.value.receiveQty = res.data.receiveQty || 0;
			form1.value.applyQty = res.data.applyQty || 0;
			form1.value.stockQty = res.data.qty || 0;
			form1.value.totalReception = res.data.totalReception || 0;
			form1.value.isInAccount = res.data.isInAccount;
			isInAccount.value = res.data.isInAccount || ''
			
			// this.itemNumber = res.data.itemNumber || ''
		}).catch((error) => {
			msg.value = error.msg
			form1.value.areaNumber = '';
			form1.value.itemName = '';
			form1.value.itemNumber = '';
			form1.value.receiveQty = '';
			form1.value.applyQty = '';
			form1.value.stockQty = '';
			isInAccount.value = '';
		})
	}
	function blur() {
		if (form1.value.locationNumber) {
			getLocation()
		}
	}
	function handelScanMsg() {
		getLocation()
	}
	onLoad(async (option) => {
		if (option.data && JSON.parse(decodeURIComponent(option.data)) && JSON.parse(decodeURIComponent(option
			.data)).id) {
			let formData = JSON.parse(decodeURIComponent(option.data))
			form.value.supplierName = formData.supplierName
			form.value.number = formData.number
			form.value.id = formData.id
		}
		await getInLocationDetail()
	})
</script>

<style lang="scss" scoped>
	.add-form-container {
		min-height: calc(100vh - 140rpx);
		background: white;
		padding: 0px 0rpx 140rpx;
	}

	.u-form-item {
		padding: 20rpx 30rpx;
	}

	.disabled {
		background: #f5f5f5;
	}

	.footer {
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		z-index: 22;
	}

	.btns {
		display: flex;


		button {
			flex: 1;
		}

		.sure {
			background: #409eff;
			color: white;
			border-radius: 0px;

			&::after {
				border: 1px solid #409eff;
				border-radius: 0px;
			}
		}

		.reset {
			background: #F5F5F5;
			border-radius: 0px;

			&::after {
				border-radius: 0px;
			}
		}
	}

	.right-button {
		background: #409eff;
		color: white;
		padding: 0rpx 30rpx;
		border-radius: 16rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.select {
		display: flex;
		align-items: center;
		height: 72rpx;
		width: 100%;

		.input {
			flex: 1;
			font-size: 28rpx;
			color: #000000;
		}

		.placeholder {
			flex: 1;
			font-size: 28rpx;
			color: rgb(192, 196, 204);

		}
	}

	.title {
		padding: 32rpx 0rpx;
		position: relative;

		span {
			position: absolute;
			left: -16rpx;
			color: #fa3534;
			top: 19px;
		}
	}

	.list {
		padding: 0rpx 30rpx;

		.item {
			display: flex;
			margin-bottom: 20rpx;

			.item-box {
				background: #F5F5F5;
				border-radius: 12rpx;
				flex: 1;
				width: 0rpx;
			}

			.spare-title {
				padding: 20rpx 30rpx;
				border-bottom: 1px solid #e4e4e4;

				.title-txt {
					color: #409eff;
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.dec {
				color: #9c9c9c;
				padding: 20rpx 30rpx 20rpx;
			}

		}
	}

	.add-btn {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.popup-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #409eff;
		padding: 30rpx 30rpx 0px
	}

	.popup {
		width: 600rpx;
		padding: 30rpx 0rpx 30rpx;

	}

	.popup-footer {
		display: flex;
		border-top: 1px solid #e4e4e4;

		view {
			line-height: 100rpx;
			flex: 1;
			text-align: center;

			&.sure {
				color: #409eff;
			}
		}
	}

	::v-deep .u-checkbox-group {
		display: grid !important;
	}
</style>