74 lines
2.4 KiB
Markdown
74 lines
2.4 KiB
Markdown
# 实现计划
|
||
|
||
## 1. 标签页切换时自动刷新列表
|
||
|
||
### 1.1 问题分析
|
||
- 当前 `el-tabs` 组件没有添加 `tab-change` 事件监听
|
||
- 切换标签页时，列表数据不会自动刷新
|
||
|
||
### 1.2 解决方案
|
||
- 为 `el-tabs` 组件添加 `@tab-change` 事件监听
|
||
- 在事件处理函数中，根据当前激活的标签页调用对应的获取数据方法
|
||
- 邀请码列表调用 `getInviteCodeList()`
|
||
- 邀请用户列表调用 `getInviteList()`
|
||
|
||
## 2. 隐藏用户id的筛选条件
|
||
|
||
### 2.1 问题分析
|
||
- 当前用户id的筛选条件是可见的输入框
|
||
- 需要隐藏该筛选条件，但保持使用路由传过来的id
|
||
- 保持其他查询条件不变
|
||
|
||
### 2.2 解决方案
|
||
- 仅隐藏用户id的表单项，使用 `v-if="false"` 或 `style="display: none"`
|
||
- 保持现有的 `filterForm` 结构和查询逻辑不变
|
||
- 确保获取邀请码列表时，默认使用路由传过来的 `userId`
|
||
|
||
## 3. 添加删除二维码功能
|
||
|
||
### 3.1 问题分析
|
||
- 当前邀请码列表没有删除功能
|
||
- 需要调用 `deleteInviteCode` 方法删除邀请码
|
||
|
||
### 3.2 解决方案
|
||
- 在邀请码列表中添加一列操作列
|
||
- 操作列中添加删除按钮
|
||
- 点击删除按钮时，弹出确认对话框
|
||
- 确认后调用 `deleteInviteCode` 方法
|
||
- 删除成功后刷新邀请码列表
|
||
|
||
## 4. 实现步骤
|
||
|
||
### 4.1 修改标签页组件
|
||
- 添加 `@tab-change` 事件监听
|
||
- 实现 `handleTabChange` 方法
|
||
|
||
### 4.2 隐藏用户id筛选条件
|
||
- 在用户id的表单项上添加 `style="display: none"` 或 `v-if="false"`
|
||
- 保持其他查询条件不变
|
||
|
||
### 4.3 添加删除功能
|
||
- 在邀请码列表中添加操作列
|
||
- 添加删除按钮和确认对话框
|
||
- 实现 `handleDeleteCode` 方法
|
||
|
||
### 4.4 优化样式
|
||
- 调整操作列的宽度和样式
|
||
|
||
## 5. 文件修改
|
||
- 仅修改 `d:/work/Aiproject/DeotalandAi/apps/FrontendDesigner/src/views/admin/AdminUsers/AdminUserInvites.vue` 文件
|
||
|
||
# 预期效果
|
||
|
||
- 切换标签页时，对应列表自动刷新数据
|
||
- 邀请码列表中不再显示用户id筛选条件，但其他查询条件保持不变
|
||
- 邀请码列表中添加删除按钮，点击可删除邀请码，删除前有确认提示
|
||
- 删除成功后列表自动刷新
|
||
|
||
# 技术实现
|
||
|
||
- 使用 Vue 3 的 Composition API
|
||
- 使用 Element Plus 的组件和事件
|
||
- 调用已有的 `deleteInviteCode` 方法
|
||
- 使用 `ref` 管理响应式数据
|
||
- 使用 `async/await` 处理异步操作 |