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

重构报表页面中的日期选择功能，使用统一的 TimeRangePicker 组件替换原有的独立开始/结束时间选择器。
该组件提供快捷时间范围选择功能，并保持原有时间格式兼容性。同时优化了相关页面的数据结构，移除冗余的字典配置。

klp-ui/src/views/wms/report/components/timeRangePicker.vue

@@ -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>

klp-ui/src/views/wms/report/delivery.vue

@@ -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-form-item label="时间范围" prop="timeRange">
-          <el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeStart" type="datetime"
+          <time-range-picker
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
+            v-model="queryParams"
-        </el-form-item>
+            start-key="byExportTimeStart"
-        <el-form-item label="结束时间" prop="endTime">
+            end-key="byExportTimeEnd"
-          <el-date-picker style="width: 200px;" v-model="queryParams.byExportTimeEnd" type="datetime"
+            :default-start-time="defaultStartTime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
+            :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: '',

klp-ui/src/views/wms/report/js/config.js

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

klp-ui/src/views/wms/report/receive.vue

@@ -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-form-item label="时间范围" prop="timeRange">
-          <el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeStart" type="datetime"
+          <time-range-picker
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
+            v-model="queryParams"
-        </el-form-item>
+            start-key="byCreateTimeStart"
-        <el-form-item label="结束时间" prop="endTime">
+            end-key="byCreateTimeEnd"
-          <el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeEnd" type="datetime"
+            :default-start-time="defaultStartTime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
+            :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: '',

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

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

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

@@ -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-form-item label="时间范围" prop="timeRange">
-          <el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeStart" type="datetime"
+          <time-range-picker
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
+            v-model="queryParams"
-        </el-form-item>
+            start-key="byCreateTimeStart"
-        <el-form-item label="结束时间" prop="endTime">
+            end-key="byCreateTimeEnd"
-          <el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeEnd" type="datetime"
+            :default-start-time="defaultStartTime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
+            :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: '',

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

@@ -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-form-item label="时间范围" prop="timeRange">
-          <el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeStart" type="datetime"
+          <time-range-picker
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
+            v-model="queryParams"
-        </el-form-item>
+            start-key="byCreateTimeStart"
-        <el-form-item label="结束时间" prop="endTime">
+            end-key="byCreateTimeEnd"
-          <el-date-picker style="width: 200px;" v-model="queryParams.byCreateTimeEnd" type="datetime"
+            :default-start-time="defaultStartTime"
-            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
+            :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: '',