spfm-market-front/src/pages/main/documentCollection/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">
				<!-- <span>{{ item.tit }}</span> -->
				<el-form>
					<el-form-item :label="item.tit"   label-width="90px">
						<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>
						<el-date-picker :append-to-body="false" v-model="item.value" v-if="item.type === 'daterange'"
							size="medium" type="daterange" :placeholder="item.tit" format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss" :default-time="defaultTime" start-placeholder="开始时间"
							end-placeholder="结束时间" />
					</el-form-item>
				</el-form>
			</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: [],
			defaultTime: ['00:00:00', '23:59:59'],
		};
	},
	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 {
		height: 38px;
	}

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

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