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