uniapp-supplychain/canteen/pages/purchase/receipt.vue

<template>
	<view>
		<view class="lf-p-l-30 lf-p-r-30 lf-m-t-30 lf-w-100" style="position: fixed;top: 80rpx;overflow: hidden;z-index: 111;">
			<view class="lf-flex search-self lf-w-100">
				<u-icon name="search" class="search-icon"></u-icon>
				<input placeholder="搜索物资" confirm-type="search" class="lf-m-l-10 lf-font-28" :value="searchValue" @input="inputChange" @confirm="inputConfirm" />
			</view>
		</view>
		<view class="search-employ"></view>
		
		<view class="content" style="margin-top: 80rpx;">
			<view class="card" v-for="(item, index) in list" :key="index" :class="item.searchStyle?'search-color':''">
				<view class="lf-row-between">
					<view class="flex lf-row-center justify-center text-center">
						<view class="lf-color-black lf-font-bold" v-if="item.material && item.material.m_name">{{ item.material.m_name }}</view>
						<view class="lf-m-l-10">{{item.spec.name}}</view>
					</view>
					<view>单位: {{item.material.unit.unit_name}}</view>
					<!-- 修改功能先隐藏 -->
					<!-- <view style="color: #11D189;" @click="showEdit">修改</view> -->
				</view>
				<view class="lf-row-between lf-m-t-30">
					<view>订购数</view>
					<view class="lf-flex">
						<input class="input" placeholder="0" type="number" :disabled="true" v-if="item.material && item.purchase_number" v-model="item.purchase_number"/>
						<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
					</view>
				</view>
				<view class="lf-row-between lf-m-t-30">
					<view>实到数</view>
					<view class="lf-flex">
						<input class="input" type="number" v-model="item.reachNum" @blur="inputBlur(index, 'real_reach_number', $event)" />
						<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
					</view>
				</view>
				<view class="lf-row-between lf-m-t-30">
					<view>实收数</view>
					<view class="lf-flex">
						<input class="input" type="number" v-model="item.receiveNum" @blur="inputBlur(index, 'real_receive_number', $event)" />
						<text class="lf-color-black" v-if="item.material && item.material.unit">{{item.material.unit.unit_name}}</text>
					</view>
				</view>
			</view>
			<!-- 修饰底部 -->
			<view :style="upload_list.length ? 'height: 260rpx' : 'height: 140rpx'"></view>
			<!-- 凭证图 -->
			<view class="fixed-images" v-if="upload_list.length">
				<lf-image class="ms-img" :src="item" @click="lookImage(index)" v-for="(item, index) in upload_list" :key="index" v-if="index < 6"></lf-image>
			</view>
			<view class="fixed-bottom" v-if="list.length">
				<button class="btn btn1 lf-m-l-20" @click="is_show_voucher = true">上传凭证</button>
				<button class="btn" @click="comfirm">确认收货</button>
			</view>
			<!-- 弹出层-确认收货修改 TODO每个都应该是动态 -->
			<u-popup v-model="is_show_edit" mode="bottom" border-radius="20">
				<view class="edit-popup-box">
					<view class="popup-content">
						<view>
							<view class="popup-item" hover-class="lf-opacity" :style="currentObj(1)?'border-bottom:none':''" @click="switchItem(1)">
								<text class="lf-font-bold">选择供应商</text>
								<u-icon name="arrow-up" color="#777777" v-if="currentObj(1)"></u-icon>
								<u-icon name="arrow-down" color="#777777" v-else></u-icon>
							</view>
							<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(1)?'max-height:360rpx':'max-height:0rpx'">
								<view class="lf-row-between scroll-item" v-for="(item, index) in supplier_list" :key="index" @click="checkItem(index, 'supplier_list')">
									<view>{{ item.name }}</view>
									<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
								</view>
							</scroll-view>
						</view>
						
						<view>
							<view class="popup-item" hover-class="lf-opacity" :style="currentObj(2)?'border-bottom:none':''" @click="switchItem(2)">
								<text class="lf-font-bold">选择物资</text>
								<u-icon name="arrow-up" color="#777777" v-if="currentObj(2)"></u-icon>
								<u-icon name="arrow-down" color="#777777" v-else></u-icon>
							</view>
							<scroll-view :scroll-y="true" class="scroll-box" :style="currentObj(2)?'max-height:360rpx':'max-height:0rpx'">
								<view class="lf-row-between scroll-item" v-for="(item, index) in material_list" :key="index" @click="checkItem(index, 'material_list')">
									<view>{{ item.name }}</view>
									<u-icon name="checkmark-circle" color="#11D189" v-if="item.checked"></u-icon>
								</view>
							</scroll-view>
						</view>
					</view>
					<u-button class="popup-btn" @click="comfirmEdit">确认修改</u-button>
				</view>
			</u-popup>
			<!-- 弹出层-上传凭证 -->
			<u-popup v-model="is_show_voucher" mode="center" border-radius="20">
				<view class="voucher-popup-box">
					<view class="popup-content">
						<view class="popup-title">上传凭证信息</view>
						<view class="popup-desc">请在此处上传检验检疫凭证、售卖资质等证书</view>
						<view class="popup-images">
							<view class="popup-image-item" v-for="(item, index) in voucher_list" :key="index" @click="lookImage(index, 'voucher_list')">
								<image :src="item" mode="aspectFill"></image>
								<view class="remove-image" @click.stop="removeInage(index)">
									<u-icon name="close-circle"></u-icon>
								</view>
							</view>
							<view class="popup-image-item popup-image-item-after" @click="uploadImage" v-if="voucher_list.length < 6"></view>
						</view>
					</view>
					<view class="foot-btn">
						<u-button class="popup-btn" @click="is_show_voucher = false">取消</u-button>
						<u-button class="popup-btn" @click="submitImage">确定</u-button>
					</view>
				</view>
			</u-popup>
			<!-- 预览图片组件 -->
			<lf-previewimage ref="previewimage" />
		</view>
	</view>
</template>

<script>
	import { uploadFile } from '@/common/uploadFile.js';
	let timer = null;
	export default {
		data(){
			return {
				show_icon: true,
				searchValue: '',
				list: [],
				is_show_edit: false,
				current_show: {
					type: 1,
					open: false
				},
				supplier_list: [{
					name: '南开大学',
					checked: false
				},{
					name: '华侨大学',
					checked: false
				}],
				material_list: [{
					name: '哈哈哈哈',
					checked: false
				},{
					name: '嘿嘿嘿',
					checked: false
				}],
				p_sn: '',
				contents: [],
				order: {},
				type: 4,
				reachNum: 0,
				receiveNum: 0,
				is_show_voucher: false,
				voucher_count: 6,
				voucher_list: [],
				is_upload: false, // 是否上传了凭证
				upload_list: []
			}
		},
		computed: {
			currentObj(){
				let current_show = this.current_show;
				return function(num){
					return current_show.type == num && current_show.open
				}
			}
		},
		onLoad(options){
			// http://localhost:8081/pages/purchase/receipt?p_sn=P16281395178122
			this.p_sn = options.p_sn || '';
			this.getData();
		},
		methods: {
			// 搜索input值被改变
			inputChange(event){
				if(timer){
					clearTimeout(timer);
					timer = null;
				}
				timer = setTimeout(() => {
					this.searchValue = event.detail.value;
					let positionIndex = null;
					this.list.forEach((item,index) => {
						if(this.searchValue && item.material.m_name.indexOf(this.searchValue) >= 0){
							if(positionIndex == null){
								positionIndex = index; // 拿到第一个被匹配的table item
							}
							this.$set(item,'searchStyle',true)
						}else {
							this.$set(item,'searchStyle',false)
						}
					})
					if(positionIndex != null) {
						let tabView = document.querySelector('.content'); // 获取第一层大对象，table
						let tabContent = tabView.querySelector('.card'); // 获取第二层
						let offsetHeight = tabContent.offsetHeight; // table行高度
						let heightself = offsetHeight*positionIndex
						uni.pageScrollTo({
						    scrollTop: heightself
						});
					}else if(this.searchValue){
						this.$msg('该关键字没有搜索到物资哦')
					}
				}, 1000);
			},
			// 搜索按下回车
			inputConfirm(event){
				this.searchValue = event.detail.value;
			},
			// 预览图片
			lookImage(current){
				this.$u.throttle(() => {
					this.$refs.previewimage.show({
						images: this.upload_list,
						current: current
					});
				}, 500);
			},
			// 移除图片
			removeInage(current){
				this.voucher_list.splice(current, 1);
			},
			// 上传凭证图片
			uploadImage(){
				let current_count = this.voucher_count - this.voucher_list.length;
				if(current_count == 0) return;
				uni.chooseImage({
					count: current_count,
					complete: result => {
						this.voucher_list.push(...result.tempFilePaths);
						console.log(this.voucher_list)
					}
				})
			},
			// 用户点击确定，将图片上传至oss，并将url发送给后端
			submitImage(){
				let that = this;
				let voucher_list = that.voucher_list;
				if(voucher_list.length <= 0){
					return that.$msg('您未上传图片哦');
				};
				that.is_show_voucher = false;
				uni.showLoading({
					title: '正在上传中...'
				})
				let http_list = [];
				voucher_list.map(item => {
					let itemP = new Promise((resolve, reject) => {
						uploadFile(item, (res) => {
							resolve(res);
						}, (err) => {
							reject(err);
						}, this);
					})
					http_list.push(itemP);
				})
				
				Promise.all(http_list).then(res => {
					let images = [];
					let show_images = [];
					res.map(item => {
						if(item.path){
							images.push(item.path);
						}
						if(item.url){
							show_images.push(item.url);
						}
					});
					that.$http(that.API.API_SUPPLIER_PURCHASEUPLOADVOUCHER, {
						p_sn: that.p_sn,
						images: images,
					}).then(result => {
						uni.hideLoading();
						that.voucher_list = [];
						that.is_upload = true;
						that.upload_list.push(...show_images);
						that.$msg('凭证已上传成功!')
					}).catch(err => uni.hideLoading());
					
				}).catch(err => {
					uni.hideLoading();
					uni.showModal({
						title: '',
						content: JSON.stringify(err),
						showCancel: false,
						confirmColor: '#1833F2'
					})
				})
			},
			getData(){
				this.$http(this.API.API_CANTEEN_PURCHASEDETAIL, {
					p_sn: this.p_sn
				}).then(res => {
					this.order = res.data.order;
					this.list = res.data.order.items || [];
					this.list.forEach(item => {
						item.reachNum = item.purchase_number
						item.receiveNum = item.purchase_number
					})
					let voucher = res.data?.order?.voucher || [];
					voucher = voucher.filter(item => item.client_type == '食堂');
					this.is_upload = voucher.length > 0;
					this.upload_list = voucher.map(item => item.voucher_pic_url);
				})
			},
			inputBlur(current, key, event){
				this.list[current][key] = event.detail.value;
			},
			comfirm(){
				let is_empty = false;
				let real_count_item = []
				this.list.forEach(item => {
					if(!item.receiveNum || !item.reachNum){
						is_empty = true;
					}
					real_count_item.push({
						id:item.id,
						real_receive_number: item.receiveNum,
						real_reach_number: item.reachNum
					})
				})
				if(is_empty){
					return this.$msg('请将收货数量填写完整');
				}
				if(!this.is_upload){
					return this.$msg('请上传凭证后再确认收货');
				}
				this.$http(this.API.API_CONFIRM, {
					p_sn: this.p_sn,
					state: '已入库',
					real_count_item
				}).then(res => {
					this.$msg('确认收货成功').then(()=>{this.$toBack()});
				})
			},
			switchItem(current){
				let current_show = this.current_show;
				if(current_show.type != current){
					current_show.open = false;
				}
				current_show.type = current;
				current_show.open = !current_show.open;
				this.current_show = current_show;
			},
			checkItem(index, name){
				this[name].forEach(item => item.checked = false);
				this[name][index].checked = true;
			},
			// 确认修改
			comfirmEdit(){
				this.$msg('修改成功！');
				this.is_show_edit = false;
			},
			// 显示修改弹出层
			showEdit(){
				this.current_show = {
					type: 1,
					open: false
				};
				this.is_show_edit = true;
			}
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.search-employ {
		height: 162rpx;
		background-color: rgb(246, 246, 246);
		overflow: hidden;
		position: fixed;
		width: 100%;
		top: 28rpx;
	}
	.search-color {
		background-color: #ffdede!important;
	}
	.search-icon {
		color: #777;
	}
	.search-self {
		background: rgb(228,228,228);
		padding: 10rpx 0 10rpx 20rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
	.search-self .uni-input-placeholder {
		margin-right: 500px;
		color: #777;
		font-size: 28rpx;
	}
	.content{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	.card{
		width: 686rpx;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		padding: 30rpx;
		color: #777777;
		.input{
			width: 112rpx;
			border-bottom: 1rpx solid #e5e5e5;
			margin-right: 14rpx;
			text-align: center;
			color: #222222;
		}
	}
	.fixed-images{
		position: fixed;
		bottom: 98rpx;
		left: 0rpx;
		z-index: 99;
		width: 750rpx;
		height: 126rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		.ms-img{
			// 六张一行
			width: 102rpx;
			height: 102rpx;
			// width: 146rpx;
			// height: 146rpx;
			margin-right: 14rpx;
			background-color: #EEEEEE;
			&:nth-of-type(6n){
				margin-right: 0rpx;
			}
		}
	}
	.fixed-bottom{
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 99;
		width: 750rpx;
		height: 98rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border-top: 1rpx solid #E5E5E5;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 32rpx;
		.btn{
			width: 212rpx;
			background-color: #11D189;
			font-size: 32rpx;
			line-height: 82rpx;
			margin: 0;
			height: 82rpx;
			border-radius: 40rpx;
			color: #FFFFFF;
		}
		.btn1{
			border: 2rpx solid #555555;
			background-color: #FFFFFF;
			color: #555555;
			line-height: 80rpx;
			margin-right: 20rpx;
		}
	}
	
	/deep/.placeholder-class{
		color: #777777;
	}
	// 去掉u-button 外边框线
	/deep/.u-hairline-border::after{
		border: none;
	}
	// 修改收货信息弹出层
	.edit-popup-box{
		width: 100%;
		min-height: 484rpx;
		max-height: 64vh;
		padding: 10rpx 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.popup-content{
			min-height: 332rpx;
			// max-height: 54vh;
			margin-bottom: 40rpx;
			.popup-item{
				padding: 30rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E5E5E5;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #222222;
			}
			.scroll-box{
				transition: all .5s;
				.scroll-item{
					padding: 30rpx 0;
				}
			}
		}
		.popup-btn{
			width: 100%;
			height: 82rpx;
			background: #11D189;
			border-radius: 10rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-bottom: 30rpx;
		}
	}
	
	// 上传凭证弹出层
	.voucher-popup-box{
		width: 686rpx;
		height: max-content;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		.popup-content{
			.popup-title{
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
				text-align: center;
				margin-top: 40rpx;
			}
			.popup-desc{
				font-size: 28rpx;
				color: #555555;
				text-align: center;
				margin-top: 20rpx;
				margin-bottom: 18rpx;
			}
			.popup-images{
				display: flex;
				flex-wrap: wrap;
				padding: 22rpx;
				margin-bottom: 18rpx;
				.popup-image-item{
					width: 198rpx;
					height: 198rpx;
					margin: 8rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
					}
					.remove-image{
						position: absolute;
						right: -8rpx;
						top: -16rpx;
						color: #e74c3c;
						font-size: 40rpx;
						padding: 8rpx;
					}
				}
				.popup-image-item-after::after{
					content: '+';
					position: absolute;
					left: 30%;
					top: 14%;
					font-size: 100rpx;
					color: #777777;
				}
			}
			.popup-input{
				padding: 0 60rpx;
				box-sizing: border-box;
				height: 90rpx;
				font-size: 28rpx;
				color: #555555;
				input{
					text-align: right;
				}
			}
		}
		.foot-btn{
			height: 90rpx;
			width: 100%;
			border-top: 1rpx solid #E5E5E5;
			display: flex;
			box-sizing: border-box;
			.popup-btn{
				width: 50%;
				height: 100%;
				border: none;
				border-radius: initial;
				&:last-child{
					border-left: 1rpx solid #E5E5E5;
					color: #1833F2;
				}
			}
		}
	}
</style>