3.1 KiB
3.1 KiB
协议管理页面实现计划
1. 需求分析
根据 index.js 中的 API 功能，需要实现以下功能：
- 协议列表展示
- 协议状态修改
- 协议删除
- 协议详情查看
- 协议创建
- 协议更新
2. 页面设计
遵循 Element Plus 企业级管理系统设计风格，页面包含：
- 卡片式布局
- 表格展示协议列表
- 状态标签显示协议状态
- 操作按钮（编辑、删除、启用/禁用）
- 表单用于创建/编辑协议
- 弹窗用于详情查看和表单操作
3. 实现步骤
3.1 页面结构设计
- 使用
el-card包裹主要内容 - 卡片头部包含标题和创建按钮
- 表格展示协议列表，包含协议类型、版本、状态、语言、创建时间等字段
- 操作列包含查看详情、编辑、删除、启用/禁用按钮
3.2 功能实现
- 列表查询：调用
getAgreementListAPI 获取协议列表 - 状态修改：点击启用/禁用按钮，调用
updateAgreementStatusAPI - 删除协议：点击删除按钮，调用
deleteAgreementAPI，带确认提示 - 查看详情：点击详情按钮，弹窗展示协议详情
- 创建协议：点击创建按钮，弹窗显示表单，调用
createAgreementAPI - 编辑协议：点击编辑按钮，弹窗显示表单，调用
updateAgreementAPI
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 属性绑定语法