chore: 初始化前端仓库并迁移 admin-ui

- 创建 rui-frontend 前端仓库 - 迁移 admin-ui 管理后台 - 创建 cashier-mobile 和 customer-mobile 占位项目 - 配置 pnpm workspace
2026-06-04 05:14:11 +08:00
commit 82a19101a8
153 changed files with 21561 additions and 0 deletions
@@ -0,0 +1,198 @@
+<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>