aiot-app/pages/warehouse/material/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.code" placeholder="请输入单据编码" /></view>
					</view>
					
				</view>
				<view class="footerBtn" @click="getFilter">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getDate} from '@/utils/utils.js';
	export default {
		name: "getsearch",
		props: {
             show:{
				 type: Boolean,
				 default: false
			 }
		},
		data() {
			return {
				popupInfo: {
					range: ['', ''],          //日期范围
					code: '',                //单号
				},
			}
		},
		onShow(){
			
		},
	
		methods: {
			//验证
			getFilter(){
			    /*
				//必填验证
				if(!this.popupInfo.code){
					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>