优化订单履约分流与后台筛选

apps/frontend/src/pages/admin/AdminTasksPage.tsx

@@ -21,7 +21,7 @@ import {
 } from 'antd'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router'
 
 import { AdminRangePicker } from '@/components/admin/AdminDatePicker'
@@ -37,7 +37,7 @@ import {
 } from '@/services/admin'
 import type { AdminTaskActionResponse, AdminTaskListItem } from '@/types/admin'
 import { hasAdminRole } from '@/utils/admin-auth'
-import { adminTaskStatusOptions } from '@/utils/admin-options'
+import { adminOrderExecutorOptions, adminTaskStatusOptions } from '@/utils/admin-options'
 import {
   ADMIN_DEFAULT_PAGE_SIZE,
   buildAdminTablePagination,
@@ -46,11 +46,9 @@ import {
 import { formatAdminDateTime } from '@/utils/admin-time'
 
 type TaskFilterForm = {
+  keyword?: string
+  executorKey?: string
   status?: string
-  platformOrderId?: string
-  taskNo?: string
-  skuCode?: string
-  roleId?: string
   dateRange?: unknown
 }
 
@@ -67,6 +65,7 @@ type TaskListBlocker = {
 export default function AdminTasksPage() {
   const navigate = useNavigate()
   const { message, modal } = App.useApp()
+  const [form] = Form.useForm<TaskFilterForm>()
   const [searchParams, setSearchParams] = useSearchParams()
   const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
   const [lastClaimUrl, setLastClaimUrl] = useState('')
@@ -77,11 +76,15 @@ export default function AdminTasksPage() {
   const canRebindRole = hasAdminRole('support')
   const canCloseTasks = hasAdminRole('support')
   const filters = {
+    keyword:
+      searchParams.get('keyword') ||
+      searchParams.get('taskNo') ||
+      searchParams.get('platformOrderId') ||
+      searchParams.get('skuCode') ||
+      searchParams.get('roleId') ||
+      '',
+    executorKey: searchParams.get('executorKey') || '',
     status: searchParams.get('status') || '',
-    platformOrderId: searchParams.get('platformOrderId') || '',
-    taskNo: searchParams.get('taskNo') || '',
-    skuCode: searchParams.get('skuCode') || '',
-    roleId: searchParams.get('roleId') || '',
     dateFrom: searchParams.get('dateFrom') || '',
     dateTo: searchParams.get('dateTo') || '',
   }
@@ -91,11 +94,9 @@ export default function AdminTasksPage() {
     [
       filters.dateFrom,
       filters.dateTo,
-      filters.platformOrderId,
-      filters.roleId,
-      filters.skuCode,
+      filters.executorKey,
+      filters.keyword,
       filters.status,
-      filters.taskNo,
       page,
       pageSize,
     ],
@@ -106,6 +107,18 @@ export default function AdminTasksPage() {
   })
   const data = query.data?.data
 
+  useEffect(() => {
+    form.setFieldsValue({
+      keyword: filters.keyword || undefined,
+      executorKey: filters.executorKey || undefined,
+      status: filters.status || undefined,
+      dateRange:
+        filters.dateFrom && filters.dateTo
+          ? [dayjs(filters.dateFrom), dayjs(filters.dateTo)]
+          : undefined,
+    })
+  }, [filters.dateFrom, filters.dateTo, filters.executorKey, filters.keyword, filters.status, form])
+
   const columns: TableColumnsType<AdminTaskListItem> = [
     {
       title: '任务 / 订单',
@@ -381,6 +394,12 @@ export default function AdminTasksPage() {
   }
 
   function resetFilters() {
+    form.setFieldsValue({
+      keyword: undefined,
+      executorKey: undefined,
+      status: undefined,
+      dateRange: undefined,
+    })
     setSearchParams(cleanParams({ page: 1, pageSize }))
   }
 
@@ -390,37 +409,36 @@ export default function AdminTasksPage() {
 
       <Card>
         <Form<TaskFilterForm>
+          form={form}
           layout="inline"
-          initialValues={{
-            ...filters,
-            dateRange:
-              filters.dateFrom && filters.dateTo
-                ? [dayjs(filters.dateFrom), dayjs(filters.dateTo)]
-                : undefined,
-          }}
           onFinish={applyFilters}
           className="filter-form"
         >
+          <Form.Item name="keyword">
+            <Input
+              allowClear
+              placeholder="任务号 / 订单号 / 商品标题 / SKU / 角色"
+              style={{ width: 330 }}
+            />
+          </Form.Item>
+          <Form.Item name="executorKey">
+            <Select
+              allowClear
+              placeholder="履约渠道"
+              options={adminOrderExecutorOptions}
+              style={{ minWidth: 150 }}
+            />
+          </Form.Item>
           <Form.Item name="status">
             <Select
               allowClear
+              showSearch
+              optionFilterProp="label"
               placeholder="任务状态"
               options={adminTaskStatusOptions}
               style={{ minWidth: 170 }}
             />
           </Form.Item>
-          <Form.Item name="platformOrderId">
-            <Input allowClear placeholder="平台订单号" />
-          </Form.Item>
-          <Form.Item name="taskNo">
-            <Input allowClear placeholder="任务号" />
-          </Form.Item>
-          <Form.Item name="roleId">
-            <Input allowClear placeholder="角色 ID" />
-          </Form.Item>
-          <Form.Item name="skuCode">
-            <Input allowClear placeholder="商品名 / SKU" />
-          </Form.Item>
           <Form.Item name="dateRange">
             <AdminRangePicker />
           </Form.Item>