82 lines
2.4 KiB
Vue
82 lines
2.4 KiB
Vue
<template>
|
|
<div class="search-container">
|
|
<el-form ref="searchRef" :model="query" :inline="true">
|
|
<el-form-item :label="item.label" :prop="item.prop" v-for="item in options" :key="item.prop">
|
|
<!-- 文本框、下拉框、日期框 -->
|
|
<el-input
|
|
v-if="item.type === 'input'"
|
|
v-model="query[item.prop]"
|
|
:disabled="item.disabled"
|
|
:placeholder="item.placeholder || '请输入'"
|
|
clearable
|
|
></el-input>
|
|
<el-select
|
|
v-else-if="item.type === 'select'"
|
|
v-model="query[item.prop]"
|
|
:disabled="item.disabled"
|
|
:placeholder="item.placeholder || '请选择'"
|
|
clearable
|
|
>
|
|
<el-option v-for="(opt, index) in item.opts" :label="opt.label" :value="opt.value" :key="index"></el-option>
|
|
</el-select>
|
|
<el-date-picker v-else-if="item.type === 'date'" type="date" v-model="query[item.prop]" :value-format="item.format"></el-date-picker>
|
|
<el-date-picker
|
|
style="width: 220px"
|
|
v-else-if="item.type === 'daterange'"
|
|
v-model="query[item.prop]"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" :icon="Search" @click="search">搜索</el-button>
|
|
<el-button :icon="Refresh" @click="resetForm(searchRef)">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { FormInstance } from "element-plus";
|
|
import { Search, Refresh } from "@element-plus/icons-vue";
|
|
import { PropType, ref } from "vue";
|
|
import { FormOptionList } from "@/types/form-option";
|
|
|
|
const props = defineProps({
|
|
query: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
options: {
|
|
type: Array as PropType<Array<FormOptionList>>,
|
|
required: true,
|
|
},
|
|
search: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
});
|
|
|
|
const searchRef = ref<FormInstance>();
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return;
|
|
formEl.resetFields();
|
|
props.search();
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-container {
|
|
padding: 20px 30px 0;
|
|
background-color: #fff;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.el-select {
|
|
width: 168px;
|
|
}
|
|
</style>
|