spfm-market-front/src/components/search.vue

<template>
	<div class="search-box">
		<div class="box-l">
			<div v-for="(item, index) in searchList" :key="index" class="box-info" :style="'width:' + item.width">
				<el-input v-model="item.value" v-if="item.type === 'input'" size="medium" :placeholder="item.tit">
				</el-input>
				<el-select :popper-append-to-body="false" clearable v-if="item.type === 'sel'" v-model="item.value"
					:placeholder="item.tit" size="medium">
					<el-option v-for="items in item.options" :key="items.dataCode" :label="items.dataName"
						:value="items.dataCode">
					</el-option>
				</el-select>
				<el-date-picker :append-to-body="false" v-model="item.value" v-if="item.type === 'date'" size="medium"
					type="date" :placeholder="item.tit">
				</el-date-picker>
				<el-date-picker :append-to-body="false" v-model="item.value" v-if="item.type === 'datetime'"
					size="medium" type="datetime" :placeholder="item.tit">
				</el-date-picker>
                <el-date-picker :append-to-body="false" v-model="item.value" v-if="item.type === 'month'"
					size="medium" type="month" :placeholder="item.tit">
				</el-date-picker>
                <el-date-picker :append-to-body="false" v-model="item.value" v-if="item.type === 'year'"
					size="medium" type="year" :placeholder="item.tit">
				</el-date-picker>
			</div>
		</div>
		<el-button class="btn-check" size="medium" type="primary" plain icon="el-icon-search" @click="searchInfo">搜索
		</el-button>
	</div>
</template>
<script>
	export default {
		props: ["searchList"],
		data() {
			return {
				infoList: [],
			};
		},
		methods: {
			searchInfo() {
				this.infoList = [];
				for (let i = 0; i < this.searchList.length; i++) {
					if (this.searchList[i].type === "date" && this.searchList[i].value) {
						this.infoList.push(Date.parse(this.searchList[i].value));
					} else {
						this.infoList.push(this.searchList[i].value);
					}
				}
				this.$emit("searchInfo", this.infoList);
			},
		},
		mounted() {},
		created() {},
	};
</script>
<style scoped lang="scss">
	.search-box {
		display: flex;
		justify-content: space-between;

		.box-l {
			display: flex;
			justify-content: space-between;

			.box-info {
				display: inline-block;
				// min-width: 100px;
			}
		}

		.btn-check {}

		.el-date-editor.el-input,
		.el-date-editor.el-input__inner {
			width: 100%;
		}

		.el-select-dropdown {
			z-index: 100000 !important;
		}
	}
</style>