feat(订单管理): 优化订单查询和展示功能

- 将订单编号字段从`orderNumber`改为`orderId`并添加`cellId`字段以支持格口ID查询
- 在订单DTO中添加`goodsNames`和`coverImgs`字段以展示商品名称和封面图
- 在订单列表页面增加商品名称和封面图的展示，并调整分页大小为5
- 在格口商品页面添加购买记录按钮，支持跳转到订单列表并自动查询该格口的订单

src/api/shop/order.ts

@@ -2,7 +2,9 @@ import { http } from "@/utils/http";
 
 export interface OrderQuery extends BasePageQuery {
   /** 订单编号 */
-  orderNumber?: string;
+  orderId?: number;
+  /** 格口id */
+  cellId?: number;
   /** 
    * 订单状态
    * @remarks 
@@ -74,6 +76,18 @@ export interface OrderDTO {
   paymentMethod?: string;
   /** 支付时间 */
   payTime?: string;
+  /**
+   * 商品名称
+   * @remarks
+   * 多个商品名称用逗号分隔
+   */
+  goodsNames?: string;
+  /**
+   * 商品封面图
+   * @remarks
+   * 多个商品封面图用逗号分隔
+   */
+  coverImgs?: string;
 }
 
 export const getOrderListApi = (params?: OrderQuery) => {

src/views/shop/cabinet-goods/index.vue

@@ -14,11 +14,13 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import { on } from "events";
 import CabinetGoodsConfigModal from "./cabinet-goods-config-modal.vue";
 import { getGoodsInfo } from "@/api/shop/goods";
+import { useRouter } from "vue-router";
 
 defineOptions({
   name: "CabinetGoods"
 });
 
+const router = useRouter();
 const formRef = ref();
 const tableRef = ref();
 
@@ -258,7 +260,7 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
         </template> -->
         <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId"
           @selection-change="handleSelectionChange" border>
-          <el-table-column type="selection" width="55" />
+          <el-table-column label="格口ID" prop="cellId" width="80" />
           <el-table-column label="商品图片" width="120">
             <template #default="{ row }">
               <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999"
@@ -271,14 +273,21 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
               {{ row.goodsId ? row.goodsName : '未配置商品' }}
             </template>
           </el-table-column>
-          <el-table-column label="价格" prop="price" width="120" />
+          <el-table-column label="价格" prop="price" width="80" />
-          <el-table-column label="库存" prop="stock" width="120" />
+          <el-table-column label="库存" prop="stock" width="80" />
-          <el-table-column label="单元格号" prop="cellNo" width="120" />
           <el-table-column label="单元格类型" prop="cellType">
             <template #default="{ row }">
               {{ switchCellType(row.cellType) }}
             </template>
           </el-table-column>
+          <el-table-column label="相关信息" width="150" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link :icon="useRenderIcon('document')"
+                @click="router.push({ path: '/shop/order/index', query: { cellId: row.cellId } })">
+                购买记录
+              </el-button>
+            </template>
+          </el-table-column>
           <el-table-column label="操作" width="150" fixed="right">
             <template #default="{ row }">
               <el-button type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(row)">

src/views/shop/order/index.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { getOrderListApi, exportOrderExcelApi, type OrderDTO } from "@/api/shop/order";
+import { getOrderListApi, exportOrderExcelApi, type OrderDTO, OrderQuery } from "@/api/shop/order";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
 import { ElMessage } from "element-plus";
+import { useRoute } from 'vue-router'
 
 defineOptions({
   name: "ShopOrder"
 });
+const route = useRoute();
 
 const formRef = ref();
 const tableRef = ref();
 
-const searchFormParams = ref({
+const searchFormParams = ref<OrderQuery>({
-  orderNumber: "",
+  orderId: null,
+  cellId: null,
   status: null,
   payStatus: null,
   paymentMethod: null,
@@ -25,7 +28,7 @@ const searchFormParams = ref({
 });
 
 const pagination = ref({
-  pageSize: 10,
+  pageSize: 5,
   currentPage: 1,
   total: 0
 });
@@ -90,6 +93,16 @@ const handleExport = async () => {
   }
 };
 
+watch(() => route.query.cellId,
+  (newVal) => {
+    searchFormParams.value.cellId = newVal ? Number(newVal) : null;
+    getList();
+  }
+  ,
+  {
+    immediate: true
+  });
+
 getList();
 </script>
 
@@ -108,8 +121,11 @@ getList();
         <el-date-picker v-model="searchFormParams.payTime" type="date" placeholder="支付时间"
           value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
       </el-form-item>
-      <el-form-item label="订单编号：" prop="orderNumber">
+      <el-form-item label="订单编号：" prop="orderId">
-        <el-input v-model="searchFormParams.orderNumber" placeholder="请输入订单编号" clearable class="!w-[200px]" />
+        <el-input v-model="searchFormParams.orderId" placeholder="请输入订单编号" clearable class="!w-[200px]" />
+      </el-form-item>
+      <el-form-item label="格口ID：" prop="cellId">
+        <el-input v-model="searchFormParams.cellId" placeholder="请输入格口ID" clearable class="!w-[200px]" />
       </el-form-item>
       <el-form-item label="订单状态：" prop="status">
         <el-select v-model="searchFormParams.status" placeholder="请选择状态" clearable class="!w-[180px]">
@@ -151,7 +167,24 @@ getList();
     <PureTableBar title="订单列表" @refresh="getList">
       <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="orderId" border>
         <el-table-column label="订单ID" prop="orderId" width="120" />
-        <el-table-column label="用户id" prop="userid" width="120" />
+        <el-table-column label="商品名称" prop="goodsNames" width="180">
+          <template #default="{ row }">
+            <span v-if="row.goodsNames">
+              {{ row.goodsNames.split(',').join(', ') }}
+            </span>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品封面" prop="coverImgs" width="100">
+          <template #default="{ row }">
+            <div v-if="row.coverImgs" class="flex gap-2">
+              <el-image v-for="(img, index) in row.coverImgs.split(',')" :key="index" :src="img"
+                :preview-src-list="row.coverImgs.split(',')" :z-index="9999" :preview-teleported="true"
+                :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
+            </div>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
         <el-table-column label="姓名" prop="name" width="120" />
         <el-table-column label="手机号" prop="mobile" width="120" />
         <el-table-column label="订单金额" prop="totalAmount" width="120">
@@ -190,7 +223,7 @@ getList();
         </el-table-column> -->
       </el-table>
       <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
-        :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+        :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
         @size-change="onSizeChange" @current-change="onCurrentChange" />
     </PureTableBar>
   </div>