nxxmdata/government-admin/test-admin-staff-component.mjs

// 前端组件API测试脚本 - ES模块格式
import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://localhost:5352/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 登录获取token
async function login() {
  try {
    const response = await instance.post('/auth/login', {
      username: 'admin',
      password: '123456'
    });
    console.log('登录成功:', response.data);
    // 修正token获取路径 - 正确路径是response.data.data.token
    return response.data.data?.token || null;
  } catch (error) {
    console.error('登录失败:', error);
    console.error('错误详情:', error.response?.data || error.message);
    return null;
  }
}

// 测试获取行政人员列表
async function testGetAdminStaffList(token) {
  try {
    const response = await instance.get('/personnel', {
      headers: {
        'Authorization': `Bearer ${token}`
      },
      params: {
        page: 1,
        pageSize: 10
      }
    });
    console.log('行政人员列表获取成功:');
    console.log('- 数据结构:', Object.keys(response.data));
    console.log('- 行政人员总数:', response.data.total);
    console.log('- 行政人员列表数据长度:', response.data.data?.length || 0);
    if (response.data.data && response.data.data.length > 0) {
      console.log('- 第一条数据示例:', response.data.data[0]);
    }
    return response.data;
  } catch (error) {
    console.error('行政人员列表获取失败:', error);
    console.error('错误详情:', error.response?.data || error.message);
    return null;
  }
}

// 测试获取部门列表
async function testGetDepartmentsList(token) {
  try {
    const response = await instance.get('/government/departments', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    console.log('部门列表获取成功:');
    console.log('- 数据结构:', Object.keys(response.data));
    console.log('- 部门列表数据长度:', response.data.data?.length || 0);
    if (response.data.data && response.data.data.length > 0) {
      console.log('- 第一条数据示例:', response.data.data[0]);
    }
    return response.data;
  } catch (error) {
    console.error('部门列表获取失败:', error);
    console.error('错误详情:', error.response?.data || error.message);
    return null;
  }
}

// 测试获取岗位列表
async function testGetPositionsList(token) {
  try {
    const response = await instance.get('/government/positions', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
    console.log('岗位列表获取成功:');
    console.log('- 数据结构:', Object.keys(response.data));
    console.log('- 岗位列表数据长度:', response.data.data?.length || 0);
    if (response.data.data && response.data.data.length > 0) {
      console.log('- 第一条数据示例:', response.data.data[0]);
    }
    return response.data;
  } catch (error) {
    console.error('岗位列表获取失败:', error);
    console.error('错误详情:', error.response?.data || error.message);
    return null;
  }
}

// 主测试函数 - 模拟AdminStaff组件的初始化流程
async function runComponentTest() {
  console.log('开始模拟AdminStaff组件初始化测试...');
  
  // 1. 登录获取token
  console.log('\n1. 登录认证');
  const token = await login();
  if (!token) {
    console.error('测试失败: 无法获取登录token');
    return;
  }
  
  // 2. 测试获取部门列表 - 对应组件中的fetchDepartments()
  console.log('\n2. 获取部门列表');
  const departmentsData = await testGetDepartmentsList(token);
  
  // 3. 测试获取岗位列表 - 对应组件中的fetchPositions()
  console.log('\n3. 获取岗位列表');
  const positionsData = await testGetPositionsList(token);
  
  // 4. 测试获取行政人员列表 - 对应组件中的fetchAdminStaffList()
  console.log('\n4. 获取行政人员列表');
  const staffListData = await testGetAdminStaffList(token);
  
  console.log('\n测试完成!');
  console.log('----------------------------------------');
  console.log('测试结果总结:');
  console.log('- 登录:', token ? '成功' : '失败');
  console.log('- 部门列表:', departmentsData ? '成功' : '失败');
  console.log('- 岗位列表:', positionsData ? '成功' : '失败');
  console.log('- 行政人员列表:', staffListData ? '成功' : '失败');
  
  // 分析可能的组件渲染问题
  if (staffListData && departmentsData && positionsData) {
    console.log('\n所有API调用成功，但页面仍显示空白可能的原因:');
    console.log('1. 数据格式不匹配 - 检查返回数据结构是否与组件期望的一致');
    console.log('2. 组件生命周期问题 - 检查onMounted中是否正确调用initData()');
    console.log('3. 数据处理逻辑错误 - 检查staffData.value的赋值和转换逻辑');
    console.log('4. 权限问题 - 检查用户角色和权限是否正确');
    console.log('5. 前端控制台错误 - 检查浏览器控制台是否有详细错误信息');
  } else {
    console.log('\nAPI调用失败是页面空白的可能原因，请检查:');
    console.log('1. 后端接口是否正确实现');
    console.log('2. 认证token是否有效');
    console.log('3. 网络连接是否正常');
  }
}

// 运行测试
runComponentTest().catch(err => {
  console.error('测试过程中发生错误:', err);
});