Castor3 UI

Appearance

从 AntDV v1 迁移 ​

v2 保留组件名称和配置式 API，但底层控件从 Ant Design Vue 改为 Element Plus。

2.0.0-alpha.3 修复 ​

  • CaEditTable 在分页、切换每页数量或排序前检查当前编辑行，避免 getList 覆盖未保存草稿。
  • 当前编辑行没有业务变更时，组件会先结束编辑，再继续修改分页状态、发出对应事件并调用 getList。
  • 当前编辑行存在未保存变更时，组件保留行和草稿，不修改 pagination、不发出分页/排序事件，也不调用 getList，并提示先保存或取消。
  • 新增行始终视为有未保存变更；CaTreeEditTable 继承相同行为。此次修复没有新增属性、事件或业务侧适配要求。

2.0.0-alpha.2 新增与修复 ​

  • CaCommonForm 新增 validateField(fields)，并允许通过 commandType: 'save' 选择在命令发出前自动校验。
  • CaEditTable 新增 toolbar 作用域插槽，提供 addRow 和 editing；CaTreeEditTable 会透传该插槽。
  • CommonTable、EditTable 和 ReportTable 的序号列默认宽度为 64px，仍可由 column.elementProps.width 覆盖。
  • 自定义表单字段默认占满可用宽度；表格自定义列缺少已注册的 componentKey 时会在开发环境报警。
  • 树表 addSub 不再尝试发出未配置名称的事件；取消命令会提供兼容的空 done 回调。
  • SelectOption.icon 已从类型中移除。现有组件从未渲染该字段，图标需要由自定义组件负责。

继续保留 ​

  • model、fields、columns、commands。
  • visibleValidator、disableValidator。
  • elementProps、extendProps、customComponents。
  • emitRegister 命令注册模式。
  • CaCommonForm、CaCommonQuery、CaCommonTable 名称。

需要调整 ​

  • elementProps 现在透传 Element Plus 属性，AntDV 的 dataSource、dataIndex、customRender 等属性不能继续使用。
  • 日期值建议通过 Element Plus value-format 固定为接口需要的字符串格式。
  • pagination.current 改为 pagination.pageIndex 或 currentPage。
  • 表格列继续使用 dataField，底层映射为 Element Plus prop。
  • Query Plus 的命令式方法为 submitQuery、resetFields、toggleCollapse，事件仍为 search、reset、collapse-change。
  • CommonQuery / CommonQueryPlus 未传 formId 时会生成实例唯一 id；依赖固定 id 的页面需要显式传值。
  • upload 使用 model[dataField] 保存 Element Plus 文件列表；avatarUploader 继续使用图片 URL，上传成功后由业务回调更新。

表单布局属性 ​

旧版直接写在组件上的 label-position 改为 Element Plus 表单属性：

vue
<CaCommonForm :element-props="{ labelPosition: 'top' }" />

旧版 rowHeight 没有形成有效的公共布局行为，v2 不再接收该属性。字段高度和间距请使用字段的 elementProps、extendProps.formItemStyle，或表单的 extendProps.contentStyle。直接传入 row-height / rowHeight、label-position / labelPosition 时，开发环境会给出迁移警告。

自定义文本列 ​

旧版的 type: 'custom' + extendProps.dataTemplate 是文本格式化；v2 的 custom 专用于 customComponents 中注册的 Vue 组件。文本格式化应改为：

ts
// 旧版
{ type: 'custom', dataField: 'name', extendProps: { dataTemplate } }

// v2
{ type: 'default', dataField: 'name', dataTemplate }

custom 列没有配置有效的 extendProps.componentKey 时，开发环境会报警。

树表新增下级 ​

组件只负责创建子节点，不猜测业务字段。父 ID、设备 ID 等上下文通过 add-sub(parent, child) 补充：

vue
<CaTreeEditTable @add-sub="attachParentRow" />
ts
function attachParentRow(parent, child) {
  child.parentId = parent.id
  child.deviceId = parent.deviceId
}

行命令可以只设置 commandType: 'addSub'；未设置 command 时只发出 add-sub，不会额外发出无名称事件。

可变对象与兼容 subject ​

  • model、编辑类组件的 dataSource 和表格 pagination 都会被组件直接修改，必须传可变的响应式对象。
  • EditTable 会给行对象写入 operateType: 'add' | 'edit' | 'view'；后端不接收该字段时，提交前自行剔除。
  • visibleValidator / disableValidator 的对象 subject 中，model、row、index、operateType 是兼容层保留字段。
  • Query 命令的 loading: true 表示订阅组件的 loading 状态；两个值同时为 true 时按钮显示加载态。
  • EditTable 仅对 edit、save、cancel 或 handleEdit、handleSave、handleCancel 等独立命名段做兼容推断；自定义命令请显式设置 commandType。
  • EditTable 命令参数按生命周期区分：编辑为 (index, row, done)，保存为 (index, row, done, reason?)，取消为 (index, row, compatibleNoopDone)；新增下级另有 add-sub(parent, child)。
  • loading 用于首次加载或需要阻断操作的请求。保存后的后台刷新应保持 loading = false；行保存状态使用命令的 elementProps.loading 或 toolbar 插槽展示，成功/失败消息由业务侧处理。

版本策略 ​

AntDV 最终基线保存在 antdv-v1-final 标签；Element Plus 重构在 refactor/element-plus-v2 分支开发，完成后发布为 2.0.0。