RoleTestView.vue

<template>
  <div class="min-h-screen bg-gray-50 p-6">
    <div class="max-w-7xl mx-auto">
      <h1 class="text-2xl font-bold text-gray-900 mb-6">角色管理测试页面</h1>
      
      <RoleManagement
        :roles="roles"
        :permissions="permissions"
        @add-role="handleAddRole"
        @update-role="handleUpdateRole"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import RoleManagement, { type Role, type Permission, type RoleStatus } from '@/components/RoleManagement.vue'
import { ElMessage } from 'element-plus'

// 测试数据
const roles = ref<Role[]>([
  {
    id: 1 as Number,
    name: '区县全权管理员',
    description: '拥有区县级别的所有管理权限，可以管理订单、用户和业务规则',
    level: '区县级',
    permissions: [
      'order',
      'order:view',
      'order:complete',
      'order:reward',
      'order:approve',
      'business',
      'business:view',
      'business:create',
      'business:edit',
      'system',
      'system:role',
      'system:role:view',
      'system:role:create',
      'system:role:edit',
      'system:account',
      'system:account:view',
      'system:account:create',
      'system:account:edit'
    ],
    status: 1 as RoleStatus,
    createTime: '2025-10-20 09:00:00'
  },
  {
    id: 2 as Number,
    name: '订单管理员',
    description: '负责订单的日常管理和处理',
    level: '一线人员',
    permissions: ['order', 'order:view', 'order:complete', 'order:reward', 'order:approve'],
    status: 1 as RoleStatus,
    createTime: '2025-10-20 09:30:00'
  },
  {
    id: 3 as Number,
    name: '业务规则管理员',
    description: '负责业务规则的配置和维护',
    level: '区县级',
    permissions: ['business', 'business:view', 'business:create', 'business:edit'],
    status: 1 as RoleStatus,
    createTime: '2025-10-20 10:00:00'
  }
])

const permissions = ref<Permission[]>([
  {
    id: 'order',
    name: '订单管理',
    code: 'order',
    description: '订单相关的所有权限',
    children: [
      {
        id: 'order:view',
        name: '查看订单',
        code: 'order:view',
        description: '查看订单列表和详情',
        parentId: 'order'
      },
      {
        id: 'order:complete',
        name: '填写办结信息',
        code: 'order:complete',
        description: '填写CRM订单编号和办理备注',
        parentId: 'order'
      },
      {
        id: 'order:reward',
        name: '填写酬金金额',
        code: 'order:reward',
        description: '填写和修改实际发放酬金',
        parentId: 'order'
      },
      {
        id: 'order:approve',
        name: '审核',
        code: 'order:approve',
        description: '审核通过或驳回订单',
        parentId: 'order'
      }
    ]
  },
  {
    id: 'business',
    name: '业务规则管理',
    code: 'business',
    description: '业务规则相关权限',
    children: [
      {
        id: 'business:view',
        name: '查看业务规则',
        code: 'business:view',
        description: '查看业务规则列表',
        parentId: 'business'
      },
      {
        id: 'business:create',
        name: '创建业务规则',
        code: 'business:create',
        description: '创建新的业务规则',
        parentId: 'business'
      },
      {
        id: 'business:edit',
        name: '编辑业务规则',
        code: 'business:edit',
        description: '修改和停用业务规则',
        parentId: 'business'
      }
    ]
  },
  {
    id: 'system',
    name: '系统管理',
    code: 'system',
    description: '系统管理相关权限',
    children: [
      {
        id: 'system:role',
        name: '角色管理',
        code: 'system:role',
        description: '角色管理相关权限',
        parentId: 'system',
        children: [
          {
            id: 'system:role:view',
            name: '查看角色',
            code: 'system:role:view',
            description: '查看角色列表',
            parentId: 'system:role'
          },
          {
            id: 'system:role:create',
            name: '创建角色',
            code: 'system:role:create',
            description: '创建新角色',
            parentId: 'system:role'
          },
          {
            id: 'system:role:edit',
            name: '编辑角色',
            code: 'system:role:edit',
            description: '编辑角色信息和权限',
            parentId: 'system:role'
          }
        ]
      },
      {
        id: 'system:account',
        name: '账号管理',
        code: 'system:account',
        description: '账号管理相关权限',
        parentId: 'system',
        children: [
          {
            id: 'system:account:view',
            name: '查看账号',
            code: 'system:account:view',
            description: '查看账号列表',
            parentId: 'system:account'
          },
          {
            id: 'system:account:create',
            name: '创建账号',
            code: 'system:account:create',
            description: '创建新账号',
            parentId: 'system:account'
          },
          {
            id: 'system:account:edit',
            name: '编辑账号',
            code: 'system:account:edit',
            description: '编辑账号信息',
            parentId: 'system:account'
          }
        ]
      }
    ]
  }
])

// 事件处理
const handleAddRole = (roleData: any) => {
  const newRole: any = {
    id: Date.now(),
    name: roleData.name,
    description: roleData.description,
    level: roleData.level,
    permissions: roleData.permissions || [],
    status: 1,
    createTime: new Date().toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  }
  roles.value.push(newRole)
  ElMessage.success('角色创建成功')
  console.log('新增角色:', newRole)
}

const handleUpdateRole = (roleId: number, updates: Partial<Role>) => {
  const roleIndex = roles.value.findIndex(role => role.id === roleId)
  if (roleIndex !== -1) {
    roles.value[roleIndex] = { ...roles.value[roleIndex], ...updates } as Role
    ElMessage.success('角色更新成功')
    console.log('更新角色:', roleId, updates)
  }
}
</script>

<style scoped>
/* 测试页面样式 */
</style>