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-[340px]">
                    <el-date-picker
                        v-model="checkoutTime"
                        @change="setCheckoutTime"
                        type="daterange"
                        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="130"
                ></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 ? '吧台点单' : row.type == 1 ? '扫码点单' : '在线购物')"
                ></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 > 0">
                                    <div
                                        v-for="spec in orderDish.specsList"
                                        :key="spec.id"
                                        class="refund-info"
                                        style="margin-left: 20px; margin-top: 0"
                                    >
                                        <span v-if="spec.name && spec.value"
                                            >- {{ spec.name }}: {{ spec.value }}</span
                                        >
                                    </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
                                    ? '支付失败'
                                    : row.status == 6
                                    ? '已关闭'
                                    : row.status == 8
                                    ? '已核销'
                                    : '未知'
                            }}
                            <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 v-if="payMethod === 0" class="payment-description">
                    请现金退款,本操作只做记录,不做真正的退款动作
                </div>
            </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 && v.length === 2) {
        // 开始时间保持不变
        const startTime = Math.round(v[0].getTime() / 1000).toString()

        // 结束时间设置为当天的23:59:59
        const endDate = new Date(v[1])
        endDate.setHours(23, 59, 59, 999)
        console.log('End Date:', endDate) // 调试输出
        const endTime = Math.round(endDate.getTime() / 1000).toString()

        queryParams.checkoutTime = startTime + ',' + endTime
    }
}
// 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('')
const payMethod = ref('')
let refundOrder: {
    refundTime: string
    refundAmount: number
    payAmount: number
    amount: number
    status: number
    id: any
}
// 添加loading状态变量
const refundLoading = ref(false)
// 修改refund函数
const refund = async (row: any) => {
    refundOrder = row
    payMethod.value = row.payMethod
    refundAmount.value = ''
    refundDialogVisible.value = true
}

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) {
            // 定义正确的类型
            const 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行的高度
}
.payment-description {
    margin-top: 20px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: center;
    color: #666;
    font-size: 14px;
}
</style>