wisdomisitezwfront-web/src/components/SearchForm/index.vue

<template>
	<div class="card table-search" v-if="columns.length">
		<el-form :inline="true" style="display: flex; flex-wrap: wrap" ref="formRef" :model="searchParam">
			<!-- <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol"> -->
			<!-- <GridItem v-for="(item, index) in columns" class="girdItem" :key="item.prop" v-bind="getResponsive(item)" :index="index"> -->
			<div v-for="(item, index) in columns" class="girdItem" :key="item.prop">
				<el-form-item :label="`${item.label} `">
					<SearchFormItem :column="item" :searchParam="searchParam" />
				</el-form-item>
			</div>

			<!-- </GridItem> -->
			<div class="operation">
				<el-button type="primary" @click="search">查询</el-button>
				<el-button style="background-color: #ffb750; color: #fff" v-if="onReset" @click="reset">刷新</el-button>
				<slot name="formButton" style="margin: 0 10px"></slot>
				<!-- <el-button type="success" v-if="addButton" @click="reset">新增</el-button> -->

				<!-- <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
							{{ collapsed ? "展开" : "合并" }}
							<el-icon class="el-icon--right">
								<component :is="collapsed ? ArrowDown : ArrowUp"></component>
							</el-icon>
						</el-button> -->
			</div>
			<!-- <GridItem suffix> </GridItem> -->
			<!-- </Grid> -->
		</el-form>

		<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

		<!-- <el-form ref="formRef" :model="searchParam">
			<Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
				<GridItem v-for="(item, index) in columns" class="girdItem" :key="item.prop" v-bind="getResponsive(item)" :index="index">
					<el-form-item :label="`${item.label} `">
						<SearchFormItem :column="item" :searchParam="searchParam" />
					</el-form-item>
				</GridItem>
				<div class="operation">
					<el-button type="primary" @click="search">查询</el-button>
					<el-button style="background-color: #ffb750; color: #fff" v-if="onReset" @click="reset">刷新</el-button>
					<slot name="formButton" style="margin: 0 10px"></slot> -->
		<!-- <el-button type="success" v-if="addButton" @click="reset">新增</el-button> -->

		<!-- <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
							{{ collapsed ? "展开" : "合并" }}
							<el-icon class="el-icon--right">
								<component :is="collapsed ? ArrowDown : ArrowUp"></component>
							</el-icon>
						</el-button> -->
		<!-- </div> -->
		<!-- <GridItem suffix> </GridItem> -->
		<!-- </Grid> -->
		<!-- </el-form> -->
	</div>
</template>
<script setup lang="ts" name="SearchForm">
import { computed, ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { BreakPoint } from "@/components/Grid/interface";
import { Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import SearchFormItem from "./components/SearchFormItem.vue";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";

interface ProTableProps {
	columns?: ColumnProps[]; // 搜索配置列
	searchParam?: { [key: string]: any }; // 搜索参数
	searchCol: number | Record<BreakPoint, number>;
	// addButton?: boolean; // 是否显示增加按钮
	search: (params: any) => void; // 搜索方法
	reset: (params: any) => void; // 重置方法
	onReset?: Boolean;
}

// 默认值
const props = withDefaults(defineProps<ProTableProps>(), {
	columns: () => [],
	searchParam: () => ({})
});

// 获取响应式设置
const getResponsive = (item: ColumnProps) => {
	return {
		span: item.search?.span,
		offset: item.search?.offset ?? 0,
		xs: item.search?.xs,
		sm: item.search?.sm,
		md: item.search?.md,
		lg: item.search?.lg,
		xl: item.search?.xl
	};
};

// 是否默认折叠搜索项
const collapsed = ref(false);

// 获取响应式断点
const gridRef = ref();
const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);

// 判断是否显示 展开/合并 按钮
// const showCollapse = computed(() => {
// 	let show = false;
// 	props.columns.reduce((prev, current) => {
// 		prev +=
// 			(current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
// 			(current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);
// 		if (typeof props.searchCol !== "number") {
// 			if (prev >= props.searchCol[breakPoint.value]) show = true;
// 		} else {
// 			if (prev > props.searchCol) show = true;
// 		}
// 		return prev;
// 	}, 0);
// 	return show;
// });
</script>
<style lang="scss" scoped>
.girdItem {
	display: flex;
}
:deep(.el-form .el-form-item__content .el-range-editor) {
	width: 200px;
}
</style>