按钮位置
一般按钮存在位置在组件特殊位置比如:
- Card容器行头上:
- Tab容器行头上:
- 明细表操作栏以及行上:
- 按钮区域:
各种组件可以在左侧表单元素找到:
按钮外观
按钮支持三种外观改变,在右侧属性配置-外观可以调整,展示类型类型有:
- 按钮:
- 图标:
-** 文字图标**:
同时按钮支持分组,即相同组会合成一个按钮,通过选下选择其他按钮:
按钮事件
同一按钮执行顺序为前置事件 -> 事件中 -> 后置事件。每一环节事件执行完如果有返回结果,会把结果带入到下一个事件,方便处理。
每种事件的执行方式通过按钮类型决定:
- 本地:需要开发提前注入事件到工程里(后面讲如何注入事件),通过触发事件调用,有内置事件如保存,删除,工作流事件。如果不满足,可以通过自定义方式注入,在触发事件选择自定义,事件名写上工程里注入的名称。
- 接口:配置Faas请求
- 其中请求路径固定是
http://[路由编码]/[相对地址]
加真正地址如http://scmb_api/dc-server/admin/arrange/request/retry
- 请求路径,请求头部,请求参数支持动态获取表单上内容:比如需要拿到表单的
单行文本
可以写${data.BASE_FCED943130D62}
,,具体可以拿的内容有:
- 其中请求路径固定是
字段名称 | 内容 | 例子 |
---|---|---|
data | 表单数据 | 比如文本的code为BASE_FCED943130D62 ,可以写${data.BASE_FCED943130D62} |
extraData | 额外的数据,比如明细表操作栏有selectedRows 和selects ,明细表行操作有record , tab操作栏是当前tab的配置 |
获取某一行ID可以写${extraData.selectedRows[0].ID} 、${extraData.selects[0]} , ${extraData.record.ID} |
preData | 上次执行的结果,一般是事件和后置事件才有,前置事件没有 | 比如前置事件处理后的结果是{success: true, data: { a: 123 }} ,这里可以写${preData.data.a} |
session | 缓存中可以拿用户user 和组织org |
一般用户有account 、email 、id 、name 、telephone ,比如拿账号:${session.user.account} |
url | 获取当前地址search的参数 | 比如当前地址为xxx?a=123,这里获取a数据:${url.a} |
- 代码
指在线写代码,写的内容会直接运行,全局已经定义了configs
的变量,所有的数据通过configs获取。一下是configs字段解释
变量 | 说明 | 例子 |
---|---|---|
btnConfig | 按钮配置 | configs.btnConfig |
context | 表单上下文 | configs.context |
data | 表单数据 | configs.data |
relation | 联动,可以增加、触发联动 | configs.relation |
utils | 工具类,可以弹窗,加载组件等 | configs.utils |
通用参数解释
变量 | 说明 |
---|---|
formCode | 组件的formCode , |
attrCode | 组件的code, |
context字段解释
变量 | 说明 | 例子 |
---|---|---|
addListener | 添加监听方法,主要是事件执行前触发,事件执行后触发以及值改变时触发 ,参数有:{ code: 唯一值即可; type: ‘valueChange’ | ‘beforeEvent’ | ‘afterEvent’; handler: 回调方法 } | configs.context.addListener({ code: ‘test’, type: ‘valueChange’,handler: ({ configs, extra, value }) => {} }) |
config | 整体表单配置 | configs.context.config |
dictionary | 表单数据字典,不包含明细表 | configs.context.dictionary |
form | 可用于获取值,设置置以及校验,具体参考antd form | configs.context.form.getFieldValue() |
getBtnConfig | 获取按钮配置,入参有:{ formCode: 按钮所在容器的formCode,attrCode:按钮所在容器的attrCode,btnCode:按钮的code } | configs.context.getBtnConfig({ formCode: ‘parentCode’, attrCode: ‘attrCode’, btnCode: ‘save’ }) |
getCompParams | 获取由上下文传给组件的配置,入参 { formCode,attrCode } | configs.context.getCompParams({ formCode: ‘parentCode’, attrCode: ‘attrCode’}) |
getCompRef | 获取组件对应api,入参 { formCode,attrCode },比如获取明细表的数据字典 | configs.context.getCompRef({ formCode: ‘parentCode’, attrCode: ‘attrCode’}).getDictionary() |
getConfig | 获取组件配置,入参 { formCode,attrCode } | configs.context.getConfig({ formCode: ‘parentCode’, attrCode: ‘attrCode’}) |
getDictionary | 获取数据字典 | configs.context.getDictionary() |
getFormData | 获取表单数据 | configs.context.getFormData() |
getFormId | 获取表单id,如果创建则返回空 | configs.context.getFormId() |
refresh | 刷新数据 | configs.context.refresh() |
refreshBtnConfigs | 刷新按钮配置,入参 { formCode,attrCode } | configs.context.refresh({ formCode: ‘parentCode’, attrCode: ‘attrCode’}) |
refreshConfigs | 刷新配置, 入参: isDeep: 是否深度刷新,true的话比较整个配置会重新刷新 | configs.context.refreshConfigs(true) |
reset | 编辑状态刷新为创建 | configs.context.reset() |
setBaseConfig | 设置组件的基础配置,比如是否展示,是否编辑等,设置后需要调用refreshConfigs | configs.context.setBaseConfig({formCode:’’,attrCode:’’, attr: ‘改变属性的key’, value: ‘改变属性的value’, extra: ‘如果是明细的话,对单行操作则需要填对应信息{ id:’’ }’}) |
setCompParams | 设置需要传给组件的参数,入参:{ ‘对应组件的code’:{} } | configs.context.setCompParams({ test: { onSearch: () => false } }) |
setFormData | 设置表单内容,该方法改变值后不会触发联动,需要触发联动则需用getCompRef获取组件api,然后调用onChange,如:configs.context.getCompRef({formCode:’’,attrCode:’’}).onChange(1) | configs.context.setFormData({a:12,b:21}) |
setRuleConfig | 设置组件校验规则,比如必填等 | configs.context.setRuleConfig({formCode:’’,attrCode:’’, attr: ‘改变属性的key’, value: ‘改变属性的value’, extra: ‘如果是明细的话,对单行操作则需要填对应信息{ id:’’ }’}) |
unlisten | 注销监听,入参: { code: 监听的值; type: ‘valueChange’ | ‘beforeEvent’ | ‘afterEvent’; } | configs.context.unlisten({ code:’’, type: ‘valueChange’}) |
data字段解释
变量 | 说明 | 例子 |
---|---|---|
allData | 表单上所有数据 | configs.data.allData |
currentData | 当前容器数据,比如执行在card上,就只拿到card里面的内容 | configs.data.currentData |
preData | 同一事件里,上一环节执行事件结果,比如事件中会拿到前置事件的结果,后置事件会拿到事件中的结果 | configs.data.preData |
extraData | 额外的数据,如果是明细表的操作按钮,可以获取到选中结果,如果是明细表的行按钮,可以获取到行数据,具体可以打印 | configs.data.extraData |
relation字段解释
变量 | 说明 | 例子 |
---|---|---|
on | 注册联动,入参有{attrCode,formCode,actionCode: 执行类型,类型有:blur(失焦执行)、focus(聚焦执行)、change(值改变执行)、search(搜索时执行)、create(打开创建时执行)、edit(打开编辑时执行)、destroyOnCreate(创建表单结束离开时执行)、destroyOnEdit(编辑表单结束离开时执行},{id:场景下唯一值, cb: 联动回调} | configs.relation.on({attrCode:’’,formCode:’’,actionCode:’change’},{id: ‘唯一值,避免重复’, cb: (ctx) => {}}) |
emit | 执行联动,入参有:{attrCode,formCode,actionCode: 与on的actionCode相同},{attrCode: ‘可选’,formCode:’可选’,index:’明细表需要的序号’,id:’明细表需要的id’} | configs.relation.on({attrCode:’’,formCode:’’,actionCode:’change’}) |
utils字段解释
变量 | 说明 | 例子 |
---|---|---|
confirm | 参考antd confirm用法 | configs.utils.confirm({ title: ‘title’, content: ‘content’, onOk: () => {} }) |
notification | 参考antd notification用法 | configs.utils.notification.warning({ message: ‘warning’, description: ‘warning’ }) |
message | 参考antd message用法 | configs.utils.message.warning(‘message’) |
useCompModal | 入参:Content:组件, modalConfigs:modal配置,参考antd Modal,contentConfig:组件配置 | configs.utils.useCompModal(Component, { title: ‘弹窗标题’}, {a: ‘组件入参1’, b: ‘组件入参2’}) |
loadCmp | 拉取资源组件,入参:{sourceName: 资源名称,exposesKey:导出的资源} | configs.utils.loadCmp({ sourceName:’lcp-page-component’, exposesKey: ‘charts’ }) |
fetch | 调用接口,入参参考axios | configs.utils.fetch({ url:’/apis/test’,method: ‘get’ ,params: {a:123}}) |
cache | 缓存,可以获取以及存缓存,api有:setValue,getValue,clear | configs.utils.cache.setValue(‘key’, 123),configs.utils.cache.getValue(‘key’),configs.utils.cache.clear(‘key’) |
作者:黄允桢 创建时间:2023-05-21 10:56
最后编辑:王浩彬 更新时间:2024-12-11 10:09
最后编辑:王浩彬 更新时间:2024-12-11 10:09