feat: 订单管理列表搜索增加时间范围搜索

src/components/CURD/PageSearch.vue

@@ -93,7 +93,24 @@
           </template>
           <!-- DatePicker 日期选择器 -->
           <template v-else-if="item.type === 'date-picker'">
-            <el-date-picker v-model="queryParams[item.prop]" v-bind="item.attrs" />
+            <el-radio-group
+              class="mr-5"
+              v-if="item.attrs && item.attrs.showFastEdit"
+              v-model="timeValue"
+              @change="timeChange($event, item.prop)"
+            >
+              <el-radio-button value="">全部</el-radio-button>
+              <el-radio-button value="0">今天</el-radio-button>
+              <el-radio-button value="-1">昨天</el-radio-button>
+              <el-radio-button value="-7">最近7天</el-radio-button>
+              <el-radio-button value="-30">最近30天</el-radio-button>
+              <el-radio-button value="week">本周</el-radio-button>
+              <el-radio-button value="month">本月</el-radio-button>
+              <el-radio-button value="custom">自定义</el-radio-button>
+            </el-radio-group>
+            <div class="flex" v-if="timeValue === 'custom'">
+              <el-date-picker v-model="queryParams[item.prop]" v-bind="item.attrs" />
+            </div>
           </template>
         </el-form-item>
       </template>
@@ -130,6 +147,7 @@
 import type { FormInstance } from "element-plus";
 import { reactive, ref } from "vue";
 import type { IObject, ISearchConfig } from "./types";
+import dayjs from "dayjs";
 
 // 定义接收的属性
 const props = defineProps<{
@@ -250,6 +268,59 @@ function handleShowInput(prop: string) {
 function setQueryValue(key: string, val: any) {
   queryParams[key] = val;
 }
+
+//时间筛选
+const timeValue = ref("");
+// 切换时间
+function timeChange(e: any, key: string) {
+  const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
+  switch (e) {
+    case "":
+      // 全部
+      queryParams[key] = [];
+      break;
+    case "0":
+      // 今天
+      queryParams[key] = [dayjs().format(format[0]), dayjs().format(format[1])];
+      break;
+    case "-1":
+      // 昨天
+      queryParams[key] = [
+        dayjs().add(-1, "d").format(format[0]),
+        dayjs().add(-1, "d").format(format[1]),
+      ];
+      break;
+    case "-7":
+      // 最近7天
+      queryParams[key] = [dayjs().add(-7, "d").format(format[0]), dayjs().format(format[1])];
+      break;
+    case "-30":
+      // 最近7天
+      queryParams[key] = [dayjs().add(-30, "d").format(format[0]), dayjs().format(format[1])];
+      break;
+    case "week":
+      // 本周
+      queryParams[key] = [
+        dayjs().startOf("week").format(format[0]),
+        dayjs().endOf("week").format(format[1]),
+      ];
+      break;
+    case "month":
+      // 本周
+      queryParams[key] = [
+        dayjs().startOf("month").format(format[0]),
+        dayjs().endOf("month").format(format[1]),
+      ];
+      break;
+    case "custom":
+      // 自定义
+      queryParams[key] = [];
+      break;
+    default:
+      break;
+  }
+}
+
 // 暴露的属性和方法
 defineExpose({ getQueryParams, toggleVisible, setQueryValue });
 </script>

src/views/order/index/config/content.ts

@@ -15,6 +15,12 @@ const contentConfig: IContentConfig = {
     pageSizes: [10, 20, 30, 50],
   },
   indexAction: function (params) {
+    console.log(params);
+    if (params.createAt) {
+      params.startTime = params.createAt[0];
+      params.endTime = params.createAt[1];
+      delete params.createAt;
+    }
     return OrderApi.getList(params);
   },
   indexActionData: {

src/views/order/index/config/search.ts

@@ -63,6 +63,23 @@ const searchConfig: ISearchConfig = {
         },
       },
     },
+    {
+      type: "date-picker",
+      label: "时间范围",
+      prop: "createAt",
+      attrs: {
+        showFastEdit: true,
+        type: "daterange",
+        "range-separator": "~",
+        "start-placeholder": "开始时间",
+        "end-placeholder": "截止时间",
+        "value-format": "YYYY-MM-DD",
+        clearable: true,
+        style: {
+          width: "300px",
+        },
+      },
+    },
   ],
 };