列表编辑器

本组件的核心作用是可视化编辑生成一个 Array 数据，Array 中每一项的数据都是从预设的 模块库 中生成。KMS 内置的事件编辑器，字段编辑器等诸多编辑器都是使用本组件开发。

注意

组件需要通过 API 接口提供模块配置描述后，方可正常使用
列表编辑器在 视图 和 表单 中交互和配置略有差异

列表编辑器所需要的一项核心配置就是 模块配置描述，它是一段 json：

json

{
  "模块id": {
    "editor": {
      // 在编辑器中所需要的相关配置
    },
    "profile": {
      // 对模块字段的描述，用于指示编辑器如何编辑字段
    }
  },
  ...
}

示例

假设有以下模块描述配置：

json

{
  "mod1": {
    "editor": {
      "title": "模块1",
      "labelWidth": 80,
      "order": 1
    },
    "profile": {
      "id": {
        "type": "integer",
        "label": "编号",
        "required": true,
        "default": 0,
        "order": 1
      },
      "name": {
        "type": "string",
        "label": "名称",
        "default": "",
        "order": 2
      }
    }
  },
  "mod2": {
    "editor": {
      "title": "模块2",
      "order": 2
    },
    "profile": {
      "intro": {
        "type": "string",
        "label": "介绍",
        "default": "",
        "order": 1
      }
    }
  }
}

通过列表编辑器，可以产生以下数组数据：

[
  {
    "$id": "mod1",
    "id": 1,
    "name": ""
  },
  {
    "$id": "mod1",
    "id": 2,
    "name": "test 2"
  },
  {
    "$id": "mod2",
    "intro": "这是模块2的配置"
  }
]

布局

别表编辑器布局分为三列，最左列是模块列表，中间列是模块实例，右侧列是选中实例的编辑区域。

根字段

模块配置描述 中每个模块都需要有两个根字段：editor 和 profile：

editor：描述当前模块在模块列表中的 UI 显示；
profile：描述当前模块有哪些字段，以及字段如何编辑；

editor

描述当前模块在模块列表中 UI 显示，包括三个可用字段：

editor.title

表示模块在列表编辑器中的显示的名称，必选

editor.labelWidth

表示模块的实例编辑区域中，label 的宽度，默认 80，单位 px

editor.order

表示模块在模块列表中的顺序，需要是一个有限的数字，越大越靠后，必选

editor.icon

模块在列表中显示的 icon，可选值包括：

字号: 小大

展开

fc-pencil2
fc-paint-format
fc-image1
fc-images
fc-music1
fc-film1
fc-dice
fc-pacman
fc-mic
fc-book1
fc-books
fc-files-empty
fc-file-picture
fc-stack
fc-folder
fc-folder-open1
fc-barcode
fc-qrcode1
fc-cart
fc-calculator1
fc-phone1
fc-location
fc-map1
fc-calendar1
fc-drawer
fc-box-add
fc-box-remove
fc-download1
fc-upload
fc-floppy-disk
fc-database1
fc-undo2
fc-redo2
fc-bubbles4
fc-users
fc-user-plus
fc-user-minus
fc-user-tie
fc-quotes-left
fc-binoculars
fc-search1
fc-key2
fc-equalizer
fc-equalizer2
fc-cog1
fc-pie-chart1
fc-stats-bars2
fc-gift
fc-fire
fc-lab
fc-clipboard
fc-list-numbered
fc-list1
fc-list2
fc-menu3
fc-cloud-download
fc-cloud-upload
fc-earth
fc-link
fc-attachment
fc-eye
fc-eye-blocked
fc-bookmarks
fc-sun
fc-contrast
fc-star-empty
fc-star-half
fc-arrow-up
fc-arrow-down
fc-checkbox-checked
fc-radio-checked2
fc-filter1
fc-page-break
fc-table2
fc-insert-template
fc-paragraph-left
fc-embed2
fc-terminal
fc-github
fc-asterisk
fc-plus
fc-question
fc-minus
fc-music
fc-search
fc-envelope-o
fc-user
fc-film
fc-th-large
fc-cog
fc-gear
fc-trash-o
fc-download
fc-arrow-circle-o-down
fc-arrow-circle-o-up
fc-refresh
fc-lock
fc-volume-up
fc-font
fc-edit
fc-pencil-square-o
fc-plus-circle
fc-minus-circle
fc-question-circle
fc-info-circle
fc-arrow-left
fc-arrow-right
fc-arrow-up1
fc-arrow-down1
fc-exclamation-circle
fc-exclamation-triangle
fc-warning
fc-chevron-up
fc-chevron-down
fc-thumbs-o-up
fc-thumbs-o-down
fc-unlock
fc-certificate
fc-gamepad
fc-puzzle-piece
fc-apple
fc-windows
fc-android
fc-weibo
fc-cubes
fc-database
fc-git
fc-qq
fc-wechat
fc-weixin
fc-paper-plane
fc-send
fc-header
fc-calculator
fc-toggle-on

profile

描述当前模块有哪些字段，以及字段如何编辑；profile 下属节点是字段名，每个字段名有各自的描述。比如：

json

{
    "editor": {
        ...
    },
    "profile": {
        "field1": {
            type: "string",
            ...
        },
        "field2": {
            type: "number"
        }
    }
        
}

后续为了简明表示，用 profile 指代字段描述结构，比如 profile.type 指代的是每个字段描述中的 type 字段信息。

通用基本配置：profile.type profile.label profile.placeholder profile.default profile.order profile.required
通用附加配置：profile.tooltip profile.alert profile.postfix profile.suffix

profile.type

必选，表示当前字段的编辑类型。不同的编辑类型会有一些独有的配置项目：

string
表示字段编辑类型为字符串，默认显示的 UI 为一个输入框，profile.maxlength 默认 64。
特别的，当 profile.enum 设置有内容的时候，将按照 profile.enum 配置显示为单选框或选择器（取决于 enum 的元素数量，不超过3个显示为单选框，否则显示为选择器，如果设置 profile.radio 为 true 则强制显示为单选框）
array
表示字段类型为数组，此时必须同步设置 profile.enum 并且 UI 将渲染为多选框；
textarea
字段类型为多行文本，UI 将显示为一个 textarea 编辑框，支持以下配置：
- profile.minRows textarea 编辑框显示的最小行数，默认 4
- profile.maxRows textarea 编辑框显示的最大行数，默认 20
- profile.maxlength 默认 512
integer
表示字段编辑类型为整数。其 UI 为可输入整数的数字输入框，支持以下配置：
- profile.min 可输入范围的最小值，默认 0
- profile.max 可输入范围的最大值，默认 Infinity
- profile.step 每次调整最小步长，默认 1
- profile.maxlength 最大可输入的字符长度，默认 10
number
表示字段编辑类型为数字。其 UI 为可输入数字的输入框。支持以下配置：
- profile.min 可输入范围的最小值，默认 0
- profile.max 可输入范围的最大值，默认 Infinity
- profile.step 每次调整最小步长，默认 0.1
- profile.maxlength 最大可输入的字符长度，默认 10
slider
表示字段编辑类型为数字滑杆，即有限输入的数字组件。支持以下配置：
- profile.marks 滑杆刻度配置，可选
- profile.min 滑杆最小值，默认 1
- profile.max 滑杆最大值，默认 100
- profile.step 滑杆调整步进，默认 1，可选 null（仅可选配置的 marks 刻度值）
- profile.dots 是否只能拖到刻度上，默认 false
boolean
表示字段编辑类型为布尔型，UI 显示为一个开关。支持以下配置：
- profile.checked 打开时 UI 组件上显示的文本，默认空
- profile.unChecked 关闭时 UI 组件上显示的文本，默认空
date
表示字段编辑类型为日期（不含时间），字段值是毫秒时间戳，显示格式为 YYYY-MM-DD
data-time
表示字段编辑类型为日期+时间，字段值为毫秒时间戳，显示格式为 YYYY-MM-DD HH:mm:ss
time
表示字段编辑类型为时间，字段值为字符串，可以配置格式化模板：
- profile.format 时间格式化模板，默认 HH:mm:ss
month
表示字段编辑类型为月份，字段值为字符串，固定格式为 YYYY-MM
timezone
表示字段编辑类型为时区信息，字段值为时区字符串，比如 Asia/Shanghai。其 UI 为单选器。
code
表示字段编辑类型为 JavaScript 代码，字段值为字符串（只含有 code function body）。支持以下配置：
- profile.codePrefix 代码片段前缀提示内容，比如 function( data ) {
- profile.codeSuffix 代码片段后缀提示内容，比如 }
- profile.minRows 代码区域默认显示的最小行数，默认 2
- profile.maxRows 代码区域可以显示的最大行数，默认 20
- profile.onlyProfessionalMode 是否仅仅允许高级编辑模式，默认 false
- profile.placeholder 将作为编辑区域的占位提示 / 浮动提示 / 高级模式左侧提示之用
hide
表示字段为隐藏类型，不支持编辑，通常用于传递一些用户不需要关心和修改的数据。
ratio
表示字段编辑类型为数字对，字段值为 [Number, Number]，支持以下配置：
- profile.separator 两个整数的连接符（分隔符）仅用来 UI 显示之用，默认 ~
- profile.min 可输入的最小数字，默认 0
- profile.max 可输入的最大数字，默认 Infinity
- profile.step 可调整的数字步进，默认 1
- profile.maxlength 数字最大长度，默认 4

profile.label

字段编辑项目的描述文本，显示在可编辑元素前面，用来指示编辑的内容概要。为了显示美观，建议 label 设置不超过 4 个中文，或者 6 个英文字母，如果超过则可能折行显示。

profile.placeholder

字段的占位提示文本，通常含有编辑框的编辑类型都支持 placeholder，默认值为 profile.label，通常用来补充说明更多编辑信息。

profile.enum

备用枚举选项。enum 格式为 [{ label, value }...] 或者是一个 url。

如果是 url 格式，则会从对应的 url 地址获取内容（Get），url 资源需要返回 [{ label, value }...] 格式数据，任何错误都会被忽略；
如果使用的是 KMS DSI 的数据，请使用 /dsi/data-key?params 格式，比如 /dsi/users?label=name&value=userid；

其 UI 展示逻辑如下：

如果 profile.type 为 array 则将展示为多选框组件；
如果 profile.type 不为 array 则
- profile.radio 设置为 true 或者 profile.enum 元素不超过 3 个，显示为单选框
- 否则，显示为单选器（下拉选择）

json

{
    "type": "string",
    "enum": [
        { label: "显示", value: "值" },
        ...
    ]
}

profile.radio

需要配合 profile.enum 使用，当 profile.radio 设置为 true 时，UI 将强制显示为单选框。

profile.default

字段的默认值，需要跟 profile.type 有呼应关系，比如 profile.type 为 string 时，default可以设置为空字符串： profile.default: ""，如果 profile.type 为 array 时，default可以设置为空数组： profile.default: []

数据类型处理

这里的默认值会在实际渲染时以 deepCopy 的方式使用，不用特意区分引用型和数值型。

profile.order

字段编辑位置的顺序，即在编辑区域的排序。数字越小越靠前。

profile.required

表示字段是否必选，可以设置为以下值：

true / false: 默认 false
<string>：任何非空字符串，都将被视为字段必选，同时在用户没有选择时作为提示内容

profile.marks

滑杆类UI组件的刻度值配置，支持以下格式，即数字字面量作为 key，value 为显示的刻度文本：

json

"marks": [
    "1": "1%",
    ...
]

字段编辑组件右侧显示的帮助提示（UI 显示为）并在鼠标浮动上后提示 profile.tooltip 配置的文本信息。

profile.alert

字段编辑组件右侧显示的警告提示（UI 显示为）并在鼠标浮动上后提示 profile.alert 配置的文本信息。

profile.postfix

字段编辑组件末尾提示文本，如果编辑组件未占满一行，则提示文字在同一行开始显示。

profile.suffix

字段编辑组件末尾提示文本，会强制独立一行开始显示。

列表编辑器 ​

布局 ​

根字段 ​

editor ​

editor.title ​

editor.labelWidth ​

editor.order ​

editor.icon ​

profile ​

profile.type ​

profile.label ​

profile.placeholder ​

profile.enum ​

profile.radio ​

profile.default ​

profile.order ​

profile.required ​

profile.marks ​

profile.tooltip ​

profile.alert ​

profile.postfix ​

profile.suffix ​

列表编辑器

布局

根字段

editor

editor.title

editor.labelWidth

editor.order

editor.icon

profile

profile.type

profile.label

profile.placeholder

profile.enum

profile.radio

profile.default

profile.order

profile.required

profile.marks

profile.tooltip

profile.alert

profile.postfix

profile.suffix