rui-docs/admin-ui/src/views/cashier/order/Index.vue

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { orderService } from '@/service/cashier/orderService'
import RuiTable from '@/components/RuiTable.vue'
import type { TableColumn } from '@/components/RuiTable.vue'
import OpenRoomDialog from './OpenRoomDialog.vue'

/**
 * 表格列配置
 */
const columns: TableColumn[] = [
  { prop: 'orderNo', label: '订单编号', width: 150 },
  { prop: 'storeId', label: '门店ID', width: 100 },
  { prop: 'roomId', label: '包间ID', width: 100 },
  { prop: 'customerName', label: '顾客姓名', width: 100 },
  { prop: 'customerPhone', label: '顾客电话', width: 130 },
  { prop: 'totalAmount', label: '总金额', width: 100, align: 'right', dataType: 'money' },
  { prop: 'payAmount', label: '实付金额', width: 100, align: 'right', dataType: 'money' },
  { 
    prop: 'payStatus', 
    label: '支付状态', 
    width: 100, 
    align: 'center',
    dataType: 'enum',
    enumMap: { 0: '未支付', 1: '部分支付', 2: '已支付' },
  },
  { prop: 'payType', label: '支付方式', width: 100 },
  { 
    prop: 'status', 
    label: '订单状态', 
    width: 100, 
    align: 'center',
    dataType: 'enum',
    enumMap: { 0: '开台中', 1: '已挂单', 2: '待支付', 3: '已完成', 4: '已退款' },
  },
  { prop: 'createTime', label: '创建时间', width: 160, dataType: 'dateTime' },
]

/**
 * 表格引用
 */
const tableRef = ref<InstanceType<typeof RuiTable>>()

const openRoomVisible = ref(false)

/**
 * 查询参数
 */
const queryParams = ref({
  orderNo: '',
  status: undefined as number | undefined,
  payStatus: undefined as number | undefined,
})

/**
 * 加载数据
 */
async function loadData(params: any) {
  return await orderService.page(params)
}

/**
 * 查询
 */
function handleSearch() {
  tableRef.value?.setQueryParams(queryParams.value)
  tableRef.value?.search()
}

/**
 * 重置
 */
function handleReset() {
  queryParams.value = {
    orderNo: '',
    status: undefined,
    payStatus: undefined,
  }
  tableRef.value?.reset()
}

/**
 * 开台
 */
function handleOpen() {
  openRoomVisible.value = true
}

/**
 * 结账
 */
function handleCheckout(row: any) {
  ElMessageBox.confirm(`确认为订单 "${row.orderNo}" 结账吗？`, '提示', {
    type: 'warning',
  }).then(async () => {
    try {
      await orderService.checkout(row.id)
      ElMessage.success('结账成功')
      tableRef.value?.refresh()
    } catch {}
  }).catch(() => {})
}

/**
 * 退款
 */
function handleRefund(row: any) {
  ElMessageBox.prompt('请输入退款金额', '退款', {
    inputType: 'number',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async ({ value }: any) => {
    try {
      await orderService.refund(row.id, { amount: Number(value), reason: '用户申请退款' })
      ElMessage.success('退款成功')
      tableRef.value?.refresh()
    } catch {}
  }).catch(() => {})
}
</script>

<template>
  <div class="page-container">
    <h2 class="text-xl font-bold mb-4">订单管理</h2>

    <RuiTable
      ref="tableRef"
      :columns="columns"
      :load-data="loadData"
    >
      <!-- 查询区域 -->
      <template #search>
        <el-form-item label="订单编号">
          <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option label="开台中" :value="0" />
            <el-option label="已挂单" :value="1" />
            <el-option label="待支付" :value="2" />
            <el-option label="已完成" :value="3" />
            <el-option label="已退款" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select v-model="queryParams.payStatus" placeholder="请选择状态" clearable>
            <el-option label="未支付" :value="0" />
            <el-option label="部分支付" :value="1" />
            <el-option label="已支付" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </template>

      <!-- 工具栏 -->
      <template #toolbar-left>
        <el-button type="primary" @click="handleOpen">开台</el-button>
      </template>

      <!-- 操作列 -->
      <template #action="{ row }">
        <el-button 
          v-if="row.status === 0 || row.status === 1" 
          link 
          type="primary" 
          size="small" 
          @click="handleCheckout(row)"
        >
          结账
        </el-button>
        <el-button 
          v-if="row.status === 3 && row.payStatus === 2" 
          link 
          type="warning" 
          size="small" 
          @click="handleRefund(row)"
        >
          退款
        </el-button>
      </template>
    </RuiTable>

    <OpenRoomDialog
      v-model:visible="openRoomVisible"
      @success="tableRef?.refresh()"
    />
  </div>
</template>

<style scoped>
.page-container {
  padding: 20px;
}
</style>