参考:
Nop 基于可逆计算原理从零开始构建的新一代低代码平台
Amis 低代码前端框架
华炎魔方 Salesforce低代码平台的开源替代方案
pdman 开源数据库建模工具
前言
低/无代码化的开发在国内外非常流行了,借由一个很棒的项目契机,进行了相应研究.
华炎魔方 Github
Steedos Developer Experience（DX）是一种新的管理和开发 Steedos 低代码平台上的应用程序的方式，贯穿它们的整个生命周期.
摘自: https://docs.steedos.com/zh-CN/developer
元数据
元数据指的是描述应用程序的结构、数据模型、业务逻辑乃至用户界面的数据。它包括广泛的配置，如对象定义、字段、角色、工作流和页面布局等。
自动化元数据
对象元数据
定义对象名称、显示名称、对象的基本信息，以及功能开关。
权限元数据
界面元数据
华炎魔方对元数据做出细分性定义,完整定义出页面的元素,包含页面校验,组件插件等,经过JS等相关代码转化为Amis的page json数据.
// 数据源模拟 借鉴元数据相关配置
{
code: 0,
data: {
id: 1,
scene: 1,
tableName: "system_users",
tableComment: "用户信息表",
remark: null,
moduleName: "system",
businessName: "users",
className: "Users",
classComment: "用户信息",
author: "admin",
templateType: 1,
frontType: 20,
parentMenuId: null,
masterTableId: null,
subJoinColumnId: null,
subJoinMany: null,
treeParentColumnId: null,
treeNameColumnId: null,
dataSourceConfigId: 0,
createTime: 1710593860000,
updateTime: 1712900473000,
name: "",
enable_api: true,
enable_audit: true,
enable_chatter: false,
enable_events: false,
enable_files: true,
enable_inline_edit: true,
enable_instances: false,
enable_notes: false,
enable_search: true,
enable_tasks: false,
enable_trash: true,
enable_workflow: true,
enable_enhanced_lookup: true,
icon: "",
is_enable: true,
enable_add: true, // 新增
enable_edit: true, // 编辑
enable_del: true, // 删除
enable_query: true, // 行-查看
enable_import: true, // 导入
enable_export: true, // 导出
columns: [
{
id: 2248,
tableId: 1,
columnName: "id",
dataType: "BIGINT",
columnComment: "用户ID",
nullable: false,
primaryKey: true,
autoIncrement: true,
ordinalPosition: 1,
javaType: "Long",
javaField: "id",
dictType: "",
example: "706",
createOperation: false,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
// --- fly-ui 原始数据
// --- 华炎魔方填充
required: false, // 必填
searchable: false, // 可搜索
hidden: true // 忽略此字段
},
{
id: 2265,
tableId: 1,
columnName: "update_time",
dataType: "TIMESTAMP",
columnComment: "更新时间",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 18,
javaType: "LocalDateTime",
javaField: "updateTime",
dictType: "",
example: null,
createOperation: false,
updateOperation: false,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "datetime",
createTime: 1710593860000,
searchable: true
},
{
id: 2249,
tableId: 1,
columnName: "username",
dataType: "VARCHAR",
columnComment: "用户账号",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 2,
javaType: "String",
javaField: "username",
dictType: "",
example: "张三",
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
required: true,
searchable: true
},
{
id: 2250,
tableId: 1,
columnName: "password",
dataType: "VARCHAR",
columnComment: "密码",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 3,
javaType: "String",
javaField: "password",
dictType: "",
example: null,
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
required: true,
searchable: false
},
{
id: 2251,
tableId: 1,
columnName: "nickname",
dataType: "VARCHAR",
columnComment: "用户昵称",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 4,
javaType: "String",
javaField: "nickname",
dictType: "",
example: "张三",
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
required: true,
searchable: true
},
{
id: 2252,
tableId: 1,
columnName: "remark",
dataType: "VARCHAR",
columnComment: "备注",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 5,
javaType: "String",
javaField: "remark",
dictType: "",
example: "随便",
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "textarea",
createTime: 1710593860000,
searchable: true,
maxLength: 5,
defaultValue: '默认备注' // 默认数据
},
{
id: 2253,
tableId: 1,
columnName: "dept_id",
dataType: "BIGINT",
columnComment: "部门ID",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 6,
javaType: "Long",
javaField: "deptId",
dictType: "",
example: "7791",
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
required: true,
searchable: false
},
{
id: 2254,
tableId: 1,
columnName: "post_ids",
dataType: "VARCHAR",
columnComment: "岗位编号数组",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 7,
javaType: "String",
javaField: "postIds",
dictType: "",
example: null,
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
searchable: false
},
{
id: 2255,
tableId: 1,
columnName: "email",
dataType: "VARCHAR",
columnComment: "用户邮箱",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 8,
javaType: "String",
javaField: "email",
dictType: "",
example: null,
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
required: true,
searchable: false
},
{
id: 2256,
tableId: 1,
columnName: "mobile",
dataType: "VARCHAR",
columnComment: "手机号码",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 9,
javaType: "String",
javaField: "mobile",
dictType: "",
example: null,
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
required: true,
searchable: true
},
{
id: 2257,
tableId: 1,
columnName: "sex",
dataType: "TINYINT",
columnComment: "用户性别",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 10,
javaType: "Integer",
javaField: "sex",
dictType: "",
example: null,
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "radio",
required: true,
createTime: 1710593860000,
searchable: true,
options: "LOV_SEX"
},
{
id: 2258,
tableId: 1,
columnName: "avatar",
dataType: "VARCHAR",
columnComment: "头像地址",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 11,
javaType: "String",
javaField: "avatar",
dictType: "",
example: null,
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
searchable: false
},
{
id: 2259,
tableId: 1,
columnName: "status",
dataType: "TINYINT",
columnComment: "帐号状态",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 12,
javaType: "Integer",
javaField: "status",
dictType: "",
example: "1",
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "checkbox",
createTime: 1710593860000,
searchable: true,
required: true,
options: "LOV_status"
},
{
id: 2259,
tableId: 1,
columnName: "status1",
dataType: "TINYINT",
columnComment: "帐号状态(下拉)",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 12,
javaType: "Integer",
javaField: "status1",
dictType: "",
example: "1",
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "select",
createTime: 1710593860000,
searchable: true,
options: "LOV_status"
},
{
id: 2260,
tableId: 1,
columnName: "login_ip",
dataType: "VARCHAR",
columnComment: "最后登录IP",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 13,
javaType: "String",
javaField: "loginIp",
dictType: "",
example: null,
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
readOnly: true,
createTime: 1710593860000,
searchable: false
},
{
id: 2261,
tableId: 1,
columnName: "login_date",
dataType: "TIMESTAMP",
columnComment: "最后登录时间",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 14,
javaType: "LocalDateTime",
javaField: "loginDate",
dictType: "",
example: null,
createOperation: true,
updateOperation: true,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "datetime",
readOnly: true,
createTime: 1710593860000,
searchable: false
},
{
id: 2262,
tableId: 1,
columnName: "creator",
dataType: "VARCHAR",
columnComment: "创建者",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 15,
javaType: "String",
javaField: "creator",
dictType: "",
example: null,
createOperation: false,
updateOperation: false,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
readOnly: true,
createTime: 1710593860000,
searchable: false
},
{
id: 2263,
tableId: 1,
columnName: "create_time",
dataType: "TIMESTAMP",
columnComment: "创建时间",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 16,
javaType: "LocalDateTime",
javaField: "createTime",
dictType: "",
example: null,
createOperation: false,
updateOperation: false,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "datetime",
createTime: 1710593860000,
searchable: false,
hidden: true // 忽略此字段
},
{
id: 2264,
tableId: 1,
columnName: "updater",
dataType: "VARCHAR",
columnComment: "更新者",
nullable: true,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 17,
javaType: "String",
javaField: "updater",
dictType: "",
example: null,
createOperation: false,
updateOperation: false,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
searchable: false,
readOnly: true,
hidden: true // 忽略此字段
},
{
id: 2266,
tableId: 1,
columnName: "deleted",
dataType: "BIT",
columnComment: "是否删除",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 19,
javaType: "Boolean",
javaField: "deleted",
dictType: "",
example: null,
createOperation: false,
updateOperation: false,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "radio",
createTime: 1710593860000,
searchable: false,
hidden: true // 忽略此字段
},
{
id: 2267,
tableId: 1,
columnName: "tenant_id",
dataType: "BIGINT",
columnComment: "租户编号",
nullable: false,
primaryKey: false,
autoIncrement: false,
ordinalPosition: 20,
javaType: "Long",
javaField: "tenantId",
dictType: "",
example: "13563",
createOperation: false,
updateOperation: false,
listOperation: null,
listOperationCondition: null,
listOperationResult: null,
htmlType: "input",
createTime: 1710593860000,
searchable: false,
hidden: true // 忽略此字段
},
],
},
msg: "",
}模板转换
元数据转换Amis page工程Demo: Gitlhub
以下为测试转换后的Amis page页面
{ "type": "page", "regions": [ "body" ], "body": { "type": "crud2", "mode": "table2", "dsType": "api", "selectable": true, "syncLocation": true, "primaryField": "id", "loadType": "pagination", "api": { "url": "http://111.231.7.32:40001/mock/11/amis/amis/getTemplateList", "method": "get", "dataType": "json", "replaceData": false }, "filter": { "type": "form", "title": "值列表查询(模板)", "mode": "inline", "labelAlign": "top", "dsType": "api", "feat": "Insert", "body": [ { "type": "collapse-group", "activeKey": [ "1" ], "body": [ { "type": "collapse", "key": "1", "active": true, "body": [ { "type": "grid", "columns": [ { "md": "3", "body": [ { "name": "update_time", "label": "更新时间", "type": "input-date", "mode": "normal", "labelAlign": "top", "clearable": true } ] } , { "md": "3", "body": [ { "name": "username", "label": "用户账号", "type": "input-text", "mode": "normal", "labelAlign": "top", "clearable": true } ] } , { "md": "3", "body": [ { "name": "nickname", "label": "用户昵称", "type": "input-text", "mode": "normal", "labelAlign": "top", "clearable": true } ] } , { "md": "3", "body": [ { "name": "remark", "label": "备注", "type": "textarea", "maxLength": 5, "mode": "normal", "labelAlign": "top", "clearable": true } ] } , { "md": "3", "body": [ { "name": "mobile", "label": "手机号码", "type": "input-text", "mode": "normal", "labelAlign": "top", "clearable": true } ] } , { "md": "3", "body": [ { "name": "sex", "label": "用户性别", "type": "radios", "source": "${LOV_SEX}", "mode": "normal", "labelAlign": "top", "clearable": true } ] } , { "md": "3", "body": [ { "name": "status", "label": "帐号状态", "type": "checkboxes", "source": "${LOV_status}", "mode": "normal", "labelAlign": "top", "clearable": true } ] } , { "md": "3", "body": [ { "name": "status1", "label": "帐号状态(下拉)", "type": "select", "source": "${LOV_status}", "mode": "normal", "labelAlign": "top", "clearable": true } ] } ], "gap": "base" } ], "header": { "type": "container", "body": [ { "type": "tpl", "tpl": "值列表查询(模板)", "inline": true, "className": "page_title", "wrapperCustomStyle": { "root": { "padding-left": "\"6px\"" } } }, { "type": "button-toolbar", "buttons": [ { "type": "submit", "label": "查询", "level": "primary", "size": "sm" }, { "type": "reset", "label": "重置", "size": "sm" } ], "mode": "inline" } ], "style": { "position": "relative", "display": "flex", "inset": "auto", "flexWrap": "nowrap", "flexDirection": "row", "alignItems": "center" }, "wrapperBody": false, "isFixedWidth": false, "wrapperCustomStyle": { "root": { "flex": "1", "display": "flex", "flex-direction": "row", "align-items": "center", "justify-content": "space-between" } } }, "headingClassName": "page_collapse_head", "className": "page_collapse page_collapse_body", "bodyClassName": "page_collapse_content" } ], "expandIconPosition": "right", "className": "page_collapse" } ], "resetAfterSubmit": false, "columnCount": 4, "clearValueOnHidden": true, "wrapWithPanel": false, "behavior": [ "SimpleQuery" ], "actions": [ { "type": "submit", "label": "查询", "level": "primary" }, { "type": "button", "label": "重置", "onEvent": { "click": { "weight": 0, "actions": [ { "componentId": "u:1556dcd479ab", "ignoreError": false, "actionType": "reset" } ] } }, "level": "default" } ] }, "headerToolbar": [ { "type": "flex", "direction": "row", "justify": "flex-start", "alignItems": "stretch", "style": { "position": "static" }, "items": [ { "type": "container", "body": [ { "type": "container", "body": [ { "type": "tpl", "tpl": "明细(模板)", "inline": true, "className": "page_title" } ], "style": { "position": "relative", "display": "flex", "inset": "auto", "flexWrap": "nowrap", "flexDirection": "column", "alignItems": "flex-start" }, "wrapperBody": false }, { "type": "container", "body": [ { "type": "button", "label": "新建", "level": "success", "size": "sm", "onEvent": { "click": { "weight": 0, "actions": [ { "ignoreError": false, "actionType": "drawer", "drawer": { "$ref": "modal-edit-ref" }, "data": { "modelType": "add" } } ] } }, "themeCss": { "className": { "padding-and-margin:default": { "marginLeft": "var(--sizes-size-5)" } } } }, { "type": "button", "label": "批量删除", "onEvent": { "click": { "actions": [] } }, "level": "warning", "size": "sm", "themeCss": { "className": { "padding-and-margin:default": { "marginLeft": "var(--sizes-size-5)" } } }, "confirmText": "是否批量删除" }, { "type": "button", "label": "导入", "onEvent": { "click": { "actions": [] } }, "level": "primary", "size": "sm", "themeCss": { "className": { "padding-and-margin:default": { "marginLeft": "var(--sizes-size-5)" } } } }, { "type": "button", "label": "导出", "onEvent": { "click": { "actions": [] } }, "level": "primary", "size": "sm", "themeCss": { "className": { "padding-and-margin:default": { "marginLeft": "var(--sizes-size-5)" } } } } ], "style": { "position": "relative", "display": "flex", "flex": "0 0 auto", "inset": "auto", "flexWrap": "nowrap", "alignItems": "baseline" }, "wrapperBody": false, "isFixedHeight": false } ], "wrapperBody": false, "style": { "flex": "1 1 auto", "position": "static", "display": "flex", "flexWrap": "nowrap", "justifyContent": "space-between", "alignItems": "baseline", "flexGrow": 1 }, "wrapperCustomStyle": { "height": "auto" } } ] } ], "footerToolbar": [ { "type": "flex", "direction": "row", "justify": "flex-start", "alignItems": "stretch", "style": { "position": "static" }, "items": [ { "type": "container", "align": "right", "body": [ { "type": "pagination", "behavior": "Pagination", "layout": [ "total", "perPage", "pager" ], "perPage": 10, "perPageAvailable": [ 10, 20, 50, 100 ], "align": "right" } ], "wrapperBody": false, "style": { "flexGrow": 1, "flex": "1 1 auto", "position": "static", "display": "flex", "flexBasis": "auto", "flexDirection": "row", "flexWrap": "nowrap", "alignItems": "stretch", "justifyContent": "flex-end" } } ] } ], "columns": [ { "type": "tpl", "title": "更新时间", "name": "update_time" }, { "type": "tpl", "title": "用户账号", "name": "username" }, { "type": "tpl", "title": "密码", "name": "password" }, { "type": "tpl", "title": "用户昵称", "name": "nickname" }, { "type": "tpl", "title": "备注", "name": "remark" }, { "type": "tpl", "title": "部门ID", "name": "dept_id" }, { "type": "tpl", "title": "岗位编号数组", "name": "post_ids" }, { "type": "tpl", "title": "用户邮箱", "name": "email" }, { "type": "tpl", "title": "手机号码", "name": "mobile" }, { "type": "mapping", "source": "${LOV_SEX}", "title": "用户性别", "name": "sex" }, { "type": "tpl", "title": "头像地址", "name": "avatar" }, { "type": "mapping", "source": "${LOV_status}", "title": "帐号状态", "name": "status" }, { "type": "mapping", "source": "${LOV_status}", "title": "帐号状态(下拉)", "name": "status1" }, { "type": "tpl", "title": "最后登录IP", "name": "login_ip" }, { "type": "tpl", "title": "最后登录时间", "name": "login_date" }, { "type": "tpl", "title": "创建者", "name": "creator" }, { "type": "operation", "title": "操作", "buttons": [ { "type": "button", "label": "查看", "level": "link", "behavior": "Edit", "onEvent": { "click": { "actions": [ { "actionType": "drawer", "drawer": { "$ref": "modal-edit-ref" } } ] } } }, { "type": "button", "label": "编辑", "level": "link", "behavior": "Edit", "onEvent": { "click": { "actions": [ { "actionType": "drawer", "drawer": { "$ref": "modal-edit-ref" } } ] } } }, { "type": "button", "label": "删除", "behavior": "Delete", "className": "m-r-xs text-danger", "level": "link", "confirmText": "确认要删除数据", "onEvent": { "click": { "actions": [ { "actionType": "ajax", "data": { "&": "$$" } }, { "actionType": "search", "groupType": "component", "componentId": "u:e537fbdd1ad1" } ] } } } ] } ], "showHeader": true }, "pullRefresh": { "disabled": true }, "definitions": { "modal-edit-ref": { "type": "drawer", "body": [ { "type": "form", "title": "表单", "mode": "flex", "labelAlign": "top", "dsType": "api", "feat": "Insert", "body": [ { "label": "更新时间", "type": "input-date", "colSize": "1/2", "row": 1, "required": "", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "update_time" }, { "label": "用户账号", "type": "input-text", "colSize": "1/2", "row": 1, "required": "true", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "username" }, { "label": "密码", "type": "input-text", "colSize": "1/2", "row": 2, "required": "true", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "password" }, { "label": "用户昵称", "type": "input-text", "colSize": "1/2", "row": 2, "required": "true", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "nickname" }, { "label": "备注", "type": "textarea", "colSize": "1/2", "row": 3, "required": "", "value": "默认备注", "readOnlyOn": "${IF(false, true, false)}", "maxLength": 5, "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "remark" }, { "label": "部门ID", "type": "input-text", "colSize": "1/2", "row": 3, "required": "true", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "dept_id" }, { "label": "岗位编号数组", "type": "input-text", "colSize": "1/2", "row": 4, "required": "", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "post_ids" }, { "label": "用户邮箱", "type": "input-text", "colSize": "1/2", "row": 4, "required": "true", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "email" }, { "label": "手机号码", "type": "input-text", "colSize": "1/2", "row": 5, "required": "true", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "mobile" }, { "label": "用户性别", "type": "radios", "source": "${LOV_SEX}", "colSize": "1/2", "row": 5, "required": "true", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "sex" }, { "label": "头像地址", "type": "input-text", "colSize": "1/2", "row": 6, "required": "", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "avatar" }, { "label": "帐号状态", "type": "checkboxes", "source": "${LOV_status}", "colSize": "1/2", "row": 6, "required": "true", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "status" }, { "label": "帐号状态(下拉)", "type": "select", "source": "${LOV_status}", "colSize": "1/2", "row": 7, "required": "", "value": "", "readOnlyOn": "${IF(false, true, false)}", "staticOn": "${IF(modelType!='add' && false, true, false)}", "name": "status1" }, { "label": "最后登录IP", "type": "input-text", "colSize": "1/2", "row": 7, "required": "", "value": "", "readOnlyOn": "${IF(true, true, false)}", "staticOn": "${IF(modelType!='add' && true, true, false)}", "name": "login_ip" }, { "label": "最后登录时间", "type": "input-date", "colSize": "1/2", "row": 8, "required": "", "value": "", "readOnlyOn": "${IF(true, true, false)}", "staticOn": "${IF(modelType!='add' && true, true, false)}", "name": "login_date" }, { "label": "创建者", "type": "input-text", "colSize": "1/2", "row": 8, "required": "", "value": "", "readOnlyOn": "${IF(true, true, false)}", "staticOn": "${IF(modelType!='add' && true, true, false)}", "name": "creator" } ], "actions": [ { "type": "button", "label": "取消", "onEvent": { "click": { "actions": [ { "actionType": "cancel", "componentId": "u:1939b4056ada" } ] } }, "level": "default" }, { "type": "button", "label": "提交", "onEvent": { "click": { "actions": [ { "actionType": "submit", "componentId": "u:1939b4056ada" } ] } }, "level": "primary" } ], "resetAfterSubmit": true } ], "title": "", "actions": [ { "type": "button", "actionType": "cancel", "label": "取消" }, { "type": "button", "actionType": "confirm", "label": "确定", "primary": true } ], "actionType": "drawer", "showCloseButton": true, "closeOnOutside": false, "closeOnEsc": false, "showErrorMsg": true, "showLoading": true, "draggable": false, "resizable": false, "editorSetting": { "displayName": "Dialog_edit" } } }, "data": { "LOV_LOC_type": [], "LOV_SEX": [], "LOV_status": [ { "label": "正常web", "value": "0" }, { "label": "停用web", "value": "1" } ] }, "wrapperCustomStyle": { ".page_title": { "font-weight": "550", "font-size": "18px" }, ".page_collapse_head": { "width": "100%", "border-bottom": "2px solid #f7f7f9" }, ".page_collapse_content": { "padding": "20px" }, ".page_collapse_body": { "border-bottom": "10px solid #F4F5F7" }, ".page_collapse": { "width": "100%" } }, "id": "top_page", "onEvent": { "init": { "weight": 0, "actions": [ { "ignoreError": false, "actionType": "custom", "script": "fetch(\"http://111.231.7.32:40001/mock/11/amis/getLov?type=LOV_status\")\n .then((response) => response.json())\n .then((res) => {\n doAction({\n actionType: 'setValue',\n componentId: 'top_page',\n args: {\n value: {\n LOV_status: res\n }\n }\n })\n });\n\n\nfetch(\"http://111.231.7.32:40001/mock/11/amis/getLov?type=LOV_SEX\")\n .then((response) => response.json())\n .then((res) => {\n doAction({\n actionType: 'setValue',\n componentId: 'top_page',\n args: {\n value: {\n LOV_SEX: res\n }\n }\n })\n });\n\n\n\n \n", "args": {} } ] } } }Amis
获取模板层得到的page json数据,进行渲染.
Amis预览工程 Github
以上模板的渲染效果
从此用例Demo,实现了页面基础的CRUD功能.
问题:
元数据定义丰富,模板的方式转化不灵活,可能不能充分实现元数据定义效果
数据在转化为元数据过程亦需要一个自动化和快速加工的中间件
Amis编辑器与模板中应该有一层中间层简化用户操作,丰富低/无代码体验