feat: 在订单汇总页面添加日期筛选功能，更新表单和搜索逻辑

src/api/order-summary.ts

@@ -5,6 +5,7 @@ import type { Pagination } from '@/types/global';
 
 export interface OrderSummaryParams extends Pagination {
   roadUid?: string;
+  date?: string;
 }
 
 export interface OrderSummaryRecord {

src/views/apple-card-info/order-summary/index.vue

@@ -1,28 +1,66 @@
 <template>
   <div class="container">
     <Breadcrumb :items="['订单', '订单汇总']" />
-    <a-card class="general-card" title="订单汇总">
-      <a-table
-        :columns="columns"
-        :loading="loading"
-        :data="renderData"
-        :pagination="{
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: pagination.total,
-          pageSizeOptions: [10, 20, 50, 100],
-          showPageSize: true
-        }"
-        :bordered="false"
-        column-resizable:bordered="{cell:true}"
-        @page-change="onPageChange"
-        @page-size-change="onPageSizeChange"
-      >
-        <template #index="{ rowIndex }">
-          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
-        </template>
-      </a-table>
-    </a-card>
+    <a-row>
+      <a-col :flex="1">
+        <a-form
+          :model="formModel"
+          :label-col-props="{ span: 6 }"
+          :wrapper-col-props="{ span: 18 }"
+          label-align="left"
+        >
+          <a-row :gutter="16">
+            <a-col :span="8">
+              <a-form-item field="date" label="日期">
+                <a-date-picker v-model="formModel.date" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-col>
+      <a-divider style="height: 42px" direction="vertical" />
+      <a-col flex="172px" style="text-align: right">
+        <a-space direction="horizontal" :size="18">
+          <a-button type="primary" @click="search">
+            <template #icon>
+              <icon-search />
+            </template>
+            搜索
+          </a-button>
+          <a-button @click="reset">
+            <template #icon>
+              <icon-refresh />
+            </template>
+            重置
+          </a-button>
+        </a-space>
+      </a-col>
+    </a-row>
+    <a-divider style="margin-top: 0" />
+    <a-row>
+      <a-card class="general-card" title="订单汇总">
+        <a-table
+          :columns="columns"
+          :loading="loading"
+          :data="renderData"
+          :pagination="{
+            current: pagination.current,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
+            pageSizeOptions: [10, 20, 50, 100],
+            showPageSize: true
+          }"
+          :bordered="false"
+          column-resizable:bordered="{cell:true}"
+          @page-change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        >
+          <template #index="{ rowIndex }">
+            {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
+          </template>
+        </a-table>
+      </a-card>
+    </a-row>
   </div>
 </template>
 
@@ -39,6 +77,9 @@ const basePagination: Pagination = {
   current: 1,
   pageSize: 50
 };
+const formModel = reactive({
+  date: ''
+});
 const columns: TableColumnData[] = [
   {
     title: '序号',
@@ -108,6 +149,7 @@ const fetchData = async (
     data: { list, total }
   } = await queryOrderSummaryList({
     ...params,
+    ...formModel,
     roadUid: route.params.roadUid as string
   });
   console.log(params);
@@ -126,4 +168,11 @@ const onPageSizeChange = (pageSize: number) => {
 onMounted(() => {
   fetchData();
 });
+const search = () => {
+  fetchData();
+};
+const reset = () => {
+  formModel.date = '';
+  fetchData();
+};
 </script>