oadp-material

import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; import { common } from '@alilc/lowcode-engine'; const OadpTableMeta: IPublicTypeComponentMetadata = { "componentName": "OadpTable", "title": "高级表格", "category": "高级组件", "group": "低代码组件", "docUrl": "", "screenshot": "https://img.alicdn.com/tfs/TB1ZU1HuVT7gK0jSZFpXXaTkpXa-112-64.png", "devMode": "proCode", "npm": { "package": "oadp-material", "version": "{{version}}", "exportName": "OadpTable", "main": "src/index.tsx", "destructuring": true, "subName": "" }, "configure": { "props": [ { "name": "DataSetting", "title": "数据设置", "type": "group", "display": "block", "items": [ { "title": { "label": { "type": "i18n", "en-US": "DataSource", "zh-CN": "数据源" }, "tip": { "type": "i18n", "zh_CN": "属性: dataSource | 说明:设置表格数据源。", "en_US": "prop: dataSource | description: Set Table DataSource.", }, }, "name": "dataSource", "description": "数据源", "setter": { "componentName": "MixedSetter", "props": { "setters": ["JsonSetter", "ExpressionSetter"], }, }, "supportVariable": true, }, { "title": { "label": { "type": "i18n", "en-US": "PrimaryKey", "zh-CN": "数据主键" }, "tip": { "type": "i18n", "zh_CN": "属性: primaryKey | 说明:设置表格数据主键。dataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中", "en_US": "prop: primaryKey | description: Set Table PrimaryKey.", }, }, "name": "primaryKey", "description": "数据源", "setter": "StringSetter", "supportVariable": true, }, ] }, { "name": "DisplaySetting", "title": "显示设置", "type": "group", "display": "block", "items": [ { "title": { "label": { "type": "i18n", "en-US": "Table Layout", "zh-CN": "表格布局" }, "tip": { "type": "i18n", "zh_CN": "属性: table-layout | 说明:设为 fixed 表示内容不会影响列的布局，可选值:fixed=固定模式, auto=自动模式。默认为:auto。", "en_US": "prop: table-layout | description: Set to fixed to indicate that the content will not affect the layout of the column. Optional values: fixed=fixed mode, auto=automatic mode. The default is: auto.", }, }, "name": "tableLayout", "description": "表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局，可选值:fixed=固定模式, auto=自动模式。默认为:auto。", "setter": { "componentName": "RadioGroupSetter", "props": { "dataSource": [ { "label": "自动模式", "value": "auto" }, { "label": "固定模式", "value": "fixed" } ], "options": [ { "label": "自动模式", "value": "auto" }, { "label": "固定模式", "value": "fixed" } ] }, "initialValue": "auto" } }, { "title": { "label": { "type": "i18n", "en-US": "Size", "zh-CN": "尺寸模式" }, "tip": { "type": "i18n", "zh_CN": "属性: size | 说明: 尺寸模式，可选值:small=紧凑模式, medium=普通模式。默认为:medium。", "en_US": "prop: size | description: Size mode, optional values: small=compact mode, medium=normal mode. The default is: medium.", }, }, "name": "size", "description": "属性: size | 说明: 尺寸模式，可选值:small=紧凑模式, medium=普通模式。默认为:medium。", "setter": { "componentName": "RadioGroupSetter", "props": { "dataSource": [ { "label": "普通模式", "value": "medium" }, { "label": "紧凑模式", "value": "small" } ], "options": [ { "label": "普通模式", "value": "medium" }, { "label": "紧凑模式", "value": "small" } ] }, "initialValue": "medium" } }, { "title": { "label": { "type": "i18n", "zh_CN": "表格长度", "en_US": "TableWidth", }, "tip": { "type": "i18n", "zh_CN": "属性: tableWidth | 说明: 表格的总长度，可以这么用：设置表格总长度、设置部分列的宽度，这样表格会按照剩余空间大小，自动其他列分配宽度", "en_US": "prop: tableWidth | description: The total length of the table, instructions for use: Set the total length of the table, set the width of some columns, so that the table will automatically allocate width to other columns according to the remaining space size", }, }, "name": "tableWidth", "description": "表格长度", "setter": "NumberSetter", "supportVariable": true, }, { "title": { "label": { "type": "i18n", "en-US": "Display Header", "zh-CN": "显示表头" }, "tip": { "type": "i18n", "zh_CN": "属性: hasHeader | 说明: 显示表头 | 类型: boolean | 默认值: true", "en_US": "prop: hasHeader | description: Display Header | type: boolean | default: true", }, }, "name": "hasHeader", "description": "显示表头", "setter": { "componentName": "BoolSetter", "isRequired": false, "initialValue": true } }, { "title": { "label": { "type": "i18n", "en-US": "Fixed Header", "zh-CN": "固定表头" }, "tip": { "type": "i18n", "zh_CN": "属性: fixedHeader | 说明: 固定表头，该属性配合maxBodyHeight使用，当内容区域的高度超过maxBodyHeight的时候，在内容区域会出现滚动条 | 类型: boolean | 默认值: false", "en_US": "prop: fixedHeader | description: Fixed Header This attribute is used in conjunction with maxBodyHeight. When the height of the content area exceeds maxBodyHeight, a scrollbar will appear in the content area | type: boolean | default: false", }, }, "name": "fixedHeader", "description": "固定表头", "setter": { "componentName": "BoolSetter", "isRequired": false, "initialValue": false }, "supportVariable": true, }, { "title": { "label": { "type": "i18n", "en-US": "Sticky Header", "zh-CN": "置顶表头" }, "tip": { "type": "i18n", "zh_CN": "属性: stickyHeader | 说明: 置顶表头滚动时锁定表头。 | 类型: boolean | 默认值: false", "en_US": "prop: stickyHeader | description: Sticky Header Lock the header when scrolling. | type: boolean | default: false", }, }, "name": "stickyHeader", "description": "置顶表头", "setter": { "componentName": "BoolSetter", "isRequired": false, "initialValue": false }, "supportVariable": true, }, { "title": { "label": { "type": "i18n", "zh_CN": "滚动高度", "en_US": "Max Body Height", }, "tip": { "type": "i18n", "zh_CN": "属性: maxBodyHeight | 说明: 最大内容区域的高度,在fixedHeader为true的时候,超过这个高度会出现滚动条。", "en_US": "prop: maxBodyHeight | description: The height of the maximum content area. When fixedHeader is true, a scrollbar will appear if it exceeds this height", }, }, "name": "maxBodyHeight", "description": "表格长度", "setter": "NumberSetter", "supportVariable": true, }, { "title": { "label": { "type": "i18n", "en-US": "Display Border", "zh-CN": "显示边框" }, "tip": { "type": "i18n", "zh_CN": "属性: hasBorder | 说明: 显示边框 | 类型: boolean | 默认值: true", "en_US": "prop: hasBorder | description: Display Border | type: boolean | default: true", }, }, "name": "hasBorder", "description": "显示边框", "setter": { "componentName": "BoolSetter", "isRequired": false, "initialValue": true } }, { "title": { "label": { "type": "i18n", "en-US": "Display Zebra", "zh-CN": "显示条纹" }, "tip": { "type": "i18n", "zh_CN": "属性: isZebra | 说明: 显示条纹 | 类型: boolean | 默认值: false", "en_US": "prop: isZebra | description: Display Zebra | type: boolean | default: false", }, }, "name": "isZebra", "description": "显示条纹", "setter": { "componentName": "BoolSetter", "isRequired": false, "initialValue": false } }, { "title": { "label": { "type": "i18n", "en-US": "Crossline", "zh-CN": "交叉显示" }, "tip": { "type": "i18n", "zh_CN": "属性: crossline | 说明: 交叉显示，在 hover 时出现十字参考轴，适用于表头比较复杂，需要做表头分类的场景。 | 类型: boolean | 默认值: false", "en_US": "prop: crossline | description: Crossline When hovering, a cross reference axis appears, which is suitable for scenarios where the header is complex and requires header classification. | type: boolean | default: false", }, }, "name": "crossline", "description": "交叉显示", "setter": { "componentName": "BoolSetter", "isRequired": false, "initialValue": false }, "supportVariable": true, }, { "title": { "label": { "type": "i18n", "en-US": "setEmptyContent", "zh-CN": "显示空占位符" }, "tip": { "type": "i18n", "zh_CN": "属性: setEmptyContent | 说明: 数据为空时显示空数据。 | 类型: boolean | 默认值: true", "en_US": "prop: setEmptyContent | description: Display empty data when the data is empty.. | type: boolean | default: true", }, }, "name": "setEmptyContent", "description": "显示空占位符", "setter": { "componentName": "BoolSetter", "isRequired": false, "initialValue": true }, "supportVariable": true, }, ], }, ], "supports": { "style": true }, "component": { "isContainer": true }, "advanced": { "callbacks": { "onNodeAdd": (dragment, currentNode) => { console.log('onNodeAdd', dragment, currentNode); // 检查 dragment 是否为 null if (!dragment) { console.error('dragment is null'); return; } // 检查 currentNode 是否为 null if (!currentNode) { console.error('currentNode is null'); return; } // 检查 currentNode.document 是否为 null if (!currentNode.document) { console.error('currentNode.document is null'); return; } const dragmentSchema = dragment?.exportSchema(common.designerCabin.TransformStage.Save); console.log('dragment.exportSchema()', dragmentSchema); const name = dragmentSchema?.props?.name ?? "默认名称"; const logicalName = dragmentSchema?.props?.logicalName ?? "默认逻辑名称"; const attributeType = dragmentSchema?.props?.attributeType ?? "STRING"; const referEntity = dragmentSchema?.props?.referEntity; const referAttribute = dragmentSchema?.props?.referAttribute; let dataIndex = logicalName; if (attributeType === "REFER" && referAttribute && typeof referAttribute === 'object' && 'logicalName' in referAttribute) { dataIndex = logicalName + '.name' ; } // 如果拖拽到表格内，需要转换元素为表格列 const layoutPNode = currentNode.document.createNode({ "componentName": "OadpTableColumn", "props": { "title": name, "dataIndex": dataIndex, "htmlTitle": logicalName, "alignHeader": "center", "align": "center", "wordBreak": "all", } }); console.log('onNodeAdd OadpTable layoutPNode', layoutPNode); // 检查 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/tfs/TB1ZU1HuVT7gK0jSZFpXXaTkpXa-112-64.png", "schema": { "componentName": "OadpTable", "props": { "dataSource": [ { "name": "王小", "id": "1", "age": 15000, "role": "开发" }, { "name": "王中", "id": "2", "age": 25000, "role": "产品" }, { "name": "王大", "id": "3", "age": 35000, "role": "设计" } ], "size": "medium", "hasBorder": false, "hasHeader": true, "isZebra": false, "fixedHeader": false, "stickyHeader": true, "crossline": false, "style": { "marginTop": "5px", "marginBottom": "5px", "marginLeft": "10px", "marginRight": "10px", } }, "children": [ { "componentName": "OadpTableColumn", "props": { "dataIndex": "name", "title": "名称", "htmlTitle": "name", "alignHeader": "center", "align": "center", "lock": false, "wordBreak": "all", }, "hidden": false, "isLocked": false, "condition": true, "conditionGroup": "" }, { "componentName": "OadpTableColumn", "props": { "dataIndex": "action", "title": "操作", "htmlTitle": "action", "width": 50, "alignHeader": "center", "align": "center", "lock": false, "wordBreak": "all", "cell": { "type": "JSSlot", "params": ["value", "index", "record"], "value": [ { "componentName": "OadpButtonBar", "props": { "direction": "row", "justify": "center", "align": "center", // "style": { // "width": "100px" // } }, "hidden": false, "title": "", "isLocked": false, "condition": true, "conditionGroup": "", "children": [ { "componentName": "OadpButton", "props": { "label": "编辑", "type": "primary", "size": "medium", "disabled": false, "style": { "marginLeft": "5px", "marginRight": "5px" }, "text": true }, "hidden": false, "title": "", "isLocked": false, "condition": true, "conditionGroup": "" }, { "componentName": "OadpButton", "props": { "label": "删除", "type": "primary", "size": "medium", "disabled": false, "style": { "marginLeft": "5px", "marginRight": "5px" }, "text": true }, "hidden": false, "title": "", "isLocked": false, "condition": true, "conditionGroup": "" } ] } ] } }, "hidden": false, "isLocked": false, "condition": true, "conditionGroup": "" } ] } } ]; export default { ...OadpTableMeta, snippets };