订单列表新增更多商品

src/views/order/index.vue

@@ -23,18 +23,24 @@
               <span v-else>无</span>
             </template>
           </el-table-column>
-          <el-table-column label="商品信息" width="250">
+          <el-table-column label="商品信息" width="320">
             <template v-slot="scope">
               <div class="goods_wrap">
-                <div class="row" v-for="item in scope.row.goods" :key="item.id">
+                <div class="row" v-for="item in scope.row.goods.slice(0, 2)" :key="item.id">
                   <div class="cover">
-                    <el-image :src="item.productImg" style="width: 40px;height: 40px;"></el-image>
+                    <el-image :src="item.productImg" fit="cover" style="width: 40px;height: 40px;"></el-image>
                   </div>
                   <div class="info">
                     <div class="name">
                       <span>{{ item.productName }}</span>
                       <span class="amount">￥{{ formatDecimal(+item.payAmount) }}</span>
                     </div>
+                    <div class="num">
+                      <span>出菜时间：{{ item.dishOutTime }}</span>
+                    </div>
+                    <div class="num">
+                      <span>上菜时间：{{ item.foodServeTime }}</span>
+                    </div>
                     <div class="num">
                       备注: {{ item.remark || "无" }}
                     </div>
@@ -50,6 +56,11 @@
                     </div>
                   </div>
                 </div>
+                <div class="row" v-if="scope.row.goods.length > 2">
+                  <el-button type="primary" @click="showMoreGoodsHandle(scope.row.goods)">
+                    查看全部（{{ scope.row.goods.length }}）
+                  </el-button>
+                </div>
               </div>
             </template>
           </el-table-column>
@@ -77,12 +88,6 @@
                 <div class="row">
                   用餐模式：{{ filterLable("dineMode", scope.row.dineMode) }}
                 </div>
-                <div class="row">
-                  出菜时间：{{ scope.row.dishOutTime }}
-                </div>
-                <div class="row">
-                  上菜时间：{{ scope.row.foodServeTime }}
-                </div>
                 <div class="row">订单备注：{{ scope.row.remark }}</div>
               </div>
             </template>
@@ -159,6 +164,8 @@
   <PrintDrawer ref="PrintDrawerRef" />
   <!-- 结算订单 -->
   <SettleAccount ref="SettleAccountRef" @success="orderListAjax" />
+  <!-- 全部商品 -->
+  <allGoodsDialog ref="allGoodsDialogRef" />
 </template>
 
 <script setup>
@@ -171,12 +178,14 @@ import DateRange from "./components/dateRange.vue";
 import RefundDrawer from "./components/refundDrawer.vue";
 import PrintDrawer from "./components/printDrawer.vue";
 import SettleAccount from '@/views/home/components/settleAccount.vue'
+import allGoodsDialog from './components/allGoodsDialog.vue'
 
 const RefundDrawerRef = ref(null);
 const PrintDrawerRef = ref(null);
 const DateRangeRef = ref(null);
 const SettleAccountRef = ref(null)
 const tableRef = ref(null);
+const allGoodsDialogRef = ref(null)
 
 const goodsStore = useGoods()
 const globalStore = useGlobal();
@@ -228,7 +237,6 @@ function filterLable(key, type) {
   }
 }
 
-
 // 过滤退款条件
 function refundState(row) {
   switch (row.status) {
@@ -303,6 +311,11 @@ function goodsNameFilter(goods) {
   return goods.map((item) => item.productName).join("、");
 }
 
+// 查看全部订单商品
+function showMoreGoodsHandle(goods) {
+  allGoodsDialogRef.value.show(goods)
+}
+
 onMounted(() => {
   resetQueryForm.value = { ...queryForm.value };
   queryFormHandle();