aiot-app/pages/warehouse/outHouse/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="true" @maskClick="maskClick" />
					</view>
					<view class="itemBox" v-show="typeIndex==1">
						<view class="tit">单据名称</view>
						<view class="putBox"><input v-model="popupInfo.name" placeholder="请输入单据名称" /></view>
					</view>
					<view class="itemBox">
						<view class="tit">单据编码</view>
						<view class="putBox"><input v-model="popupInfo.code" placeholder="请输入单据编码" /></view>
					</view>
					<view class="itemBox" v-show="typeIndex==0">
						<view class="tit">台账类型</view>
						<view class="putBox"><input v-model="popupInfo.type" 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
			},
			typeIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				typeList: [{
					id: 1,
					name: "物料台账"
				}, {
					id: 2,
					name: "设备台账"
				}],
				popupInfo: {
					range: ['', ''], //日期范围
					code: '', //单号
					type: ''
				},
			}
		},
		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>