下载订单列表加中间态优化

src/views/order/console.vue

@@ -627,6 +627,7 @@ const handleCouponClick = (coupon: any) => {
 
 const open = (item: any, num?: number, orderNumber?: any) => {
   console.log('***open***', item, num, orderNumber)
+    initData()
     data.couponList = []
     showOrderConsole.value = true
     data.deskId = item.id
@@ -1115,14 +1116,18 @@ const searchUserCoupons = () => {
         })
 }
 
+const initData = () => {
+  dishCateAll().then((res) => {
+    dishCate.value = res
+  })
+  dishListAll().then((res) => {
+    dishList.value = res
+    dishListall = res
+  })
+}
+
 onMounted(() => {
-    dishCateAll().then((res) => {
-        dishCate.value = res
-    })
-    dishListAll().then((res) => {
-        dishList.value = res
-        dishListall = res
-    })
+  // initData()
 })
 defineExpose({
     open

src/views/orders/list.vue

@@ -103,6 +103,7 @@
                 </el-table-column>
                 <el-table-column label="产品清单" min-width="120">
                     <template #default="{ row }">
+                      <div>
                         <div v-for="orderDish in row.orderDishes" :key="orderDish.id">
                             {{ orderDish.name }}<span style="margin: 0 15px 0 15px;">x</span>{{orderDish.number}}
                             <div v-if="orderDish.specsList && orderDish.specsList.length">
@@ -111,6 +112,7 @@
                                 </div>
                             </div>
                         </div>
+                      </div>
                     </template>
                 </el-table-column>
                 <el-table-column label="订单金额(元)" prop="amount" min-width="100"></el-table-column>
@@ -161,6 +163,23 @@
                 </span>
             </template>
         </el-dialog>
+        <!-- 在 el-card 之后添加 loading dialog -->
+        <el-dialog
+            v-model="downloadLoading"
+            :show-close="false"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            width="300px"
+            class="download-dialog"
+        >
+          <div class="download-loading-content">
+            <el-icon class="is-loading" color="#409EFF" size="40">
+              <Loading />
+            </el-icon>
+            <div class="loading-text">下载中...</div>
+            <div class="loading-subtext">正在生成文件，请稍候</div>
+          </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -170,7 +189,10 @@
     import { timeFormat } from '@/utils/util'
     import feedback from '@/utils/feedback'
     // import Money from '@/utils/money'
+    // 在其他 import 语句后添加 Loading 组件导入
+    import { Loading } from '@element-plus/icons-vue'
 
+    const downloadLoading = ref(false)
     const createTime = ref()
     const checkoutTime = ref()
     const queryParams = reactive({
@@ -197,10 +219,13 @@
             Math.round(v[1].getTime() / 1000).toString()
     }
     const setCheckoutTime = (v : any) => {
+      queryParams.checkoutTime = ''
+      if (v.length > 0) {
         queryParams.checkoutTime =
             Math.round(v[0].getTime() / 1000).toString() +
             ',' +
             Math.round(v[1].getTime() / 1000).toString()
+      }
     }
     // watch(queryParams, (newV, oldV) => {
     //     console.log(JSON.stringify(newV))
@@ -305,29 +330,34 @@
     //     }, 0)
     // }
     const download = async () => {
-      const res = await downloadOrders(queryParams)
-      console.warn("***downloadOrders***",res)
-      if (res) {
-        // 生成带当前时间的文件名
-        const timestamp = new Date()
-        const year = timestamp.getFullYear()
-        const month = String(timestamp.getMonth() + 1).padStart(2, '0')
-        const day = String(timestamp.getDate()).padStart(2, '0')
-        const hours = String(timestamp.getHours()).padStart(2, '0')
-        const minutes = String(timestamp.getMinutes()).padStart(2, '0')
-        const seconds = String(timestamp.getSeconds()).padStart(2, '0')
-        const filename = `订单列表_${year}${month}${day}_${hours}${minutes}${seconds}.xlsx`
+      try {
+        downloadLoading.value = true
+        const res = await downloadOrders(queryParams)
+        console.warn("***downloadOrders***",res)
+        if (res) {
+          // 生成带当前时间的文件名
+          const timestamp = new Date()
+          const year = timestamp.getFullYear()
+          const month = String(timestamp.getMonth() + 1).padStart(2, '0')
+          const day = String(timestamp.getDate()).padStart(2, '0')
+          const hours = String(timestamp.getHours()).padStart(2, '0')
+          const minutes = String(timestamp.getMinutes()).padStart(2, '0')
+          const seconds = String(timestamp.getSeconds()).padStart(2, '0')
+          const filename = `订单列表_${year}${month}${day}_${hours}${minutes}${seconds}.xlsx`
 
-        downloadFile(res, filename)
+          downloadFile(res)
+        }
+      } catch (error) {
+        console.error('下载失败:', error)
+        feedback.msgError('下载失败')
+      } finally {
+        downloadLoading.value = false
       }
     }
 
-    const downloadFile = (url: string, filename?: string) => {
+    const downloadFile = (url: string) => {
       const link = document.createElement('a');
       link.href = url;
-      if (filename) {
-        link.download = filename; // 指定下载文件名
-      }
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
@@ -337,6 +367,33 @@
 </script>
 
 <style lang="scss" scoped>
+/* 在样式部分添加下载对话框的样式*/
+.download-dialog {
+  :deep(.el-dialog__header) {
+    display: none;
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 30px 20px;
+  }
+}
+
+.download-loading-content {
+  text-align: center;
+
+  .loading-text {
+    margin-top: 15px;
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+  }
+
+  .loading-subtext {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #999;
+  }
+}
     .order-detail-wrapper {
         padding: 20px;
         background: #f8f8f8;