h5-dm-orderFront/src/views/orders/list.vue

<template>
    <div class="orders-lists">
        <el-card class="!border-none" shadow="never">
            <el-form :inline="true" class="mb-[-16px]">
                <el-form-item label="订单类型" class="w-[280px]">
                    <el-select class="w-[280px]" v-model="queryParams.type">
                        <el-option label="全部" value />
                        <el-option label="吧台点单" value="0" />
                        <el-option label="扫码点单" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态" class="w-[280px]">
                    <el-select class="w-[280px]" v-model="queryParams.status">
                        <el-option label="全部" value />
<!--                        <el-option label="待下单" value="0" />-->
<!--                        <el-option label="待结帐" value="1" />-->
                        <el-option label="已下单" value="2" />
                        <el-option label="已退款" value="4" />
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="创建时间" class="w-[280px]">-->
<!--                    <el-date-picker v-model="createTime" @change="setCreateTime" type="datetimerange"-->
<!--                        range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />-->
<!--                </el-form-item>-->
                <el-form-item label="下单时间" class="w-[440px]">
                    <el-date-picker v-model="checkoutTime" @change="setCheckoutTime" type="datetimerange"
                        range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
                </el-form-item>
                <el-form-item class="w-[280px]">
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                    <el-button type="success" @click="download">下载</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
<!--            :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange"-->
            <el-table v-loading="pager.loading" :data="pager.lists" row-key="id">
<!--                <el-table-column type="expand" >-->
<!--                    <template #default="{ row }">-->
<!--                        <div class="order-detail-wrapper" v-loading="!orderDetails[row.id]">-->
<!--                            <template v-if="orderDetails[row.id]">-->
<!--                                <div class="detail-header">-->
<!--                                    <span>订单详情</span>-->
<!--                                    <span class="time">下单时间：{{ timeFormat(orderDetails[row.id].createTime) }}</span>-->
<!--                                </div>-->
<!--                                <el-table :data="orderDetails[row.id].dishes" border class="detail-table">-->
<!--                                    <el-table-column label="菜品图片" width="120" align="center">-->
<!--                                        <template #default="{ row }">-->
<!--                                            <el-image :src="row.image" :preview-src-list="[row.image]"-->
<!--                                                class="dish-image" fit="cover" />-->
<!--                                        </template>-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column prop="name" label="菜品名称">-->
<!--                                        <template #default="{ row }">-->
<!--                                            <div>-->
<!--                                                {{ row.name }}-->
<!--                                                <div v-if="row.specsList && row.specsList.length" class="mt-1">-->
<!--                                                    <el-tag-->
<!--                                                        v-for="spec in row.specsList"-->
<!--                                                        :key="spec.id"-->
<!--                                                        size="small"-->
<!--                                                        class="mr-1 mb-1"-->
<!--                                                    >-->
<!--                                                        {{ spec.name }}: {{ spec.value }}-->
<!--                                                    </el-tag>-->
<!--                                                </div>-->
<!--                                            </div>-->
<!--                                        </template>-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column prop="amount" label="单价">-->
<!--                                        <template #default="{ row }">-->
<!--                                            ￥{{ row.amount }}-->
<!--                                        </template>-->
<!--                                    </el-table-column>-->
<!--                                    <el-table-column prop="number" label="数量" width="120" align="center" />-->
<!--                                    <el-table-column label="小计" width="120" align="right">-->
<!--                                        <template #default="{ row }">-->
<!--                                            ￥{{ row.amount * row.number}}-->
<!--                                        </template>-->
<!--                                    </el-table-column>-->
<!--                                </el-table>-->
<!--                                <div class="detail-footer">-->
<!--                                    <div class="total-info">-->
<!--                                        <span>共 {{ getTotalCount(orderDetails[row.id].dishes) }} 件商品</span>-->
<!--                                        <span class="total-price">-->
<!--                                            订单总价：<em>￥{{ orderDetails[row.id].amount}}</em>-->
<!--                                        </span>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </template>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
                <el-table-column type="index" min-width="80" />
                <el-table-column label="下单时间" prop="checkoutTime" min-width="120"></el-table-column>
                <el-table-column label="订单号" prop="number" min-width="150" show-overflow-tooltip></el-table-column>
                <el-table-column label="类型" prop="type" :formatter="(row: any) => (row.type == 0 ? '吧台点单' : '扫码点单')"></el-table-column>
                <el-table-column label="桌号/餐号" prop="deskName">
                    <template #default="{ row }">{{
                        row.deskName ? row.deskName : row.mealCode
                    }}</template>
                </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">
                                <div v-for="spec in orderDish.specsList" :key="spec.id" class="refund-info" style="margin-left: 20px;margin-top: 0;">
                                    - {{ spec.name }}: {{ spec.value }}
                                </div>
                            </div>
                        </div>
                      </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单金额(元)" prop="amount" min-width="100"></el-table-column>
                <el-table-column label="优惠金额(元)" prop="ticketAmount" min-width="100"></el-table-column>
                <el-table-column label="实付金额(元)" prop="payAmount" min-width="100"></el-table-column>
                <el-table-column label="备注" prop="remark"  min-width="100" show-tooltip-when-overflow></el-table-column>
                <el-table-column label="状态" min-width="160" prop="status" >
                    <template #default="{ row }">
                        <div>
                            {{ row.status == 4 ? '已退款' : row.status == 2 ? '已下单' : row.status == 0 ? '待下单'
                            : row.status == 1 ? '待支付' : row.status == 5 ? '退款中' : row.status == 3 ? '支付失败' : '已关闭' }}
                            <div v-if="row.refundStatus=='SUCCESS'" class="refund-info">
                                <div>退款时间:{{ row.refundTime }}</div>
                                <div>退款金额:{{ row.refundAmount }}元</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="60" fixed="right">
                    <template #default="{ row }">
<!--                        <el-button type="primary" link @click="showDetail(row)">查看已点菜品</el-button>-->
                        <el-button v-if="row.status=='2' && !row.refundAmount" type="danger" link @click="refund(row)">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-dialog
            v-model="refundDialogVisible"
            title="退款"
            width="400px"
            @close="refundDialogVisible = false">
            <div class="refund-dialog-content">
                <el-input
                    v-model="refundAmount"
                    placeholder="请输入退款金额"
                    type="number">
                    <template #prepend><icon :size="25" name="el-icon-money" /></template>
                    <template #append>元</template>
                </el-input>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="refundDialogVisible = false">取 消</el-button>
                    <el-button type="primary" :loading="refundLoading" @click="confirmRefund">确 定</el-button>
                </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>

<script setup lang="ts">
    import { ordersList, getOrderDetail, refundReq, downloadOrders } from '@/api/orders'
    import { usePaging } from '@/hooks/usePaging'
    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({
        type: '',
        status: '',
        checkoutTime: '',
        createTime: ''
    })
    const { pager, getLists, resetPage } = usePaging({
        fetchFun: ordersList,
        params: queryParams
    })
    const resetParams = () => {
      queryParams.type = ''
      queryParams.status = ''
      checkoutTime.value = []
      queryParams.checkoutTime = ''
      getLists()
    }
    const setCreateTime = (v : any) => {
        queryParams.createTime =
            Math.round(v[0].getTime() / 1000).toString() +
            ',' +
            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))
    // })

    const expandRowKeys = ref<string[]>([])
    const orderDetails = ref<Record<string, any>>({})
    const handleExpandChange = (row: any, expandedRows: any) => {
        // console.log('当前行展开状态改变：', row, expandedRows);
        if (!orderDetails.value[row.id]) {
            showDetail(row);
        }
    }
    // 添加这些变量到组件顶层
    const refundDialogVisible = ref(false)
    const refundAmount = ref('')
    var refundOrder: {
        refundTime: string;
        refundAmount: number;
        payAmount: number;
        amount: number;
        status: number; id: any;
    };
    // 添加loading状态变量
    const refundLoading = ref(false)
    // 修改refund函数
    const refund = async (row: any) => {
        refundDialogVisible.value = true
        refundAmount.value = ''
        refundOrder = row;
    }

    const confirmRefund = async () => {
        try {
            if(!refundAmount.value || refundAmount.value<=0){
                return feedback.msgError('退款金额不合法')
            }
            if(refundAmount.value > (refundOrder.payAmount || refundOrder.amount)){
                return feedback.msgError('退款金额不能大于订单实付金额')
            }
            refundLoading.value = true
            const res = await refundReq({ orderId: refundOrder.id, payAmount: refundAmount.value })
            if (res) {
                feedback.msgSuccess('退款成功')
                refundOrder.status = 5;
                // refundOrder.refundAmount = refundAmount.value;
                // refundOrder.refundTime = "待处理";
                setTimeout(()=>{
                    getLists();
                },200)
            } else {
                feedback.msgError('退款失败')
            }
        } catch (error) {
            console.error('退款失败:', error)
        } finally {
            refundLoading.value = false
            refundDialogVisible.value = false
        }
    }

    // 展示订单详情
    const showDetail = async (row : any) => {
        try {
            // 如果已经加载过该订单详情，直接展开
            if (orderDetails.value[row.id]) {
                expandRowKeys.value = [row.id]
                return
            }

            // 调用获取订单详情接口
            const res = await getOrderDetail({id:row.id})
            console.warn("***getOrderDetail***",res)
            if (res) {
                // 定义正确的类型
                let orderDetail: Record<string, any> = {};
                orderDetail.id = res.orderItem.id;
                orderDetail.amount = res.orderItem.amount;//总价
                orderDetail.createTime = res.orderItem.createTime;
                orderDetail.dishes = res.orderDishList;
                // 保存订单详情
                orderDetails.value[row.id] = orderDetail
                // 展开当前行
                expandRowKeys.value = [row.id]
            } else {
                feedback.msgError('获取订单详情失败')
            }
        } catch (error) {
            console.error('获取订单详情失败:', error)
            feedback.msgError('获取订单详情失败')
        }
    }

    // 计算商品总数
    const getTotalCount = (dishes : any[]) => {
        return dishes.reduce((total, dish) => total + dish.number, 0)
    }
    // 计算订单总价
    // const getTotalPrice = (dishes: any[]) => {
    //     return dishes.reduce((total, dish) => {
    //         return Money.add(total, Money.multiply(dish.price, dish.count))
    //     }, 0)
    // }
    const download = async () => {
      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)
        }
      } catch (error) {
        console.error('下载失败:', error)
        feedback.msgError('下载失败')
      } finally {
        downloadLoading.value = false
      }
    }

    const downloadFile = (url: string) => {
      const link = document.createElement('a');
      link.href = url;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    };

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

        .detail-header {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            span {
                font-size: 14px;
                color: #333;

                &.time {
                    color: #999;
                }
            }
        }

        .detail-table {
            margin-bottom: 20px;

            :deep(.dish-image) {
                width: 60px;
                height: 60px;
                border-radius: 4px;
            }
        }

        .detail-footer {
            display: flex;
            justify-content: flex-end;

            .total-info {
                text-align: right;

                span {
                    margin-left: 20px;
                    font-size: 14px;
                    color: #666;

                    &.total-price {
                        em {
                            font-style: normal;
                            font-size: 16px;
                            color: #f56c6c;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }

    .refund-dialog-content {
        padding: 20px 0px;

        :deep(.el-input) {
            width: 100%;
        }
    }

    .dialog-footer {
        text-align: right;

        .el-button + .el-button {
            margin-left: 12px;
        }
    }

    .refund-info {
        font-size: 12px;
        color: #999;
        margin-top: 4px;
    }

    .remark-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        line-height: 1.5;
        max-height: 3em; // 2行的高度
    }
</style>