组件引擎

组件引擎维护可脚本打开的弹层、抽屉、自定义浮层，正文为完整 Vue。列表、表单按钮等通过 App.Components.Component.Open 按组件 id 打开。

新增组件

1. 进入 系统引擎 → 组件引擎（路由 /system-engine/component-engine）。

   

2. 点击工具栏【新增】，打开组件表单，填写完成表单后点击【确定】按钮。

   表单字段说明：

   属性	说明
   名称	必填。列表展示名称
   代码	必填。完整 Vue
   打开方式	0 对话、1 抽屉、2 自定义浮层
   可拖拽	仅对话框有效
   宽度	外壳宽度，如 80%、720px
   高度	内容区高度
   位置	自定义浮层位置策
   左偏移	自定义时距左偏移
   顶部偏移	自定义时距顶偏移
   标题	弹层/抽屉标题栏文案
   遮罩	是否显示遮罩
   自动关闭	点遮罩是否关闭
   显示标题	是否显示标题
   内边距	内容区 padding样式

提示：在代码编辑器中写入完整 Vue （须含template与script；运行时入参用 defineProps 声明）

1. 点击【保存】列表刷新后可见新组件 ，点击操作列【预览】查看效果

编辑组件

1. 在组件引擎列表中选中一行，单击操作列【编辑】。
2. 在组件表单中修改信息，保存后刷新列表。

提示：改defineProps字段名时，同步改调用方Open({ data })的键名。

删除组件

选中要删除的组件，单击操作列【删除】，按提示确认。

提示：

1. 删除的是引擎库中的组件登记与代码，不会删除业务表数据。

2. 删除前确认列表按钮、表单脚本、页面脚本中没有仍引用该组件 id 的Open。

使用组件

命令打开

const instId =await App.Components.Component.Open({
  id: String(组件ID),//必传
  data:{},//传入组件的数据
  style:{},//可不传
  onClose: () => {
      App.Body.Table?.Refresh?.()
    },//可不传
  onLoaded:()=>{},//可不传
  onError :()=>{},//可不传
})
 // 需要时：App.Components.Component.Close(instId)

表单引用：

表单动态组件

提示：禁止：Open(id, data) 多参写法；禁止把整行塞进 data: { value: row }。

示例

动态组件代码：

<template>
<div>
 <div>{{model}}</div>
 <el-button @click="AddClick">+1</el-button>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
  fieldKey?: string | null//绑定表单字段Key
  formReadonly?: boolean//绑定表单的只读属性
  runtimeApp?: AppService | null
  onChange?: (value: any[]) => void | Promise<void>
}>()
const model = defineModel('value')//双向响应式变量绑定
const AddClick=()=>{
model.value=model.value?Number(model.value) +1:1
props.onChange(model.value)//触发表单值变更事件
}
</script>

表单配置：

常见问题

预览空白或报错

确认代码是完整VUE结构；根节点与脚本语法错误会导致渲染失败。先看浏览器控制台。

Open 后 props 拿不到

data 的键必须与 defineProps 同名；id 必须是字符串形式的id。

打开成抽屉/弹层不对

库表 open_type 决定默认形态；单次调用可用 style.openDisplay 覆盖为 dialog / drawer / custom。

和页面代码互相粘贴后行为不对

页面挂在菜单上整页渲染；组件必须经 Open 打开。外壳宽高在组件字段或 style 里配，不要指望菜单 open_type。