Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: ✏️ 前端界面说明文档更新 #813

Merged
merged 1 commit into from
May 7, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 55 additions & 61 deletions docs/ 开发者指南/ 插件指南/前端界面.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,6 @@
> 常见于删除/树节点点击获取Children等操作。
1. open 打开页面型
> 常见于创建/编辑等打开弹出框的操作。
1. cancel 取消型
> 主要为关闭某个弹出框的操作。
1. reset 重置表单型
> 主要为重置某个Form类型的页面数据。
1. import 导入数据型
> 为导入某个数据表进行的操作。
1. url 内外链接型
Expand All @@ -100,90 +96,98 @@
1. cascade 级联型
> 常见于树状型页面的级联页面使用。当点击某个节点时, 应出现并列的数据展示页面。

#### 页面配置说明
```
主要字段说明:
tag 页面标识符, 进行唯一匹配使用
name 页面或操作描述信息
type 页面或操作类型, 见上述说明
init_action 页面初始化操作(获取主页面schema和data)【格式为action】
global_action 页面全局操作【格式为key: action】
local_action 页面局部操作【格式为key: action】


其他字段说明(可能只有部分页面需要添加):
node_action 节点操作【格式为actions】
select 是否可以进行选择
pages tabs类型页面指向多个页面
```

#### 表格型页面

该模块主要通过配置的举例, 说明表格型页面是怎样配置的。

1. 主页面配置

```
{
tag: "user_list", // 页面唯一标识, 进行匹配使用
name: "用户列表", // 页面描述信息
type: "table", // 页面类型
init_action: { // 页面初始化操作
tag: "user_list",
name: "用户列表",
type: "table",
init_action: {
path: "/api/v1/tenant/{tenant_id}/users/",
method: "get",
},
global_action: [ // 页面全局操作
{
icon: "icon-create", // 操作按钮图标
name: "创建", // 操作按钮文字
page: "user_list_create", // 打开页面的tag
type: "open", // 按钮操作类型
global_action: { // 页面全局操作
create: {
icon: "icon-create",
name: "创建",
path: "/api/v1/tenant/{tenant_id}/users/",
method: "post",
type: "open",
},
{
import: {
icon: "icon-import",
name: "导入",
path: "/api/v1/tenant/{tenant_id}/users/import/",
method: "post",
type: "import",
},
{
export: {
icon: "icon-export",
name: "导出",
path: "/api/v1/tenant/{tenant_id}/users/export/",
method: "post",
type: "direct",
}
],
local_action: [ // 页面局部操作
{
},
local_action: {
edit: {
icon: "icon-edit",
name: "编辑",
page: "user_list_edit",
action_type: "open",
},
{
delete: {
icon: "icon-delete",
name: "删除",
path: "/api/v1/tenant/{tenant_id}/users/",
method: "delete",
action_type: "direct",
}
]
}
}
```

2. 弹出框页面配置

```
{
tag: "user_list_create",
name: "创建一个新的用户",
tag: "user_list_edit",
name: "编辑用户信息",
type: "form",
init_action: {
path: "/api/v1/tenant/{tenant_id}/users/",
path: "/api/v1/tenant/{tenant_id}/users/{id}/",
method: "get",
},
global_action: [
{
icon: "icon-cancel",
name: "取消",
type: "cancel",
},
{
icon: "icon-reset",
name: "重置",
type: "reset",
},
{
global_action: {
confirm: {
icon: "icon-confirm",
name: "确认",
path: "/api/v1/tenant/{tenant_id}/users/",
path: "/api/v1/tenant/{tenant_id}/users/{id}/",
method: "post",
type: "direct",
}
]
}
}
```

Expand All @@ -194,31 +198,21 @@
```
{
tag: "user_list_edit",
name: "编辑该用户",
name: "编辑用户信息",
type: "form",
init_action: {
path: "/api/v1/tenant/{tenant_id}/users/{id}/",
method: "get",
},
global_action: [
{
icon: "icon-cancel",
name: "取消",
type: "cancel",
},
{
icon: "icon-reset",
name: "重置",
type: "reset",
},
{
global_action: {
confirm: {
icon: "icon-confirm",
name: "确认",
path: "/api/v1/tenant/{tenant_id}/users/{id}/",
method: "post",
type: "direct",
}
]
}
}
```

Expand Down Expand Up @@ -246,29 +240,29 @@
type: 'cascade',
}
],
global_action: [
{
global_action: {
create: {
name: '创建',
icon: 'icon-create',
page: '',
type: 'open',
},
],
local_action: [
{
},
local_action: {
edit: {
name: '编辑',
icon: 'icon-edit',
page: '',
type: 'open',
},
{
delete: {
name: '删除',
icon: 'icon-delete',
path: '',
method: '',
type: 'direct',
}
]
}
}
}
```

Expand Down