# epage-core核心模块

import {
  Worker,       // 创建Worker
  Rule,         // 表单校验规则
  Event,        // 处理事件外放，如实例与外部的联动
  Store,        // 统一内部状态管理
  Logic,        // 内部表单关联，依赖逻辑解析
  Context,      // 用于创建组件内部上下文，如按钮点击后可以loading
  Script,       // 用于执行用户自定义脚本，可结合Context模块获取内部状态
  TypeBuilder,  // 数据类型解析
  Dict,         // 数据字典，管理widget间公用数据
  API,          // 配合Dict使用
  helper,       // 工具函数
  constant,     // 静态常量，默认值等
  schema,       // schema基础类及内置widget默认schema
  style,        // 样式解析模块
  hook,         // 设计器可通过插件形式注入hook，以定制设计器
  render,       // 根据主流框架提供的Render模块，提供 { VueRender, ReactRender }
  drag          // 拖拽模块，一般用于容器widget，是容器有可拖拽性
} from 'epage-core'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Store

设计器与渲染器的共享状态管理模块

示例：

const epage = new Epage({
  el,
  schema,
  pc: {
    component: entry,
    widgets,
    Render: render.VueRender
  }
})
console.log(epage.store) // 内部状态

1
2
3
4
5
6
7
8
9
10

# `store.getFormData()`

返回用户最终输入的表单值，{[key]: value}形式。一般最终渲染页面给用户使用的场景。返回值会去除非表单字段数据，用于获取输入的表单存入数据库使用，注意同getModel的不同

# `store.updateModel(model, useName)`

针对表单，将model对象值赋值到表单。model应为为扁平化对象，有以下两种形式：

{[schema.key]: value}: 表示以schema.key为model的key进行赋值，此时第二个参数useName不填写或为false即可
{[schema.name]: value}: 与以上相反，第二个参数useName应为false

示例1： ： {[schema.key]: value}

// 假设 sheme 为 {key: 'kGZLjx5Vx', name: 'dept', ...}
store.updateModel({kGZLjx5Vx: 'it'})
store.getFormData() // {dept: 'it'}

1
2
3

示例2： ： {[schema.name]: value}

// 假设 sheme 为 {key: 'kGZLjx5Vx', name: 'dept', ...}
store.updateModel({dept: 'it'}, true)
store.getFormData() // {dept: 'it'}

1
2
3

# `store.getModel(key?:string)`

返回运行时用户输入的表单值对象，{[key]: value}形式，一般开发widget时使用。直接修改返回的对象的属性会直接同步渲染视图。如果传入可选参数key，则取指定key对应的model数据

# `store.resetModel()`

重置表单model为缺省值，缺省值：

string: ''
number: 0
boolean: false
array: []
object: {}

# `store.getFormRules()`

获取表单扁平化的以schema.key为key的规则集合

# `store.getSchema()`

返回根schema，与getRootSchema()不同之处是，当前方法获取的schema更纯净，如果希望获取schema并保存到数据库，可以用此方法

# `store.getRootSchema()`

返回根节点schema，包含动态数据及节点临时数据等。开发widget时，希望获取运行时根节点schema状态，可以用此

# `store.getSelectedSchema()`

设计模式下返回当前选中的widget对应的schema

# `store.getState()`

获取内部响应式状态

# `store.getTab()`

设计模式下工作区中当前tab状态

返回: 'design' | 'preview' | 'logic' | 'schema'

# `store.getWidgets()`

返回当前已经注册的widget分组列表

[{
  title: '基础',
  key: 'base',
  widgets: [
    { Setting, View, Schema }, // input widget or others
    // ...
  ]
}]

1
2
3
4
5
6
7
8

# `store.getFlatSchemas()`

返回扁平化rootSchema之后的集合，{ks9s9cs: {widget: 'input', ...}, ...}，key为所有子schema.key

# `store.getFlatRules()`

返回与getFlatSchemas()对应的规则集合

# `store.isSelected()`

返回当前是否有选中的widget

# `store.getFlatWidgets()`

返回已注册的扁平化widget集合。{input: {Setting, View, Schema}}

# `store.getSettingWidget()`

设计模式下返回当前选中的widget的设置表单

# `store.getWidgetsValidators()`

获取已经注册的widgets中对应的规则集合，如：

{
  input: [StringRule, EmailRule, URLRule, RegExpRule],
  // ...
}

1
2
3
4

以上表示输入框（input）widget的校验规则可以有：字符串类型规则，邮箱规则，URL规则，正则规则4种类型

# `store.updateTab(tab)`

tab：可选 design、preview、logic、schema4个面板

更新设计模式下工作面板的tab

# `store.initRootSchema(rootSchema)`

初始化schema

# `store.initWidgets(widgets)`

注册widgets库

console.log(widgets)
[{
  name: '基础',
  key: 'base',
  widgets: [
    InputWidget, // { Setting, View, Schema }
    // ...
  ]
}]

1
2
3
4
5
6
7
8
9

# `store.updateMode(mode)`

更新渲染模式

参数	类型	默认值	可选值
mode	String	`edit`	`edit`、`display`

# `store.addWidget(widget)`

设计模式在工作区添加一个widget

参数	类型	是否必填	默认值	可选值
widget	String或Schema	是	无	无

示例：

store.addWidget('input') // 根据widget类型添加输入框
// 或传入schema实例
store.addWidget({ key: 'kxxx', widget: 'input', ...others}) // 根据schema实例添加

1
2
3

# `store.copyWidget(key)`

设计模式在工作区添加一个widget，同时将新widget设置为选中模式。key为待复制的widget对应的唯一key

参数	类型	是否必填	默认值	可选值
key	String	是	无	无

# `store.removeWidget(key)`

设计模式在工作区删除为指定key对应的widget的。

参数	类型	是否必填	默认值	可选值
key	String	是	无	无

# `store.selectWidget(key)`

设计模式在工作区选中指定key对应的widget。

参数	类型	是否必填	默认值	可选值
key	String	是	无	无

# `store.deselectWidget()`

设计模式在工作区取消选中指定key对应的widget。

# `store.updateWidgetType(key, type)`

更改指定key的widget返回值类型type。

参数	类型	是否必填	默认值	可选值
key	String	是	无	无
type	String	是	无	无

# `store.updateWidgetOption(key, option)`

更改指定key的widget指定属性。

参数	类型	是否必填	默认值	可选值
key	String	是	无	无
option	Object	是	无	无

如更改按钮(button)的文本及按钮类型

store.updateWidgetOption(schema.key, {text: '提交', type: 'primary'})

# `store.addWidgetChild(key, index, child)`

在指定key的widget中添加一个子元素

参数	类型	是否必填	默认值	可选值
key	String	是	无	无
index	Number	是	无	无
child	Object	是	无	无

给gridwidget中指定位置index添加单元格

store.addWidgetChild(schema.key, 1, {span: 12, list: []})

# `store.removeWidgetChild(key, index)`

指定key的widget中删除指定位置子元素

参数	类型	是否必填	默认值	可选值
key	String	是	无	无
index	Number	是	无	无

给gridwidget中指定位置index删除单元格

store.removeWidgetChild(schema.key, 1)

# `store.moveWidgetChild(key, preIndex, index)`

指定key的widget中从指定位置preIndex移动到新位置index

参数	类型	是否必填	默认值	可选值
key	String	是	无	无
preIndex	Number	是	无	无
index	Number	是	无	无

如互换grid索引为1和2的子元素

store.moveWidgetChild(schema.key, 1, 2)

# `store.updateWidgetByModel(model)`

表单的值变化联动绑定该值逻辑关系的其他widget属性变化。一般用于值逻辑绑定

参数	类型	是否必填	默认值	可选值
model	Number	是	无	无

# `store.updateWidgetByEvent(key, eventType)`

表单的自定义事件响应联动绑定该事件逻辑关系的其他widget属性变化。一般用于事件逻辑绑定

参数	类型	是否必填	默认值	可选值
key	String	是	无	无
eventType	String	是	无	无

如逻辑关系中已经绑定了按钮的点击事件，并当前某些表单字段隐藏，指向一下即可

store.updateWidgetByEvent(schema.key, 'click')

# `store.initRule(rootSchema)`

初始化所有widget的规则

参数	类型	是否必填	默认值	可选值
rootSchema	Object	是	无	无

# `store.addRule(key)`

为指定widget添加一个空规则，添加后可以再界面中选择规则类型

参数	类型	是否必填	默认值	可选值
key	String	是	无	无

# `store.removeRule(key, index)`

为指定widget删除指定位置index规则，与store.addRule(key)反操作

参数	类型	是否必填	默认值	可选值
key	String	是	无	无
index	Number	是	无	无

# `store.updateRule(key, index, rule)`

为指定widget更新指定位置index规则

参数	类型	是否必填	默认值	可选值
key	String	是	无	无
index	Number	是	无	无
rule	Object	是	无	无

rule格式如下，详情参考async-validator (opens new window)

{ message: 'required', type: 'email' }

# `store.addLogic(logic)`

添加一项逻辑规则

参数	类型	是否必填	默认值	可选值
logic	Object	是	无	无

logic格式如下，表示key为ktEAFSAXl发生点击时，使key为kDFnqbKSW的widget隐藏，取消禁用

console.log(logic)
{
  type: "event",
  key: "ktEAFSAXl",
  action: "click",
  effects: [{
    "key": "kDFnqbKSW",
    "properties": [
      { key: "hidden", value: true },
      { key: "disabled", value: false }
    ]
  }]
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# `store.updateLogic(index, logic)`

更新一项逻辑规则，logic参见store.addLogic(logic)

参数	类型	是否必填	默认值	可选值
index	Number	是	无	无
logic	Object	是	无	无

# `store.removeLogic(index)`

删除一项逻辑规则

参数	类型	是否必填	默认值	可选值
index	Number	是	无	无

# Rule

规则模块，实例化当前schema及子孙schema校验规则。

# 静态方法

set 注册可用规则

// rules/index.js
export { default as PhoneRule } from './Phone'

// rules/Phone.js
export default class PhoneRule {
  static get type () {
    return 'phone'
  }

  static get name () {
    return '手机号'
  }
  // ...
}

// demo.vue
import customRules from './rules'

Rule.set(customRules)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 静态属性

rules 内置及自定义规则

// Epage.Rule.rules
{
  email: EmailRule,
  string: StringRule,
  number: NumberRule,
  pattern: PatternRule,
  url: URLRule
}

1
2
3
4
5
6
7
8

const rule = new Rule(schema)
// rules 请参考 https://github.com/yiminghe/async-validator
const { rules } = rule

// rules
console.log(rules)
[
  { required: false, type: string, message: '字符串类型' },
  // ...
]

1
2
3
4
5
6
7
8
9
10

# Worker

内部Worker模块，是对Web Worker (opens new window)的二次封装。目的是执行用户自定义脚本，避免阻塞主流程脚本执行，另一方面避免自定义脚本恶意操作DOM等。

# 使用

postMessage发送消息，消息体有以下字段：

字段名	类型	必填	可选值	备注
`action`	`String`	否	`custom`、`fetch` 或 `tableFetch`	默认`fetch`
`data`	`Array`	是	无	待处理的列表数据，通常从接口返回
`fn`	`String`	否	无	用户自定义脚本，处理`data`结果

onmessage接受消息，消息体有以下字段：

字段名	类型	备注
`message`	`String`	`fn`数据转换错误消息
`success`	`Boolean`	`fn`数据转换是否错误
`data`	`Array`	`fn`数据转换的结果

worker内可用变量

字段名	类型	备注
`data`	`any`	服务端返回的数据
`util`	`Object`	注入到worker内部的常用工具方法

util工具方法如下：

util.convert2kv(data, fn, children) 转换服务端返回的data的数据为{key,value}形式的数组

参数	类型	备注
`data`	`any`	服务端返回的数据
`fn`	`function`	用户自定义方法
`children`	`string`	对于需要递归的数据，定义递归的字段

假设schema.option.url返回如下格式：

{
  list: [
    { id: 1, name: 'tom', items: [
      { id: 2, name: 'jack', items: [] },
      // ...
    ]},
    // ...
  ]
}

1
2
3
4
5
6
7
8
9

schema.option.adapter可以这么写

return util.convert2kv(data.list, function(item) {
  return { key: item.id, value: item.name }
}, 'items')

1
2
3

转换后

[
  { key: 1, value: 'tom', children: [
    { key: 2, value: 'jack', children: [] },
    // ...
  ]},
  // ...
]

1
2
3
4
5
6
7

# 示例

目标：开发一个checkboxwidget，要求支持接口获取可选项

假设实际接口返回的数据格式为：

{
  message: 'success',
  data: [{ id: 12, name: '技术部' }, // ... ]
}

1
2
3
4

实现：

定义可选项数据结构：

// 期望转换后的数据格式
[{ key: 12, value: '技术部' }, ...]

1
2

提供用户可配置URL地址的字段
widget内发送请求，转换接口数据（由用户定义脚本转换）

转换脚本，这里称为fn：

return data.data.map(function (item) {
  return { key: item.id, value: item.name }
})

1
2
3

注意

第一个data为接口返回的http body体，是注入到适配入口、用户可直接使用的全局变量
第二个data为http body体的data字段
脚本以return结果为返回（内部通过new Function实现，第一个data变量即为函数参数）

widget内部引用worker，并显示到widget视图上

先实例化worker

const worker = new Epage.Worker()

内部发送请求，将请求结果结合配置的自定义脚本(fn)，放到worker中执行

worker.postMessage({
  action: 'fetch', // 可选 'fetch' | 'tableFetch'
  data: response || {},
  fn: `return data.data.map(function (item) {
  return { key: item.id, value: item.name }
})`
})

1
2
3
4
5
6
7

获取worker执行结果，将结果展示到widget 的 View上

// 接受消息
worker.onmessage = function (e) {
  const {
    message, // 错误消息
    success, // 是否执行成功 布尔类型
    data     // 处理后返回的数据
  } = e.data
}

1
2
3
4
5
6
7
8

# Event

事件模块主要用于监听Epage内部widget事件。最终实现由渲染器(Render)开发者去做。使用widget时可以监听特定widget暴露的事件。

# 渲染器(Render)开发者

每个widget希望被监听的事件需要被暴露出来。以epage-iview渲染模块的button暴露click事件为例：

src/widgets/button/View.vue文件

<template>
<Button @click="event('on-click', ...arguments)">
</template>
<script>
import viewExtend from 'epage-iview'

export default {
  extends: viewExtend
}
</script>

1
2
3
4
5
6
7
8
9
10

TIP

通过内部封装的viewExtend注入的event方法，进行事件暴露。约定为，第一个参数应为on-开始的事件名，后面为事件默认参数

其他组件库的事件封装需要开发者自行实现

# 渲染器(widgets)使用者

示例(添加、移除监听)

import { render } from 'epage-core'
import widgets, { entry } from 'epage-iview'

const schema = {} // mock schema
const epage = new render.VueRender({el, widgets, schema, component: entry })
// on 添加监听
epage
  .on('k17U0aTQ4', 'change', e => {
    console.log('changed: ', e)
  })
  .on('k223skjs3', 'click', e => {
    console.log('clicked: ', e)
  })

// off 移除监听
epage
  // 移除 schema.key 为 klkasjd 的change事件中方法为this.onChange的监听
  // 移除指定事件的指定方法，不能为匿名为函数
  .off('klkasjd', 'change', this.onChange)
  // 移除 schema.key 为 k17U0aTQ4 的所有 change事件监听
  .off('k17U0aTQ4', 'change')
  // 移除 schema.key 为 k223skjs3 的所有事件监听
  .off('k223skjs3')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# schema

用于实例化 schema 对象的的基础类模块。内置以下基础类：

基础类及实例关系：

import { schema } from 'epage-core'
const { BaseSchema, FormSchema, RootSchema } = schema
const { input, grid } = widget

FormSchema instanceof BaseSchema   // true
RootSchema instanceof grid.Schema  // true
GridSchema instanceof BaseSchema   // true
input.Schema instanceof FormSchema // true

1
2
3
4
5
6
7
8

##构造函数参数##

// 以FormSchema为例
new FormSchema({ schema, widgets, clone })

1
2

schema 关于定义请访问schema定义，为空则为创建新的schema
widgets 是已经注册的widgets集合，通过实例化传参时自动注册，如：

import { render } from 'epage-core'
import widgets, { entry } from 'epage-iview'

new Epage({
  el,
  schema,
  pc: {
    widgets, // 对应widgets
    component: entry,
    Render: render.VueRender
  }
})

1
2
3
4
5
6
7
8
9
10
11
12

clone 是否执行深克隆，为true时，除schema会深度复制，当前及子schema也会重新生成key

目前内置三种基础Schema类：

# BaseSchema

基础Schema类。所有Schema都应继承此类

属性

属性	类型	初始值	用处
`key`	string	`helper.randomStr()`的结果	全局唯一key
`widget`	string	--	以何种widget渲染
`hidden`	boolean	`false`	是否隐藏
`option`	object	`{}`	widget自定义属性

方法

create(props): 用于实例化创建schema，参数为构造函数透传的参数

# FormSchema

作为表单的Schema基础类，继承至BaseSchema。推荐所有表单widget的Schema都应继承此类

属性

具体字段可以参考schema规范

方法

create(props): 复写BaseSchema的create方法。用于实例化创建schema，参数为构造函数透传的参数

# RootSchema

schema作为树状结构的对象，是支持嵌套的，根节点schema由RootSchema实例化而来。关于schema定义参考schema规范

# TypeBuilder

根据schema.type值生成表单默认值，如果有新值，默认值将被覆盖

const type = new TypeBuilder()

默认值列表：

类型	默认值	备注
`string`	`''`
`boolean`	`false`
`number`	`0`
`array`	`[]`
`object`	`{}`
`null`	`null`
`array<string>`	`[]`
`array<number>`	`[]`
`array<boolean>`	`[]`

# constant

用于常用常量生成。

const { defaultSchema, modes } = constant
// 引用避免恶意更改
const schema = defaultSchema()
const allModes = modes()

1
2
3
4

基础widget集合，不包含View，View部分由用户针对不同组件库单独实现。

console.log(widget)
/*
{
  autoComplete: Module{ Schema },
  button: Module{ ... },
  cascader: Module{ ... },
  checkbox: Module{ ... },
  datePicker: Module{ ... },
  formButton: Module{ ... },
  grid: Module{ ... },
  input: Module{ ... },
  inputNumber: Module{ ... },
  radio: Module{ ... },
  rate: Module{ ... },
  select: Module{ ... },
  slider: Module{ ... },
  switch: Module{ ... },
  textarea: Module{ ... },
  timePicker: Module{ ... },
  upload: Module{ ... }
}
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# helper

常用工具方法

# getRootSchemaChildren(schema: object)

获取根schema下直接子schema。预期结果为：schema[0].list

参数：
- schema：根节点schema
返回：

[]：根直接子schema列表

例子一：

const schema = {
  key: 'aa',
  widget: 'grid',
  container: true,
  children: [
    { span: 24, list: [
      { key: 'bb', widget: 'input', ... },
      { key: 'cc', widget: 'select', ... }
    ]}
  ]
}
const list = getRootSchemaChildren(schema)
console.log(list)
/*
[
  { key: 'bb', widget: 'input', ... },
  { key: 'cc', widget: 'select', ... }
]
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

例子二：

const schema = {
  key: 'aa',
  widget: 'grid',
  contianer: true,
  children: []
}
const list = getRootSchemaChildren(schema2)
console.log(list)
// []

1
2
3
4
5
6
7
8
9

# getParentListByKey(key: string, scopedSchema: object)

在指定scopedSchema范围内，通过指定key获取同级schema列表

参数：
- key：schema唯一标识
- scopedSchema：一般container: true，在children内查找子孙schema.key = key的同级列表
返回：

[]: schema.key = key时的schema列表

例子：

const schema = {
  key: 'aa',
  widget: 'grid',
  container: true,
  children: [
    { span: 24, list: [
      {
        key: 'bb',
        widget: 'grid',
        container: true,
        children: [
          { key: 'bb01', widget: 'select', ... },
          { key: 'bb02', widget: 'grid', ... }
        ]
      },
      { key: 'cc', widget: 'select', ... }
    ]}
  ]
}

const list = getParentListByKey('bb01', schema)
console.log(list)
/*
[
  { key: 'bb01', widget: 'select', ... },
  { key: 'bb02', widget: 'grid', ... }
]
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# getIndexByKey(key: string, schemaList: array)

在schema 列表中找到与指定key对应schema在列表中的索引值

参数：
- key： schema唯一标识
- schemaList：schema 列表
返回：

index: number：缺省值-1

例子：

const list = [
  {
    key: 'bb',
    widget: 'grid',
    container: true,
    children: [
      { key: 'bb01', widget: 'select', ... },
      { key: 'bb02', widget: 'grid', ... }
    ]
  },
  { key: 'cc', widget: 'select', ... }
]
getIndexByKey('cc', list) // 1
getIndexByKey('dd', list) // -1
getIndexByKey('bb01', list) // -1
getIndexByKey('cc', []) // -1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# replaceSchemaKey(schema: object)

递归重新生成指定schema的key及name字段，常用于widget复制操作，新替换的name字段与key值一样

参数：
- schema：可以容器widget也可以不是
返回：

schema: object: 返回入参的schema对象，但key及name字段已重新随机生成。

TIP

此方法会直接递归修改入参的schema

例子：

const schema = {
  key: 'aa',
  widget: 'grid',
  container: true,
  children: [
    { span: 24, list: [
      { key: 'cc', widget: 'select', ... }
    ]}
  ]
}
const result = replaceSchemaKey(schema)
console.log(result === schema)
// true
console.log(result)
/*
{
  key: 'kxxxx1',
  name: 'kxxxx1'
  widget: 'grid',
  container: true,
  children: [
    { span: 24, list: [
      { key: 'kxxxx2', name: 'kxxxx2', widget: 'select', ... }
    ]}
  ]
}
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# flattenSchema(schema: object)

递归以子孙key为key拍平schema

参数：
- schema：一般为容器schema
返回：

result: object: 扁平化的schema映射

例子：

const schema = {
  key: 'aa',
  widget: 'grid',
  container: true,
  children: [
    { span: 24, list: [
      {
        key: 'bb',
        widget: 'grid',
        container: true,
        children: [
          { key: 'bb01', widget: 'select', ... },
          { key: 'bb02', widget: 'grid', ... }
        ]
      },
      { key: 'cc', widget: 'select', ... }
    ]}
  ]
}
const result = ecursiveSerialize(schema)
console.log(result)
/*
{
  bb: {
    key: 'bb',
    widget: 'grid',
    container: true,
    children: [
      { key: 'bb01', widget: 'select', ... },
      { key: 'bb02', widget: 'grid', ... }
    ]
  },
  cc: { key: 'cc', widget: 'select', ... },
  bb01: { key: 'bb01', widget: 'select', ... },
  bb02: { key: 'bb02', widget: 'grid', ... }
}
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在已注册的widgets中，找到指定widget的Schema.type

参数：
- flatWidgets：已注册且扁平的widgets集合
- widget：schema.widget字段
返回：

result: string|array: widget的Schema.type

例子：

const flatWidgets = {
  input: [input widget module],  // { View, Setting, Schema }
  checkbox: [checkbox widget module],  // { View, Setting, Schema }
  // ...
}
const inputType = getWidgetType(flatWidgets, 'input')
const checkboxType = getWidgetType(flatWidgets, 'checkbox')
console.log(inputType) // 'string'
console.log(checkboxType) // ['array<string>', 'array<number>']

1
2
3
4
5
6
7
8
9

TIP

type值请参考指定widget的Schema定义

# setKeyAndName(schema: object, clone, dynamic)

检查schema.key及schema.name有效性并适当设置

参数：
- schema：可以容器widget也可以不是
- clone：布尔值，是否进行克隆schema，默认false
- dynamic：布尔值，是否为用户动态加减类型组件，默认false
返回：无
例子：

const schema1 = { key: '', widget: 'input', ... }
setKeyAndName(schema)
console.log(schema)
// { key: 'kxxxx', name: 'kxxxx', widget: 'input', ... }

const schema2 = { key: 'k22', widget: 'input', ... }
setKeyAndName(schema2)
console.log(schema2)
// { key: 'k22', name: 'k22', widget: 'input', ... }

const schema3 = { key: 'k22', name: 'test', widget: 'input', ... }
setKeyAndName(schema3)
console.log(schema3)
// { key: 'k22', name: 'test', widget: 'input', ... }

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# getFormData(model: object, rootSchema)

检查schema.key及schema.name有效性并适当设置

参数：
- model：为store.state.model
- rootSchema：根节点schema
返回：平铺以schema.name为key的form data对象，可直接提交给服务端

# getSchema(rootSchema)

根据rootSchema返回深复制的rootSchema且优化无用字段，如dynamicData

参数：
- rootSchema：根节点schema
返回：根据rootSchema返回深复制的rootSchema且优化无用字段，如dynamicData

# mergeWidgets(widgets)

融合自定义wigets库与内置widgets库，相同分组的key合并将不成功，相同schema.widget的widget也会被忽略

参数：
- widgets：widgets默认导出的widget分组列表，如：[{ title: '表单', key: 'iview-form', widgets: [inputWidget, ...]}]
- 其余参数为待合并的widgets组，数据结构参考widgets参数
返回：合并后的多个分组widgets

融合自定义单一wiget与内置widgets库，相同schema.widget的widget也会被忽略，注意与上一个方法的不同

参数：
- widgets：widgets默认导出的widget分组列表，如：[{ title: '表单', key: 'iview-form', widgets: [inputWidget, ...]}]
- widget: 单个自定义widget对象，{ View, Schema, Setting }
返回：合并后的widgets

# usePlugins(Vue, plugins)

自动绑定到Vue的插件，重复插件不会再次绑定

参数：
- Vue：Vue原型
- plugins: 待绑定的第三方vue插件，重复插件不会再次绑定
返回：无
例子：

usePlugins(Vue, [vuex, iview])

# cleanDefaultValue(schema)

返回特殊widget字段特殊默认值，目前针对datePicker及timePicker的 default为usedate及usetime时特殊处理，其余返回默认的schema.default

参数：
- schema：schema数据
返回：默认值
例子：

const schema = {
  widget: 'timePicker',
  default: 'usetime',
  option: {
    range: false,
    format: 'HH:mm'
  }
}
cleanDefaultValue(schema)
// 当前时间的 HH:mm格式字符串

1
2
3
4
5
6
7
8
9
10

# randomStr(len: number)

生成以k开头的随机字符串，len默认为8（不含k）

# isPlainObject(arg: any)

判断是否为js纯对象

# isFunction(fn: any)

判断是否为函数

# isString(arg: any)

判断是否为字符串

# isNumber(arg: any)

判断是否为数字

# isArray(arg: any)

判断是否为数组

# jsonClone(arg: object|array)

深度复制对象或数组，不支持循环引用

# ajax(url: string, option: object)

简易的异步请求方法，返回Promise

# isNotEmptyString(arg: any)

判断是否为非空字符串

# include(item: any)

判断是否包含指定值。引用类型不深度判断

# debounce(func: function, wait: number, options: object)

防抖函数

# getValueType(value)

返回任意值的数据类型，小写字符串

示例

getValueType([])
// 'array'

1
2

# checkValueType(value, expectedType, dynamic)

判断value参数值类型是否符合预期expectedType

参数：
- value：任意数据
- expectedType：期望的数据类型，数据类型的字符串列表
- dynamic：是否为用户动态添加的widget，为true是，value必须为数组
返回：布尔值
示例

checkValueType([], 'array') // true
checkValueType('', ['string', 'array']) // true

1
2

# formatDate(date, format)

简易的格式化日期时间

参数：
- date：日期对象，否则取当前日期
- format：日期格式，默认 'yyyy-MM-dd'
返回：格式化后的日期字符串
示例

formatDate(new Date(), 'MM/dd/yyyy HH:mm:ss') // 08/05/2020 19:00:00

# isNumberString(value)

判断是否为数字字符串

参数：
- value：日期对象，否则取当前日期
返回：布尔值
示例

isNumberString('1.2.4') // false
isNumberString('1.2')   // true
isNumberString('1.')    // false
isNumberString('-1.2')  // true
isNumberString('-1.')   // false
isNumberString('+1')    // true
isNumberString('s')     // false
isNumberString(1)       // false
isNumberString([])      // false

1
2
3
4
5
6
7
8
9

# copy(str)

将制定字符串复制到系统剪切板

参数：
- str：任意字符串
返回：Promise
示例

copy('test').then(str => {
  console.log('请尝试ctrl + v(windows系统)或cmd + v(macOS)查看内容')
})

1
2
3

← 定制设计器 epage设计器 →

# epage-core核心模块

# Store

# store.getFormData()

# store.updateModel(model, useName)

# store.getModel(key?:string)

# store.resetModel()

# store.getFormRules()

# store.getSchema()

# store.getRootSchema()

# store.getSelectedSchema()

# store.getState()

# store.getTab()

# store.getWidgets()

# store.getFlatSchemas()

# store.getFlatRules()

# store.isSelected()

# store.getFlatWidgets()

# store.getSettingWidget()

# store.getWidgetsValidators()

# store.updateTab(tab)

# store.initRootSchema(rootSchema)

# store.initWidgets(widgets)

# store.updateMode(mode)

# store.addWidget(widget)

# store.copyWidget(key)

# store.removeWidget(key)

# store.selectWidget(key)

# store.deselectWidget()

# store.updateWidgetType(key, type)

# store.updateWidgetOption(key, option)

# store.addWidgetChild(key, index, child)

# store.removeWidgetChild(key, index)

# store.moveWidgetChild(key, preIndex, index)

# store.updateWidgetByModel(model)

# store.updateWidgetByEvent(key, eventType)

# store.initRule(rootSchema)

# store.addRule(key)

# store.removeRule(key, index)

# store.updateRule(key, index, rule)

# store.addLogic(logic)

# store.updateLogic(index, logic)

# store.removeLogic(index)

# Rule

# 静态方法

# 静态属性

# Worker

# 使用

# 示例

# Event

# 渲染器(Render)开发者

# 渲染器(widgets)使用者

# schema

# BaseSchema

# FormSchema

# RootSchema

# TypeBuilder

# constant

# widget

# helper

# getRootSchemaChildren(schema: object)

# getParentListByKey(key: string, scopedSchema: object)

# getIndexByKey(key: string, schemaList: array)

# replaceSchemaKey(schema: object)

# flattenSchema(schema: object)

# getWidgetType(flatWidgets: object, widget: string)

# setKeyAndName(schema: object, clone, dynamic)

# getFormData(model: object, rootSchema)

# getSchema(rootSchema)

# mergeWidgets(widgets)

# mergeWidget(widgets, widget)

# usePlugins(Vue, plugins)

# cleanDefaultValue(schema)

# randomStr(len: number)

# isPlainObject(arg: any)

# isFunction(fn: any)

# isString(arg: any)

# isNumber(arg: any)

# isArray(arg: any)

# jsonClone(arg: object|array)

# ajax(url: string, option: object)

# `store.getFormData()`

# `store.updateModel(model, useName)`

# `store.getModel(key?:string)`

# `store.resetModel()`

# `store.getFormRules()`

# `store.getSchema()`

# `store.getRootSchema()`

# `store.getSelectedSchema()`

# `store.getState()`

# `store.getTab()`

# `store.getWidgets()`

# `store.getFlatSchemas()`

# `store.getFlatRules()`

# `store.isSelected()`

# `store.getFlatWidgets()`

# `store.getSettingWidget()`

# `store.getWidgetsValidators()`

# `store.updateTab(tab)`

# `store.initRootSchema(rootSchema)`

# `store.initWidgets(widgets)`

# `store.updateMode(mode)`

# `store.addWidget(widget)`

# `store.copyWidget(key)`

# `store.removeWidget(key)`

# `store.selectWidget(key)`

# `store.deselectWidget()`

# `store.updateWidgetType(key, type)`

# `store.updateWidgetOption(key, option)`

# `store.addWidgetChild(key, index, child)`

# `store.removeWidgetChild(key, index)`

# `store.moveWidgetChild(key, preIndex, index)`

# `store.updateWidgetByModel(model)`

# `store.updateWidgetByEvent(key, eventType)`

# `store.initRule(rootSchema)`

# `store.addRule(key)`

# `store.removeRule(key, index)`

# `store.updateRule(key, index, rule)`

# `store.addLogic(logic)`

# `store.updateLogic(index, logic)`

# `store.removeLogic(index)`