commit

src/views/order/orderAudit/index.vue

@@ -56,37 +56,25 @@
         </div>
 
         <div class="product-list">
-          <div class="product-row">
+          <div v-for="(item, itemIndex) in order.expanded ? order.products : order.products.slice(0, 5)" :key="itemIndex" class="product-row">
             <div class="product-cell product-info-cell">
-              <template v-if="order.products && order.products.length > 0">
-                <div class="product-image">
-                  <el-image :src="order.products[0].image" fit="contain">
-                    <template #error>
-                      <div class="image-placeholder">
-                        <el-icon :size="30" color="#ccc"><Picture /></el-icon>
-                      </div>
-                    </template>
-                  </el-image>
-                </div>
-                <div class="product-detail">
-                  <div class="product-name">{{ order.products[0].name }}</div>
-                  <div class="product-spec">{{ order.products[0].spec1 }} {{ order.products[0].spec2 }}</div>
-                  <div class="product-price">¥{{ order.products[0].price }}</div>
-                </div>
-                <div class="product-quantity">x{{ order.products[0].quantity }}</div>
-              </template>
-              <template v-else>
-                <div class="product-image">
-                  <div class="image-placeholder">
-                    <el-icon :size="30" color="#ccc"><Picture /></el-icon>
-                  </div>
-                </div>
-                <div class="product-detail">
-                  <div class="product-name">暂无商品信息</div>
-                </div>
-              </template>
+              <div class="product-image">
+                <el-image :src="item.image" fit="contain">
+                  <template #error>
+                    <div class="image-placeholder">
+                      <el-icon :size="30" color="#ccc"><Picture /></el-icon>
+                    </div>
+                  </template>
+                </el-image>
+              </div>
+              <div class="product-detail">
+                <div class="product-name">{{ item.name }}</div>
+                <div class="product-spec">{{ item.spec1 }} {{ item.spec2 }}</div>
+                <div class="product-price">¥{{ item.price }}</div>
+              </div>
+              <div class="product-quantity">x{{ item.quantity }}</div>
             </div>
-            <div class="product-cell amount-cell">
+            <div class="product-cell amount-cell" v-if="itemIndex === 0">
               <div class="amount-info">
                 <span class="label">支付款:</span>
                 <span class="value highlight">¥{{ order.payableAmount }}</span>
@@ -95,7 +83,7 @@
                 <span class="label">{{ order.payMethod }}</span>
               </div>
             </div>
-            <div class="product-cell status-cell">
+            <div class="product-cell status-cell" v-if="itemIndex === 0">
               <span :class="['status-text', getStatusClass(order.checkStatus)]">{{ getStatusText(order.checkStatus) }}</span>
               <!-- <el-button type="primary" link size="small">查看订单轨迹</el-button> -->
               <template v-if="order.checkStatus !== '0' && activeMainTab === 'myAudit'">
@@ -108,7 +96,7 @@
               </template>
               <el-button v-if="order.fileCount" type="primary" link size="small"> 审核文件({{ order.fileCount }}) </el-button>
             </div>
-            <div class="product-cell action-cell">
+            <div class="product-cell action-cell" v-if="itemIndex === 0">
               <template v-if="activeMainTab === 'myAudit' && order.checkStatus === '0' && checkableOrderIds.includes(order.id)">
                 <el-button type="success" link size="small" @click="handleApprove(order)">同意</el-button>
                 <el-button type="danger" link size="small" @click="handleReject(order)">拒绝</el-button>
@@ -118,6 +106,12 @@
               </template>
             </div>
           </div>
+          <div v-if="order.products && order.products.length > 5" class="expand-row">
+            <el-button type="primary" link @click="order.expanded = !order.expanded">
+              {{ order.expanded ? '收起' : `展开剩余${order.products.length - 5}个商品` }}
+              <el-icon><component :is="order.expanded ? 'ArrowUp' : 'ArrowDown'" /></el-icon>
+            </el-button>
+          </div>
         </div>
       </div>
       <el-empty v-if="orderList.length === 0" description="暂无审核订单" />
@@ -154,7 +148,7 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
-import { Search, Document, User, ArrowRight, Picture } from '@element-plus/icons-vue';
+import { Search, Document, User, ArrowRight, Picture, ArrowUp, ArrowDown } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { PageTitle, StatusTabs } from '@/components';
 import { getDeptTree } from '@/api/pc/organization';
@@ -516,6 +510,12 @@ const handleSubmitAudit = async () => {
         display: flex;
       }
 
+      .expand-row {
+        padding: 10px 15px;
+        text-align: center;
+        border-top: 1px solid #f0f0f0;
+      }
+
       .product-cell {
         padding: 15px;
         display: flex;