aiot-app/components/MySearch/MySearch.vue

<template>

	<u-popup lock-scroll :show="show" closeOnClickOverlay mode="top" @close="close" @open="open">
		<view class="container">
			<u--form ref="form" labelPosition="left" :model="formData" labelWidth="180" labelAlign="left">
				<block v-for="(item, index) in formItems" :key="index">
					<!-- <slot name='slot'></slot> -->
					<u-form-item :label="item.label" :prop="item.prop">
						<component :is="item.component" v-model="formData[item.prop]" v-bind="item.props"
							v-on="item.events" :ref="item.prop" />
					</u-form-item>
				</block>

			</u--form>

			<view class="action">
				<u-button text="重置" shape="circle" style="color: #000;" @click="reset"></u-button>
				<u-button type="primary" text="确定" shape="circle" @click="search"></u-button>
			</view>




			<!-- <u--input ref="kk" placeholder="请输入内容" border="surround" clearable focus></u--input> -->

			<!-- <slot name="picker"></slot> -->

		</view>
	</u-popup>

</template>

<script>
	import MyInput from '@/uni_modules/uview-ui/components/u--input/u--input.vue'
	import MyPicker from '@/uni_modules/uview-ui/components/u-picker/u-picker.vue'
	import MyDateRange from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'

	import MySelect from '@/uni_modules/zxz-uni-data-select/components/zxz-uni-data-select/zxz-uni-data-select.vue'
	// <zxz-uni-data-select :localdata="option.dimension" v-model="form.dimension" dataValue='type'
	// 							dataKey="name" filterable format='{name}'></zxz-uni-data-select>

	export default {
		name: "MySearch",
		components: {
			MyInput,
			MyPicker,
			MyDateRange,
			MySelect
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			formItems: {
				type: Array,
				default: () => []
			},
			initialData: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				formData: {},
				
			};
		},
		watch: {
			initialData: {
				handler(newVal) {
					console.log(newVal);
					this.formData = {
						...newVal
					};
				},
				deep: true
			}
		},
		methods: {
			open() {
				console.log(this.formData);
				console.log(this.formItems);
			},
			close() {
				this.$emit('update:show', false)
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			reset() {
				// this.form = {
				// 	...this.initialData
				// }
				this.formData = {}
				console.log(this.formData);
			},
			search() {
				this.close()
				this.$emit('search', this.formData)
			}
		},
		created() {
			console.log(this);
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	/deep/.u-form-item__body {
		padding: 16rpx 0
	}

	/deep/.uni-date__icon-clear {
		border: none !important;
		transform: translateY(25%);
	}

	.action {
		padding: 20rpx;
		display: flex;

	}

	/deep/.u-button {
		width: 40%;
	}

	.form-button-container {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	/deep/.uni-stat__select {
		background-color: #fff;
	}
</style>