盘古低代码

子表单 ​


image

介绍 ​

可嵌套在父表单中、支持动态增删和验证的复合型输入控件，用于高效管理一组结构重复的数据条目。

API ​

Props ​

参数名描述类型默认值
status状态'default' |'disabled'| 'hide''default'
title标题string'子表单'
showLabel显示标题booleantrue
value编辑默认值{[key: string]: any}[]''
name数据字段string${组件编码}_${长度为8的随机字符串}
showIndexCol显示序号booleantrue
indexColWidth序号列列宽number70
rowDraggable拖动排序booleanfalse
fixedLeft冻结左侧列0|1|2|30
addBtnTitle新增按钮名称string-
addBtnStatus新增按钮状态'normal'|'disabled'|'hide''normal '
batchDelete批量删除booleanfalse
maxCount最大条数number-
showExcelExport导出Excelbooleantrue
showActionCol显示操作列booleantrue
fixedActionCol冻结操作列booleantrue
showCopyBtn复制按钮booleantrue
copyBtnDisableConditions按条件禁用Function'function action(ctx, params) { return false; }'
copyBtnTitle复制按钮名称string-
copyToBottomText'复制到底部'文案string-
copyToNextRowText'复制到下一行'文案string-
showRemoveBtn删除按钮booleantrue
removeBtnDisableConditions按条件禁用Function'function action(ctx, params) { return false;}'
removeBtnTitle删除按钮名称string-
showRemoveConfirm删除确认booleantrue
removeConfirmContent删除确认文案string-
showBatchImport批量导入booleanfalse
uploadAction解析接口地址string-
uploadHeaderData上传请求header附加的数据object-
uploadData上传请求附加的数据object-
pagination使用分页booleanfalse
pageSize每页展示数量string-
validate校验Validate-
baseStyle自定义样式string-
customClass类名绑定string-
boxStyle盒模型 ， margin,border,padding设置BoxStyle-
scrollWidth滚动容器宽度string-
scrollHeight滚动容器高度string-
actionColWidth操作列string120
columnResizable是否允许调整列宽booleanfalse
isCustomColWidths自定义其他列宽booleanfalse
colWidths其他列宽度{[key: string]: number}[][key: string]: 200}[]
isTableHeaderGroup表头分组，开启表头分组后可对每列的分组标题进行设置，相邻列的分组标题相同的将合并为复合表头booleanfalse
tableHeaderGroupTitle分组标题配置，预览时查看效果{[key: string]: string}[]{[key: string]: ""}[]
uniqueKey唯一标识 ， 组件的唯一标识string-
rowHandler行数据处理Function'function handleRow(ctx,row) { }'
hideWhenEmptyReadonly只读状态数据为空时隐藏booleanfalse
tip气泡提醒string-
loop循环， 循环渲染设置Loop-

Props-自定义操作项 ​

参数名描述类型默认值
title标题string-
disableConditions按条件禁用Function'function action(ctx, params) { return false;}'
status默认状态'default'|'disabled'|'hide''default'

Events ​

事件名描述参数
onChange子表单值发生变化ctx
params: {[key: string]: any}[]
beforeAddClick添加回调执行前ctx
params: {data：{[key: string]: any}[],newRow:{[key: string]: any} }
onAddClick点击添加ctx
params: {data：{[key: string]: any}[],newRow:{[key: string]: any} }
beforeCopyClick复制回调执行前ctx
params: {data：{[key: string]: any}[],newRow:{[key: string]: any} }
onCopyClick点击复制ctx
params: {data：{[key: string]: any}[],newRow:{[key: string]: any} }
beforeRemoveClick删除回调执行前ctx
params: {data：{[key: string]: any}[],row:{[key: string]: any} }
onRemoveClick点击删除ctx
params: {data：{[key: string]: any}[],row:{[key: string]: any} }
beforeImportData批量导入数据前执行ctx
params: {data：{[key: string]: any}[] }
onNodeValueChange各表单组件值发生变化ctx
params: onNodeValueChangeParams

Events - 自定义操作项 ​

事件名描述参数
onClick点击按钮ctx
params: {record:{[key: string]: any}, rowIndex:number}

注意

当表单组件被拖入子表单后，其表单组件中各触发事件的params参数对象，将额外增加nodes和rowData两个属性：

params:{
  ...params,
  nodes: {[key: string]: any}, // 当前操作行的组件节点
  rowData: { // 当前操作行数据
    $$$index: number,
    [key: string]: any,
  }
}

Type ​

javascript

// 各表单组件值发生变化参数
type onNodeValueChangeParams = {
  delegate:SubFormDelegate,
  eventParams：{value：any，rowData：{[key: string]: any}}[],
  isMount: boolean,
  nodes: {[key: string]: any},
  subformRow: {
    name: string,
    rowData: {[key: string]: any},
    rowIndex: number
  }
}

常见场景配置 ​

导入接口格式说明 ​

javascript
// 导入接口传参(默认)
{
  file: excel文件
  columnList: Array 子表单内的组件编码列表，例:["HiInput", "HiRadio", ...]
}

// 导入接口返回值格式示例
{
    "alert": "0",
    "code": "0",
    "data": {
        "filename": "库存余量模版 - 副本.xlsx",
        "data": [
            {
                "A": "[\"https://pangea.hisense.com/img/index/img-index-topic.png\",\"https://pangea.hisense.com/assets/images/readme-1-1f717aef0a4c2ab182ffb12721f087ad.png\"]",
                "B": "1",
                "C": "[\"https://pangea.hisense.com/img/index/img-index-topic.png\",\"https://pangea.hisense.com/assets/images/readme-1-1f717aef0a4c2ab182ffb12721f087ad.png\"]",
                "D": "2020-02-02",
                "E": "{\"ldapFullPath\":\"海信集团\\\\集团公司\\\\流程IT与数据管理部\\\\基础架构与云服务管理部\",\"loginName\":\"yangshuo4\",\"userName\":\"杨硕\"}",
                "F": "{\"orgCode\":\"HB19922045534\",\"orgName\":\"集团公司\"}"
            }
        ],
        "header": {
            "A": "图片上传",
            "B": "开关",
            "C": "附件上传",
            "D": "日期",
            "E": "成员",
            "F": "部门"
        },
        "sheet": "Sheet1"
    },
    "msg": "Successful operation",
    "ts": "1705544709573"
}
// excel填写格式
下拉选择/单选钮：选项值
下拉复选/复选框：选项1,选项2
开关：true/false
用户：账号，多个用逗号隔开，例如：gaohongmei2,duyi，填写多个时需要组件开启多选
部门：部门全路径，多个用逗号隔开，例如：集团公司/海信集团，填写多个时需要组件开启多选
图片/附件：先写以http或https开头的资源地址，多个用逗号隔开

注意：以上的逗号都为英文字符逗号。

表单项联动-根据输入框输入更新下拉选择选项 ​

表单项联动是指一个表单组件的值变化会触发另一个或多个表单组件的值或状态变化，在子表单中，常见的场景之一是根据一个下拉选择框的输入动态更新另一个下拉选择框的选项。

该场景可通过以下方式实现：

根据 onNodeValueChange 事件中的 params 参数可以修改对应行的组件属性

相关数据 ​

js
// 下拉选择框1的选项列表
options:[{
  key:"val1",
  value:"选项1"
},{
  key:"val2",
  value:"选项2"
}]

// 下拉选择框2 的选项列表 MAP
options2:{
  "val1":[{
    key:"val11",
    value:"选项11"
  },{
    key:"val12",
    value:"选项12"
  }],
  "val2":[{
    key:"val21",
    value:"选项21"
  },{
    key:"val22",
    value:"选项22"
  }]
}

事件配置 ​

js
/**
 * 子表单值发生变化
 * @param ctx 全局上下文
 * @param params: Params
 *
 */
function action(ctx, params) {
  // 判断如果是 下拉选择框1 触发的事件，根据组件值修改 下拉选择框2 的选项列表
  if (params.subformRow.name.value === "SELECT1") {
    //获取 下拉选择框1  变更 事件的值
    const eventData = params.eventParams[0].value;
    // 修改 下拉选择框2 的选项列表
    params.nodes.SELECT2.options.value = ctx.state.options2[eventData];
  }
}

表单项联动-根据下拉选择的数据展示不同组件 ​

以行为单位来控制部分组件的显隐是使用时比较常见的场景之一

该场景可通过以下方式实现：

根据 onNodeValueChange 事件中的 params 参数可以修改对应行的组件属性

事件配置 ​

js
/**
 * 子表单值发生变化
 * @param ctx 全局上下文
 * @param params: Params
 *
 */
function action(ctx, params) {
  // 如果下拉框值为选项1 隐藏输入框组件 否则展示
  // SELECT和INPUT 对应 组件的数据字段；status_INPUT 对应 当前行组件状态（命名规则为status_数据字段）
  const rowData = params.subformRow.rowData.value;
  if (rowData.SELECT === "选项1") {
    rowData.status_INPUT = "hide";
  } else if (rowData.SELECT !== "选项1") {
    rowData.status_INPUT = "default";
  }
}