基本配置修改 优化

src/views/canteenreport/index.vue

@@ -2,24 +2,21 @@
   <div class="app-container">
     <!-- 查询条件 -->
     <el-form :inline="true" :model="queryParams" class="demo-form-inline" style="display: flex; align-items: center; flex-wrap: wrap;">
-      <el-form-item label="支付开始时间">
+      <el-form-item label="日期时间">
         <el-date-picker
-          v-model="queryParams.startPayTime"
+          v-model="dateRange"
-          type="datetime"
+          type="daterange"
-          placeholder="选择开始时间"
+          align="right"
-          value-format="yyyy-MM-dd HH:mm:ss"
+          unlink-panels
-          clearable
+          range-separator="至"
-        />
+          start-placeholder="开始日期"
-      </el-form-item>
+          end-placeholder="结束日期"
-      <el-form-item label="支付结束时间">
+          format="yyyy-MM-dd"
-        <el-date-picker
+          style="width: 340px"
-          v-model="queryParams.endPayTime"
+          :default-time="['00:00:00', '23:59:59']"
-          type="datetime"
+          :picker-options="pickerOptions"
-          placeholder="选择结束时间"
+        ></el-date-picker>
-          value-format="yyyy-MM-dd HH:mm:ss"
+        <el-button type="primary" @click="handleQuery" style="margin-left: 8px;">查询</el-button>
-          clearable
-        />
-        <el-button type="primary" @click="handleQuery">查询</el-button>
         <el-button type="success" @click="exportExcel" style="margin-left: 8px;">导出</el-button>
       </el-form-item>
       <!-- 查询按钮和合计在同一行 -->
@@ -208,19 +205,12 @@ import { saveAs } from "file-saver";
 export default {
   name: "CanteenRecord",
   data() {
-     const today = new Date();
-        const startOfDay = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(
-          today.getDate()
-        ).padStart(2, "0")} 00:00:00`;
-        const endOfDay = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(
-          today.getDate()
-        ).padStart(2, "0")} 23:59:59`;
     return {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        startPayTime: startOfDay,
+        startPayTime: '',
-        endPayTime: endOfDay,
+        endPayTime: '',
         orgId: null,
       },
       detailType: "",
@@ -237,9 +227,33 @@ export default {
         pageNum: 1,
         pageSize: 20,
       },
+      dateRange: [],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          },
+          {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          },
+        ]
+      },
     };
   },
   created() {
+    this.dateRange = this.defaultDateRange();
     this.getList();
   },
   computed: {
@@ -264,6 +278,13 @@ export default {
     }
   },
   methods: {
+    // 默认日期范围：当天
+    defaultDateRange() {
+      const today = new Date();
+      const start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      return [start, end];
+    },
        exportExcel() {
          if (!this.tableData || this.tableData.length === 0) {
            this.$message.warning("暂无数据可导出");
@@ -462,25 +483,37 @@ export default {
     /** 查询主表 */
     getList() {
       this.loading = true; // 开启加载
+
+      // 处理日期范围
+      let startTime = '';
+      let endTime = '';
+
+      if (this.dateRange && this.dateRange.length === 2) {
+        const start = new Date(this.dateRange[0]);
+        const end = new Date(this.dateRange[1]);
+        startTime = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}-${String(
+          start.getDate()
+        ).padStart(2, "0")} 00:00:00`;
+        endTime = `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}-${String(
+          end.getDate()
+        ).padStart(2, "0")} 23:59:59`;
+      }
+
+      this.queryParams.startPayTime = startTime;
+      this.queryParams.endPayTime = endTime;
+
       listCanteenRecord(this.queryParams).then((res) => {
         this.tableData = res|| [];
          this.loading = false;
       });
     },
     handleQuery() {
-      if (
-        this.queryParams.startPayTime &&
-        this.queryParams.endPayTime &&
-        this.queryParams.endPayTime < this.queryParams.startPayTime
-      ) {
-        this.$message.error("结束时间不能早于开始时间");
-        return;
-      }
       this.queryParams.pageNum = 1;
       this.getList();
     },
     resetQuery() {
-      this.queryParams = { pageNum: 1, pageSize: 10, startPayTime: null, endPayTime: null, orgId: null };
+      this.queryParams = { pageNum: 1, pageSize: 10, startPayTime: '', endPayTime: '', orgId: null };
+      this.dateRange = this.defaultDateRange();
       this.getList();
     },
     /** 查看详情 */
@@ -522,13 +555,28 @@ export default {
     },
     /** 获取详情分页数据 */
     getDetailList(status) {
+      // 处理日期范围
+      let startTime = '';
+      let endTime = '';
+
+      if (this.dateRange && this.dateRange.length === 2) {
+        const start = new Date(this.dateRange[0]);
+        const end = new Date(this.dateRange[1]);
+        startTime = `${start.getFullYear()}-${String(start.getMonth() + 1).padStart(2, "0")}-${String(
+          start.getDate()
+        ).padStart(2, "0")} 00:00:00`;
+        endTime = `${end.getFullYear()}-${String(end.getMonth() + 1).padStart(2, "0")}-${String(
+          end.getDate()
+        ).padStart(2, "0")} 23:59:59`;
+      }
+
       const params = {
         conSource: status,
         orgName: this.detail.orgName,
         pageNum: this.detailParams.pageNum,
         pageSize: this.detailParams.pageSize,
-        startPayTime: this.queryParams.startPayTime,
+        startPayTime: startTime,
-        endPayTime: this.queryParams.endPayTime,
+        endPayTime: endTime,
       };
       getDetailList(params).then((res) => {
         this.detailData = res || [];

src/views/canteenreport/people.vue

@@ -28,23 +28,20 @@
       <el-form-item label="用户姓名">
         <el-input v-model="queryParams.custName" placeholder="请输入用户姓名" clearable />
       </el-form-item>
-      <el-form-item label="支付开始时间">
+      <el-form-item label="日期时间">
         <el-date-picker
-          v-model="queryParams.startPayTime"
+          v-model="dateRange"
-          type="datetime"
+          type="daterange"
-          placeholder="选择开始时间"
+          align="right"
-          value-format="yyyy-MM-dd HH:mm:ss"
+          unlink-panels
-          clearable
+          range-separator="至"
-        />
+          start-placeholder="开始日期"
-      </el-form-item>
+          end-placeholder="结束日期"
-      <el-form-item label="支付结束时间">
+          format="yyyy-MM-dd"
-        <el-date-picker
+          style="width: 340px"
-          v-model="queryParams.endPayTime"
+          :default-time="['00:00:00', '23:59:59']"
-          type="datetime"
+          :picker-options="pickerOptions"
-          placeholder="选择结束时间"
+        ></el-date-picker>
-          value-format="yyyy-MM-dd HH:mm:ss"
-          clearable
-        />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="handleQuery">查询</el-button>
@@ -171,19 +168,39 @@ import ExcelJS from "exceljs";
 import { saveAs } from "file-saver";
 export default {
   data() {
-    const today = new Date();
-    const startOfDay = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2,"0")} 00:00:00`;
-    const endOfDay = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2,"0")}-${String(today.getDate()).padStart(2,"0")} 23:59:59`;
     return {
       totalConsume: 0,  // 消费总额
       totalRefund: 0,   // 退款总额
       selectedOrg: [], // 支持多选
       orgOptions:[],
+      dateRange: [],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          },
+          {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          },
+        ]
+      },
       queryParams: {
       pageNum: 1,
       pageSize: 10,
-      startPayTime: startOfDay,
+      startPayTime: '',
-      endPayTime: endOfDay,
+      endPayTime: '',
       orgName: "",
       },
       detailVisible: false,
@@ -199,10 +216,17 @@ export default {
     };
   },
   created() {
+    this.dateRange = this.defaultDateRange();
     this.getList();
     this.getTree();
   },
   methods: {
+    // 默认日期范围：当天
+    defaultDateRange() {
+      const end = new Date();
+      const start = new Date();
+      return [start, end];
+    },
     getTree(){
       getTree().then(res => {
          this.orgOptions = res;
@@ -261,10 +285,6 @@ export default {
     tableCellStyle() { return { textAlign: "center" }; },
 
     handleQuery() {
-      if(this.queryParams.startPayTime && this.queryParams.endPayTime && this.queryParams.endPayTime < this.queryParams.startPayTime){
-        this.$message.error("结束时间不能早于开始时间");
-        return;
-      }
       this.queryParams.pageNum = 1;
       this.getList();
     },
@@ -281,8 +301,31 @@ export default {
     },
     getList() {
       this.loading = true;
-          // 取最后一级 orgId
+
-          this.queryParams.selectedOrg = this.getSelectedOrgIds(); // 二级或三级下的所有 id
+      // 处理日期范围
+      let startTime = '';
+      let endTime = '';
+
+      if (this.dateRange && this.dateRange.length === 2) {
+        const start = this.dateRange[0];
+        const end = this.dateRange[1];
+
+        const formatDate = d => {
+          const date = new Date(d);
+          const y = date.getFullYear();
+          const m = String(date.getMonth() + 1).padStart(2, '0');
+          const day = String(date.getDate()).padStart(2, '0');
+          return `${y}-${m}-${day}`;
+        };
+
+        startTime = formatDate(start) + ' 00:00:00';
+        endTime = formatDate(end) + ' 23:59:59';
+      }
+
+      // 取最后一级 orgId
+      this.queryParams.selectedOrg = this.getSelectedOrgIds(); // 二级或三级下的所有 id
+      this.queryParams.startPayTime = startTime;
+      this.queryParams.endPayTime = endTime;
          // queryParams.orgPath = this.selectedOrg.join(',');
       peoplelistRecord(this.queryParams).then(res => {
         this.tableData = res.rows || [];
@@ -296,8 +339,30 @@ export default {
      // 获取选中的组织 ID
      this.queryParams.selectedOrg = this.getSelectedOrgIds();
 
+     // 处理日期范围
+     let startTime = '';
+     let endTime = '';
+
+     if (this.dateRange && this.dateRange.length === 2) {
+       const start = this.dateRange[0];
+       const end = this.dateRange[1];
+
+       const formatDate = d => {
+         const date = new Date(d);
+         const y = date.getFullYear();
+         const m = String(date.getMonth() + 1).padStart(2, '0');
+         const day = String(date.getDate()).padStart(2, '0');
+         return `${y}-${m}-${day}`;
+       };
+
+       startTime = formatDate(start) + ' 00:00:00';
+       endTime = formatDate(end) + ' 23:59:59';
+     }
+
      // 克隆参数，单独对中文参数进行 encodeURIComponent
      const params = { ...this.queryParams };
+     params.startPayTime = startTime;
+     params.endPayTime = endTime;
      if (params.custName) {
        params.custName = encodeURIComponent(params.custName); // 中文名编码
      }
@@ -317,12 +382,32 @@ export default {
     },
 
     getDetailList() {
+      // 处理日期范围
+      let startTime = '';
+      let endTime = '';
+
+      if (this.dateRange && this.dateRange.length === 2) {
+        const start = this.dateRange[0];
+        const end = this.dateRange[1];
+
+        const formatDate = d => {
+          const date = new Date(d);
+          const y = date.getFullYear();
+          const m = String(date.getMonth() + 1).padStart(2, '0');
+          const day = String(date.getDate()).padStart(2, '0');
+          return `${y}-${m}-${day}`;
+        };
+
+        startTime = formatDate(start) + ' 00:00:00';
+        endTime = formatDate(end) + ' 23:59:59';
+      }
+
       const params = {
         orgName: this.detail.orgName,
         pageNum: 1,
         pageSize: 10,
-        startPayTime: this.queryParams.startPayTime,
+        startPayTime: startTime,
-        endPayTime: this.queryParams.endPayTime,
+        endPayTime: endTime,
       };
       getDetailList(params).then(res => {
         this.detailData = res.list || [];