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

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

/**
 * 表格列配置
 */
const columns: TableColumn[] = [
  { prop: 'roomName', label: '包间名称', minWidth: 150 },
  { prop: 'roomNo', label: '包间编号', width: 120 },
  { prop: 'storeId', label: '门店ID', width: 100 },
  { prop: 'roomTypeId', label: '包间类型ID', width: 120 },
  { 
    prop: 'roomStatus', 
    label: '状态', 
    width: 100, 
    align: 'center',
    dataType: 'enum',
    enumMap: { 0: '空闲', 1: '使用中', 2: '待清洁', 3: '已挂单', 4: '已预约' },
  },
  { prop: 'currentOrderId', label: '当前订单ID', width: 120 },
  { prop: 'sort', label: '排序', width: 80, align: 'center' },
  { 
    prop: 'enabled', 
    label: '启用', 
    width: 80, 
    align: 'center',
    dataType: 'enum',
    enumMap: { 0: '禁用', 1: '启用' },
    slot: true,
  },
]

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

/**
 * 弹窗相关
 */
const dialogVisible = ref(false)
const currentRow = ref<any>()

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

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

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

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

/**
 * 新增
 */
function handleAdd() {
  currentRow.value = undefined
  dialogVisible.value = true
}

/**
 * 编辑
 */
function handleEdit(row: any) {
  currentRow.value = row
  dialogVisible.value = true
}

/**
 * 删除
 */
function handleDelete(row: any) {
  ElMessageBox.confirm(`确认删除包间 "${row.roomName}" 吗？`, '提示', {
    type: 'warning',
  }).then(async () => {
    try {
      await roomService.remove(row.id)
      ElMessage.success('删除成功')
      tableRef.value?.refresh()
    } catch {}
  }).catch(() => {})
}

/**
 * 状态切换
 */
async function handleStatusChange(row: any, status: number) {
  if (!row?.id) return
  try {
    await roomService.changeStatus(row.id, status)
    ElMessage.success(status === 1 ? '启用成功' : '禁用成功')
  } catch {
    row.enabled = status === 1 ? 0 : 1
  }
}
</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.roomName" placeholder="请输入包间名称" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.roomStatus" 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>
          <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="handleAdd">新增包间</el-button>
      </template>

      <!-- 启用列 -->
      <template #column-enabled="{ row }">
        <el-switch
          v-model="row.enabled"
          :active-value="1"
          :inactive-value="0"
          @change="(val: any) => handleStatusChange(row, val as number)"
        />
      </template>

      <!-- 操作列 -->
      <template #action="{ row }">
        <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </RuiTable>

    <RoomFormDialog
      v-model:visible="dialogVisible"
      :row="currentRow"
      @success="tableRef?.refresh()"
    />
  </div>
</template>

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