oadp-material
Version:
oadp-material
518 lines (513 loc) • 18.9 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import { common } from '@alilc/lowcode-engine';
var OadpTableMeta = {
"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": function onNodeAdd(dragment, currentNode) {
var _dragmentSchema$props, _dragmentSchema$props2, _dragmentSchema$props3, _dragmentSchema$props4, _dragmentSchema$props5, _dragmentSchema$props6, _dragmentSchema$props7, _dragmentSchema$props8;
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;
}
var dragmentSchema = dragment === null || dragment === void 0 ? void 0 : dragment.exportSchema(common.designerCabin.TransformStage.Save);
console.log('dragment.exportSchema()', 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 logicalName = (_dragmentSchema$props3 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props4 = dragmentSchema.props) === null || _dragmentSchema$props4 === void 0 ? void 0 : _dragmentSchema$props4.logicalName) !== null && _dragmentSchema$props3 !== void 0 ? _dragmentSchema$props3 : "默认逻辑名称";
var attributeType = (_dragmentSchema$props5 = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props6 = dragmentSchema.props) === null || _dragmentSchema$props6 === void 0 ? void 0 : _dragmentSchema$props6.attributeType) !== null && _dragmentSchema$props5 !== void 0 ? _dragmentSchema$props5 : "STRING";
var referEntity = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props7 = dragmentSchema.props) === null || _dragmentSchema$props7 === void 0 ? void 0 : _dragmentSchema$props7.referEntity;
var referAttribute = dragmentSchema === null || dragmentSchema === void 0 ? void 0 : (_dragmentSchema$props8 = dragmentSchema.props) === null || _dragmentSchema$props8 === void 0 ? void 0 : _dragmentSchema$props8.referAttribute;
var dataIndex = logicalName;
if (attributeType === "REFER" && referAttribute && typeof referAttribute === 'object' && 'logicalName' in referAttribute) {
dataIndex = logicalName + '.name';
}
// 如果拖拽到表格内，需要转换元素为表格列
var 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(function () {
currentNode.replaceChild(dragment, layoutPNode.exportSchema(common.designerCabin.TransformStage.Save));
}, 1);
}
}
}
}
};
var snippets = [{
"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 _extends({}, OadpTableMeta, {
snippets: snippets
});