属性栏配置的价值在于简化属性的外在表现,隐藏输入组件的实现逻辑。
类型定义
/** * 属性面板的配置,包含多个属性的配置以及 * 一些整体的配置 */ export interface PanelConfig { //分组信息 groups?: GroupInfo[]; //必填属性code列表 required: string[]; //隐藏标题的属性code列表。注意:不设置属性title也可以达到此效果 hiddenTitle?: string[]; //属性信息 properties: PropertySchema[]; //事件订阅,各种回调函数 subscriptions: PropertySubscription; }
代码演示
import { PanelConfig } from 'cloudpivot-designer/property-panel'; import { DataItemType } from 'cloudpivot-form/form/schema'; import { verifyVariableInRule } from '../property-component-modal/scripts/verify-variable-in-rule'; const panelRuleProperty: PanelConfig = { groups: [ { value: 'base', label: '基础属性', keys: ['modelName', 'code', 'name', 'remarks', 'ruleVariable'], }, ], required: ['code', 'name'], properties: [ { title: '触发模型', code: 'modelName', inputComponentName: 'property-text-input', options: { disabled: true, }, }, { title: '规则编码', code: 'code', inputComponentName: 'property-text-input', getRequiredErrorMessage: () => { return '业务规则编码不能为空!'; }, options: { disabled: (businessContext: any, propertiesData: any) => { //节点使用edit辨别是否保存过,规则使用id return !!propertiesData.id; }, }, }, { title: '规则名称', code: 'name', inputComponentName: 'property-text-input', getRequiredErrorMessage: () => { return '业务规则名称不能为空!'; }, options: { maxLength: 50, }, }, { title: '规则描述', code: 'remarks', inputComponentName: 'property-text-area', options: { maxLength: 100, }, }, { title: '规则变量', code: 'ruleVariable', inputComponentName: 'property-modal', showDeleteConfirm: (variableList) => { return verifyVariableInRule([], false).then((verifyResult) => { return !verifyResult; }); }, confirmText: '规则变量已在规则中使用,请谨慎删除', options: { modalName: 'rule-variable-modal', tips: '如同表单字段,可以存放某个动作节点运行结果,可用于后续的判断、赋值。业务规则运行结束后,变量值会被清空重置', defaultValue: [], }, }, ], subscriptions: { onPropertyChange( code, value, oldValue, propertiesData, propertyControllerMap, businessContext, ) { if (code === 'ruleVariable') { verifyVariableInRule(value); } }, }, }; export default panelRuleProperty;
-
有用(6)
-
没有用(0)