oadp-material
Version:
oadp-material
836 lines (831 loc) • 30.7 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import { common } from '@alilc/lowcode-engine';
var OadpFormMeta = {
"componentName": "OadpForm",
"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": "OadpForm",
"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": function onNodeAdd(dragment, currentNode) {
var _dragmentSchema$props, _dragmentSchema$props2, _dragmentSchema$props3, _dragmentSchema$props4, _dragmentSchema$props5, _dragmentSchema$props6, _dragmentSchema$props7, _dragmentSchema$props8, _dragmentSchema$props9, _dragmentSchema$props10, _dragmentSchema$props11, _dragmentSchema$props12, _dragmentSchema$props13, _dragmentSchema$props14, _dragmentSchema$props15, _dragmentSchema$props16, _dragmentSchema$props17, _dragmentSchema$props18;
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;
}
var 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(function (comp) {
return dragment.componentName.indexOf(comp) === -1;
})) {
return;
}
var dragmentSchema = dragment === null || dragment === void 0 ? void 0 : dragment.exportSchema(common.designerCabin.TransformStage.Save);
console.log('dragmentSchema', dragmentSchema);
var name = (_dragmentSchema$props = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props2 = dragmentSchema.props) === null || _dragmentSchema$props2 === void 0 ? void 0 : _dragmentSchema$props2.name) !== null && _dragmentSchema$props !== void 0 ? _dragmentSchema$props : "默认名称";
var code = (_dragmentSchema$props3 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props4 = dragmentSchema.props) === null || _dragmentSchema$props4 === void 0 ? void 0 : _dragmentSchema$props4.code) !== null && _dragmentSchema$props3 !== void 0 ? _dragmentSchema$props3 : "默认编码";
var logicalName = (_dragmentSchema$props5 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props6 = dragmentSchema.props) === null || _dragmentSchema$props6 === void 0 ? void 0 : _dragmentSchema$props6.logicalName) !== null && _dragmentSchema$props5 !== void 0 ? _dragmentSchema$props5 : "默认逻辑名称";
var physicalName = (_dragmentSchema$props7 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props8 = dragmentSchema.props) === null || _dragmentSchema$props8 === void 0 ? void 0 : _dragmentSchema$props8.physicalName) !== null && _dragmentSchema$props7 !== void 0 ? _dragmentSchema$props7 : "默认物理名称";
var attributeType = (_dragmentSchema$props9 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props10 = dragmentSchema.props) === null || _dragmentSchema$props10 === void 0 ? void 0 : _dragmentSchema$props10.attributeType) !== null && _dragmentSchema$props9 !== void 0 ? _dragmentSchema$props9 : "STRING";
var attribute = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props11 = dragmentSchema.props) === null || _dragmentSchema$props11 === void 0 ? void 0 : _dragmentSchema$props11.attribute;
var defaultValue = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props12 = dragmentSchema.props) === null || _dragmentSchema$props12 === void 0 ? void 0 : _dragmentSchema$props12.defaultValue;
var description = (_dragmentSchema$props13 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props14 = dragmentSchema.props) === null || _dragmentSchema$props14 === void 0 ? void 0 : _dragmentSchema$props14.description) !== null && _dragmentSchema$props13 !== void 0 ? _dragmentSchema$props13 : "默认描述";
var required = (_dragmentSchema$props15 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props16 = dragmentSchema.props) === null || _dragmentSchema$props16 === void 0 ? void 0 : _dragmentSchema$props16.required) !== null && _dragmentSchema$props15 !== void 0 ? _dragmentSchema$props15 : false;
var disabled = (_dragmentSchema$props17 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props18 = dragmentSchema.props) === null || _dragmentSchema$props18 === void 0 ? void 0 : _dragmentSchema$props18.disabled) !== null && _dragmentSchema$props17 !== void 0 ? _dragmentSchema$props17 : false;
var oadpFormItemChildSchema = {
componentName: (dragmentSchema === null || dragmentSchema === void 0 ? void 0 : dragmentSchema.componentName) || 'OadpInput',
// 使用默认值或从拖拽项中获取
props: _extends({}, dragmentSchema === null || dragmentSchema === void 0 ? void 0 : dragmentSchema.props, {
// 复制拖拽项的属性
style: {
width: '256px'
}
})
};
switch (attributeType) {
case 'TEXT':
oadpFormItemChildSchema = {
"componentName": "OadpInput",
"props": {
"name": logicalName,
"placeholder": "\u8BF7\u8F93\u5165" + name,
"style": {
"width": "256px"
},
"required": required,
"size": "medium"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
};
break;
case 'MULTI_TEXT':
oadpFormItemChildSchema = {
"componentName": "OadpInput",
"props": {
"name": logicalName,
"placeholder": "\u8BF7\u8F93\u5165" + name,
"style": {
"width": "256px"
},
"required": required,
"size": "medium"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
};
break;
case 'NUMBER':
oadpFormItemChildSchema = {
"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':
oadpFormItemChildSchema = {
"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':
oadpFormItemChildSchema = {
"componentName": "OadpSwitch",
"props": {
"name": logicalName,
"defaultValue": defaultValue,
"disabled": disabled,
"size": "medium"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
};
break;
case 'DATETIME':
oadpFormItemChildSchema = {
"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':
oadpFormItemChildSchema = {
"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':
oadpFormItemChildSchema = {
"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':
oadpFormItemChildSchema = {
"componentName": "OadpSelect",
"props": {
"name": logicalName,
"placeholder": "请选择内容",
"defaultValue": defaultValue,
"required": required,
"disabled": disabled,
"size": "medium",
"style": {
"width": 256
},
"hasArrow": true,
"hasClear": true,
"hasBorder": true,
"attribute": attribute,
"mode": "single"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
};
break;
case 'NULTI_REFER':
oadpFormItemChildSchema = {
"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':
oadpFormItemChildSchema = {
"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':
oadpFormItemChildSchema = {
"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:
oadpFormItemChildSchema = {
"componentName": "OadpInput",
"props": {
"name": logicalName,
"placeholder": "\u8BF7\u8F93\u5165" + name,
"style": {
"width": "256px"
},
"required": required,
"size": "medium"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
};
break;
}
var oadpFormItemSchema = {
"componentName": "OadpFormItem",
"props": {
"label": name,
"required": required,
"style": {
"width": "256px"
}
},
"children": [oadpFormItemChildSchema]
};
// 为目标元素包裹一层P
var layoutPNode = currentNode.document.createNode(oadpFormItemSchema);
// 检查 layoutPNode 是否为 null
if (!layoutPNode) {
console.error('layoutPNode is null');
return;
}
// 当前dragment还未添加入node子节点,需要setTimeout处理
setTimeout(function () {
currentNode.replaceChild(dragment, layoutPNode.exportSchema(common.designerCabin.TransformStage.Save));
}, 1);
}
}
}
}
};
var snippets = [{
"title": "表单",
"screenshot": "https://img.alicdn.com/imgextra/i2/O1CN016gn5DQ1FeXUNKdK22_!!6000000000512-55-tps-50-36.svg",
"schema": {
"componentName": "OadpForm",
"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": "OadpFormItem",
"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": "OadpFormItem",
"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 _extends({}, OadpFormMeta, {
snippets: snippets
});