优化：提升性能

src/views/shop/shopOrder/index.vue

@@ -1,45 +1,74 @@
 <template>
   <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
+    <a-card style="margin-bottom: 20px">
+      <search
+        @search="reload"
+        :selection="selection"
+        @add="openEdit"
+        @remove="removeBatch"
+        @batchMove="openMove"
+      />
+    </a-card>
     <a-card :bordered="false" :body-style="{ padding: '16px' }">
+      <a-tabs type="card" v-model:activeKey="activeKey" @change="onTabs">
+        <a-tab-pane key="all" tab="全部"/>
+        <a-tab-pane key="unpaid" tab="待支付"/>
+        <a-tab-pane key="undelivered" tab="待发货"/>
+        <a-tab-pane key="unverified" tab="待核销"/>
+        <a-tab-pane key="unreceived" tab="待收货"/>
+        <a-tab-pane key="unevaluated" tab="待评价"/>
+        <a-tab-pane key="completed" tab="已完成"/>
+        <a-tab-pane key="refunded" tab="已退款"/>
+        <a-tab-pane key="deleted" tab="已删除"/>
+      </a-tabs>
       <ele-pro-table
         ref="tableRef"
         row-key="orderId"
         :columns="columns"
         :datasource="datasource"
         :customRow="customRow"
+        v-model:selection="selection"
+        :toolbar="false"
         tool-class="ele-toolbar-form"
         class="sys-org-table"
       >
         <template #toolbar>
-          <search
-            @search="reload"
-            :selection="selection"
-            @add="openEdit"
-            @remove="removeBatch"
-            @batchMove="openMove"
-          />
+
         </template>
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'name'">
             <div @click="onSearch(record)" class="cursor-pointer">{{ record.name || '匿名' }}</div>
           </template>
+          <template v-if="column.key === 'orderGoods'">
+            <template v-for="(item,index) in record.orderGoods" :key="index">
+              <div class="item py-1">
+                <a-space :id="`g-${index}`">
+                  <a-avatar :src="item.image" shape="square"/>
+                  <span>{{ item.goodsName }}</span>
+                </a-space>
+              </div>
+            </template>
+          </template>
           <template v-if="column.key === 'phone'">
             <div v-if="record.mobile" class="text-gray-400">{{ record.mobile }}</div>
             <div v-else class="text-gray-600">{{ record.phone }}</div>
           </template>
           <template v-if="column.key === 'payType'">
-              <template v-for="item in getPayType()">
-                <template v-if="record.payStatus == 1">
-                  <span v-if="item.value == record.payType">{{ item.label }}</span>
-                </template>
-                <template v-else>
-                  <span></span>
-                </template>
+            <template v-for="item in getPayType()">
+              <template v-if="record.payStatus == 1">
+                <span v-if="item.value == record.payType">{{ item.label }}</span>
               </template>
+              <template v-else>
+                <span></span>
+              </template>
+            </template>
           </template>
           <template v-if="column.key === 'payStatus'">
-            <a-tag v-if="record.payStatus == 1" color="green" @click.stop="updatePayStatus(record)" class="cursor-pointer">已付款</a-tag>
-            <a-tag v-if="record.payStatus == 0" @click.stop="updatePayStatus(record)" class="cursor-pointer">未付款</a-tag>
+            <a-tag v-if="record.payStatus == 1" color="green" @click.stop="updatePayStatus(record)"
+                   class="cursor-pointer">已付款
+            </a-tag>
+            <a-tag v-if="record.payStatus == 0" @click.stop="updatePayStatus(record)" class="cursor-pointer">未付款
+            </a-tag>
             <a-tag v-if="record.payStatus == 3">未付款,占场中</a-tag>
           </template>
           <template v-if="column.key === 'image'">
@@ -103,7 +132,7 @@ import type {
 } from 'ele-admin-pro/es/ele-pro-table/types';
 import Search from './components/search.vue';
 import {getPageTitle} from "@/utils/common";
-import { toDateString } from 'ele-admin-pro';
+import {toDateString} from 'ele-admin-pro';
 import OrderInfo from './components/orderInfo.vue';
 import {ShopOrder, ShopOrderParam} from "@/api/shop/shopOrder/model";
 import {pageShopOrder, repairOrder} from "@/api/shop/shopOrder";
@@ -123,7 +152,8 @@ const showEdit = ref(false);
 const showMove = ref(false);
 // 加载状态
 const loading = ref(true);
-
+// 激活的标签
+const activeKey = ref<string>('all');
 // 表格数据源
 const datasource: DatasourceFunction = ({
                                           page,
@@ -146,11 +176,16 @@ const datasource: DatasourceFunction = ({
 // 表格列配置
 const columns = ref<ColumnItem[]>([
   {
-    title: '订单号',
+    title: '订单编号',
     dataIndex: 'orderNo',
     key: 'orderNo',
-    align: 'center',
-    width: 200,
+    align: 'center'
+  },
+  {
+    title: '商品信息',
+    dataIndex: 'orderGoods',
+    key: 'orderGoods',
+    width: 400,
   },
   {
     title: '实付金额',
@@ -206,7 +241,7 @@ const columns = ref<ColumnItem[]>([
     width: 180,
     sorter: true,
     ellipsis: true,
-    customRender: ({ text }) => toDateString(text)
+    customRender: ({text}) => toDateString(text)
   },
   // {
   //   title: '操作',
@@ -224,6 +259,24 @@ const reload = (where?: ShopOrderParam) => {
   tableRef?.value?.reload({where: where});
 };
 
+const onTabs = () => {
+  // 将语义化的key转换为后端需要的statusFilter值
+  const statusFilterMap: Record<string, number | undefined> = {
+    'all': undefined,           // 全部：不传statusFilter
+    'unpaid': 0,               // 待支付：对应原来的key="0"
+    'undelivered': 1,          // 待发货：对应原来的key="1"
+    'unverified': 2,           // 待核销：对应原来的key="2"
+    'unreceived': 3,           // 待收货：对应原来的key="3"
+    'unevaluated': 4,          // 待评价：对应原来的key="4"
+    'completed': 5,            // 已完成：对应原来的key="5"
+    'refunded': 6,             // 已退款：对应原来的key="6"
+    'deleted': 7               // 已删除：对应原来的key="7"
+  };
+
+  const statusFilter = statusFilterMap[activeKey.value as string];
+  reload({statusFilter});
+}
+
 const onSearch = (item: ShopOrder) => {
   reload({userId: item.userId})
 }
@@ -247,12 +300,13 @@ const updatePayStatus = (record: ShopOrder) => {
   repairOrder({
     ...record
   }).then(() => {
-    if(!record.realName){
+    if (!record.realName) {
       // 更新用户真实姓名
       updateUser({
         userId: record.userId,
         realName: record.realName
-      }).then(() => {})
+      }).then(() => {
+      })
     }
     reload();
   })