feat(报表): 添加时间范围选择器组件并替换原有日期选择
重构报表页面中的日期选择功能，使用统一的 TimeRangePicker 组件替换原有的独立开始/结束时间选择器。 该组件提供快捷时间范围选择功能，并保持原有时间格式兼容性。同时优化了相关页面的数据结构，移除冗余的字典配置。
This commit is contained in:
209
klp-ui/src/views/wms/report/components/timeRangePicker.vue
Normal file
209
klp-ui/src/views/wms/report/components/timeRangePicker.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="time-range-picker">
|
||||
<div class="time-picker-section">
|
||||
<el-date-picker
|
||||
style="width: 200px;"
|
||||
v-model="startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间"
|
||||
@change="handleTimeChange"
|
||||
/>
|
||||
<span class="separator">至</span>
|
||||
<el-date-picker
|
||||
style="width: 200px;"
|
||||
v-model="endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间"
|
||||
@change="handleTimeChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="quick-options">
|
||||
<el-button size="small" @click="setQuickTime('prevDay')">前一天</el-button>
|
||||
<el-button size="small" @click="setQuickTime('nextDay')">后一天</el-button>
|
||||
<el-button size="small" @click="setQuickTime('last7Days')">近7天</el-button>
|
||||
<el-button size="small" @click="setQuickTime('last15Days')">近15天</el-button>
|
||||
<el-button size="small" @click="setQuickTime('last30Days')">近30天</el-button>
|
||||
<el-button size="small" @click="setQuickTime('thisWeek')">本周</el-button>
|
||||
<el-button size="small" @click="setQuickTime('thisMonth')">本月</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TimeRangePicker',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
startKey: {
|
||||
type: String,
|
||||
default: 'byCreateTimeStart'
|
||||
},
|
||||
endKey: {
|
||||
type: String,
|
||||
default: 'byCreateTimeEnd'
|
||||
},
|
||||
defaultStartTime: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
defaultEndTime: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.startTime = newVal[this.startKey] || ''
|
||||
this.endTime = newVal[this.endKey] || ''
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.defaultStartTime && this.defaultEndTime) {
|
||||
this.startTime = this.defaultStartTime
|
||||
this.endTime = this.defaultEndTime
|
||||
this.handleTimeChange()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addZero(num) {
|
||||
return num.toString().padStart(2, '0')
|
||||
},
|
||||
formatDate(date) {
|
||||
const year = date.getFullYear()
|
||||
const month = this.addZero(date.getMonth() + 1)
|
||||
const day = this.addZero(date.getDate())
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
// 从时间字符串中提取时分秒部分
|
||||
getTimePart(timeStr) {
|
||||
if (!timeStr) return '07:00:00'
|
||||
const parts = timeStr.split(' ')
|
||||
return parts.length > 1 ? parts[1] : '07:00:00'
|
||||
},
|
||||
// 将日期和时间组合
|
||||
combineDateTime(dateStr, timeStr) {
|
||||
return `${dateStr} ${timeStr}`
|
||||
},
|
||||
handleTimeChange() {
|
||||
this.$emit('input', {
|
||||
[this.startKey]: this.startTime,
|
||||
[this.endKey]: this.endTime
|
||||
})
|
||||
this.$emit('change', {
|
||||
[this.startKey]: this.startTime,
|
||||
[this.endKey]: this.endTime
|
||||
})
|
||||
},
|
||||
setQuickTime(type) {
|
||||
// 保留当前选中的时分秒
|
||||
const startHourMinSec = this.getTimePart(this.startTime)
|
||||
const endHourMinSec = this.getTimePart(this.endTime)
|
||||
|
||||
// 获取当前选择的开始和结束时间对应的日期对象
|
||||
let currentStartDate = this.startTime ? new Date(this.startTime.replace(/-/g, '/')) : new Date()
|
||||
let currentEndDate = this.endTime ? new Date(this.endTime.replace(/-/g, '/')) : new Date()
|
||||
|
||||
let newStartDate = new Date(currentStartDate)
|
||||
let newEndDate = new Date(currentEndDate)
|
||||
|
||||
switch (type) {
|
||||
case 'prevDay':
|
||||
// 在当前时间基础上向前推一天
|
||||
newStartDate.setDate(newStartDate.getDate() - 1)
|
||||
newEndDate.setDate(newEndDate.getDate() - 1)
|
||||
break
|
||||
case 'nextDay':
|
||||
// 在当前时间基础上向后推一天
|
||||
newStartDate.setDate(newStartDate.getDate() + 1)
|
||||
newEndDate.setDate(newEndDate.getDate() + 1)
|
||||
break
|
||||
case 'last7Days':
|
||||
const now1 = new Date()
|
||||
const sevenDaysAgo = new Date(now1)
|
||||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7)
|
||||
newStartDate = sevenDaysAgo
|
||||
newEndDate = now1
|
||||
break
|
||||
case 'last15Days':
|
||||
const now2 = new Date()
|
||||
const fifteenDaysAgo = new Date(now2)
|
||||
fifteenDaysAgo.setDate(fifteenDaysAgo.getDate() - 15)
|
||||
newStartDate = fifteenDaysAgo
|
||||
newEndDate = now2
|
||||
break
|
||||
case 'last30Days':
|
||||
const now3 = new Date()
|
||||
const thirtyDaysAgo = new Date(now3)
|
||||
thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
|
||||
newStartDate = thirtyDaysAgo
|
||||
newEndDate = now3
|
||||
break
|
||||
case 'thisWeek':
|
||||
const now4 = new Date()
|
||||
const dayOfWeek = now4.getDay() || 7
|
||||
const weekStart = new Date(now4)
|
||||
weekStart.setDate(weekStart.getDate() - dayOfWeek + 1)
|
||||
const weekEnd = new Date(weekStart)
|
||||
weekEnd.setDate(weekEnd.getDate() + 6)
|
||||
newStartDate = weekStart
|
||||
newEndDate = weekEnd
|
||||
break
|
||||
case 'thisMonth':
|
||||
const now5 = new Date()
|
||||
const monthStart = new Date(now5.getFullYear(), now5.getMonth(), 1)
|
||||
const monthEnd = new Date(now5.getFullYear(), now5.getMonth() + 1, 0)
|
||||
newStartDate = monthStart
|
||||
newEndDate = monthEnd
|
||||
break
|
||||
}
|
||||
|
||||
// 组合新的日期和保留的时分秒
|
||||
this.startTime = this.combineDateTime(this.formatDate(newStartDate), startHourMinSec)
|
||||
this.endTime = this.combineDateTime(this.formatDate(newEndDate), endHourMinSec)
|
||||
|
||||
this.handleTimeChange()
|
||||
|
||||
// 快捷选择后触发查询事件
|
||||
this.$emit('quick-select')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.time-range-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.time-picker-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.separator {
|
||||
color: #606266;
|
||||
}
|
||||
.quick-options {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user