PDA/pages/consume/consume.vue

<template>
	<!-- 515040620742443008 -->
	<!-- 514939600389537793 -->
	<view class="query-wrap">
		<view class="title-cont">
			<view class="search-view">
				<uni-easyinput prefixIcon="search" :value="value" placeholder="请输入或扫描SN码或RFID码" @input="input">
				</uni-easyinput>
				<qs-scanlistener @scan="scan"></qs-scanlistener>
				<view class="filter-text" @click.stop="addData()">
					添加
				</view>
			</view>
			<view class="select-view">
				<picker mode="selector" @change="outHandleDate" :range="houseData" range-key='text'>
					<view class="date c-flex-align" :style="{ height:'100rpx'}">
						<view>{{ outRoom }}</view>
						<image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle">
						</image>
					</view>
				</picker>
				<picker mode="selector" @change="targtHandleDate" :disabled="!outRoomId" :range="tarRoomData"
					range-key='text'>
					<view class="date c-flex-align" :style="{ height:'100rpx'}">
						<view>{{ tarRoom }}</view>
						<image src="https://i.loli.net/2020/07/15/xjVSvzWcH9NO7al.png" mode="" class="icon-triangle">
						</image>
					</view>
				</picker>
			</view>
		</view>
		<view class="inner-item" v-for="(item,index) in consumeData" :key="index" @click="itemDetails(item,index)">
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label-podnme">
						{{item.prodName||"" }}
					</view>
					<view class="shuo-unit">
						<span>{{item.purcUnt }}({{item.convrat }}{{item.prcUnt}}/{{item.purcUnt }})</span>
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label">
						出库数量:
					</view>
					<view class="shuo-unit">
						{{item.children.length}}
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item">
					<view class="shuo-label">
						规格:
					</view>
					<view class="shuo-cont">
						{{item.spec}}
					</view>
				</view>
				<view class="shuo-item">
					<view class="shuo-label">
						型号:
					</view>
					<view class="shuo-cont">
						{{item.mol}}
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label">
						注册证号:
					</view>
					<view class="shuo-cont">
						{{item.regcertno}}
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item">
					<view class="shuo-label">
						耗材类别:
					</view>
					<view class="shuo-cont">
						<span v-if="item.mcsType == '0'"> 普通耗材 </span>
						<span v-if="item.mcsType == '1'"> 高值耗材 </span>
						<span v-if="item.mcsType == '2'"> 试剂 </span>
						<span v-if="item.mcsType == '3'"> 总务耗材 </span>
					</view>
				</view>
				<view class="shuo-item">
					<view class="shuo-label">
						生产来源:
					</view>
					<view class="shuo-cont">
						<span v-if="item.prodSouc == '1'" type="success"> 国产 </span>
						<span v-if="item.prodSouc == '2'" type="danger"> 进口 </span>
					</view>
				</view>
			</view>
			<view class="inventory-item">
				<view class="shuo-item-name">
					<view class="shuo-label">
						生产企业:
					</view>
					<view class="shuo-cont">
						{{item.prodEntp}}
					</view>
				</view>
			</view>
		</view>
		<view class="empty-cont" v-if="consumeData.length==0">
			暂无明细
		</view>
		<view class="botm-btn">
			<button type="default" plain="true" style="width:200rpx;line-height: 70rpx;background: #01A992;color:#fff"
				@click.stop="orderAcept()">提交</button>
		</view>
		<uni-popup ref="popup">
			<uni-popup-dialog type="warn" :before-close="true" cancelText="取消" confirmText="确定" content="你确定提交？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	import {
		debounced
	} from '@/utils/debounced.js';
	import moment from "moment";
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin.js';
	export default {
		mixins: [ZPMixin],
		data() {
			return {
				index: 0,
				value: "",
				dataList: [],
				outRoom: '出库库房',
				outRoomId: "",
				tarRoom: '目标库房',
				tarRoomId: ""
			}
		},
		computed: {
			...mapState(['houseData', 'tarRoomData', 'consumeData'])
		},
		onShow() {
			this.$forceUpdate();
			uni.$once('update', function(data) {
				// uni.redirectTo({
				// 	url: '/pages/grounding/grounding' //写你的路径
				// });
			})
		},
		onBackPress(event) {
			this.setConmData([]);
		},
		mounted() {

		},
		methods: {
			...mapActions(['getTarRomData']),
			...mapMutations(['setConmData']),
			//出库库房确定
			outHandleDate(e) {
				let idx = e.detail.value;
				this.outRoom = this.houseData[idx].text;
				this.outRoomId = this.houseData[idx].value;
				this.tarRoom = "目标库房";
				this.tarRoomId = "";
				this.getTarRomData({
					id: this.houseData[idx].value
				})
			},
			//目标位置确定
			targtHandleDate(e) {
				let idx = e.detail.value;
				this.tarRoom = this.tarRoomData[idx].text;
				this.tarRoomId = this.tarRoomData[idx].value;
			},
			input(value) {
				this.value = value;
			},
			//日期格式化
			forMatTime(time) {
				return moment(time).format("YYYY-MM-DD");
			},
			addData() {
				this.$http('outboundIng.addData', {
					id: this.value.trim(),
					soucStroomId: this.outRoomId,
					tagtStroomId: this.tarRoomId
				}, '加载中', true).then((res) => {
					if (res.success == true) {
						if (this.consumeData.length <= 0) {
							let aData = [
								...this.consumeData,
								{
									...res.data,
									children: [{
										...res.data
									}]
								},
							];
							this.setConmData(aData);
							return;
						}
						let newData = [...this.consumeData];
						newData.forEach((item, index) => {
							if (
								res.data &&
								item.prodCode == res.data.prodCode &&
								item.pacunt == res.data.pacunt
							) {
								let filter = newData[index].children.filter((itm) => {
									return itm.id == res.data.id;
								});
								if (filter.length <= 0) {
									newData[index]["children"].push(res.data);
								}
							}
						});
						let newFilter = newData.filter((item) => {
							return (
								item.prodCode == res.data.prodCode &&
								item.pacunt == res.data.pacunt
							);
						});
						if (newFilter.length <= 0) {
							newData.push({
								...res.data,
								children: [{
									...res.data
								}],
							});
						}
						this.setConmData(newData);
					}
				})
			},
			dialogClose() {
				this.$refs.popup.close();
			},
			scan(code) {
				this.value = code;
				this.addData();
			},
			orderAcept() {
				if (this.consumeData.length <= 0) {
					uni.showToast({
						title: '请选择添加出库耗材',
						icon: 'none',
					});
					return;
				}
				if (this.outRoomId == "") {
					uni.showToast({
						title: '请选择出库库房',
						icon: 'none',
					});
					return;
				}
				if (this.tarRoomId == "") {
					uni.showToast({
						title: '请选择目标库房',
						icon: 'none',
					});
					return;
				}
				this.$refs.popup.open();
			},
			//二次确认提交数据
			dialogConfirm() {
				let subMitData = [];
				this.consumeData.forEach((item) => {
					item.children.forEach((itm) => {
						subMitData.push(itm.id);
					});
				});
				this.$http('outboundIng.subMitData', {
					snList: subMitData,
					soucStroomId: this.outRoomId,
					tagtStroomId: this.tarRoomId
				}, '加载中', true).then((res) => {
					if (res.success == true) {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
						});
						this.value = "";
						this.$refs.popup.close();
						this.setConmData([]);
					} else {
						this.$refs.popup.close();
					}
				})
			},
			//跳转验收详情
			itemDetails(item, index) {
				uni.setStorage({
					key: 'sumeDetails',
					data: {
						snData: item,
						itx: index
					}
				});
				uni.navigateTo({
					url: '/pages/consemeview/index',
					success: function(res) {
						console.log(res, "res")
					}
				});
			},
		},
		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;

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

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

		.time-view {
			height: 350rpx;
			background-color: #fff;
			padding: 50rpx 50rpx 0 50rpx;
			box-sizing: border-box;

			.btn-view {
				width: 100%;
				height: 100rpx;
				margin-top: 100rpx;
				display: flex;
				justify-content: space-around;
			}
		}

		.title-cont {
			padding-top: 10rpx;
			width: 100%;
			background-color: #fff;

			.search-view {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0rpx 20rpx 0rpx 20rpx;
				box-sizing: border-box;

				.filter-text {
					width: 72rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: rgba(1, 169, 146, 1);
					font-size: 36rpx;
					font-family: PingFangSC-bold;
					padding-left: 20rpx;
				}
			}

			.select-view {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0rpx 20rpx 0rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-around;

				.c-flex-align {
					display: flex;
					align-items: center;
					color: rgba(16, 16, 16, 1);
				}

				.icon-triangle {
					width: 16rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}
		}
	}

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