优化订单管理

frontend/src/features/admin/views/AdminOrdersView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { Refresh, Search } from '@element-plus/icons-vue'
+import { onMounted, reactive, ref } from 'vue'
 
-import { fetchAdminOrders, type Order } from '@/features/orders'
+import { fetchAdminOrders, type AdminOrderQuery, type Order } from '@/features/orders'
 import {
   handoffStatusLabel,
   orderStatusLabel,
@@ -13,19 +14,69 @@ import { formatListingNo } from '@/shared/utils/listingDisplay'
 import { adminPath } from '@/shared/utils/adminPath'
 import AdminTablePagination from '../components/AdminTablePagination.vue'
 
-const status = ref('')
+const filters = reactive<AdminOrderQuery>({
+  keyword: '',
+  status: '',
+  handoff_status: '',
+  settlement_status: '',
+})
 const loading = ref(false)
 const orders = ref<Order[]>([])
 const total = ref(0)
 const currentPage = ref(1)
 const currentPageSize = ref(20)
 
+const orderStatusOptions = [
+  { label: '待支付', value: 'pending_payment' },
+  { label: '待交接', value: 'pending_handoff' },
+  { label: '使用中', value: 'renting' },
+  { label: '逾期中', value: 'overdue' },
+  { label: '待号主确认结账', value: 'pending_checkout_confirm' },
+  { label: '待租客确认修正', value: 'pending_checkout_accept' },
+  { label: '结账争议中', value: 'checkout_disputing' },
+  { label: '申诉中', value: 'disputing' },
+  { label: '异常', value: 'abnormal' },
+  { label: '已完成', value: 'completed' },
+  { label: '已关闭', value: 'closed' },
+  { label: '已取消', value: 'cancelled' },
+] as const
+
+const handoffStatusOptions = [
+  { label: '待号主交接', value: 'pending_owner' },
+  { label: '号主交接超时', value: 'owner_timeout' },
+  { label: '待租客确认', value: 'pending_renter_confirm' },
+  { label: '已确认收号', value: 'received' },
+  { label: '归还逾期', value: 'return_overdue' },
+  { label: '待号主确认结账', value: 'pending_owner_checkout' },
+  { label: '待租客确认修正', value: 'pending_renter_checkout' },
+  { label: '已归还', value: 'returned' },
+  { label: '客服关闭', value: 'admin_closed' },
+  { label: '客服标记异常', value: 'admin_abnormal' },
+] as const
+
+const settlementStatusOptions = [
+  { label: '未结算', value: 'unsettled' },
+  { label: '待结算', value: 'pending' },
+  { label: '冻结中', value: 'frozen' },
+  { label: '已结算', value: 'settled' },
+  { label: '已退款', value: 'refunded' },
+  { label: '已取消', value: 'cancelled' },
+  { label: '已关闭', value: 'closed' },
+  { label: '争议中', value: 'disputed' },
+  { label: '已仲裁', value: 'arbitrated' },
+] as const
+
 onMounted(loadOrders)
 
 async function loadOrders() {
   loading.value = true
   try {
-    const result = await fetchAdminOrders(currentPage.value, currentPageSize.value)
+    const result = await fetchAdminOrders(currentPage.value, currentPageSize.value, {
+      keyword: filters.keyword?.trim(),
+      status: filters.status,
+      handoff_status: filters.handoff_status,
+      settlement_status: filters.settlement_status,
+    })
     orders.value = result.items
     total.value = result.total
   } finally {
@@ -37,10 +88,18 @@ async function handlePageChange() {
   await loadOrders()
 }
 
-const filteredOrders = computed(() => {
-  if (!status.value) return orders.value
-  return orders.value.filter(item => item.status === status.value)
-})
+async function queryOrders() {
+  currentPage.value = 1
+  await loadOrders()
+}
+
+function resetFilters() {
+  filters.keyword = ''
+  filters.status = ''
+  filters.handoff_status = ''
+  filters.settlement_status = ''
+  void queryOrders()
+}
 
 function amountYuan(cent: unknown) {
   if (cent !== undefined && cent !== null) return centToYuan(Number(cent || 0))
@@ -50,10 +109,14 @@ function amountYuan(cent: unknown) {
 function money(value: unknown) {
   return formatMoney(Number(value || 0))
 }
+
+function userText(value: string | number | undefined) {
+  return value || '-'
+}
 </script>
 
 <template>
-  <section class="page">
+  <section class="page admin-orders-page">
     <div class="page-header-row">
       <div class="page-header">
         <p class="eyebrow">Orders</p>
@@ -61,54 +124,134 @@ function money(value: unknown) {
         <p>查看全量订单、交接状态、金额和结算状态。</p>
       </div>
       <div class="toolbar-actions">
-        <el-select v-model="status" clearable placeholder="订单状态" style="width: 180px">
-          <el-option label="待支付" value="pending_payment" />
-          <el-option label="待交接" value="pending_handoff" />
-          <el-option label="使用中" value="renting" />
-          <el-option label="逾期中" value="overdue" />
-          <el-option label="待结账确认" value="pending_return_confirm" />
-          <el-option label="待号主确认结账" value="pending_checkout_confirm" />
-          <el-option label="待租客确认修正" value="pending_checkout_accept" />
-          <el-option label="结账争议中" value="checkout_disputing" />
-          <el-option label="申诉中" value="disputing" />
-          <el-option label="异常" value="abnormal" />
-          <el-option label="已完成" value="completed" />
-          <el-option label="已关闭" value="closed" />
-          <el-option label="已取消" value="cancelled" />
-        </el-select>
-        <el-button @click="loadOrders">刷新</el-button>
+        <el-button :icon="Refresh" @click="loadOrders">刷新</el-button>
       </div>
     </div>
 
-    <el-table v-loading="loading" class="table-panel" :data="filteredOrders">
-      <el-table-column label="商品编号" width="140">
-        <template #default="{ row }">{{
-          formatListingNo(row.listing_no, row.listing_id)
-        }}</template>
+    <div class="order-filter-bar">
+      <el-form inline @submit.prevent>
+        <el-form-item label="关键词">
+          <el-input
+            v-model="filters.keyword"
+            clearable
+            placeholder="订单号 / 商品编号 / 账号 / 手机号"
+            style="width: 280px"
+            @keyup.enter="queryOrders"
+            @clear="queryOrders"
+          />
+        </el-form-item>
+        <el-form-item label="订单状态">
+          <el-select
+            v-model="filters.status"
+            clearable
+            placeholder="全部"
+            style="width: 150px"
+            @change="queryOrders"
+          >
+            <el-option
+              v-for="item in orderStatusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="交接状态">
+          <el-select
+            v-model="filters.handoff_status"
+            clearable
+            placeholder="全部"
+            style="width: 170px"
+            @change="queryOrders"
+          >
+            <el-option
+              v-for="item in handoffStatusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="结算状态">
+          <el-select
+            v-model="filters.settlement_status"
+            clearable
+            placeholder="全部"
+            style="width: 140px"
+            @change="queryOrders"
+          >
+            <el-option
+              v-for="item in settlementStatusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" :icon="Search" :loading="loading" @click="queryOrders"
+            >查询</el-button
+          >
+          <el-button @click="resetFilters">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      class="table-panel admin-orders-table"
+      :data="orders"
+      empty-text="未找到匹配的订单"
+    >
+      <el-table-column label="订单信息" min-width="230">
+        <template #default="{ row }">
+          <div class="order-main-cell">
+            <RouterLink class="order-link" :to="adminPath(`orders/${row.id}`)">
+              {{ row.order_no }}
+            </RouterLink>
+            <span>商品编号 {{ formatListingNo(row.listing_no, row.listing_id) }}</span>
+          </div>
+        </template>
       </el-table-column>
-      <el-table-column prop="order_no" label="订单号" min-width="230" />
-      <el-table-column prop="title" label="账号" min-width="170" />
-      <el-table-column prop="renter_phone" label="租客" min-width="130" />
-      <el-table-column prop="owner_phone" label="号主" min-width="130" />
-      <el-table-column label="状态" width="140">
-        <template #default="{ row }">{{ orderStatusLabel(row.status) }}</template>
+      <el-table-column label="账号" min-width="170" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="stacked-cell">
+            <strong>{{ row.title }}</strong>
+            <span>{{ row.server_region }} / {{ row.login_platform }}</span>
+          </div>
+        </template>
       </el-table-column>
-      <el-table-column label="交接" width="180">
-        <template #default="{ row }">{{ handoffStatusLabel(row.handoff_status) }}</template>
+      <el-table-column label="用户" min-width="170">
+        <template #default="{ row }">
+          <div class="stacked-cell compact">
+            <span>租客 {{ userText(row.renter_phone || row.renter_id) }}</span>
+            <span>号主 {{ userText(row.owner_phone || row.owner_id) }}</span>
+          </div>
+        </template>
       </el-table-column>
-      <el-table-column label="结算" width="120">
+      <el-table-column label="状态" width="150">
+        <template #default="{ row }">
+          <div class="stacked-cell compact">
+            <strong>{{ orderStatusLabel(row.status) }}</strong>
+            <span>{{ handoffStatusLabel(row.handoff_status) }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="结算" width="110">
         <template #default="{ row }">{{ settlementStatusLabel(row.settlement_status) }}</template>
       </el-table-column>
-      <el-table-column label="订单金额" width="100">
-        <template #default="{ row }">¥{{ money(amountYuan(row.rent_amount_cent)) }}</template>
+      <el-table-column label="金额" width="130" align="right">
+        <template #default="{ row }">
+          <div class="stacked-cell money-cell">
+            <strong>¥{{ money(amountYuan(row.rent_amount_cent)) }}</strong>
+            <span>押金 ¥{{ money(amountYuan(row.deposit_amount_cent)) }}</span>
+          </div>
+        </template>
       </el-table-column>
-      <el-table-column label="押金" width="100">
-        <template #default="{ row }">¥{{ money(amountYuan(row.deposit_amount_cent)) }}</template>
-      </el-table-column>
-      <el-table-column label="创建时间" min-width="180">
+      <el-table-column label="创建时间" width="170">
         <template #default="{ row }">{{ formatDateTime(row.created_at) }}</template>
       </el-table-column>
-      <el-table-column label="操作" width="100">
+      <el-table-column label="操作" width="88" align="center">
         <template #default="{ row }">
           <RouterLink :to="adminPath(`orders/${row.id}`)">
             <el-button size="small">详情</el-button>
@@ -127,3 +270,110 @@ function money(value: unknown) {
     />
   </section>
 </template>
+
+<style scoped>
+.admin-orders-page {
+  min-width: 0;
+}
+
+.order-filter-bar {
+  margin-bottom: 16px;
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 16px 18px 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.order-filter-bar :deep(.el-form) {
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 0 14px;
+}
+
+.order-filter-bar :deep(.el-form-item) {
+  margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.order-filter-bar :deep(.el-form-item__label) {
+  color: #6b7785;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.admin-orders-table {
+  --el-table-fixed-right-column: #ffffff;
+}
+
+.admin-orders-table :deep(.el-table__inner-wrapper) {
+  min-width: 0;
+}
+
+.admin-orders-table :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden !important;
+}
+
+.admin-orders-table :deep(.el-scrollbar__bar.is-horizontal) {
+  display: none;
+}
+
+.order-main-cell,
+.stacked-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  line-height: 1.35;
+}
+
+.order-main-cell span,
+.stacked-cell span {
+  overflow: hidden;
+  color: #8f9bba;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stacked-cell strong {
+  overflow: hidden;
+  color: #1b2559;
+  font-size: 14px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stacked-cell.compact {
+  gap: 2px;
+}
+
+.money-cell {
+  align-items: flex-end;
+}
+
+.order-link {
+  overflow: hidden;
+  color: #2f6bff;
+  font-weight: 700;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.order-link:hover {
+  color: #174edb;
+}
+
+@media (max-width: 900px) {
+  .order-filter-bar :deep(.el-input),
+  .order-filter-bar :deep(.el-select) {
+    width: 100% !important;
+  }
+
+  .order-filter-bar :deep(.el-form-item) {
+    width: 100%;
+  }
+}
+</style>