12 changed files with 418 additions and 240 deletions
@ -0,0 +1,138 @@
|
||||
<template> |
||||
<div v-h5uShow="props.search"> |
||||
<!-- 查询模块 --> |
||||
<el-form :inline="true" :model="props.query" class="header_search"> |
||||
<el-form-item v-for="item in props.searchOption" :key="item.prop" :label="item.label"> |
||||
<template v-if="item.type === 'input'"> |
||||
<el-input |
||||
v-model.trim="query[item.prop]" |
||||
:placeholder="`请输入${item.label}`" |
||||
clearable |
||||
></el-input> |
||||
</template> |
||||
|
||||
<template v-else-if="item.type === 'select'"> |
||||
<el-select |
||||
v-model="query[item.prop]" |
||||
:placeholder="`请输入${item.label}`" |
||||
filterable |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="value in item.checkarr || []" |
||||
:key="value.dictValue" |
||||
:label="value.dictValue" |
||||
:value="value.dictKey" |
||||
/> |
||||
</el-select> |
||||
</template> |
||||
|
||||
<template v-else-if="item.type === 'time'"> |
||||
<el-date-picker |
||||
v-model="query[item.prop]" |
||||
type="datetimerange" |
||||
unlink-panels |
||||
range-separator="至" |
||||
start-placeholder="开始时间" |
||||
end-placeholder="结束时间" |
||||
:shortcuts="details.shortcuts" |
||||
value-format="YYYY-MM-DD HH:mm:ss" |
||||
clearable |
||||
/> |
||||
</template> |
||||
</el-form-item> |
||||
|
||||
<!-- 查询按钮 --> |
||||
<el-form-item class="el-btn"> |
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜 索</el-button> |
||||
<el-button icon="el-icon-delete" @click="searchReset">清 空</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { defineProps, reactive, type PropType } from 'vue'; |
||||
|
||||
type SerachOption = { |
||||
/** 标题 */ |
||||
label: string; |
||||
/** 查询属性 */ |
||||
prop: string; |
||||
/** 标题宽度 */ |
||||
labelWidth?: string; |
||||
/** 搜索类型 */ |
||||
type: 'input' | 'select' | 'time'; |
||||
/** 下拉框搜索的值 */ |
||||
checkarr: { dictKey: string; dictValue: string }[]; |
||||
}[]; |
||||
|
||||
const props = defineProps({ |
||||
search: { |
||||
type: Boolean, |
||||
required: true, |
||||
}, |
||||
/** 是否显示弹窗 */ |
||||
modelValue: { |
||||
type: Boolean, |
||||
required: true, |
||||
}, |
||||
/** 查询的容器 */ |
||||
query: { |
||||
type: Boolean, |
||||
required: true, |
||||
}, |
||||
/** 搜索配置项 */ |
||||
searchOption: { |
||||
type: Array as PropType<SerachOption>, |
||||
required: true, |
||||
}, |
||||
}); |
||||
|
||||
const $emit = defineEmits(['update:modelValue', 'search', 'remove']); |
||||
|
||||
const details = reactive({ |
||||
/** 时间快捷选择设置 */ |
||||
shortcuts: [ |
||||
{ |
||||
text: '最近一周', |
||||
value: () => { |
||||
const end = new Date(); |
||||
const start = new Date(); |
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); |
||||
return [start, end]; |
||||
}, |
||||
}, |
||||
{ |
||||
text: '最近一个月', |
||||
value: () => { |
||||
const end = new Date(); |
||||
const start = new Date(); |
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); |
||||
return [start, end]; |
||||
}, |
||||
}, |
||||
{ |
||||
text: '最近三个月', |
||||
value: () => { |
||||
const end = new Date(); |
||||
const start = new Date(); |
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); |
||||
return [start, end]; |
||||
}, |
||||
}, |
||||
], |
||||
}); |
||||
|
||||
/** 搜索 */ |
||||
const handleSearch = () => { |
||||
$emit('search', props.query); |
||||
}; |
||||
|
||||
/** 清空搜索框 */ |
||||
const searchReset = () => { |
||||
$emit('remove'); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
Loading…
Reference in new issue