DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(报表): 添加时间范围选择器组件并替换原有日期选择

Browse Source 
重构报表页面中的日期选择功能，使用统一的 TimeRangePicker 组件替换原有的独立开始/结束时间选择器。
该组件提供快捷时间范围选择功能，并保持原有时间格式兼容性。同时优化了相关页面的数据结构，移除冗余的字典配置。
This commit is contained in:
砂糖
2026-04-27 16:42:32 +08:00
parent 0c3382d6db
commit 81252ccb2d
7 changed files with 263 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
klp-ui/src/views/wms/report/components/timeRangePicker.vue Normal file
View 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>

22
klp-ui/src/views/wms/report/delivery.vue
View File

@@ -2,13 +2,15 @@
<div class="app-container" v-loading="loading">
<el-row>
<el-form label-width="80px" inline>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeStart" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeEnd" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
<el-form-item label="时间范围" prop="timeRange">
<time-range-picker
v-model="queryParams"
start-key="byExportTimeStart"
end-key="byExportTimeEnd"
:default-start-time="defaultStartTime"
:default-end-time="defaultEndTime"
@quick-select="handleQuery"
/>
</el-form-item>
<el-form-item label="入场钢卷号" prop="endTime">
<el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
@@ -76,6 +78,7 @@ import MutiSelect from "@/components/MutiSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import ColumnsSetting from "@/views/wms/report/components/setting/columns.vue";
import CoilTable from "@/views/wms/report/components/coilTable/index.vue";
import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
import { saveReportFile } from "@/views/wms/report/js/reportFile";
export default {
@@ -88,6 +91,7 @@ export default {
WarehouseSelect,
ColumnsSetting,
CoilTable,
TimeRangePicker,
},
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
data() {
@@ -116,13 +120,13 @@ export default {
activeColumnConfig: 'coil-report-delivery',
settingVisible: false,
list: [],
defaultStartTime: startTime,
defaultEndTime: endTime,
queryParams: {
pageNum: 1,
pageSize: 99999,
status: 1,
dataType: 1,
byExportTimeStart: startTime,
byExportTimeEnd: endTime,
selectType: 'product',
enterCoilNo: '',
currentCoilNo: '',

1
klp-ui/src/views/wms/report/js/config.js
View File

@@ -124,6 +124,7 @@ export const splitConfig = {
{ value: '1988150800092950529', label: '退火分条成品' },
{ value: '1988150380649967617', label: '镀锌分条成品' },
{ value: '1988151027466170370', label: '拉矫分条成品' },
{ value: '2027272581575487489', label: '包装用内部仓' },
],
productionLine: '分条线',
}

23
klp-ui/src/views/wms/report/receive.vue
View File

@@ -2,13 +2,15 @@
<div class="app-container" v-loading="loading">
<el-row>
<el-form label-width="80px" inline>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeStart" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeEnd" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
<el-form-item label="时间范围" prop="timeRange">
<time-range-picker
v-model="queryParams"
start-key="byCreateTimeStart"
end-key="byCreateTimeEnd"
:default-start-time="defaultStartTime"
:default-end-time="defaultEndTime"
@quick-select="handleQuery"
/>
</el-form-item>
<el-form-item label="入场钢卷号" prop="endTime">
<el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
@@ -87,6 +89,7 @@ import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import { listDeliveryPlan } from '@/api/wms/deliveryPlan'
import ColumnsSetting from "@/views/wms/report/components/setting/columns.vue";
import CoilTable from "@/views/wms/report/components/coilTable/index.vue";
import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
import { saveReportFile } from "@/views/wms/report/js/reportFile";
@@ -100,6 +103,7 @@ export default {
WarehouseSelect,
ColumnsSetting,
CoilTable,
TimeRangePicker,
},
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
data() {
@@ -128,12 +132,11 @@ export default {
activeColumnConfig: 'coil-report-receive',
settingVisible: false,
list: [],
defaultStartTime: startTime,
defaultEndTime: endTime,
queryParams: {
pageNum: 1,
pageSize: 9999,
// status: 1,
byCreateTimeStart: startTime,
byCreateTimeEnd: endTime,
selectType: 'raw_material',
enterCoilNo: '',
currentCoilNo: '',

1
klp-ui/src/views/wms/report/template/day.vue
View File

@@ -175,7 +175,6 @@ export default {
default: '',
},
},
dicts: ['product_coil_status', 'coil_itemname'],
data() {
// 工具函数：个位数补零
const addZero = (num) => num.toString().padStart(2, '0')

25
klp-ui/src/views/wms/report/template/loss.vue
View File

@@ -2,13 +2,15 @@
<div class="app-container" v-loading="loading">
<el-row>
<el-form label-width="80px" inline>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeStart" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeEnd" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
<el-form-item label="时间范围" prop="timeRange">
<time-range-picker
v-model="queryParams"
start-key="byCreateTimeStart"
end-key="byCreateTimeEnd"
:default-start-time="defaultStartTime"
:default-end-time="defaultEndTime"
@quick-select="handleQuery"
/>
</el-form-item>
<el-form-item label="入场钢卷号" prop="endTime">
<el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
@@ -77,6 +79,7 @@ import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import { listDeliveryPlan } from '@/api/wms/deliveryPlan'
import ColumnsSetting from "@/views/wms/report/components/setting/columns.vue";
import CoilTable from "@/views/wms/report/components/coilTable/index.vue";
import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
import { fetchLossList } from "@/views/wms/report/js/fetch";
import { saveReportFile } from "@/views/wms/report/js/reportFile";
@@ -92,6 +95,7 @@ export default {
WarehouseSelect,
ColumnsSetting,
CoilTable,
TimeRangePicker,
},
props: {
actionTypes: {
@@ -107,7 +111,7 @@ export default {
default: '',
},
},
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
dicts: ['coil_material', 'coil_manufacturer'],
data() {
// 工具函数：个位数补零，保证格式统一（比如 9 → 09，5 → 05）
const addZero = (num) => num.toString().padStart(2, '0')
@@ -135,12 +139,11 @@ export default {
settingVisible: false,
list: [],
lossList: [],
defaultStartTime: startTime,
defaultEndTime: endTime,
queryParams: {
pageNum: 1,
pageSize: 9999,
// status: 1,
byCreateTimeStart: startTime,
byCreateTimeEnd: endTime,
selectType: 'raw_material',
enterCoilNo: '',
currentCoilNo: '',

23
klp-ui/src/views/wms/report/template/out.vue
View File

@@ -2,13 +2,15 @@
<div class="app-container" v-loading="loading">
<el-row>
<el-form label-width="80px" inline>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeStart" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeEnd" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
<el-form-item label="时间范围" prop="timeRange">
<time-range-picker
v-model="queryParams"
start-key="byCreateTimeStart"
end-key="byCreateTimeEnd"
:default-start-time="defaultStartTime"
:default-end-time="defaultEndTime"
@quick-select="handleQuery"
/>
</el-form-item>
<el-form-item label="入场钢卷号" prop="endTime">
<el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
@@ -76,6 +78,7 @@ import MutiSelect from "@/components/MutiSelect";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import ColumnsSetting from "@/views/wms/report/components/setting/columns.vue";
import CoilTable from "@/views/wms/report/components/coilTable/index.vue";
import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
import { fetchOutputList } from "@/views/wms/report/js/fetch";
import { saveReportFile } from "@/views/wms/report/js/reportFile";
@@ -91,6 +94,7 @@ export default {
WarehouseSelect,
ColumnsSetting,
CoilTable,
TimeRangePicker,
},
props: {
baseQueryParams: {
@@ -133,12 +137,11 @@ export default {
activeColumnConfig: 'coil-report-output',
settingVisible: false,
list: [],
defaultStartTime: startTime,
defaultEndTime: endTime,
queryParams: {
pageNum: 1,
pageSize: 9999,
// status: 1,
byCreateTimeStart: startTime,
byCreateTimeEnd: endTime,
enterCoilNo: '',
currentCoilNo: '',
warehouseId: '',