配置文档

Duang

Duang::logo

参数描述

示例配置

{
  logo: {
    component: 'HTML',
    args: {
      html: 'Custom Duang logo'
    }
  },

  // 或者使用字符串
  logo: 'Custom Duang logo'
}

Duang::session

参数描述

示例配置

{
  authorize: 'token_validate',
  method: 'post',
  signin: 'https://yourwebsite/signin'
}

Duang::schemes

一个 Scheme 对象的数组，配置这个系统的所有表

示例配置

{
  schemes: [
    {
      key: 'home',
      title: '首页'
    },
    {
      key: 'order',
      title: '订单列表',
      caption: [{
        component: 'Html',
        args: { html: '订单列表' }
      }],
      pageSize: 50,
      where: {
        id: 834934
      },
      require: ['GET_ORDER.MASTER'],
      hidden: false
    }
  ]
}

Scheme

一个 Scheme 可以理解为对一张表的一组操作集合，也可以理解为页面左侧菜单的一个项。

如果 Scheme 是一个字符串，那么会将这个字符串作为 api 的路径，调用这个 api 来获取 Scheme。

参数描述

Scheme::module

默认是 list，这意味着用户点击菜单项时默认使用列表页的模板来渲染这个 Scheme。

某些操作可以修改页面的 module，比如一个 method 为 edit 的 Action 被点击时会将当前页面的 module 改成 editor。 对用户的感受就是点击「编辑」按钮时进入编辑页。

除了 list 和 editor 外，还自带了 custom 模板来嵌入外部页面（因为 Duang 不能满足所有需求，特殊页面需要外嵌）。

custom 的行为是将 params 里的 href 以 iframe 的形式作为页面内容。

Scheme::operations

一个 Action 类型的数组，配置表级别的操作，比如新增，清空

参数描述

示例配置

{
  operations: [
    {
      title: '创建',
      method: 'create',
      target: 'dialog'
    }
  ]
}

Scheme::fields

一个 Output 类型的数组，配置列表需要展示的字段（注：若配置了此字段 Duang 会根据 key 值作为地址发送 API 请求）

参数描述

最简单的列表

{
  "key": "normal-list",
  "title": "配置 - 列表 - 标准",
  "fields": [
    { "key": "id", "title": "ID" },
    { "key": "type", "title": "类型" },
    { "key": "title", "title": "名称" },
    { "key": "description", "title": "描述" }
  ]
}

试一试

列表中使用组件

{
  "key": "components-list",
  "title": "配置 - 列表 - 列表中使用组件",
  "fields": [
    { "key": "id", "title": "ID" },
    { "key": "title", "title": "<font color=red>加特技</font>" },
    { "key": "value", "title": "排序", "sortable": true },
    {
      "key": "description", "title": "悬停提示控件", "component": "TextTip",
      "args": { "tip": "无提示文字", "text": "悬停显示描述" }
    },
    { "key": "img", "title": "图片控件", "component": "Image" }
  ]
}

试一试

Scheme::filters

一个 Input 类型的数组，配置列表的可用筛选条件

参数描述

示例配置

{
  filters: [
    {
      key: 'name',
      title: '名称'
    },
    {
      key: 'createdAt',
      title: '创建时间',
      component: 'Date'
    }
  ]
}

Scheme::inputs

一个 Input 类型的数组，配置记录添加和编辑时需要的字段

参数描述

示例配置

{
  inputs: [
    {
      key: 'title',
      title: '名称'
    },
    {
      key: 'price',
      title: '价格',
      component: 'Number'
    },
    {
      key: 'createdAt',
      title: '创建日期',
      componnet: 'Date'
    },
    {
      key: 'download',
      title: '下载',
      component: 'Custom',
      args: {
        html: '<a href=\'/config/download\' download>点击下载</a>'
      }
    }
  ]
}

Scheme::actions

一个 Action 类型的数组，配置行级别的操作，比如编辑、删除

示例配置

{
  actions: [
    {
      title: '编辑',
      target: 'dialog',
      method: 'edit'
    },

    {
      title: '删除',
      method: 'delete',
      confirm: {
        title: '确认删除？',
        text: '记录删除后不可恢复',
        cancel: {
          text: '(っ °Д °;)っ 再考虑考虑！'
        },
        yes: {
          text: '(╬▔皿▔) 是的！'
        }
      }
    }
  ]
}

Scheme::groupBy

一个字符串数组，描述 fields 中哪些字段是需要聚合的

{
  "key": "mergable-list",
  "title": "配置 - 列表 - 合并单元格",
  "module": "list",
  "groupBy": [ "type" ],
  "actions": [
    { "method": "post", "title": "处理" }
  ],
  "fields": [
    { "key": "type", "title": "Type" },
    { "key": "name", "title": "Name" },
    { "key": "tag", "title": "Tag" },
    { "key": "value", "title": "Value", "aggregate": "sum" }
  ]
}

试一试

Scheme::filterStyle

修改筛选器样式，目前支持 normal 和 floating 两个取值

- key: "the-filter?_=style"
  title: "配置 - 筛选器 - 浮动样式"
  filterStyle: floating
  filters:
    - title: 名称
      key: f1
      args: { width: 80 }
    - title: 描述
      key: f2
      args: { width: 100 }
    - title: 没卵用的字段
      key: x1
      component: DateTime
    - title: 没卵用的字段
      key: x2
      component: Select
      args: { '@options': the-options }
    - title: 没卵用的字段
      key: x3
      component: Radio
      args: { '@options': the-options }
    - title: 没卵用的字段
      key: x4
      component: Checkbox
      args: { '@options': the-options }
  fields:
    - key: id
      title: ID
      sortable: true
    - key: title
      title: 名称
    - key: description
      title: 描述

试一试

Scheme::params

一个对象，从列表进入 Scheme 时候默认带到 URL 上的 params

params 有一些特殊用途：

Scheme::where

一个对象，用于设置默认筛选条件

- key: "the-filter?_=where"
  title: 配置 - 筛选器 - 默认条件
  where:
    f1: 烧
  filters:
    - title: 名称
      key: f1
  fields:
    - key: id
      title: ID
      sortable: true
    - key: title
      title: 名称
    - key: description
      title: 描述

试一试

Action

Action 是用来操作 表/行级数据 的配置，比如：编辑/删除，在 Duang 中用于：

• Scheme::operations
• Scheme::actions

注意：如果同时设置了 require 和 requireField 就必须同时满足这两项条件。

Action::method

定义对字段的操作类型

Action::target

仅当 method=go 时有效，定义新页面的交互形式。

Action::confirm

confirm 用于操作前额外多一次确认交互，比如 删除 操作。

Action 示例配置

{
  title: "删除",
  method: "delete",
  confirm: {
    title: "删除",
    text: "确认删除吗？",
    yes: {
      text: "(╬▔皿▔) 是的！"
    },
    cancel: {
      text: "(っ °Д °;)っ 再考虑考虑！",
      color: "#ccc"
    }
  }
}

Session

Session 用于配置 Duang 系统的授权与跳转登录链接

Session::authorize

授权验证接口 url，Duang 启动时会往这个 url 发送一个根据 method 配置的请求（默认是 post）。返回的数据结构必须包含 permission<List> 字段，示例如下：

{
  "user": {
    "name": "shijn",
    "email": "klamtine@gmail.com"
  },
  "permissions": [
    "GET_ORDER.MASTER",
    "EDIT_ORDER.MASTER"
  ]
}

Session::permission

permission 用于配置首页 scheme 列表对应 scheme 的显示，假设我们有一个 scheme 配置如下：

{
  "scheme": {
    "key": "order",
    "require": [
      "GET_ORDER.MASTER"
    ]
  }
}

调用 authorize 配置返回的数据如下：

{
  "user": {},
  "permissions": [
    "GET_ORDER.DEV",
    "EDIT_ORDER.DEV"
  ]
}

可以看到，authorize 接口返回的 permissions 中并不包含 GET_ORDER.MASTER，因此在首页不会渲染出 key 为 order 的 scheme

Session::signin

配置用户登录的 url，支持 Javascript 表达式，例如：

{
  signin: "${location.origin.replace(/eleme/, 'yourdomain') + '?from=' + encodeURIComponent(location.href)}"
}

当 authorize 接口返回满足以下条件时，页面会跳转到配置的登录链接：

• 接口状态码返回 4xx or 5xx
• 接口返回内容包含 { name: UNAUTHORIZED }

Duang::nav

一个 Output 对象的数组，配置导航栏上的项

默认值

[ { "component": "User" } ]

因为有个叫 User 的 Output 控件，所以默认会显示用户信息。

当主动配置 nav 时会覆盖掉默认配置，如果同时也需要显示用户信息可以手动在配置中把默认项加进去。

示例配置

{
  "nav": [
    {
      "component": "HTML",
      "args": {
        "html": "文字"
      }
    }
  ]
}

DynamicAction

动态动作

action 的取值： success, failure, confirm, replace, assign, open, go, get, put, delete, post, patch