From 81252ccb2dfe6d24afc594cdc05ad6f01e35687c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Mon, 27 Apr 2026 16:42:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8A=A5=E8=A1=A8):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=8C=83=E5=9B=B4=E9=80=89=E6=8B=A9=E5=99=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=BF=E6=8D=A2=E5=8E=9F=E6=9C=89?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构报表页面中的日期选择功能，使用统一的 TimeRangePicker 组件替换原有的独立开始/结束时间选择器。
该组件提供快捷时间范围选择功能，并保持原有时间格式兼容性。同时优化了相关页面的数据结构，移除冗余的字典配置。
---
 .../wms/report/components/timeRangePicker.vue | 209 ++++++++++++++++++
 klp-ui/src/views/wms/report/delivery.vue      |  22 +-
 klp-ui/src/views/wms/report/js/config.js      |   1 +
 klp-ui/src/views/wms/report/receive.vue       |  23 +-
 klp-ui/src/views/wms/report/template/day.vue  |   1 -
 klp-ui/src/views/wms/report/template/loss.vue |  25 ++-
 klp-ui/src/views/wms/report/template/out.vue  |  23 +-
 7 files changed, 263 insertions(+), 41 deletions(-)
 create mode 100644 klp-ui/src/views/wms/report/components/timeRangePicker.vue

diff --git a/klp-ui/src/views/wms/report/components/timeRangePicker.vue b/klp-ui/src/views/wms/report/components/timeRangePicker.vue
new file mode 100644
index 00000000..feb52be5
--- /dev/null
+++ b/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>
diff --git a/klp-ui/src/views/wms/report/delivery.vue b/klp-ui/src/views/wms/report/delivery.vue
index 084f3cad..fd892589 100644
--- a/klp-ui/src/views/wms/report/delivery.vue
+++ b/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-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: '',
diff --git a/klp-ui/src/views/wms/report/js/config.js b/klp-ui/src/views/wms/report/js/config.js
index 64c5802c..7e71ac43 100644
--- a/klp-ui/src/views/wms/report/js/config.js
+++ b/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: '分条线',
 }
diff --git a/klp-ui/src/views/wms/report/receive.vue b/klp-ui/src/views/wms/report/receive.vue
index 71e67ee6..7084c596 100644
--- a/klp-ui/src/views/wms/report/receive.vue
+++ b/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-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: '',
diff --git a/klp-ui/src/views/wms/report/template/day.vue b/klp-ui/src/views/wms/report/template/day.vue
index 1d94d6b4..c9843b98 100644
--- a/klp-ui/src/views/wms/report/template/day.vue
+++ b/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')
diff --git a/klp-ui/src/views/wms/report/template/loss.vue b/klp-ui/src/views/wms/report/template/loss.vue
index 58a4b8cc..f7601cc3 100644
--- a/klp-ui/src/views/wms/report/template/loss.vue
+++ b/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-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: '',
diff --git a/klp-ui/src/views/wms/report/template/out.vue b/klp-ui/src/views/wms/report/template/out.vue
index f87c9557..b38e61bd 100644
--- a/klp-ui/src/views/wms/report/template/out.vue
+++ b/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-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: '',