效果图 当前图片中,上方是自定义的视图,下方是动态的表单视图 代码 步骤拆分:1: 通过注册 layout 的方式先自定义视图,把自己的业务逻辑写完2: 在对应的 vue 文件里面定义一个插槽,用来放置动态的表单视图3: 在组件挂在的时候,创建动态视图 1: 注册 layout // registry.ts import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="CustomViewWidget"></element> </view>`, { model: '模型编码', actionName: '动作名称', viewType: ViewType.Form } ); 2: vue 里面定义 slot <!–CustomView.vue –> <template> <div> <h1>这是自定义的视图</h1> <img src="https://pamirs.oss-cn-hangzhou.aliyuncs.com/oinone/static/images/login_bg_left.jpg" height="400" width="2600" alt="" /> <h1>下面设计器配置的动态视图</h1> <slot name="dynamicView"></slot> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ }); </script> 3: 组件挂载的时候,创建动态视图 // CustomViewWidget.ts import { SPI, BaseElementWidget, ViewType, ViewCache, Widget, MetadataViewWidget, BaseView, TableView, FormView, FormWidget, registerLayout, DetailView, DetailWidget, isRelation2MField, customQuery } from '@kunlun/dependencies'; import CustomView from './CustomView.vue'; import { delay } from 'lodash-es'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'CustomViewWidget' }) ) export class CustomViewWidgetWidget extends BaseElementWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomView); return this; } /** * 定义一个属性,用来存储动态视图 */ private metadataViewWidget: MetadataViewWidget | undefined; /** * 获取动态视图的数据 */ @Widget.Method() private getWidgetData() { const children = this.metadataViewWidget?.getChildrenInstance() as BaseView[]; const child = children[0]; if (child) { return child instanceof TableView ? child.getCurrentDataSource() : child.getCurrentActiveRecords(); } return null; } /** *…