订单列表新增更多商品

src/views/order/components/allGoodsDialog.vue

@@ -0,0 +1,112 @@
+<!-- 全部商品弹窗 -->
+<template>
+    <el-dialog :title="`全部商品（${allOrderGoods.length}）`" width="600px" v-model="allOrderGoodsShow" top="2vh"
+        @close="allOrderGoodsShow = false">
+        <div class="goods_wrap">
+            <div class="row" v-for="item in allOrderGoods" :key="item.id">
+                <div class="cover">
+                    <el-image :src="item.productImg" fit="cover"
+                        style="width: 100px;height: 100px;border-radius: 8px;"></el-image>
+                </div>
+                <div class="info">
+                    <div class="name">
+                        <span class="t">{{ item.productName }}</span>
+                        <span class="amount">￥{{ formatDecimal(+item.payAmount) }}</span>
+                    </div>
+                    <div class="num remark">
+                        <span>备注: {{ item.remark || "无" }}</span>
+                        <div class="n">
+                            <span>￥{{ formatDecimal(+item.unitPrice) }}</span>
+                            <span>x{{ item.num }}</span>
+                        </div>
+                    </div>
+                    <div class="num">
+                        <span>出菜时间：{{ item.dishOutTime }}</span>
+                    </div>
+                    <div class="num">
+                        <span>上菜时间：{{ item.foodServeTime }}</span>
+                    </div>
+                    <div class="num" v-if="item.returnNum">
+                        <span>退菜数量：{{ item.returnNum }}</span>
+                    </div>
+                    <div class="num" v-if="item.refundNum">
+                        <span>退单数量：{{ item.refundNum }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { formatDecimal } from '@/utils/index.js'
+
+const allOrderGoods = ref([])
+const allOrderGoodsShow = ref(false)
+
+function show(obj) {
+    allOrderGoodsShow.value = true
+    allOrderGoods.value = obj
+}
+
+defineExpose({
+    show
+})
+</script>
+
+<style scoped lang="scss">
+.goods_wrap {
+    height: 75vh;
+    overflow-y: auto;
+
+    .row {
+        display: flex;
+        padding: 10px 0;
+
+        &:not(:last-child) {
+            border-bottom: 1px solid #ececec;
+        }
+
+        .info {
+            flex: 1;
+            padding-left: 10px;
+
+            .name {
+                display: flex;
+                gap: 10px;
+                justify-content: space-between;
+
+                .t {
+                    font-size: 16px;
+                    font-weight: bold;
+                }
+
+                .amount {
+                    font-size: 16px;
+                    color: var(--el-color-danger);
+                }
+            }
+
+            .num {
+                color: #555;
+                font-size: 14px;
+                display: flex;
+                gap: 10px;
+                margin-top: 6px;
+
+                &.remark {
+                    color: #999;
+                    justify-content: space-between;
+                }
+
+                .n {
+                    color: #999;
+                    display: flex;
+                    gap: 4px;
+                }
+            }
+        }
+    }
+}
+</style>

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();