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 };