6f4ace886f
修复角色创建时出现的 AttributeError: 'dict' object has no attribute 'model_dump' 错误，将 role_data.model_dump() 改为 dict(role_data) 以兼容 Pydantic v1 和 v2。 同时优化了搜索布局和样式，确保查询条件和按钮在同一行显示： 1. 修改 admin-crud.css 添加搜索区域不换行样式 2. 调整 role-crud.ts 中的 search 配置 3. 将 GET 查询接口改为 POST /search 方式 4. 修复角色权限分配时的权限加载问题
122 lines
3.8 KiB
Markdown
122 lines
3.8 KiB
Markdown
|
||
# Bug 修复计划
|
||
|
||
## 问题描述
|
||
|
||
### 问题1：查询条件布局优化
|
||
前端页面中用户、角色、权限的页面中查询条件和查询、重置按钮需要放到一行，并且去掉展开按钮。
|
||
|
||
### 问题2：查询方法修改
|
||
查询目前使用 GET 方法进行的，需要改为 POST 方法。
|
||
|
||
## 项目结构分析
|
||
|
||
```
|
||
frontend/
|
||
└── src/
|
||
└── modules/
|
||
└── admin/
|
||
├── views/
|
||
│ ├── users/
|
||
│ │ ├── UserManage.vue # 用户管理页面
|
||
│ │ └── user-crud.ts # 用户 CRUD 配置
|
||
│ ├── roles/
|
||
│ │ ├── RoleManage.vue # 角色管理页面
|
||
│ │ └── role-crud.ts # 角色 CRUD 配置
|
||
│ └── permissions/
|
||
│ ├── PermissionManage.vue # 权限管理页面
|
||
│ └── permission-crud.ts # 权限 CRUD 配置
|
||
└── api/
|
||
└── http.ts # HTTP 请求封装
|
||
```
|
||
|
||
## 修复方案
|
||
|
||
### 问题1：查询条件布局优化
|
||
|
||
在 fast-crud 中，可以通过配置 `search` 属性来控制搜索表单的布局：
|
||
|
||
| 配置项 | 值 | 说明 |
|
||
|--------|-----|------|
|
||
| `show` | `true` | 显示搜索表单 |
|
||
| `inline` | `true` | 查询条件和按钮在一行 |
|
||
| `expand` | `false` | 隐藏展开按钮 |
|
||
|
||
需要修改的文件：
|
||
- `frontend/src/modules/admin/views/users/user-crud.ts`
|
||
- `frontend/src/modules/admin/views/roles/role-crud.ts`
|
||
- `frontend/src/modules/admin/views/permissions/permission-crud.ts`
|
||
|
||
### 问题2：查询方法修改
|
||
|
||
需要同时修改前端和后端：
|
||
|
||
**前端修改**：
|
||
- 将 `pageRequest` 中的 `http.get` 改为 `http.post`
|
||
- 将查询参数从 URL 参数改为请求体
|
||
|
||
**后端修改**：
|
||
- 将 `/users/`、`/roles/`、`/permissions/` 的 GET 请求改为 POST 请求
|
||
- 修改参数接收方式，从 Query 参数改为请求体
|
||
|
||
需要修改的文件：
|
||
- 前端：`user-crud.ts`、`role-crud.ts`、`permission-crud.ts`
|
||
- 后端：`users/urls.py`、`roles/urls.py`、`permissions/urls.py`
|
||
|
||
## 修改步骤
|
||
|
||
### 步骤1：修改前端 CRUD 配置（问题1+问题2）
|
||
|
||
修改三个 CRUD 配置文件：
|
||
|
||
1. `user-crud.ts`:
|
||
- 添加 `search: { inline: true, expand: false }` 配置
|
||
- 将 `pageRequest` 中的 `http.get` 改为 `http.post`
|
||
|
||
2. `role-crud.ts`:
|
||
- 添加 `search: { inline: true, expand: false }` 配置
|
||
- 将 `pageRequest` 中的 `http.get` 改为 `http.post`
|
||
|
||
3. `permission-crud.ts`:
|
||
- 添加 `search: { inline: true, expand: false }` 配置
|
||
- 将 `pageRequest` 中的 `http.get` 改为 `http.post`
|
||
|
||
### 步骤2：修改后端 API（问题2）
|
||
|
||
修改三个后端路由文件：
|
||
|
||
1. `users/urls.py`:
|
||
- 将 `@router.get("/")` 改为 `@router.post("/search")`
|
||
- 修改参数接收方式
|
||
|
||
2. `roles/urls.py`:
|
||
- 将 `@router.get("/")` 改为 `@router.post("/search")`
|
||
- 修改参数接收方式
|
||
|
||
3. `permissions/urls.py`:
|
||
- 将 `@router.get("/")` 改为 `@router.post("/search")`
|
||
- 修改参数接收方式
|
||
|
||
### 步骤3：验证修改
|
||
|
||
启动项目，验证：
|
||
1. 查询条件和按钮是否在一行显示
|
||
2. 展开按钮是否已隐藏
|
||
3. 查询请求是否使用 POST 方法
|
||
4. 查询功能是否正常工作
|
||
|
||
## 风险评估
|
||
|
||
| 风险项 | 风险等级 | 应对措施 |
|
||
|--------|----------|----------|
|
||
| 后端 API 变更可能影响其他功能 | 中 | 保留原 GET 接口，新增 POST 接口 |
|
||
| fast-crud 配置不生效 | 低 | 检查 fast-crud 文档确认配置项 |
|
||
| 查询参数传递方式变更 | 低 | 修改前端传递方式，确保与后端一致 |
|
||
|
||
## 注意事项
|
||
|
||
1. 后端修改时，建议保留原 GET 接口，新增 POST `/search` 接口，避免影响其他功能
|
||
2. 修改完成后需要测试所有查询功能是否正常工作
|
||
3. 确保前后端参数传递方式一致
|
||
|