MasterDetailCrudTemplate 主从 CRUD 模板

包装 AiCrudPage 的主从 CRUD 页面模板。自动注入主从配置，适合主表+子表关联编辑场景。

基本用法

<template>
  <MasterDetailCrudTemplate ref="crudRef" :crud-props="crudConfig" />
</template>

<script setup>
import { MasterDetailCrudTemplate } from '@/components/page-templates/MasterDetailCrudTemplate.vue'
import { ref } from 'vue'

const crudRef = ref()

const crudConfig = {
  columns: [...],
  editSchema: [...],
  apiConfig: { list: 'GET@/order/page', add: 'POST@/order', ... },
  childrenConfig: [
    {
      tabTitle: '订单明细',
      fields: [...],
      apiConfig: { ... }
    }
  ]
}

// 暴露方法
crudRef.value.showAdd()
crudRef.value.refresh()
</script>

Props

属性	类型	说明
crudProps	Object (required)	传递给 AiCrudPage 的完整配置对象

内部合并逻辑

配置项	合并结果
loadDetailOnEdit	强制设为 true
modalWidth	优先 crudProps.modalWidth，其次 crudProps.options.modalWidth，默认 '1080px'
childrenConfig	优先 crudProps.childrenConfig，其次 crudProps.options.masterDetailConfig.children

Expose 方法

方法	说明
showAdd(...args)	打开新增弹窗
showDetail(...args)	打开详情弹窗
refresh(...args)	刷新表格数据

---

TreeCrudTemplate 树形 CRUD 模板

左树右表的树形 CRUD 页面模板。支持全量加载和懒加载，选中树节点自动过滤右侧表格。

基本用法

<TreeCrudTemplate ref="crudRef" :crud-props="crudConfig" />

treeConfig 子配置

属性	类型	默认值	说明
treeTitle	String	'树形分类'	树标题
loadMode	'full' | 'lazy'	'full'	加载模式
filterField	String	'parentId'	过滤字段
includeChildren	Boolean	true	是否包含子节点
keyField	String	'id'	树节点 key 字段
labelField	String	自动推导	显示标签字段
childrenField	String	'children'	子节点字段
targetField	String	'id'	选中后过滤参数的值字段

当 treeConfig 未配置时降级为标准 CRUD。

---

ChildTableEditor 子表编辑器

用于表单中以内联可编辑表格管理一对多关联子数据。支持多 Tab、多种字段类型内联编辑、记录选择器批量添加、merge 模式软删除。

Props

属性	类型	默认值	说明
value	Object	{}	子表数据对象，支持 v-model
childrenConfig	Array	[]	子表配置数组
readonly	Boolean	false	只读模式
parentFormData	Object	{}	父表单数据
context	Object	{}	运行时上下文

childrenConfig 子属性

属性	类型	说明
tabTitle	String	Tab 标题
modelName	String	模型名称
fields	Array	字段配置数组
saveMode	'merge'	merge 模式允许标记删除
minWidth	Number	表格最小宽度

Expose 方法

方法	说明
validate()	校验所有子表必填字段
getValue()	获取净化的子表数据