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

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

/**
 * 表格列配置
 */
const columns: TableColumn[] = [
  { prop: 'strategyName', label: '策略名称', minWidth: 150 },
  { prop: 'roomTypeId', label: '包间类型ID', width: 120 },
  { 
    prop: 'status', 
    label: '状态', 
    width: 80, 
    align: 'center',
    dataType: 'enum',
    enumMap: { 0: '禁用', 1: '启用' },
    slot: true,
  },
]

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

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

/**
 * 策略表单弹窗状态
 */
const strategyDialogVisible = ref(false)
const strategyRow = ref<any>(undefined)

/**
 * 套餐管理弹窗状态
 */
const packageDialogVisible = ref(false)
const packageStrategyId = ref<number | undefined>(undefined)

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

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

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

/**
 * 新增
 */
function handleAdd() {
  strategyRow.value = undefined
  strategyDialogVisible.value = true
}

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

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

/**
 * 状态切换
 */
async function handleStatusChange(row: any, status: number) {
  if (!row?.id) return
  try {
    await pricingService.changeStatus(row.id, status)
    ElMessage.success(status === 1 ? '启用成功' : '禁用成功')
  } catch {
    row.status = status === 1 ? 0 : 1
  }
}

/**
 * 查看套餐
 */
function handleViewPackages(row: any) {
  packageStrategyId.value = row.id
  packageDialogVisible.value = true
}
</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.strategyName" placeholder="请输入策略名称" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </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-status="{ row }">
        <el-switch
          v-model="row.status"
          :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="info" size="small" @click="handleViewPackages(row)">查看套餐</el-button>
        <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </RuiTable>

    <PricingStrategyFormDialog
      v-model:visible="strategyDialogVisible"
      :row="strategyRow"
      @success="tableRef?.refresh()"
    />

    <PricingPackageDialog
      v-model:visible="packageDialogVisible"
      :strategy-id="packageStrategyId"
    />
  </div>
</template>

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