You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.7 KiB
Vue
70 lines
1.7 KiB
Vue
15 hours ago
|
<!--
|
||
|
|
* @Author: chris
|
||
|
|
* @Date: 2025-08-18 09:27:23
|
||
|
|
* @LastEditors: chris
|
||
|
|
* @LastEditTime: 2025-10-15 17:34:07
|
||
|
|
-->
|
||
|
|
<script setup>
|
||
|
|
const props = defineProps({
|
||
|
|
params: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const emits = defineEmits(['update:params', 'reset', 'query', 'export'])
|
||
|
|
|
||
|
|
const queryRef = ref()
|
||
|
|
const queryParams = ref({...props.params});
|
||
|
|
const dateRange = ref(null);
|
||
|
|
|
||
|
|
watch(() => dateRange.value, () => {
|
||
|
|
if (!dateRange.value.length) return;
|
||
|
|
queryParams.value.beginTime = dateRange.value[0]
|
||
|
|
queryParams.value.endTime = dateRange.value[1]
|
||
|
|
})
|
||
|
|
|
||
|
|
watch(() => queryParams.value, (newVal) => {
|
||
|
|
emits('update:params', newVal)
|
||
|
|
}, {deep: true})
|
||
|
|
|
||
|
|
watch(() => props.params, (newVal) => {
|
||
|
|
Object.assign(queryParams.value, newVal)
|
||
|
|
})
|
||
|
|
|
||
|
|
function resetQuery() {
|
||
|
|
dateRange.value = [];
|
||
|
|
emits('reset', queryRef.value)
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleQuery() {
|
||
|
|
// 触发 query 事件
|
||
|
|
emits('query')
|
||
|
|
}
|
||
|
|
|
||
|
|
function exportData() {
|
||
|
|
emits('export')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
|
||
|
|
<el-form-item label="记录时间">
|
||
|
|
<el-date-picker
|
||
|
|
style="width: 300px"
|
||
|
|
v-model="dateRange"
|
||
|
|
value-format="YYYY-MM-DD"
|
||
|
|
type="daterange"
|
||
|
|
range-separator="至"
|
||
|
|
start-placeholder="开始日期"
|
||
|
|
end-placeholder="结束日期"
|
||
|
|
></el-date-picker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||
|
|
<el-button type="warning" icon="Download" @click="exportData">导出</el-button>
|
||
|
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</template>
|