aiot-app/pages/warehouse/workOrder/components/search.vue

<template>
	<view>
		<u-popup :show="show" closeOnClickOverlay mode="right" @close="closePopup">
			<view class="popupBox">
				<view class="popupCent">
					<view class="tit">筛选</view>
					<view class="itemBox">
						<view class="tit">创建时间</view>
						<uni-datetime-picker start-placeholder="开始时间" end-placeholder="结束时间" class="datetimeBox"
							v-model="popupInfo.range" type="daterange" :clear-icon="false" @maskClick="maskClick" />
					</view>
					<view class="itemBox">
						<view class="tit">单号</view>
						<view class="putBox"><input v-model="popupInfo.OrderNo" placeholder="请输入单号" /></view>
					</view>
					<view class="itemBox">
						<view class="tit">订单来源</view>
						<view class="putBox"><input v-model="popupInfo.OrderSource" placeholder="请输入订单来源" /></view>
					</view>
					<view class="itemBox">
						<view class="tit">执行人</view>
						<view class="putBox"><input v-model="popupInfo.executor" placeholder="请输入执行人" /></view>
					</view>
		
					<view class="itemBox">
						<view class="tit">单据状态</view>
						<view class="tagsBox">
							<view :class="popupInfo.status == 1?'on':''" @click="popupInfo.status = 1">已创建</view>
							<view :class="popupInfo.status == 2?'on':''" @click="popupInfo.status = 2">已驳回</view>
							<view :class="popupInfo.status == 3?'on':''" @click="popupInfo.status = 3">已提交</view>
							<view :class="popupInfo.status == 4?'on':''" @click="popupInfo.status = 4">审核中</view>
							<view :class="popupInfo.status == 5?'on':''" @click="popupInfo.status = 5">审核完成</view>
							<view :class="popupInfo.status == 6?'on':''" @click="popupInfo.status = 6">指派中</view>
						</view>
					</view>
		
					<view class="itemBox">
						<view class="tit">申请机构</view>
						<view class="tagsBox">
							<view class="col2" :class="popupInfo.unit == 1?'on':''" @click="popupInfo.unit = 1">省林业局
							</view>
							<view class="col2" :class="popupInfo.unit == 2?'on':''" @click="popupInfo.unit = 2">省计检委
							</view>
						</view>
					</view>
		
					<view class="itemBox">
						<view class="tit">仓库</view>
						<view class="tagsBox">
							<view class="col2" :class="popupInfo.wareroom == 1?'on':''" @click="popupInfo.wareroom = 1">
								湖南弘达仓库</view>
							<view class="col2" :class="popupInfo.wareroom == 2?'on':''" @click="popupInfo.wareroom = 2">
								远航黄兴仓库</view>
							<view class="col2" :class="popupInfo.wareroom == 3?'on':''" @click="popupInfo.wareroom = 3">
								交通厅虚拟仓</view>
							<view class="col2" :class="popupInfo.wareroom == 4?'on':''" @click="popupInfo.wareroom = 4">
								1号云虚拟仓库</view>
						</view>
					</view>
		
				</view>
				<view class="footerBtn" @click="getFilter">选择</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "getsearch",
		props: {
             show:{
				 type: Boolean,
				 default: false
			 }
		},
		data() {
			return {
				popupInfo: {
					range: ['', ''],     //日期范围
					OrderNo: '',         //订单单号
					OrderSource: '',     //订单来源
					executor: '',       //执行人
					status: '',         //单据状态
					unit: '',          //申请机构
					wareroom: '',      //仓库
				},
			}
		},
		mounted() {
		
		},
		methods: {
			//验证
			getFilter(){
				//必填验证
				if(!this.popupInfo.OrderNo){
					uni.showToast({
						icon:"none",
						title: '请输入单号'
						});
				    return;	
				}
				this.$emit("openPopup");
				this.$emit("getPopupInfo",this.popupInfo);
			},
			//关闭窗口
			closePopup() {
			   this.$emit("openPopup");
			},
			//时间点击
			maskClick(e) {
				console.log('maskClick事件:', e);
			},	
		}
	}
</script>

<style lang="scss" scoped>
	/*右弹层*/
	.popupBox {
		width: calc(100vw - 20vw);
		position: relative;
		.popupCent {
			padding: 20rpx 40rpx 120rpx 40rpx;
			height: calc(100vh - 100rpx);
			overflow-y: auto;
		}
	
		.tit {
			font-weight: bold;
		}
	
		.itemBox {
			margin: 40rpx 0;
	
			.tit {
				font-size: 28rpx;
			}
	
			.datetimeBox {
				margin-top: 20rpx;
			}
	
			/deep/ .uni-date-x--border {
				border: none !important;
	
				.uni-date-range {
					background: #f2f2f2 !important;
					border-radius: 60rpx;
				}
			}
	
			.putBox {
				margin-top: 20rpx;
				input {
					height: 74rpx;
					line-height: 74rpx;
					border-radius: 60rpx;
					background: #f2f2f2 !important;
					padding: 0 40rpx;
					font-size: 28rpx;
				}
			}
	
			.tagsBox {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
	
				view {
					width: 30%;
					height: 60rpx;
					line-height: 60rpx;
					margin-bottom: 20rpx;
					background: #f2f2f2;
					text-align: center;
					border-radius: 60rpx;
					font-size: 28rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					-o-text-overflow: ellipsis;
				}
	
				view.on {
					background: $u-success-dark;
					color: #fff;
				}
	
				view.col2 {
					width: 47.5% !important;
				}
			}
		}
	
	   .footerBtn {
			position: absolute;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			background: $u-success-dark;
		}
	}
</style>