errors | |
---|---|
|
我们能够为给定模型生成默认视图。在实践中,业务应用程序永远不会接受默认视图。相反,我们至少应该以一种合乎逻辑的方式组织各个领域。
视图在带有操作和菜单的 JSON 文件中定义。它们是 ui_view模型的实例。
视图配置: app.json 中view节点配置视图的路径
视图路径: 在resolved包下新建views目录,所有视图文件必须放在views目录
data种子数据路径: 在resolved包下新建data目录,所有数据文件必须放在data目录
{
"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表示该字段占两行
}
页面展示:
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"
}
]
}
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"
]
}
}
3.8.1.3.1 日期类型
如果字段是日期、时间类型,可以指定 widget, 前端使用不同的日期组件进行渲染。
目前支持的 widget
- year: 选择年份
- month: 选择月份
- date: 选择日期
- datetime: 选择时间
- monthrange: 月份范围
- daterange: 日期范围
- 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
树形菜单如何配置,如下所示
"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"
}
}
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 | 是 | 权限 |
示例代码:
-
@defaults
"tbar": ["@defaults"]
a. type等于grid时,"@defaults等于默认添加 新增,删除按钮
b. type等于form时,"@defaults等于默认添加 保存按钮
c. type等于from并且存在er关系时,@defaults等于默认 添加 新增,删除按钮
自定义tbar
"tbar": [
{
"name": "新增",
"action": "create",
"auth": "create"
},
{
"name": "删除",
"action": "delete",
"auth": "delete"
}, {
"name": "刷新应用",//自定义tbar
"model": "meta_app",
"service": "restartApp",//调用的服务名,默认参数是ids
"auth": "restartApp"
}
]
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"]
"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"
}
]
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"
]
}
}
]
3.8.1.9. 关系(er)
1. 一对多: 示例:应用分类-应用列表(OneToMany)
a. form里面columns需要指定OneToMany的属性:app_ids
b. tab里面的field需要指定OneToMany的属性:app_ids
"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)
-
左边树为自己模型 (例子来源)
"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保持一致,左边树为自己模型。例如:组织功能,菜单功能
-
左边树为其他模型
"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"
}
]
- 字段分组