0.13.0 • Published 4 years ago
@g3-cscec/page-meta-engine v0.13.0
G3Parse
用例
/**
* @param {string} uiMeta 页面描述文件
* @param {object} customEvents 定义逻辑函数
* @param {object} components 注入解析器的组件实例
* */
<div style={{ margin: '40px', width: '250px' }}>
<G3Parser uiMeta={uiMeta} customEvents={uiEventObject} components={{ ...platformComponents }} />
</div>测试使用ui-meta
[
// {
// name: `Select_${uuidShort()}`,
// type: 'Select',
// props: {
// name: 'componentType',
// label: '组件类型',
// value: 'Input',
// valueEnum: [
// {
// label: '文本输入框',
// value: 'Input'
// },
// {
// label: '数值输入框',
// value: 'Number'
// },
// {
// label: '多行文本输入框',
// value: 'Textarea'
// },
// {
// label: '单选 radio',
// value: 'Radio'
// },
// {
// label: '多选 checkbox',
// value: 'Checkbox'
// },
// {
// label: '下拉 checkbox',
// value: 'Select'
// }
// ]
// },
// events: {}
// },
{
name: `Button_${uuidShort()}`,
type: 'G3Button',
props: {
type: 'primary'
},
children: ['提交'],
events: {
onClick: 'formSave(Form_96adad4233)'
}
},
{
name: `Button_${uuidShort()}`,
type: 'G3Button',
props: {
type: 'default'
},
children: ['重置'],
events: {
onClick: 'formReset(Form_96adad4233)'
}
},
{
name: 'Button_uAGTM2qvuk',
type: 'G3Button',
props: {
type: 'primary'
},
children: ['动态设置值-lowcode测试'],
events: {}
},
{
name: 'Form_96adad4233',
type: 'G3Form',
props: {
size: 'small',
fieldList: [
{
id: uuidShort(), // 表单控件的唯一标识
label: '组件类型', // 表单项中的「label」展示
name: 'componentType-2', // 表单绑定的 dataKey
fieldType: 'enum',
settings: {
options: [
{
label: '文本输入框',
value: 'INPUT_WIDGET'
},
{
label: '数值输入框',
value: 'NUMBER_WIDGET'
},
{
label: '多行文本输入框',
value: 'TEXTEARA_WIDGET'
},
{
label: '单选 radio',
value: 'RADIO_'
},
{
label: '多选 checkbox',
value: 'CHECKBOX_'
},
{
label: '下拉 checkbox',
value: 'SELECT_'
}
]
},
properties: {
hidden: false,
readonly: false,
required: true
}
},
{
id: uuidShort(),
label: '输入框1',
name: 'testInput1-2',
fieldType: 'text',
settings: {
multiline: false // 展示为单行文本
}
},
{
id: uuidShort(),
label: '输入框2',
name: 'isApprove-2',
fieldType: 'enum',
settings: {
display: 'checkbox',
options: [
{
label: '静态数据',
value: 'pass'
},
{
label: '动态下拉',
value: 'refuse'
},
{
label: '组件disabled',
value: 'disabled'
}
]
}
},
{
id: uuidShort(),
label: '联动输入框',
name: 'testInput2-2',
fieldType: 'text',
settings: {
multiline: true // 展示为textarea
},
dependency: {
hidden: '{{formData.isApprove === "pass"}}',
disabled: '{{formData.isApprove === "disabled"}}'
}
},
// {
// id: uuidShort(),
// label: '组合类型字段',
// name: 'dynamicDataSource-2',
// fieldType: 'compositeType',
// settings: {
// subFields: [
// {
// id: uuidShort(),
// type: 'text',
// name: 'sub-field-1-2',
// label: '子字段1'
// },
// {
// id: uuidShort(),
// type: 'text',
// name: 'sub-field-2-2',
// label: '子字段2'
// }
// ]
// }
// },
{
id: uuidShort(),
name: 'testInput8-2',
label: '输入框2',
fieldType: 'text'
}
]
},
children: [
// {
// name: `Select_${uuidShort()}`,
// type: 'Select',
// props: {
// name: 'componentType',
// label: '组件类型-form',
// value: 'Input',
// valueEnum: [
// {
// label: '文本输入框',
// value: 'Input'
// },
// {
// label: '数值输入框',
// value: 'Number'
// },
// {
// label: '多行文本输入框',
// value: 'Textarea'
// },
// {
// label: '单选 radio',
// value: 'Radio'
// },
// {
// label: '多选 checkbox',
// value: 'Checkbox'
// },
// {
// label: '下拉 checkbox',
// value: 'Select'
// }
// ]
// },
// events: {}
// },
// {
// name: 'Text_pVoHKRTOaA',
// type: 'Text',
// props: {
// name: 'testInput1',
// value: '123',
// label: '输入框1-form'
// }
// },
// {
// name: `Radio_${uuidShort()}`,
// type: 'Radio',
// props: {
// radioType: 'button',
// name: 'isApprove',
// value: 'pass',
// label: '数据源类型',
// valueEnum: [
// {
// label: '静态数据',
// value: 'pass'
// },
// {
// label: '动态下拉',
// value: 'refuse'
// },
// {
// label: '组件disabled',
// value: 'disabled'
// }
// ]
// }
// },
// {
// name: `Text_${uuidShort()}`,
// type: 'Text',
// props: {
// name: 'testInput2',
// value: '123',
// label: '联动输入框',
// hidden: false,
// dependency: {
// hidden: '{{formData.isApprove === "pass"}}',
// disabled: '{{formData.isApprove === "disabled"}}'
// }
// }
// }
// {
// name: `dynamicDataSource_${uuidShort()}`,
// type: 'Formlist',
// value: '',
// label: '组合类型字段',
// children: [
// {
// name: `sub-field-1_${uuidShort()}`,
// label: '子字段1',
// type: 'Text'
// },
// {
// name: `sub-field-2_${uuidShort()}`,
// label: '子字段2',
// type: 'Text'
// }
// ]
// }
// {
// name: 'Table_12222332',
// type: 'Table',
// props: {
// actions:[]
// columns: []
// },
// event: {
// }
// }
]
},
{
name: 'Table_ttaabbllee',
type: 'G3Table',
props: {
style: {
width: 700,
margin: 50
},
size: 'small',
bordered: true,
rowKey: 'key',
columns: [
{
title: 'name',
titleTip: '?',
dataIndex: 'name',
align: 'left', // 列对齐方式
fixed: 'left', // 固定列
required: true, // 必输项
visible: true, // 是否显示
editable: true
},
{
title: 'age',
dataIndex: 'age',
align: 'center',
headAlign: 'left',
resizable: false,
editable: true,
enableTotal: true,
fieldType: 'number'
},
{
title: 'address',
dataIndex: 'address',
// rowBreak: true,
enableTotal: true,
editable: true
},
{
title: 'address2',
dataIndex: 'address2',
editable: true
},
{
title: 'address3',
dataIndex: 'address3',
editable: true
},
{
title: 'address4',
dataIndex: 'address4',
editable: true
},
{
title: 'address5',
dataIndex: 'address5',
editable: true
},
{
title: 'address6',
dataIndex: 'address6',
editable: true
},
{
title: 'operation',
dataIndex: 'operation',
fixed: 'right',
titleTip: '111',
width: 0,
editable: false,
render: () => '测试'
}
],
dataSource: [
{
key: '0',
rowKey: '123',
name: 'Edward King 0',
age: 32,
address: 'London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0',
a: 1,
b: 2,
c: 3
},
{
key: '1',
name: 'Edward King 1',
age: 32,
address: 'London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '2',
name: 'Edward King 2',
age: 32,
address: 'London, Park Lane no. 0London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '3',
name: 'Edward King 3',
age: 32,
address: 'London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '4',
name: 'Edward King 4',
age: 32,
address: 'London, Park Lane no. 0London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '5',
name: 'Edward King 5',
age: 32,
address: 'London, Park Lane no. 0London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '6',
name: 'Edward King 6',
age: 32,
address: 'London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '7',
name: 'Edward King 7',
age: 32,
address: 'London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '8',
name: 'Edward King 8',
age: 32,
address: 'London, Park Lane no. 0London, Park Lane no. 0London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '9',
name: 'Edward King 9',
age: 32,
address: 'London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
},
{
key: '10',
name: 'Edward King 10',
age: 32,
address: 'London, Park Lane no. 0',
address2: 'London, Park Lane no. 0',
address3: 'London, Park Lane no. 0',
address4: 'London, Park Lane no. 0',
address5: 'London, Park Lane no. 0',
address6: 'London, Park Lane no. 0'
}
],
rowActions: [
{
text: '按钮1',
disabled: `function(record){return record.key !== '0'}`,
visible: `function(record){return record.key === '0'}`,
onClick: `function(record){console.log(record)}`
},
{
danger: true,
text: '按钮2',
disabled: `function(record){return record.key === '0'}`,
visible: true,
onClick: `function(record){console.log(record.key)}`
},
{
danger: true,
text: '按钮3',
disabled: `function(record){return record.key === '0'}`,
visible: true,
onClick: `function(record){console.log(record.key)}`
},
{
danger: true,
text: '按钮4',
disabled: `function(record){return record.key === '0'}`,
visible: true,
onClick: `function(record){console.log(record.key)}`
},
{
danger: true,
text: '按钮5',
disabled: `function(record){return record.key === '0'}`,
visible: true,
onClick: `function(record){console.log(record.key)}`
}
]
}
}
]