物业公司列表页命令式弹框改造报告
改造概述
对 apps/admin/src/pages/operation-team/data-manage/property-management-company/index.vue 文件的命令式弹框进行了标准化改造，确保完全符合项目的弹框实现规范。
改造内容
1. 规范 testAsync 异步函数注释
- 修改前：使用简单的双斜杠注释
- 修改后：使用标准的 jsdoc 格式注释
- 位置：第 216-223 行
typescript
/** 模拟异步操作函数 */
async function testAsync() {
setIsLoadingT(true);
consola.log("模拟异步操作, isLoadingT ", isLoadingT.value);
await sleep(1300);
setIsLoadingT(false);
consola.log("模拟异步操作, isLoadingT ", isLoadingT.value);
}2. 优化表单数据映射逻辑
- 移除硬编码测试数据：将编辑模式下的硬编码测试值替换为空字符串
- 保持数据结构完整性：确保所有字段都有正确的映射
- 位置：第 234-247 行
typescript
/** 业务对象 */
const 物业公司表单_VO: 物业公司表单_VO = isAdd.value
? cloneDeep(defaultForm)
: isEdit.value
? cloneDeep({
...defaultForm,
名称: row?.名称 || "",
地址: row?.地址 || "",
电话: row?.电话 || "",
公司法人: row?.公司法人 || "",
成立日期: row?.成立日期 || "",
地标: row?.地标 || "",
开通小区: "",
})
: cloneDeep(defaultForm);3. 完善表单实例访问
- 移除不必要的注释：清理按钮事件处理函数中的冗余注释
- 保持空值检查：确保表单实例访问的安全性和一致性
- 位置：第 281-286 行、292-294 行、300-308 行
4. 规范 contentRenderer 配置
- 移除无效注释：删除关于类型报错的不必要注释
- 简化属性传递：保持简洁的 props 传递方式
- 位置：第 263-267 行
符合标准的配置验证
✅ 弹框配置完全符合标准要求
- defaultAddDialogParams：正确使用并位于第一行（第 259 行）
- 按钮顺序：取消（info）→ 重置（warning）→ 提交（success）
- 按钮类型：严格按照标准规范设置
- 事件处理：使用标准的
useDoBeforeClose和表单实例方法 - 加载状态：正确使用
button.btn.loading控制加载状态 - 模式控制：使用
useMode进行模式控制 - 数据映射：根据模式正确映射表单数据
✅ 函数命名规范
- 函数名称统一为
openDialog - 参数结构符合标准：
{ mode: Mode; row?: 物业公司_列表数据 } - 正确使用 TypeScript 类型约束
保持不变的现有逻辑
- 表格搜索和分页逻辑完全保持不变
- 表格列配置和数据加载逻辑保持不变
- 路由跳转和业务逻辑保持不变
- 组件结构和样式保持不变
改造效果
经过改造后，物业公司列表页的命令式弹框实现完全符合项目标准，具备以下特点：
- 标准化：所有配置都符合项目弹框实现规范
- 安全性：正确的空值检查和错误处理
- 可维护性：清晰的代码结构和注释
- 一致性：与其他页面的弹框实现保持一致
技术细节
- 使用 Vue 3 Composition API
- TypeScript 类型安全
- 响应式数据处理
- 命令式弹框模式
- 表单验证和重置功能
贡献者
ruan-cat