consumoption/subpkg/pages/order-outbond/batch.vue

<template>
	<view class="query-wrap">
		<view class="inner-item">
			<view class="item-stats" @click.stop="addBatch()">
				添加批次
			</view>
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label-podnme">
						耗材编码
					</view>
					<view class="shuo-unit">
						{{formData.prodCode}}
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label-podnme">
						医保编码
					</view>
					<view class="shuo-unit">
						{{formData.hiCode}}
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label-podnme">
						{{formData.prodName}}
					</view>
					<view class="shuo-unit">
						<span>{{ formData.purcUnt }} ({{ formData.convrat }}{{ formData.prcUnt }}/{{
		  		                  formData.purcUnt
		  		                }})</span>
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item">
					<view class="shuo-label">
						已出库数量:
					</view>
					<view class="shuo-cont">
						{{formData.delvCntYck}}
					</view>
				</view>
				<view class="shuo-item">
					<view class="shuo-label">
						剩余出库量:
					</view>
					<view class="shuo-cont">
						{{formData.toDelvCnt}}
					</view>
				</view>
			</view>
		</view>
		<view class="inner-item" v-for="(item,idex) in batchData[formData.id]" :key="idex">
			<view class="text-title">
				{{idex+1}}
			</view>
			<liu-swipe-action :index="idex" @clickItem="clickItem(idex)">
				<view class="inventory-item">
					<view class="shuo-item">
						<view class="shuo-label">
							批号:
						</view>
						<view class="shuo-cont">
							{{item.lotNum}}
						</view>
					</view>
					<view class="shuo-item">
						<view class="shuo-label">
							本次出库数:
						</view>
						<view class="shuo-cont">
							{{item.delvCnt}}
						</view>
					</view>
				</view>
				<view class="inventory-item">
					<view class="shuo-item-name">
						<view class="shuo-label">
							生产日期:
						</view>
						<view class="shuo-cont">
							{{forMatTime(item.manuDate)}}
						</view>
					</view>
				</view>
				<view class="inventory-item">
					<view class="shuo-item-name">
						<view class="shuo-label">
							有效期至:
						</view>
						<view class="shuo-cont">
							{{forMatTime(item.prodExpy)}}
						</view>
					</view>
				</view>
			</liu-swipe-action>
		</view>
		<view class="empty-cont" v-if="listData.length==0">
			暂无明细
		</view>
		<uni-popup ref="popup">
			<uni-popup-dialog type="warn" :before-close="true" cancelText="取消" confirmText="确定" @confirm="dialogConfirm"
				@close="dialogClose">
				<UniForm ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<UniFormItem label="批号" required name="lotNum" label-width=100>
						<uni-easyinput v-model="valiFormData.lotNum" placeholder="请输入批号" />
					</UniFormItem>
					<UniFormItem label="生产日期" required label-width=100>
						<UnidatetimePicker type="datetime" return-type="date" v-model="valiFormData.manuDate" />
					</UniFormItem>
					<UniFormItem label="有效期至" required label-width=100>
						<UnidatetimePicker type="datetime" return-type="date" v-model="valiFormData.prodExpy" />
					</UniFormItem>
					<UniFormItem label="出库数量" required label-width=100>
						<uni-number-box v-model="valiFormData.delvCnt" min="1" />
					</UniFormItem>
				</UniForm>
			</uni-popup-dialog>
		</uni-popup>
		<view class="botm-btn">
			<button type="default" plain="true" style="width:240rpx;line-height: 70rpx;background: #01A992;color:#fff"
				@click.stop="subMitData()">确定</button>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import moment from "moment";
	import UnidatetimePicker from '@/subpkg/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';
	import UniForm from '@/subpkg/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
	import UniFormItem from '@/subpkg/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item';
	const paging = {
		current: 1,
		size: 10000
	};
	export default {
		components: {
			UnidatetimePicker,
			UniForm,
			UniFormItem
		},
		data() {
			return {
				value: "",
				listData: [],
				formData: {},
				type: "",
				stas: "",
				delIndex: 0,
				icontext: "",
				valiFormData: {
					lotNum: "",
					manuDate: "",
					prodExpy: "",
					delvCnt: "1"
				},
				rules: {
					lotNum: {
						rules: [{
							required: true,
							errorMessage: '批号不能为空'
						}]
					},
				},
			}
		},
		computed: {
			...mapState(['batchData'])
		},
		onShow() {
			let that = this;
			this.$forceUpdate();
			uni.getStorage({
				key: 'batchDelsData',
				success: function(res) {
					let lnumData = that.batchData[res.data.id] || [];
					if (lnumData.length > 0) {
						let count = 0;
						lnumData.forEach((item) => {
							count += Number(item.delvCnt)
						})
						let newDevCnt = Number(res.data.toDelvCnt) - count;
						that.formData = {
							...res.data,
							toDelvCnt: newDevCnt
						};

					} else {
						that.formData = res.data;
					}
				}
			});
		},
		mounted() {

		},
		methods: {
			...mapMutations(['setBatchData']),
			//添加批次
			addBatch() {
				let {
					toDelvCnt
				} = this.formData;
				if (toDelvCnt <= 0) {
					uni.showToast({
						title: '剩余出库量不足，不可添加批次',
						icon: 'none',
						duration: 1000,
					});
					return;
				}
				this.valiFormData = {
					lotNum: "",
					manuDate: "",
					prodExpy: "",
					delvCnt: "1"
				};
				this.$refs.popup.open();
			},
			forMatTime(row) {
				return moment(row).format("YYYY-MM-DD");
			},
			//确定删除
			clickItem(idx) {
				let {
					toDelvCnt
				} = this.formData;
				this.delIndex = idx;
				let stoBat = {
					...this.batchData
				};
				let deleData = stoBat[this.formData.id];
				let newDcnt = Number(toDelvCnt) + Number(this.valiFormData.delvCnt);
				this.formData.toDelvCnt = newDcnt;
				deleData.splice(idx, 1);
				this.setBatchData({
					...this.batchData,
					[this.formData.id]: deleData
				})
			},
			dialogClose() {
				this.$refs.popup.close();
			},
			//弹窗确定
			dialogConfirm() {
				this.$refs['valiForm'].validate().then(res => {
					if (this.valiFormData.manuDate == "") {
						uni.showToast({
							title: '生产日期不能为空',
							icon: 'none',
							duration: 1000,
						});
						return;
					}
					let batData = this.batchData[this.formData.id] || [];
					let filtNum = batData.filter((item) => {
						return item.lotNum === this.valiFormData.lotNum;
					})
					if (filtNum.length > 0) {
						uni.showToast({
							title: '批次号不可重复',
							icon: 'none',
							duration: 1000,
						});
						return;
					}
					if (this.valiFormData.prodExpy == "") {
						uni.showToast({
							title: '有效日期不能为空',
							icon: 'none',
							duration: 1000,
						});
						return;
					}
					if (this.valiFormData.prodExpy <= this.valiFormData.manuDate) {
						uni.showToast({
							title: '有效日期不能小于等于生产日期',
							icon: 'none',
							duration: 1000,
						});
						return;
					}
					this.editData(this.valiFormData);
					this.$refs.popup.close();
				}).catch(err => {

				})
			},
			editData(formData) {
				let {
					toDelvCnt
				} = this.formData;
				let filtBatch = this.batchData[this.formData.id] ? this.batchData[this.formData.id] : [];
				let newBatch = [...filtBatch, {
					...this.formData,
					...formData,
					manuDate: this.forMatTime(formData.manuDate),
					prodExpy: this.forMatTime(formData.prodExpy),
					materialId: this.formData.prodCode
				}];
				let remainData = Number(toDelvCnt) - Number(formData.delvCnt);
				if (remainData < 0) {
					uni.showToast({
						title: '出库数量大于了剩余出库数量',
						icon: 'none',
						duration: 1000,
					});
					return;
				}
				this.formData.toDelvCnt = remainData;
				this.setBatchData({
					...this.batchData,
					[this.formData.id]: newBatch
				})
			},


			//批次提交
			subMitData() {
				uni.navigateBack({
					delta: 1
				})
			},

		},
		watch: {

		}

	}
</script>

<style lang="scss" scoped>
	.query-wrap {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #F1F1F1;
		overflow-y: scroll;
		overflow-x: hidden;
		position: relative;
		padding-bottom: 200rpx;

		.botm-btn {
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-top: 40rpx;
		}

		.empty-cont {
			width: 100%;
			height: 500rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	uni-page-body {
		width: 100%;
		height: 100%;
		background-color: #F1F1F1;
		;
	}
</style>