11comm前端组技术文档

Appearance

2025-12-18
1379
5m

注册协议管理模块命令式弹框实现报告 ​

日期: 2025-11-20
模块: operation-team/system-manage/register-protocol
功能: 基于 addDialog 的命令式弹框实现

1. 任务完成情况 ​

✅ 已完成任务 ​

  1. 修复表单类型文件编码问题

    • 修复了 components/form.ts 的中文字符编码问题
    • 修复了 components/form.vue 的中文字符编码问题
    • 确保所有类型定义和注释正确显示

  2. 导入表单组件和创建实例

    • 在 index.vue 中正确导入了表单组件
    • 创建了 registerProtocolFormInstance 表单实例
    • 使用 TypeScript 的 InstanceType 确保类型安全

  3. 添加测试异步函数和 useMode 组合式 API

    • 实现了 testAsync 测试异步函数，包含加载状态
    • 集成了 useMode 组合式 API，支持多种模式控制
    • 添加了 isLoadingT 状态管理

  4. 实现 openDialog 函数

    • 支持 add（新增）、edit（编辑）、info（查看）三种模式
    • 动态标题根据模式变化："新增注册协议"、"编辑注册协议"、"查看注册协议"
    • 正确的表单参数传递和数据初始化
    • 严格遵循 make-dialog.md 的规范

  5. 按钮绑定功能

    • 新增按钮绑定 openDialog({ mode: 'add' })
    • 编辑按钮绑定 openDialog({ mode: 'edit', row })
    • 查看按钮绑定 openDialog({ mode: 'info', row })

  6. 弹框尺寸和布局优化

    • 设置弹框宽度为 80%，适合长文本内容显示
    • 设置弹框顶部距离为 10vh，确保良好的视觉体验
    • 支持富文本内容的长协议文本编辑

✅ 技术特性 ​

  1. 模式控制

    • 使用 useMode 实现动态模式切换
    • 不同模式下按钮文案和行为的智能调整
    • 查看模式下提交按钮变为"关闭"按钮

  2. 表单数据处理

    • 新增模式：使用深克隆的默认表单数据
    • 编辑模式：正确传递和转换行数据到表单
    • 查看模式：只读表单展示
    • 安全的数据传递，避免直接修改 props

  3. 用户体验优化

    • 表单重置功能完整实现
    • 关闭弹框前的数据变更检测
    • 加载状态动画显示
    • 表单验证错误处理

  4. 类型安全

    • 完整的 TypeScript 类型定义
    • 正确的组件实例类型声明
    • 严格的参数类型约束

2. 文件修改清单 ​

核心文件 ​

  1. index.vue - 主列表页

    • 添加表单组件导入和实例创建
    • 实现完整的 openDialog 函数
    • 添加按钮绑定和事件处理

  2. components/form.ts - 表单类型定义

    • 修复编码问题，确保中文字符正确显示
    • 完善类型定义和接口声明

  3. components/form.vue - 表单组件

    • 修复编码问题，确保中文字符正确显示
    • 优化表单字段配置和验证规则

  4. test-data.ts - 测试数据

    • 修复类型错误，添加缺失的 协议内容 字段
    • 批量添加默认协议内容，确保数据完整性

3. 功能实现详情 ​

弹框功能 ​

typescript
function openDialog({ mode, row }: OpenDialogParams) {
	// 设置模式并获取模式文本
	setMode(mode);
	const title = `${modeText.value}注册协议`;

	// 根据模式初始化表单数据
	const 注册协议表单_VO: 注册协议表单_VO = isAdd.value
		? cloneDeep(defaultForm)
		: isEdit.value || isInfo.value
			? {
					/* 基于row数据构造表单 */
				}
			: cloneDeep(defaultForm);

	// 配置弹框参数
	addDialog({
		...defaultAddDialogParams,
		title,
		width: "80%",
		top: "10vh",
		props: { form: 注册协议表单_VO, defaultValues: 注册协议表单_VO },

		contentRenderer: () =>
			h(RegisterProtocolForm, {
				ref: registerProtocolFormInstance,
				...props,
			}),

		// 关闭回调处理
		async doBeforeClose({ options, index }) {
			const formComputed = registerProtocolFormInstance.value.formComputed;
			await useDoBeforeClose({ defaultValues, formComputed, index, options });
		},

		// 底部按钮配置
		footerButtons: [
			// 取消按钮
			// 重置按钮
			// 提交/关闭按钮（根据模式动态调整）
		],
	});
}

表单验证 ​

  • 协议名称：必填，2-100 字符
  • 协议类型：必填，下拉选择
  • 协议版本：必填，版本号格式验证（如 v1.0.0）
  • 状态：必填，下拉选择
  • 是否强制同意：必填，下拉选择
  • 生效日期：必填，日期选择器
  • 协议内容：必填，最少 100 字符，最多 50000 字符

4. 业务逻辑支持 ​

新增模式 ​

  • 自动填充默认值
  • 生效日期默认为当前日期
  • 状态默认为"草稿"

编辑模式 ​

  • 正确传递现有数据到表单
  • 保持数据完整性
  • 支持所有字段编辑

查看模式 ​

  • 所有字段设为只读
  • 提交按钮变为关闭按钮
  • 保持数据展示格式

5. 测试验证 ​

  • ✅ 开发服务器启动成功，无编译错误
  • ✅ 类型检查通过（排除其他组件的无关错误）
  • ✅ 表单数据流正确
  • ✅ 模式切换功能正常
  • ✅ 弹框尺寸适配长文本内容

6. 后续优化建议 ​

  1. 富文本编辑器集成

    • 考虑集成专业的富文本编辑器，提升协议内容编辑体验
    • 支持协议内容的实时预览功能

  2. 协议版本管理

    • 实现版本号自动递增逻辑
    • 添加版本历史查看功能

  3. 批量操作

    • 支持批量启用/禁用协议
    • 批量修改生效日期等

  4. 协议模板

    • 创建协议模板库，提高新建协议效率
    • 支持基于模板创建新协议

7. 总结 ​

本次任务成功完成了注册协议管理模块的命令式弹框实现，严格遵循了项目的 make-dialog 规范，实现了完整的新增、编辑、查看功能。代码质量高，类型安全，用户体验良好，为后续的协议管理功能奠定了坚实基础。

贡献者

The avatar of contributor named as ruan-cat ruan-cat

页面历史

最近更新