95 lines
3.1 KiB
Markdown
95 lines
3.1 KiB
Markdown
# 协议管理页面实现计划
|
||
|
||
## 1. 需求分析
|
||
根据 `index.js` 中的 API 功能，需要实现以下功能：
|
||
- 协议列表展示
|
||
- 协议状态修改
|
||
- 协议删除
|
||
- 协议详情查看
|
||
- 协议创建
|
||
- 协议更新
|
||
|
||
## 2. 页面设计
|
||
遵循 Element Plus 企业级管理系统设计风格，页面包含：
|
||
- 卡片式布局
|
||
- 表格展示协议列表
|
||
- 状态标签显示协议状态
|
||
- 操作按钮（编辑、删除、启用/禁用）
|
||
- 表单用于创建/编辑协议
|
||
- 弹窗用于详情查看和表单操作
|
||
|
||
## 3. 实现步骤
|
||
|
||
### 3.1 页面结构设计
|
||
- 使用 `el-card` 包裹主要内容
|
||
- 卡片头部包含标题和创建按钮
|
||
- 表格展示协议列表，包含协议类型、版本、状态、语言、创建时间等字段
|
||
- 操作列包含查看详情、编辑、删除、启用/禁用按钮
|
||
|
||
### 3.2 功能实现
|
||
- **列表查询**：调用 `getAgreementList` API 获取协议列表
|
||
- **状态修改**：点击启用/禁用按钮，调用 `updateAgreementStatus` API
|
||
- **删除协议**：点击删除按钮，调用 `deleteAgreement` API，带确认提示
|
||
- **查看详情**：点击详情按钮，弹窗展示协议详情
|
||
- **创建协议**：点击创建按钮，弹窗显示表单，调用 `createAgreement` API
|
||
- **编辑协议**：点击编辑按钮，弹窗显示表单，调用 `updateAgreement` API
|
||
|
||
### 3.3 路由配置
|
||
在 `permissionRoutes` 数组中添加协议管理路由：
|
||
- 路径：`agreement-management`
|
||
- 名称：`AdminAgreement`
|
||
- 组件：`AdminAgreement`
|
||
- 标题：`admin.layout.agreementManagement`
|
||
- 图标：`Document`
|
||
- 菜单顺序：合理位置
|
||
|
||
### 3.4 响应式设计
|
||
- 表格在移动端自动调整布局
|
||
- 弹窗在移动端自适应宽度
|
||
- 表单元素在不同屏幕尺寸下保持良好的用户体验
|
||
|
||
## 4. 代码实现
|
||
|
||
### 4.1 创建 `index.vue` 文件
|
||
- 使用 Composition API
|
||
- 导入必要的组件和 API 类
|
||
- 实现数据响应式
|
||
- 实现方法逻辑
|
||
- 实现模板结构
|
||
- 添加样式
|
||
|
||
### 4.2 Vue3 属性绑定语法
|
||
所有属性绑定严格使用 Vue3 语法：
|
||
- 错误：`label="{{label}}"`
|
||
- 正确：`:label="label"`
|
||
- 示例：
|
||
- `:data="tableData"`
|
||
- `:loading="loading"`
|
||
- `:visible.sync="dialogVisible"`
|
||
- `:type="scope.row.status === 1 ? 'success' : 'warning'"`
|
||
- `@click="handleEdit(scope.row)"`
|
||
|
||
### 4.3 具体实现细节
|
||
- **表格配置**：使用 `:data` 绑定表格数据，`:loading` 绑定加载状态
|
||
- **弹窗配置**：使用 `:visible.sync` 控制弹窗显示/隐藏
|
||
- **表单配置**：使用 `v-model` 绑定表单数据，`:rules` 绑定验证规则
|
||
- **按钮配置**：使用 `@click` 绑定点击事件，`:type` 绑定按钮类型
|
||
- **状态标签**：使用 `:type` 绑定标签类型，动态根据状态值变化
|
||
|
||
### 4.4 更新路由配置
|
||
在 `router/index.js` 中添加协议管理路由
|
||
|
||
## 5. 预期效果
|
||
- 页面布局符合设计风格指南
|
||
- 所有功能正常工作
|
||
- 响应式设计适配不同设备
|
||
- 交互流畅，反馈清晰
|
||
- 严格遵循 Vue3 属性绑定语法
|
||
|
||
## 6. 技术要点
|
||
- Vue3 Composition API
|
||
- Element Plus 组件库
|
||
- API 异步调用
|
||
- 响应式设计
|
||
- 中英文切换支持
|
||
- 严格的 Vue3 属性绑定语法 |