oadp-material
Version:
oadp-material
937 lines (917 loc) • 32.6 kB
text/typescript
import { IPublicTypeComponentMetadata, IPublicTypeSnippet, IPublicTypeNodeData } from '@alilc/lowcode-types';
import { common } from '@alilc/lowcode-engine';
const OadpEntityFormMeta: IPublicTypeComponentMetadata = {
"componentName": "OadpEntityForm",
"title": "实体表单",
"category": "高级组件",
"group": "低代码组件",
"docUrl": "",
"screenshot": "https://img.alicdn.com/imgextra/i2/O1CN016gn5DQ1FeXUNKdK22_!!6000000000512-55-tps-50-36.svg",
"devMode": "proCode",
"npm": {
"package": "oadp-material",
"version": "{{version}}",
"exportName": "OadpEntityForm",
"main": "src/index.tsx",
"destructuring": true,
"subName": ""
},
"configure": {
"props": [
{
"name": "DataSetting",
"title": "数据设置",
"type": "group",
"display": "block",
"items": [
{
"name": "value",
"title": {
"label": {
"type": "i18n",
"en-US": "value",
"zh-CN": "表单数值"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: value | 说明:设置表单数值。",
"en_US": "prop: value | description: Set Form Value.",
},
},
"description": "表单数值",
"setter": {
"componentName": "MixedSetter",
"props": {
"setters": ["JsonSetter", "ExpressionSetter"],
},
},
"supportVariable": true,
},
{
"name": "field",
"title": {
"label": {
"type": "i18n",
"en-US": "Field Instacne",
"zh-CN": "Field实例"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: field | 说明:Field实例。传 false 会禁用 field",
"en_US": "prop: field | description: Field Instacne.",
},
"docUrl": "https://fusion.alibaba-inc.com/pc/component/basic/form#%E5%A4%8D%E6%9D%82%E5%8A%9F%E8%83%BD(Field)"
},
"description": "数据源",
"setter": "ExpressionSetter",
"supportVariable": true,
},
]
},
{
"name": "DisplaySetting",
"title": "显示设置",
"type": "group",
"display": "block",
"items": [
{
"name": "size",
"title": {
"label": {
"type": "i18n",
"en-US": "Size",
"zh-CN": "尺寸模式"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: size | 说明: 尺寸模式，可选值:small=紧凑模式, medium=普通模式, large=放大模式。默认为:medium。",
"en_US": "prop: size | description: Size mode, optional values: small=compact mode, medium=normal mode, large=large mode. The default is: medium.",
},
},
"description": "属性: size | 说明: 尺寸模式，可选值:small=紧凑模式, medium=普通模式, large=放大模式。默认为:medium。",
"setter": {
"componentName": "RadioGroupSetter",
"props": {
"dataSource": [
{
"label": "普通模式",
"value": "medium"
},
{
"label": "紧凑模式",
"value": "small"
},
{
"label": "放大模式",
"value": "large"
}
],
"options": [
{
"label": "普通模式",
"value": "medium"
},
{
"label": "紧凑模式",
"value": "small"
},
{
"label": "放大模式",
"value": "large"
}
]
},
"initialValue": "medium"
}
},
{
"name": "labelAlign",
"title": {
"label": {
"type": "i18n",
"en-US": "labelAlign",
"zh-CN": "标签位置"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: labelAlign | 说明: 标签位置 | 可选值:top=顶部, left=居左, inset=内部。| 默认值: top",
"en_US": "prop: labelAlign | description: labelAlign | options: top=top, left=left, inset=left | default: top",
},
},
"description": "标签位置",
"setter": {
"componentName": "RadioGroupSetter",
"props": {
"dataSource": [
{
"label": "顶部",
"value": "top"
},
{
"label": "居左",
"value": "left"
},
{
"label": "内部",
"value": "inset"
}
],
"options": [
{
"label": "顶部",
"value": "top"
},
{
"label": "居左",
"value": "left"
},
{
"label": "内部",
"value": "inset"
}
]
},
"initialValue": "top"
}
},
{
"name": "labelTextAlign",
"title": {
"label": {
"type": "i18n",
"en-US": "labelTextAlign",
"zh-CN": "标签对齐"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: labelTextAlign | 说明: 标签对齐 | 可选值: left=居左对齐, right=居右对齐。| 默认值: left",
"en_US": "prop: labelTextAlign | description: labelTextAlign | options: left=left, right=right | default: top",
},
},
"description": "标签对齐",
"setter": {
"componentName": "RadioGroupSetter",
"props": {
"dataSource": [
{
"label": "居左对齐",
"value": "left"
},
{
"label": "居右对齐",
"value": "right"
}
],
"options": [
{
"label": "居左对齐",
"value": "left"
},
{
"label": "居右对齐",
"value": "right"
}
]
},
"initialValue": "left"
}
},
{
"name": "inline",
"title": {
"label": {
"type": "i18n",
"en-US": "inline",
"zh-CN": "内联表单"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: inline | 说明: 内联表单 | 类型: boolean | 默认值: true",
"en_US": "prop: inline | description: inline | type: boolean | default: true",
},
},
"description": "内联表单",
"setter": {
"componentName": "BoolSetter",
"isRequired": false,
"initialValue": true
}
},
{
"name": "fullWidth",
"title": {
"label": {
"type": "i18n",
"en-US": "fullWidth",
"zh-CN": "表单项宽度占满"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: fullWidth | 说明: 表单项宽度占满，单个 Item 中表单类组件宽度是否是100% | 类型: boolean | 默认值: false",
"en_US": "prop: fullWidth | description: fullWidth | type: boolean | default: false",
},
},
"description": "表单项宽度占满，单个 Item 中表单类组件宽度是否是100%",
"setter": {
"componentName": "BoolSetter",
"isRequired": false,
"initialValue": false
}
},
{
"name": "responsive",
"title": {
"label": {
"type": "i18n",
"en-US": "responsive",
"zh-CN": "响应式布局"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: responsive | 说明: 开启响应式布局 | 类型: boolean | 默认值: false",
"en_US": "prop: responsive | description: responsive | type: boolean | default: false",
},
},
"description": "响应式布局",
"setter": {
"componentName": "BoolSetter",
"isRequired": false,
"initialValue": false
}
},
{
"name": "isPreview",
"title": {
"label": {
"type": "i18n",
"en-US": "isPreview",
"zh-CN": "开启预览态"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: isPreview | 说明: 开启预览态 | 类型: boolean | 默认值: false",
"en_US": "prop: isPreview | description: isPreview | type: boolean | default: false",
},
},
"description": "响应式布局",
"setter": {
"componentName": "BoolSetter",
"isRequired": false,
"initialValue": false
}
},
{
"name": "useLabelForErrorMessage",
"title": {
"label": {
"type": "i18n",
"en-US": "useLabelForErrorMessage",
"zh-CN": "校验信息"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: useLabelForErrorMessage | 说明: 启用label替换校验信息name字段 | 类型: boolean | 默认值: false",
"en_US": "prop: useLabelForErrorMessage | description: use Label For Error Message | type: boolean | default: false",
},
},
"description": "启用label替换校验信息name字段",
"setter": {
"componentName": "BoolSetter",
"isRequired": false,
"initialValue": false
}
},
{
"name": "preferMarginToDisplayHelp",
"title": {
"label": {
"type": "i18n",
"en-US": "preferMarginToDisplayHelp",
"zh-CN": "帮助信息"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: preferMarginToDisplayHelp | 说明: 启用item的margin空间来展示help | 类型: boolean | 默认值: false",
"en_US": "prop: preferMarginToDisplayHelp | description: prefer Margin To Display Help | type: boolean | default: false",
},
},
"description": "启用item的margin空间来展示help",
"setter": {
"componentName": "BoolSetter",
"isRequired": false,
"initialValue": false
}
},
{
"name": "colon",
"title": {
"label": {
"type": "i18n",
"en-US": "colon",
"zh-CN": "标签冒号"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: colon | 说明: 显示标签冒号 | 类型: boolean | 默认值: false",
"en_US": "prop: colon | description: Show Label Colon | type: boolean | default: false",
},
},
"description": "标签冒号",
"setter": {
"componentName": "BoolSetter",
"isRequired": false,
"initialValue": false
}
},
{
"name": "disabled",
"title": {
"label": {
"type": "i18n",
"en-US": "disabled",
"zh-CN": "禁用表单"
},
"tip": {
"type": "i18n",
"zh_CN": "属性: disabled | 说明: 禁用表单 | 类型: boolean | 默认值: false",
"en_US": "prop: disabled | description: disabled | type: boolean | default: false",
},
},
"description": "禁用表单",
"setter": {
"componentName": "BoolSetter",
"isRequired": false,
"initialValue": false
}
},
],
},
],
"supports": {
"style": true
},
"component": {
"isContainer": true
},
"advanced": {
"callbacks": {
"onNodeAdd": (dragment, currentNode) => {
console.log('onNodeAdd', dragment, currentNode);
// 检查 currentNode 是否为 null
if (!currentNode) {
console.error('currentNode is null');
return;
}
// 检查 currentNode.document 是否为 null
if (!currentNode.document) {
console.error('currentNode.document is null');
return;
}
const comps = [
'OadpAttribute',
'OadpInput',
'OadpNumberPicker',
'OadpDatePicker2',
'OadpSelect',
'OadpRadio',
'OadpRadioGroup',
'OadpSwitch',
'OadpUpload',
'Input',
'Select',
'Radio',
'Checkbox',
'Switch',
'Upload',
'Datepicker',
'Rate',
'Transfer',
];
if (
!dragment ||
!dragment.componentMeta ||
!dragment.componentMeta.npm ||
!dragment.componentMeta.npm.package ||
// dragment.componentMeta.npm.package.indexOf('@alilc/antd-lowcode-materials') === -1 ||
comps.every((comp) => dragment.componentName.indexOf(comp) === -1)
) {
return;
}
const dragmentSchema = dragment?.exportSchema(common.designerCabin.TransformStage.Save);
console.log('dragmentSchema', dragmentSchema);
const name = dragmentSchema?.props?.name ?? "默认名称";
const code = dragmentSchema?.props?.code ?? "默认编码";
const logicalName = dragmentSchema?.props?.logicalName ?? "默认逻辑名称";
const physicalName = dragmentSchema?.props?.physicalName ?? "默认物理名称";
const attributeType = dragmentSchema?.props?.attributeType ?? "STRING";
const entity = dragmentSchema?.props?.entity;
const attribute = dragmentSchema?.props?.attribute;
const defaultValue = dragmentSchema?.props?.defaultValue;
const description = dragmentSchema?.props?.description ?? "默认描述";
const required = dragmentSchema?.props?.required ?? false;
const disabled = dragmentSchema?.props?.disabled ?? false;
let OadpEntityFormItemChildSchema: IPublicTypeNodeData = {
componentName: dragmentSchema?.componentName || 'OadpInput', // 使用默认值或从拖拽项中获取
props: {
...dragmentSchema?.props, // 复制拖拽项的属性
style: {
width: '256px'
}
}
};
switch (attributeType) {
case 'TEXT':
OadpEntityFormItemChildSchema = {
"componentName": "OadpInput",
"props": {
"name": logicalName,
"placeholder": `请输入${name}`,
"style": {
"width": "256px"
},
"required": required,
"size": "medium"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
};
break;
case 'MULTI_TEXT':
OadpEntityFormItemChildSchema = {
"componentName": "OadpInput",
"props": {
"name": logicalName,
"placeholder": `请输入${name}`,
"style": {
"width": "256px"
},
"required": required,
"size": "medium"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
};
break;
case 'NUMBER':
OadpEntityFormItemChildSchema = {
"componentName": "OadpNumberPicker",
"props": {
"name": logicalName,
"defaultValue": defaultValue,
"disabled": disabled,
"size": "medium",
"hasClear": true,
"style": {
"width": "256px"
},
"hasTrigger": true,
"step": "1",
"precision": 2,
"max": "10",
"min": "1",
"type": "normal",
"editable": true
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'DECIMAL':
OadpEntityFormItemChildSchema = {
"componentName": "OadpNumberPicker",
"props": {
"name": logicalName,
"defaultValue": defaultValue,
"disabled": disabled,
"size": "medium",
"hasClear": true,
"style": {
"width": "256px"
},
"hasTrigger": true,
"step": "1",
"precision": 2,
"max": "10",
"min": "1",
"type": "normal",
"editable": true
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'BOOLEAN':
OadpEntityFormItemChildSchema = {
"componentName": "OadpSwitch",
"props": {
"name": logicalName,
"defaultValue": defaultValue,
"disabled": disabled,
"size": "medium"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'DATETIME':
OadpEntityFormItemChildSchema = {
"componentName": "OadpDatePicker2",
"props": {
"name": logicalName,
"defaultValue": defaultValue,
"disabled": disabled,
"placeholder": "请选择日期时间",
"size": "medium",
"style": {
"width": 256
},
"hasClear": true,
"hasBorder": true,
"mode": "quarter",
"showTime": true
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'ENUM':
OadpEntityFormItemChildSchema = {
"componentName": "OadpRadioGroup",
"props": {
"name": logicalName,
"defaultValue": defaultValue,
"disabled": disabled,
"dataSource": [
{
"label": "选项一",
"value": "1"
},
{
"label": "选项二",
"value": "2"
}
],
"size": "medium",
"shape": "normal",
"direction": "hoz"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'NULTI_ENUM':
OadpEntityFormItemChildSchema = {
"componentName": "OadpCheckboxGroup",
"props": {
"name": logicalName,
"disabled": disabled,
"defaultValue": defaultValue,
"dataSource": [
{
"label": "选项一",
"value": "1"
},
{
"label": "选项二",
"value": "2"
},
{
"label": "选项三",
"value": "3"
}
],
"size": "medium",
"shape": "normal",
"direction": "hoz"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'REFER':
OadpEntityFormItemChildSchema = {
"componentName": "OadpSelect",
"props": {
"name": logicalName,
"placeholder": "请选择内容",
"defaultValue": defaultValue,
"required": required,
"disabled": disabled,
"size": "medium",
"style": {
"width": 256
},
"hasArrow": true,
"hasClear": true,
"hasBorder": true,
"entity": entity,
"attribute": attribute,
"mode": "single"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'NULTI_REFER':
OadpEntityFormItemChildSchema = {
"componentName": "OadpSelect",
"props": {
"name": logicalName,
"placeholder": "请选择内容",
"defaultValue": defaultValue,
"required": required,
"disabled": disabled,
"size": "medium",
"style": {
"width": 256
},
"hasArrow": true,
"hasClear": true,
"hasBorder": true,
"dataSource": [
{
"value": "item1",
"label": "选项一"
},
{
"value": "item2",
"label": "选项二"
},
{
"value": "item3",
"label": "选项三"
}
],
"mode": "multiple"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'IMAGE':
OadpEntityFormItemChildSchema = {
"componentName": "OadpUpload",
"props": {
"name": logicalName,
"defaultValue": defaultValue,
"required": required,
"disabled": disabled,
"method": "post",
"reUpload": true,
"multiple": true,
"limit": 60,
"timeout": 60,
"shape": "card",
"listType": "text",
"dragable": true,
"useDataURL": true,
"style": {
"width": 256
}
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
case 'FILE':
OadpEntityFormItemChildSchema = {
"componentName": "OadpUpload",
"props": {
"name": logicalName,
"defaultValue": defaultValue,
"required": required,
"disabled": disabled,
"method": "post",
"reUpload": true,
"multiple": true,
"limit": 60,
"timeout": 60,
"shape": "card",
"listType": "text",
"dragable": true,
"useDataURL": true,
"style": {
"width": 256
}
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
break;
default:
OadpEntityFormItemChildSchema = {
"componentName": "OadpInput",
"props": {
"name": logicalName,
"placeholder": `请输入${name}`,
"style": {
"width": "256px"
},
"required": required,
"size": "medium"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
};
break;
}
const OadpEntityFormItemSchema = {
"componentName": "OadpEntityFormItem",
"props": {
"label": name,
"required": required,
"style": {
"width": "256px"
}
},
"children": [OadpEntityFormItemChildSchema]
};
// 为目标元素包裹一层P
const layoutPNode = currentNode.document.createNode(OadpEntityFormItemSchema);
// 检查 layoutPNode 是否为 null
if (!layoutPNode) {
console.error('layoutPNode is null');
return;
}
// 当前dragment还未添加入node子节点,需要setTimeout处理
setTimeout(() => {
currentNode.replaceChild(
dragment,
layoutPNode.exportSchema(common.designerCabin.TransformStage.Save)
);
}, 1);
},
},
},
}
};
const snippets: IPublicTypeSnippet[] = [
{
"title": "实体表单",
"screenshot": "https://img.alicdn.com/imgextra/i2/O1CN016gn5DQ1FeXUNKdK22_!!6000000000512-55-tps-50-36.svg",
"schema": {
"componentName": "OadpEntityForm",
"props": {
"size": "medium",
"labelAlign": "top",
"labelTextAlign": "left",
"inline": true,
"fullWidth": false,
// "responsive": true,
// "isPreview": false,
// "useLabelForErrorMessage": true,
// "preferMarginToDisplayHelp": false,
// "colon": false,
// "disabled": false
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "OadpEntityFormItem",
"props": {
"label": "名称",
"required": false
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "OadpInput",
"props": {
"name": "name",
"placeholder": "请输入名称",
"style": {
"width": "256px"
},
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
},
{
"componentName": "OadpEntityFormItem",
"props": {
"label": "编码",
"required": false
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "OadpInput",
"props": {
"name": "code",
"placeholder": "请输入编码",
"style": {
"width": "256px"
},
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
},
]
}
}
];
export default {
...OadpEntityFormMeta,
snippets
};