跳到主要内容

业务选择器与微前端容器

适用对象：想在 Schema 中直接复用平台已有业务选择器，或把微前端页面 / 表单挂进低代码页面的开发者。

使用场景​

  • 你想选员工、组织或数据字典项
  • 你想在低代码页面里挂一个微前端容器
  • 你想判断现有需求能不能先复用平台定制组件

展示数据字典项​

展示数据字典项的组件，通过传递已定义好的数据字典的字典名，组件可以展示该数据字典中已定义字典项。

基本使用​

{
  "type": "data-dict-picker",
  "dataDictName": ""
}

属性表​

下列属性为 data-dict-picker 独占属性,更多属性用法，参考FormItem 普通表单项

属性名类型默认值说明
typestringtype 指定为 DataDictPicker 渲染器
dataDictNamestring字典名
tenantIdstring租户 id

选择员工​

基本使用​

{
  "type": "employee-picker",
  "multiple": true,
  "minLength": "1",
  "maxLength": "5"
}

属性表​

下列属性为 employee-picker 独占属性,更多属性用法，参考FormItem 普通表单项

属性名类型默认值说明
typestringtype 指定为 EmployeePicker 渲染器
multiplebooleanfalse是否为多选
minLengthnumbermultiple 为 true 时生效，最少选择员工数量
maxLengthnumbermultiple 为 true 时生效，最多选择员工数量

返回值​

  • 单选 - 返回对象。
  • 多选 - 返回选中数据组成的数组对象。

选择组织架构​

基本使用​

{
  "type": "organization-picker",
  "multiple": true
}

属性表​

下列属性为 organization-picker 独占属性,更多属性用法，参考FormItem 普通表单项

属性名类型默认值说明
typestringtype 指定为 OrganizationPicker 渲染器
multipleboolean是否为多选
showCompanyboolean展示所有公司的选项
companyIdstring指定公司的组织架构数据
showDepartmentboolean展示部门的选项，若设置为 true, companyId 必填
pickCompanybooleantrue用户可以选择公司
pickDepartmentbooleantrue用户可以选择部门

返回值​

  • 单选 - 返回对象。
  • 多选 - 返回选中数据组成的数组对象。

表单内加载微前端应用​

基本使用​

{
  "type": "micro-form-component",
  "entry": "",
  "inputStyle": {
    "width": "70%",
    "height": "75px",
    "marginLeft": "10%"
  }
}

属性表​

下列属性为 micro-form-component 独占属性, 更多属性用法，参考FormItem 普通表单项

属性名类型默认值说明
typestringtype 指定为 MicroFormComponent 渲染器
entrystring微前端路径 必填
inputStyleobject微应用容器样式

加载微前端应用​

基本使用​

{
  "type": "micro-component",
  "entry": ""
}

属性表​

属性名类型默认值说明
typestringtype 指定为 MicroComponent 渲染器
entrystring微前端路径 必填
inputStyleobject微应用容器样式

动作表​

支持自定义方法传给微前端，微前端接收方法与调用。

例如：

{
  "type": "micro-component",
  "entry": "",
  "onChange": function (val) {
    console.log(val)
  },
}