62 lines
1.9 KiB
Vue
62 lines
1.9 KiB
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">
|
|
<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>
|
|
</div>
|
|
</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 SearchFormItem from "./components/SearchFormItem.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 gridRef = ref();
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
// .girdItem {
|
|
// padding-top: 6px;
|
|
// }
|
|
:deep(.el-form .el-form-item__content .el-range-editor) {
|
|
width: 200px;
|
|
}
|
|
.card {
|
|
background-color: $primary-light-bg-color;
|
|
box-shadow: none;
|
|
}
|
|
// :deep(.el-form-item--default) {
|
|
// margin-bottom: 0;
|
|
// }
|
|
// .table-search :deep(.operation) {
|
|
// margin-bottom: 0;
|
|
// }
|
|
</style>
|