Refactor: 优化订单管理和配送订单列表分页功能，新增状态筛选卡片和交互逻辑，提升用户体验。

shaofan
1 parent 4d16c20f
Showing 2 changed files with 220 additions and 16 deletions
src/views/delivery/DeliveryOrderList.vue
src/views/order/OrderList.vue
@@ -6,18 +6,25 @@
           <a-select v-if="isAdmin" v-model:value="filterCityId" placeholder="租户" allowClear class="list-filter" @change="handleAdminCityChange">
             <a-select-option v-for="item in cityList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
           </a-select>
-          <a-input v-if="isAdmin" v-model:value="filterAppKey" placeholder="接入方 AppKey" class="list-search appkey-search" @pressEnter="loadList" />
-          <a-select v-model:value="filterStatus" placeholder="状态" allowClear class="list-filter" @change="loadList">
+          <a-input v-if="isAdmin" v-model:value="filterAppKey" placeholder="接入方 AppKey" class="list-search appkey-search" @pressEnter="handleAppKeySearch" />
+          <a-select v-model:value="filterStatus" placeholder="状态" allowClear class="list-filter" @change="handleStatusChange">
             <a-select-option :value="2">待接单</a-select-option>
             <a-select-option :value="3">已接单</a-select-option>
             <a-select-option :value="4">配送中</a-select-option>
             <a-select-option :value="6">已完成</a-select-option>
             <a-select-option :value="10">已取消</a-select-option>
           </a-select>
-          <a-input-search v-model:value="keyword" placeholder="外部订单号" @search="loadList" class="list-search" />
+          <a-input-search v-model:value="keyword" placeholder="外部订单号" @search="handleKeywordSearch" class="list-search" />
         </div>
       </div>
-      <a-table :dataSource="list" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
+      <a-table
+        :dataSource="list"
+        :columns="columns"
+        :loading="loading"
+        rowKey="id"
+        :pagination="pagination"
+        @change="handleTableChange"
+      >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'cityName'">
             {{ getCityName(record.cityId) }}
@@ -61,12 +68,18 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
+import type { TablePaginationConfig } from 'ant-design-vue'
 import { riderApi } from '@/api'
 import { useRoleCityList } from '@/composables/useRoleCityList'
+const PAGE_SIZE = 20
+
 const loading = ref(false)
 const detailLoading = ref(false)
 const list = ref<any[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(PAGE_SIZE)
 const filterCityId = ref<number | undefined>()
 const filterAppKey = ref('')
 const filterStatus = ref<number | undefined>()
@@ -104,6 +117,42 @@ const columns = computed(() =&gt; {
   ]
 })
+const pagination = computed<TablePaginationConfig>(() => ({
+  current: currentPage.value,
+  pageSize: pageSize.value,
+  total: total.value,
+  showSizeChanger: false,
+  showTotal: (count) => `共 ${count} 条`,
+}))
+
+function resetToFirstPage() {
+  currentPage.value = 1
+}
+
+function handleStatusChange() {
+  resetToFirstPage()
+  loadList()
+}
+
+function handleKeywordSearch() {
+  resetToFirstPage()
+  loadList()
+}
+
+function handleAppKeySearch() {
+  resetToFirstPage()
+  loadList()
+}
+
+function handleTableChange(page: TablePaginationConfig) {
+  const nextPage = page.current ?? 1
+  if (nextPage === currentPage.value) {
+    return
+  }
+  currentPage.value = nextPage
+  loadList()
+}
+
 async function loadList() {
   loading.value = true
   try {
@@ -112,9 +161,17 @@ async function loadList() {
       appKey: filterAppKey.value || undefined,
       status: filterStatus.value,
       outOrderNo: keyword.value || undefined,
-      page: 1
+      page: currentPage.value
     })
-    list.value = Array.isArray(res?.data) ? res.data : []
+    const data = res?.data ?? {}
+    list.value = Array.isArray(data.list) ? data.list : []
+    total.value = Number(data.total ?? 0)
+    currentPage.value = Number(data.page ?? currentPage.value)
+    pageSize.value = Number(data.pageSize ?? PAGE_SIZE)
+    if (!list.value.length && total.value > 0 && currentPage.value > 1) {
+      currentPage.value -= 1
+      await loadList()
+    }
   } finally { loading.value = false }
 }
@@ -123,6 +180,7 @@ function handleAdminCityChange() {
     queryVisible.value = false
     queryResult.value = null
   }
+  resetToFirstPage()
   loadList()
 }
@@ -143,7 +201,7 @@ async function cancelOrder(record: any) {
     queryVisible.value = false
     queryResult.value = null
   }
-  loadList()
+  await loadList()
 }
 onMounted(async () => {
 <template>
   <div>
     <a-card title="订单管理" :bordered="false" class="list-table-card">
+      <div class="order-status-cards">
+        <button
+          v-for="item in statusCardItems"
+          :key="item.key"
+          type="button"
+          class="order-status-card"
+          :class="{ 'is-active': isStatusCardActive(item.value) }"
+          @click="handleStatusCardClick(item.value)"
+        >
+          <span class="order-status-card__label">{{ item.label }}</span>
+          <strong class="order-status-card__count">{{ statusSummary[item.key] ?? 0 }}</strong>
+        </button>
+      </div>
       <div class="list-toolbar">
         <div class="list-toolbar-left">
           <a-select v-if="isAdmin" v-model:value="filterCityId" placeholder="租户" allowClear class="list-filter" @change="handleAdminCityChange">
             <a-select-option v-for="item in cityList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
           </a-select>
-          <a-select v-model:value="filterStatus" placeholder="订单状态" allowClear class="list-filter" @change="loadList">
+          <a-select v-model:value="filterStatus" placeholder="订单状态" allowClear class="list-filter" @change="handleStatusChange">
             <a-select-option :value="2">已支付</a-select-option>
             <a-select-option :value="3">已接单</a-select-option>
             <a-select-option :value="4">服务中</a-select-option>
@@ -14,15 +27,22 @@
             <a-select-option :value="7">退款申请</a-select-option>
             <a-select-option :value="10">已取消</a-select-option>
           </a-select>
-          <a-select v-model:value="filterTrans" placeholder="转单状态" allowClear class="list-filter" @change="loadList">
+          <a-select v-model:value="filterTrans" placeholder="转单状态" allowClear class="list-filter" @change="handleTransChange">
             <a-select-option :value="2">转单申请中</a-select-option>
             <a-select-option :value="1">已转单</a-select-option>
             <a-select-option :value="3">转单拒绝</a-select-option>
           </a-select>
-          <a-input-search v-model:value="keyword" placeholder="订单号" @search="loadList" class="list-search" />
+          <a-input-search v-model:value="keyword" placeholder="订单号" @search="handleKeywordSearch" class="list-search" />
         </div>
       </div>
-      <a-table :dataSource="list" :columns="columns" :loading="loading" rowKey="id" :pagination="false">
+      <a-table
+        :dataSource="list"
+        :columns="columns"
+        :loading="loading"
+        rowKey="id"
+        :pagination="pagination"
+        @change="handleTableChange"
+      >
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'cityName'">
             {{ cityList.find(item => item.id === record.cityId)?.name || `租户#${record.cityId}` }}
@@ -129,12 +149,28 @@
 <script setup lang="ts">
 import { computed, ref, onMounted } from 'vue'
 import { message } from 'ant-design-vue'
+import type { TablePaginationConfig } from 'ant-design-vue'
 import { riderApi, refundApi } from '@/api'
 import { useRoleCityList } from '@/composables/useRoleCityList'
+const PAGE_SIZE = 20
+const STATUS_CARD_ITEMS = [
+  { key: 'all', label: '全部', value: undefined },
+  { key: '2', label: '已支付', value: 2 },
+  { key: '3', label: '已接单', value: 3 },
+  { key: '4', label: '服务中', value: 4 },
+  { key: '6', label: '已完成', value: 6 },
+  { key: '7', label: '退款申请', value: 7 },
+  { key: '10', label: '已取消', value: 10 },
+] as const
+
 const loading = ref(false)
 const saving = ref(false)
 const list = ref<any[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(PAGE_SIZE)
+const statusSummary = ref<Record<string, number>>({ all: 0, '2': 0, '3': 0, '4': 0, '6': 0, '7': 0, '10': 0 })
 const filterCityId = ref<number | undefined>()
 const filterStatus = ref<number | undefined>()
 const filterTrans = ref<number | undefined>()
@@ -151,6 +187,7 @@ const refundRecord = ref&lt;any&gt;(null)
 const currentRefundRecordId = ref(0)
 const { isAdmin, cityList, loadCities } = useRoleCityList()
 const canOperate = computed(() => !isAdmin.value || !!filterCityId.value)
+const statusCardItems = STATUS_CARD_ITEMS
 const statusMap: Record<number, string> = {
   1: '待支付', 2: '已支付', 3: '已接单', 4: '服务中',
@@ -180,6 +217,52 @@ const columns = computed(() =&gt; {
   ]
 })
+const pagination = computed<TablePaginationConfig>(() => ({
+  current: currentPage.value,
+  pageSize: pageSize.value,
+  total: total.value,
+  showSizeChanger: false,
+  showTotal: (count) => `共 ${count} 条`,
+}))
+
+function resetToFirstPage() {
+  currentPage.value = 1
+}
+
+function isStatusCardActive(value: number | undefined) {
+  return value === undefined ? filterStatus.value === undefined : filterStatus.value === value
+}
+
+function handleStatusCardClick(value: number | undefined) {
+  filterStatus.value = value
+  resetToFirstPage()
+  loadList()
+}
+
+function handleStatusChange() {
+  resetToFirstPage()
+  loadList()
+}
+
+function handleTransChange() {
+  resetToFirstPage()
+  loadList()
+}
+
+function handleKeywordSearch() {
+  resetToFirstPage()
+  loadList()
+}
+
+function handleTableChange(page: TablePaginationConfig) {
+  const nextPage = page.current ?? 1
+  if (nextPage === currentPage.value) {
+    return
+  }
+  currentPage.value = nextPage
+  loadList()
+}
+
 async function loadList() {
   loading.value = true
   try {
@@ -188,9 +271,26 @@ async function loadList() {
       status: filterStatus.value,
       isTrans: filterTrans.value,
       keyword: keyword.value,
-      page: 1
+      page: currentPage.value
     })
-    list.value = Array.isArray(res?.data) ? res.data : []
+    const data = res?.data ?? {}
+    list.value = Array.isArray(data.list) ? data.list : []
+    total.value = Number(data.total ?? 0)
+    currentPage.value = Number(data.page ?? currentPage.value)
+    pageSize.value = Number(data.pageSize ?? PAGE_SIZE)
+    statusSummary.value = {
+      all: Number(data.statusSummary?.all ?? 0),
+      '2': Number(data.statusSummary?.['2'] ?? 0),
+      '3': Number(data.statusSummary?.['3'] ?? 0),
+      '4': Number(data.statusSummary?.['4'] ?? 0),
+      '6': Number(data.statusSummary?.['6'] ?? 0),
+      '7': Number(data.statusSummary?.['7'] ?? 0),
+      '10': Number(data.statusSummary?.['10'] ?? 0),
+    }
+    if (!list.value.length && total.value > 0 && currentPage.value > 1) {
+      currentPage.value -= 1
+      await loadList()
+    }
   } finally { loading.value = false }
 }
@@ -200,6 +300,7 @@ function handleAdminCityChange() {
     refundVisible.value = false
     rejectVisible.value = false
   }
+  resetToFirstPage()
   loadList()
 }
@@ -228,14 +329,14 @@ async function handleDesignate() {
     await riderApi.designate(designateOrderId.value, designateRiderId.value)
     message.success('指派成功')
     designateVisible.value = false
-    loadList()
+    await loadList()
   } finally { saving.value = false }
 }
 async function handleTrans(orderId: number, trans: number) {
   await riderApi.setTrans(orderId, trans)
   message.success('操作成功')
-  loadList()
+  await loadList()
 }
 async function openRefund(record: any) {
@@ -257,7 +358,7 @@ async function handleRefund(status: number) {
     message.success('操作成功')
     refundVisible.value = false
     rejectVisible.value = false
-    loadList()
+    await loadList()
   } finally { saving.value = false }
 }
@@ -266,3 +367,48 @@ onMounted(async () =&gt; {
   await loadList()
 })
 </script>
+
+<style scoped>
+.order-status-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.order-status-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  min-height: 88px;
+  padding: 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #fff;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.order-status-card:hover {
+  border-color: #1677ff;
+  box-shadow: 0 8px 24px rgba(22, 119, 255, 0.08);
+}
+
+.order-status-card.is-active {
+  border-color: #1677ff;
+  background: #f0f7ff;
+  box-shadow: 0 8px 24px rgba(22, 119, 255, 0.12);
+}
+
+.order-status-card__label {
+  color: #64748b;
+  font-size: 14px;
+}
+
+.order-status-card__count {
+  color: #0f172a;
+  font-size: 28px;
+  line-height: 1;
+}
+</style>