实现广告合同信息管理组件

一、需求分析

根据Z八广告合同信息接口文档.docx的内容，需要实现以下功能：

1. 核心功能

• ✅ 保存广告合同信息 (/app/adContractInfo/saveAdContractInfo)
• ✅ 修改广告合同信息 (/app/adContractInfo/updateAdContractInfo)
• ✅ 删除广告合同信息 (/app/adContractInfo/deleteAdContractInfo)
• ✅ 分页查询广告合同信息列表 (/app/adContractInfo/queryAdContractInfo)
• ✅ 根据ID查询单条广告合同信息 (/app/adContractInfo/getAdContractInfoById)
• ✅ 根据合同ID查询广告合同信息 (/app/adContractInfo/getAdContractInfoByContractId)
• ✅ 统计广告合同信息 (/app/adContractInfo/queryAdContractInfoStatistics)

2. 数据模型

• 表结构：ad_contract_info
• 核心字段：
• id：主键ID
• contract_id：合同ID（唯一标识）
• ad_type：广告类型
• sub_type：广告子类型
• cooperation_form：合作内容形式
• building_elevator_count：小区楼栋数/电梯数
• online_quantity：上线数量
• facility_location：设施安装位置

3. 广告类型枚举

• 电梯广告（电梯广告-联讯、电梯广告-业委会）
• 租房（租房-租赁、租房-水电）
• 快递柜（无子类型）
• 场地代收电费（无子类型）
• 充电桩代收电费（无子类型）
• 场地使用机房基站（无子类型）
• 净水自贩机（无子类型）
• 机房基站（无子类型）
• 其他广告（车辆识别系统、智能柜、代收电费等）

二、实施计划

阶段一：创建广告合同信息管理组件

1. 创建组件目录：

• public/components/contract/adContractInfo/

1. 创建核心文件：

• adContractInfo.js：JavaScript逻辑文件
• adContractInfo.html：HTML模板文件

1. 实现JavaScript文件：

• 完整的数据模型定义
• 广告类型和子类型枚举
• 完整的CRUD操作方法
• 统计功能实现
• 详细的功能注释

1. 实现HTML文件：

• 查询条件表单
• 数据表格展示
• 分页控件
• 添加/编辑弹窗
• 详细的结构注释

阶段二：功能实现

1. 基础功能：

• 列表查询和分页
• 新增广告合同信息
• 编辑广告合同信息
• 删除广告合同信息

1. 高级功能：

• 按合同ID查询
• 广告合同信息统计
• 数据验证和错误处理
• 响应式UI设计

1. 接口集成：

• 确保所有接口调用路径正确
• 实现完整的请求参数和响应处理
• 添加适当的加载状态和错误提示

阶段三：验证和测试

1. 功能验证：

• 测试所有CRUD操作
• 验证统计功能
• 测试数据验证
• 检查错误处理

1. 代码质量：

• 确保注释完整清晰
• 验证代码风格一致性
• 检查接口调用路径正确
• 确保与现有组件风格统一

三、技术要点

1. 接口路径：所有接口调用路径为 /app/adContractInfo/... 格式
2. 数据验证：实现完整的前端数据验证
3. 错误处理：添加完善的错误处理机制
4. 代码注释：为所有功能模块添加详细的中文注释
5. 用户体验：确保操作流畅，反馈及时
6. 集成性：确保与现有系统架构和组件风格一致

四、预期成果

• ✅ 完整的广告合同信息管理组件
• ✅ 实现所有核心CRUD操作
• ✅ 支持统计和查询功能
• ✅ 详细的代码注释和文档
• ✅ 与现有系统无缝集成

该组件将为合同管理系统添加专门的广告合同信息管理功能，满足业务需求并提供良好的用户体验。