errors
Failed to load YAML frontmatter: (<unknown>): mapping values are not allowed in this context at line 2 column 6

我们能够为给定模型生成默认视图。在实践中,业务应用程序永远不会接受默认视图。相反,我们至少应该以一种合乎逻辑的方式组织各个领域。

视图在带有操作和菜单的 JSON 文件中定义。它们是 ui_view模型的实例。

视图配置: app.json 中view节点配置视图的路径

视图路径: 在resolved包下新建views目录,所有视图文件必须放在views目录

data种子数据路径: 在resolved包下新建data目录,所有数据文件必须放在data目录

img

{
    "name": "base",
    "displayName": "base",
    "company": "sie",
    "category": "base",
    "description": "基础模块",
    "summary": "基础模块",
    "type": "SDK",
    "tag": "1.0",
    "resolved": "com.sie.iidp.base",
    "dependencies": [],
    "license": "LGPL 3.0",
    "view": [
        "views/ui_view_view.json",
        "views/menu_view.json"
    ],
    "data": [
        "data/rbac_user.json"
    ]
}

3.8.1.1. 表单(form)

表单视图(form)

参数 类型 必填 描述 可选值
name String 名称  
model String 模型 模型名
type String 类型 form
mode String 模式 primary
body Object      
showEditBtn Boolean 详情页面是否显示编辑按钮  

主要信息

| 参数 | 类型 | 必填 | 描述 | 可选值 | | ——- | —— | — | — | ———- | | type | String | 是 | 类型 | | | columns | String | 是 | 属性 | | | tabs | Array | 否 | 切换 | 参考4.7.1.11 | | tbar | Array | 否 | 工具栏 | 参考4.7.1.5 | | showEditBtn | Boolean | 否 | 详情页面是否显示编辑按钮 | | 示例代码:

注意:如果需要显示ER关联属性,必须在columns添加相关字段

"rbac_user_form": {
          "name": "用户表单",
          "model": "rbac_user",
          "mode": "primary",
          "body": {
            "type": "form",
            "columns": [
              "name",
              "login",
              "mobile",
              "email",
              "role_ids" //如果需要显示ER关联属性,必须在columns添加相关字段
            ],
            "tabs": [
              {
                "header": "角色",
                "tbar": [
                  {
                    "name": "添加",
                    "action": "addEr",
                    "auth": "update"
                  },
                  {
                    "name": "删除",
                    "action": "deleteEr",
                    "auth": "delete"
                  }
                ],
                "body": {
                  "type": "grid,form",
                  "field": "role_ids",
                  "columns": [
                    "name",
                    "is_admin"
                  ]
                }
              }
            ],
            "tbar": [
              "@defaults"
            ]
          }
        }

分组表单视图(group)

属性 类型 描述 可选值
name String 显示名称  
groupConf Object 分组对象 { "name":"基本信息","id":"group1" }
span 占行宽度 占行宽度(24) 6
row 所在行   1
rowSpan 跨行展示   2

示例代码

{
      "name": "code", // 表单字段
      "groupConf": {  // 有该字段表明是表单分组
        "name": "基本信息", // 分组名称
        "id": "group1"  // 分组唯一id
      },
      "span": 6,  // 该字段所占行宽度(总宽度为24
      "row": 1,  // 该字段所在行,值不同即不同行
      "rowSpan": 2  // 跨行展示,2表示该字段占两行
}

页面展示:

img

3.8.1.2. 表格(grid)

表格视图(grid)注意事项(不填type则读取body中的type)

参数 类型 必填 描述 可选值
name String 名称  
model String 模型 模型名
type String 类型 grid
mode String 模式 primary 主要 Extension 扩展
body Object      

主要信息

参数 类型 必填 描述 可选值
type String 类型  
columns Array 属性  
buttons Array 按钮  
tbar Array 工具栏  

示例代码:

"rbac_user_grid": {
          "name": "用户表格",
          "model": "rbac_user",
          "mode": "primary",
          "body": {
            "type": "grid",
            "columns": [
              "name",
              "login",
              "mobile",
              "email"
            ],
            "buttons": [
              {
                "name": "编辑",
                "action": "edit",
                "auth": "update"
              },
              {
                "name": "重置密码",
                "auth": "resetPassword",
                "service": "resetPassword",
                "action": "openView",
                "model": "rbac_user",
                "views": "custom",
                "params": [
                  "newPassword"
                ]
              }
            ],
            "tbar": [
              {
                "name": "新增",
                "action": "create",
                "auth": "create"
              },
              {
                "name": "删除",
                "action": "delete",
                "auth": "delete"
              }
            ]
          }

img

3.8.1.3. 搜索(search)

搜索(search)

参数 类型 必填 描述 可选值
name String 名称  
model String 模型  
type String 类型  
mode String 模式  
body Object      

body 内容

参数 类型 必填 描述 可选值
type String 名称  
columns Array 属性  

示例代码:

"meta_app_search": {
          "name": "应用查询",
          "model": "meta_app",
          "mode": "primary",
          "body": {
            "type": "search",
            "columns": [
              "name",
              "category_ids",
              "state",
              "type"
            ]
          }
        }

img

3.8.1.3.1 日期类型

如果字段是日期、时间类型,可以指定 widget, 前端使用不同的日期组件进行渲染。

目前支持的 widget

  1. year: 选择年份
  2. month: 选择月份
  3. date: 选择日期
  4. datetime: 选择时间
  5. monthrange: 月份范围
  6. daterange: 日期范围
  7. datetimerange: 时间范围
{
  "views": {
    "datedemo_grid": {
      "body": {
        "buttons": [
          {
            "action": "preview",
            "auth": "read",
            "name": "详情"
          },
          {
            "action": "edit",
            "auth": "update",
            "name": "编辑"
          }
        ],
        "columns": [
          {
            "label": "年",
            "name": "year"
          },
          {
            "label": "月",
            "name": "month"
          },
          {
            "label": "日",
            "name": "date"
          },
          {
            "label": "时间",
            "name": "datetime"
          },
          {
            "label": "月范围",
            "name": "monthRange"
          },
          {
            "label": "日范围",
            "name": "dateRange"
          },
          {
            "label": "时间范围",
            "name": "datetimeRange"
          }
        ],
        "tbar": [
          {
            "action": "create",
            "auth": "create",
            "name": "新增"
          },
          {
            "action": "delete",
            "auth": "delete",
            "name": "删除"
          }
        ],
        "type": "grid"
      },
      "mode": "primary",
      "model": "DateDemo",
      "name": "日期Demo-表格",
      "type": "grid"
    },
    "datedemo_form": {
      "body": {
        "columns": [
          {
            "label": "年",
            "name": "year",
            "widget": "year"
          },
          {
            "label": "月",
            "name": "month",
            "widget": "month"
          },
          {
            "label": "日",
            "name": "date",
            "widget": "date"
          },
          {
            "label": "时间",
            "name": "datetime",
            "widget": "datetime"
          },
          {
            "label": "月范围",
            "name": "monthRange",
            "widget": "month"
          },
          {
            "label": "日范围",
            "name": "dateRange",
            "widget": "date"
          },
          {
            "label": "时间范围",
            "name": "datetimeRange",
            "widget": "datetime"
          }
        ],
        "tabs": [],
        "type": "form"
      },
      "mode": "primary",
      "model": "DateDemo",
      "name": "日期Demo-表单",
      "type": "form"
    },
    "datedemo_search": {
      "body": {
        "columns": [
          {
            "label": "年",
            "name": "year",
            "widget": "year"
          },
          {
            "label": "月",
            "name": "month",
            "widget": "month"
          },
          {
            "label": "月范围",
            "name": "monthRange",
            "widget": "monthrange"
          },
          {
            "label": "日",
            "name": "date",
            "widget": "date"
          },
          {
            "label": "日范围",
            "name": "dateRange",
            "widget": "daterange"
          },
          {
            "label": "时间",
            "name": "datetime",
            "widget": "datetime"
          },
          {
            "label": "时间范围",
            "name": "datetimeRange",
            "widget": "datetimerange"
          }
        ],
        "type": "search"
      },
      "mode": "primary",
      "model": "DateDemo",
      "name": "日期Demo-搜索",
      "type": "search"
    }
  }
}

3.8.1.4. 卡片(card)

卡片(card) (type 不填则读取body中的type)

参数 类型 必填 描述 可选值
name String 名称  
model String 模型  
type String 类型  
mode String 模式  
body Object      

主要内容

参数 类型 必填 描述 可选值
type String 名称  
columns Array 属性  

示例代码:

"rbac_user_card": {
          "name": "用户卡片",
          "model": "rbac_user",
          "body": {
            "type": "card",
            "columns": [
              "name",
              "email",
              "login",
              "mobile"
            ]
          }
        }

3.8.1.5. 菜单(menu)

菜单(menu)

参数 类型 必填 描述 可选值
name String 唯一  
display_name String 名称  
model String 模型  
view String 视图 grid ,form, search ,自定义
sequence Long 排序  
parent_ids Object     @ref
  1. 场景1

树形菜单如何配置,如下所示

"base_developer_center": {
      "sequence": "31",
      "name": "base_developer_center",
      "display_name": "开发者中心"
    },
    "meta_model_menu": {
      "sequence": "5",
      "view": "grid,form,search",
      "name": "meta_model_menu",
      "model": "meta_model",
      "display_name": "模型",
      "parent_ids": {
        "@ref": "base_developer_center"
      },
      "meta_sub_model_menu": {
      "sequence": "5",
      "view": "grid,form,search",
      "name": "meta_sub_model_menu",
      "model": "meta_sub_model",
      "display_name": "子模型",
      "parent_ids": {
        "@ref": "meta_model_menu"
      }
}

img

3.8.1.6. 工具栏(tbar)

工具栏(tbar)

参数 类型 必填 描述 可选值
name String 名称  
action String 动作 add添加delete删除save保存update修改createEr er创建addEr er增加按钮deleteEr er删除按钮updateEr er更新按钮@defaults 默认
auth String 权限  

示例代码:

  1. @defaults

    "tbar": ["@defaults"]

a. type等于grid时,"@defaults等于默认添加 新增,删除按钮

b. type等于form时,"@defaults等于默认添加 保存按钮

c. type等于from并且存在er关系时,@defaults等于默认 添加 新增,删除按钮

img

自定义tbar

 "tbar": [
          {
            "name": "新增",
            "action": "create",
            "auth": "create"
          },
          {
            "name": "删除",
            "action": "delete",
            "auth": "delete"
          }, {
            "name": "刷新应用",//自定义tbar
            "model": "meta_app",
            "service": "restartApp",//调用的服务名,默认参数是ids
            "auth": "restartApp"
          }
        ]

img

3.8.1.7. 按钮 (buttons)

按钮(buttons)

参数 类型 必填 描述 可选值
name String 名称  
action String 动作  
auth String 权限  
service String 服务  
model String 模型  
views String 视图 custom
params Array 参数  

示例代码:

​ 1. @defaults 默认添加详情,编辑按钮

"buttons": ["@defaults"]

img

 "buttons": [
              {
                "name": "编辑",
                "action": "edit",
                "auth": "update"
              },
              {
                "name": "安装",//自定义按钮
                "model": "meta_app",//指定服务
                "service": "installApp",//服务名
                "auth": "installApp",//权限字符串
                "enableCondition": "function condition(row) {return row && row[0] && row[0].state === 'installable';}"//按钮禁用条件
              },
              {
                "name": "更新数据",
                "model": "meta_app",
                "service": "refreshApp",
                "auth": "refreshApp"
              }
            ]

img

3.8.1.8. 切换(tabs)

切换(tabs)

参数 类型 必填 描述 可选值
header String    
rowspan String    
tbar Array 参考4.7.1.5工具栏  
body Object 一对多 多对多 内容  

主要内容

参数 类型 必填 描述 可选值
type String   grid,form
field String 关系字段  
columns Array    

示例代码:

"tabs": [
          {
            "header": "应用",
            "rowspan": 3,
            "tbar": [
              {
                "name": "添加",
                "action": "addEr"
              },
              {
                "name": "删除",
                "action": "deleteEr"
              }
            ],
            "body": {
              "type": "grid",
              "field": "app_ids",
              "columns": [
                "name",
                "tag",
                "description",
                "state"
              ]
            }
          }
        ]

img

3.8.1.9. 关系(er)

​ 1. 一对多: 示例:应用分类-应用列表(OneToMany)

​ a. form里面columns需要指定OneToMany的属性:app_ids

​ b. tab里面的field需要指定OneToMany的属性:app_ids

img

"meta_app_category_form": {
          "name": "应用分类表单",
          "model": "meta_app_category",
          "mode": "primary",
          "body": {
            "type": "form",
            "columns": [
              "name",
              "app_ids" //需要指定关联的属性:app_ids
            ],
            "tabs": [
              {
                "header": "应用",
                "rowspan": 3,
                "tbar": [
                  {
                    "name": "添加",
                    "action": "addEr"
                  },
                  {
                    "name": "删除",
                    "action": "deleteEr"
                  }
                ],
                "body": {
                  "type": "grid",
                  "field": "app_ids", //指定关联的属性:app_ids
                  "columns": [//关联表的属性
                    "name",
                    "tag",
                    "description",
                    "state"
                  ]
                }
              }
            ]
          }
        }

​ 2. 多对多 模型-属性(ManyToMany)

"meta_model_form": {
    "name": "模型表单",
    "model": "meta_model",
    "mode": "primary",
    "body": {
      "type": "form",
      "columns": [
        "name",
        "display_name",
        "table_name",
        "description",
        "parents",
        "tag",
        "source",
        "app_ids",
        "is_abstract",
        "auto_log",
        "order_by",
        "display_format",
        "property_ids" //form必须包含关联的属性
      ],
      "tabs": [
        {
          "header": "属性",
          "rowspan": 3,
          "body": {
            "type": "grid",
            "field": "property_ids",//关联的属性必填
            "columns": [
              "name",
              "display_name",
              "data_type",
              "required",
              "read_only",
              "store",
              "db_index"
            ],
            "edit": { //form编辑
              "type": "form",
              "columns": [
                "name",
                "data_type",
                "display_name",
                "description",
                "display",
                "source",
                "default_value",
                "length",
                "display_for_model",
                "required",
                "read_only",
                "unique",
                "store",
                "db_index",
                "property_type",
                "compute_script"
              ],
              "buttons": [
                {
                  "name": "编辑",
                  "action": "edit",
                  "auth": "update"
                }
              ]
            }
          },
          "tbar": [
            {
              "name": "创建",
              "action": "createEr",  //ER关系tbar,button需要带后缀er
              "auth": "create"
            },
            {
              "name": "删除",
              "action": "deleteEr",
              "auth": "delete"
            }
          ]
        }
      ]
    }
  }

​ 3. 多对一

属性name设置isDisplayForModel

@Model(name = "meta_app_category", displayName = "应用分类")
public class MetaAppCategory extends Model {
    public static Property name = Property.String().displayName("名称").tooltips("分类名称").isRequired().isDisplayForModel();
}

在应用列表grid添加category字段,在应用列表会自动显示分类的name.

"meta_app_grid": {
          "name": "应用列表",
          "model": "meta_app",
          "mode": "primary",
          "body": {
            "type": "grid",
            "columns": [
              "name",
              "display_name",
              "state",
              "tag",
              "product",
              "category_ids",
              "type",
              "summary"
            ],
            "buttons": [
              {
                "name": "编辑",
                "action": "edit",
                "auth": "update"
              }
            ],
            "tbar": [
              {
                "name": "新增",
                "action": "create",
                "auth": "create"
              }
            ]
          }
        }

3.8.1.10. 视图扩展(extend)

在视图中,表单,列表和搜索视图是使用json结构定义的。 如果要通过继承扩展原有视图,我们需要用一种方法来修改这个json。 这需要通过两步来实现,1、定位到视图json中某个界面元素的位置;2、然后在这个位置插入增补定义的视图。通过这两步就可以达到扩展视图的目的。

参数 类型 必填 描述 可选值
name String 名称  
model String 模型  
  String   模型  
type String   视图类型 grid表格 form表单search搜索
mode String 视图模式:扩展视图 extension
inherit_ids Object 继承的视图id:格式: "@ref": "应用名.继承视图key".示例: "inherit_ids": {"@ref": "mom.mom_item_grid" }  
body Object {"jsonpath":[{"expr":"columns","position":"inside","body":["barcode","type"]}]}  
jsonpath Array 指定要替换的路径和内容  
expr String columnscolumns.name  
position String 定位节点位置 inside(默认值):匹配节点内的追加内容。after:将内容添加到父元素之中,匹配的节点之后。before:添加内容在匹配节点之前。replace:替换匹配的节点。如果使用空内容,它将删除该匹配的元素。attributes:修改匹配元素的XML属性。
has_not String 如果节点不存在则创建,支持buttons,tabs,tars  
body Object    

示例代码:

{
      "views": {
        "rbac_user_grid_ext": {
          "name": "用户表格扩展",
          "model": "rbac_user",
          "type": "grid",
          "mode": "extension",
          "inherit_ids": {
            "@ref": "base.rbac_user_grid"
          },
          "body": {
            "jsonpath": [
              {
                "expr": "columns.email",
                "position": "after",
                "body": [
                  "mobile"
                ]
              }
            ]
          }
        },
        "rbac_user_form_ext": {
          "name": "用户表单扩展",
          "model": "rbac_user",
          "type": "form",
          "mode": "extension",
          "inherit_ids": {
            "@ref": "base.rbac_user_form"
          },
          "body": {
            "jsonpath": [
              {
                "expr": "columns.email",
                "position": "before",
                "body": [
                  "create_user"
                ]
              },
              {
                "has_not": "tabs",
                "expr": "tabs",
                "position": "inside",
                "body": [
                  {
                    "header": "用户日志",
                    "tbar": [
                      {
                        "name": "添加",
                        "action": "addEr",
                        "icon": "add",
                        "auth": "create"
                      },
                      {
                        "name": "删除",
                        "action": "deleteEr",
                        "auth": "delete"
                      }
                    ],
                    "body": {
                      "type": "grid",
                      "field": "logs",
                      "columns": [
                        "ip",
                        "user_agent",
                        "url"
                      ]
                    }
                  }
                ]
              }
            ]
          }
        },
        "rbac_user_search_ext": {
          "name": "用户搜索扩展",
          "model": "rbac_user",
          "mode": "extension",
          "type": "search",
          "inherit_ids": {
            "@ref": "base.rbac_user_search"
          },
          "body": {
            "jsonpath": [
              {
                "expr": "columns.email",
                "position": "inside",
                "body": [
                  "create_user"
                ]
              }
            ]
          }
        }
      }
    }

3.8.1.11. 种子数据 (data)

种子数据(data)

data种子数据路径:在resolved包下新建data目录,所有数据文件必须放在data目录

参数 类型 必填 描述 可选值
model String 模型  
properties Object      
  String   @eval [4,@ref(rbac_role_admin),0]

属性(properties)

示例代码:

{
      "data": {
        "rbac_role_admin": {
          "model": "rbac_role",
          "properties": {
            "name": "管理员",
            "is_admin": 1
          }
        },
        "rbac_role_common": {
          "model": "rbac_role",
          "properties": {
            "name": "普通用户",
            "is_admin": 0
          }
        },


        "rbac_user_admin": {
          "model": "rbac_user",
          "properties": {
            "name": "管理员",
            "login": "admin",
            "mobile": "18888888888",
            "password": "admin",
            "email": "1388888888@sie.com",
            "role_ids": [
              {
                "@eval": "[4, @ref(rbac_role_admin), 0]" //注意:此处使用了Many2Many指令集,在用户角色表中插入一条关联记录, @ref(rbac_role_admin)的意思是先获取rbac_role_admin生成的id,然后再插入到用户角色关联表里面
              }
            ]
          }
        },
        "rbac_user_lijun": {
          "model": "rbac_user",
          "properties": {
            "name": "李某",
            "login": "lijun",
            "mobile": "13600314629",
            "password": "lijun",
            "email": "lijun10@chinasie.com",
            "role_ids": [
              {
                "@eval": "[4, @ref(rbac_role_admin), 0]"
              }
            ]
          }
        }
      }
    }

3.8.1.12. 树 (tree)

树 (tree)

参数 类型 必填 描述 可选值
name String 名称  
model String 模型  
type String 类型 tree
mode String 视图模式  
body Object 内容  

body内容

参数 类型 必填 描述 可选值
type String 类属 tree
model String 模型  
props Object 绑定  
tbar Array 工具栏  
buttons Object 按钮  
columns Array 字段  

columns对象

"columns": [
    "name",
    "parent_id",
    "children_ids",
    "description"
]

props对象

"props": {
    "children": "children", 
    "parent": "parent", 
    "label": "name",
    "showTree": false // 搜索结果是否为树状结构,默认为false
}

tbar对象

"tbar": [{
    "name": "单击",
    "auth": "click",
    "service": "click",
    "action": "openView",
    "model": "rbac_organization",
    "views": "custom",
    "params": []
}]

buttons对象

"buttons": [{
    "name": "新增",
    "auth": "create",
    "service": "create",
    "action": "openView",
    "model": "rbac_organization",
    "views": "custom",
    "params": []
},{
    "name": "删除",
    "auth": "delete",
    "service": "delete",
    "action": "openView",
    "model": "rbac_organization",
    "views": "custom",
    "params": []
}]

3.8.1.13.导入导出(buttons)


Import导入

字段 名称 可选值 可空
action 事件 import
model 模型名 base_test
service 服务名 excelImport
fileLimit 文件限制    
-ext 文件类型 .xls ,.xlsx 默认值.xls 可空
-maxSize 文件大小单位MB 默认1MB

前端视grid视图tbar配置

{
    "action": "import",
    "model": "base_test",
    "service": "excelImport",
    "fileLimit": {
        "ext": ".xls,.xlsx",
        "maxSize": "2048"
    }
}
字段 名称 可选值 可空
action 导出 export
source 来源 select
properties 属性 ["name","age"]
model 模型 base_test
service 服务 excelExport

前端grid视图tbar工具栏配置

{
    "action": "export",
    "source": "selected",
    "properties": ["name","sex"],
    "model": "base_test",
    "service": "excelExport"
}

3.8.1.14.树(tree)

  1. 左边树为自己模型 (例子来源)

    "mi_base_folder_tree": {
        "name": "文件目录-树",
        "model": "mi_base_folder",
        "type": "tree",
        "mode": "primary",
        "body": {
            "type": "tree",
            "model": "mi_base_folder",
            "columns": [
                "name",
                "parent",
                "children"
            ],
            "props": {
                "children": "children",
                "parent": "parent",
                "label": "name"
            },
            "search": {}
        }
    }

    外面的Model与body里面的Model保持一致,左边树为自己模型。例如:组织功能,菜单功能

  2. 左边树为其他模型

    "mi_base_file_tree": {
        "name": "文件-树",
        "model": "mi_base_file",
        "type": "tree",
        "mode": "primary",
        "body": {
          "type": "tree",
          "model": "mi_base_folder",
          "columns": [
            "name",
            "parent",
            "children"
          ],
          "props": {
            "children": "children",
            "parent": "parent",
            "label": "name",
            "subApp": "smi-base-asset",
            "subModel": "mi_base_file",
            "subViewType": "grid,search,form",
            "subViewFilter": "folder"
          },
          "search": {}
        }
      }

    body里面的的模型可以配置成其他模型model :文件夹,columns也是模型的属性。

    props操作内容 children 为子字段,parent为父字段,label为展示名。

    subApp为应用名,subModel为模型名,subViewType为视图类型,subViewFilter为过滤条件。

    单击左边选中项请求sub的内容。

3.8.1.15.字段(columns)

对象结构的方式(详情参照文档)

字段 描述 可选值 类型
name 属性名   Strin
hide 显示隐藏表单(form) true/false Boolean
hidden 显示隐藏表格(grid) true/false Boolean
custom 覆盖前端视图相同属性的值 true/false Boolean

代码示例:

 "columns": [
    {
        "label": "昵称",
        "name": "nickname",
        "sortable": true,
        "width": "80px"
    }
 ]
  • 字段分组