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

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

src/api/shop/goods.ts

@@ -70,6 +70,15 @@ export const getGoodsListApi = (params?: GoodsQuery) => {
   });
 };
 
+/** 获取单个商品信息 */
+export const getGoodsInfo = (goodsId: number) => {
+  return http.request<ResponseData<GoodsDTO>>("get", "/shop/goods/getGoodsInfo", {
+    params: {
+      goodsId
+    }
+  });
+};
+
 /** 新增商品 */
 export const addGoodsApi = (data: GoodsRequest) => {
   return http.request<ResponseData<void>>("post", "/shop/goods", {

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

@@ -13,11 +13,14 @@ import Refresh from "@iconify-icons/ep/refresh";
 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();
 
@@ -156,16 +159,33 @@ const switchCellType = (cellType: number) => {
 
 const handleStockConfig = async (row: CabinetCellDTO) => {
   try {
+    // 获取商品详细信息
+    const { data } = await getGoodsInfo(row.goodsId!);
+    const remainingStock = data.stock - data.totalStock + row.stock;
+
     const { value } = await ElMessageBox.prompt(
-      `请输入${row.goodsName || '未配置商品'}的库存数量`,
+      `请输入${row.goodsName || '未配置商品'}的库存数量（本次最多可分配：${remainingStock}）。
+      若可分配数量不足，请先调整商品列表中的库存。`,
       '配置库存',
       {
-        inputPattern: /^0$|^[1-9]\d*/,
+        inputPattern: /^0$|^[1-9]\d*$/,
         inputValue: row.stock?.toString(),
-        inputErrorMessage: '库存必须大于等于0'
+        inputErrorMessage: '请输入有效的非负整数',
+        inputValidator: (inputValue: string) => {
+          const num = Number(inputValue);
+          if (num > remainingStock) {
+            return '分配数量不能超过剩余库存';
+          }
+          return true;
+        }
       }
     );
 
+    if (Number(value) > remainingStock) {
+      ElMessage.warning('分配数量不能超过剩余库存');
+      return;
+    }
+
     await changeGoodsCellsStock(row.cellId!, Number(value));
     ElMessage.success('库存更新成功');
     getList();
@@ -240,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"
@@ -253,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="stock" width="120" />
-          <el-table-column label="单元格号" prop="cellNo" width="120" />
+          <el-table-column label="价格" prop="price" width="80" />
+          <el-table-column label="库存" prop="stock" width="80" />
           <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({
-  orderNumber: "",
+const searchFormParams = ref<OrderQuery>({
+  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-input v-model="searchFormParams.orderNumber" placeholder="请输入订单编号" clearable class="!w-[200px]" />
+      <el-form-item label="订单编号：" prop="orderId">
+        <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>