简介

基于@ttkj/avue的表单设计器

依赖

element-ui 2.15.2+

$ npm i element-ui

@ttkj/avue 2.10.23

$ npm i @ttkj/avue

或自行引入cdn

安装

组件

$ npm i @ttkj/avue-form-design
或
$ yarn add @ttkj/avue-form-design

使用

import AvueFormDesign from '@ttkj/avue-form-design'

Vue.use(AvueFormDesign)

<avue-form-design style="height: 86vh;"
                  :options="options"
                  storage
                  @submit="handleSubmit"></avue-form-design>

属性

| 参数 | 说明 | 类型 | 默认值 | | ---------------------------- | ---------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------ | | options | 字段配置 | Object/String | { column: [] } | | storage | 开启本地存储功能，防止浏览器刷新丢失json | Boolean | false | | asideLeftWidth | 左工具栏宽度 | String/Number | '270px' | | asideRightWidth | 右工具栏宽度 | String/Number | '380px' | | toolbar | 顶部工具栏 | Array | ['avue-doc', 'import', 'generate', 'preview', 'clear'] | | undoRedo | 是否开启撤销重做功能 | Boolean | true | | includeFields | 左侧展示字段 | Array | fieldsConfig.js中配置的字段 | | excludeFields | 左侧禁用字段 | Array | fieldsConfig.js中配置的字段 | | customFields | 自定义组件 | Array | 使用方法见下文 | | customFieldsConfigs | 自定义组件属性配置组件 | Object | 其中key为自定义组件的component，value为组件属性设计器名称 | | defaultValues | 默认值配置 | Object | - | | fieldConfigs | 用于表单设计器组件库属性的配置 | Object | - | | fieldEventConfig | 通用的组件事件配置 | Object | - | | eventConfig | 全局事件配置 | Object | - | | customTransformToAvueOptions | 设计器配置项转avue配置项 | (data, obj) => Promise<object> | 第一个参数data为内置转化后的option，第二个obj为原始的设计器配置项，返回值是一个Promise，值为avue配置项 | | customTransAvueOptionsToFormDesigner | avue配置项转设计器配置项 | (data, obj) => Promise<object> | 第一个参数data为内置转化后的option，第二个obj为原始的avue配置项，返回值是一个Promise，值为设计器配置项 |

customFields使用方法

customFields可以直接是表单组件配置，也可以是一个分组

| 参数 | 说明 | 类型 | 默认值 | | ----- | -------- | ------ | ------------------------------ | | title | 分组名称 | string | 不填则为'自定义' | | sort | 分组排序 | number | 不填按顺序填充到内置组件分组后 | | list | 组件列表 | Array | 表单组件配置列表 |

options字段配置

Avue文档

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ------------- | ------------ | ------- | ----------------------- | ------ | | column | Avue字段 | Array | - | [] | | labelPosition | 字段位置 | String | 'left'/'center'/'right' | - | | labelWidth | 字段宽度 | Number | - | - | | gutter | 字段间隔 | Number | - | 0 | | menuBtn | 表单按钮 | Boolean | true/false | true | | submitBtn | 显示提交按钮 | Boolean | true/false | true | | submitText | 提交按钮文本 | String | - | '提交' | | emptyBtn | 显示清空按钮 | Boolean | true/false | true | | emptyText | 清空按钮文本 | String | - | '清空' | | detail | 详情模式 | Boolean | true/false | false | | readonly | 全局只读 | Boolean | true/false | false | | disabled | 全局禁用 | Boolean | true/false | false |

defaultValues配置

defaultValues是一个数组。

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ----- | --------- | ------ | ------------------------------------------------------------------------------------------------- | ------ | | type | 值的类型 | String | String: '字符串', Number: '数值', Boolean: '布尔值',Array: '数组', Object: '对象', Date: '时间类' | - | | label | 显示名称 | String | - | - | | value | 值/表达式 | String | - | - |

fieldConfigs说明

fieldConfigs对表单组件配置属性的配置。涵盖了内置组件和自定义组件。

key为组件类型，value为配置项。配置项如下：

| 属性 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------------------ | ------ | ------ | ------ | | column | 展示字段的覆盖配置 | Object | - | - | | config | 设计器的配置 | Object | - | - |

config配置

{
  fieldConfigs: {
    type: {             // 组件type
      column: {},       // 组件column覆盖配置
      config: {         // 设计器配置
        icon: '',       // 左侧拖拽按钮图标
        tip: '',        // 左侧拖拽按钮提示
        label: '',      // 左侧拖拽按钮显示文字
        component: ''， // 配置组件Name
        params: {       // 基本属性配置
          param: {      // 某个属性的配置，如果为boolean，等同于对象下show状态
            show: true, // 是否显示配置, 不配置表示显示
            disabled: false,  // 显示情况下是否可编辑
            value: '',        // 配置项的默认值
            valueType: [],    // param为value时的配置，详见默认值配置
            ...         // 其他视属性本身而定
          }
        },
        validate: true,       // 是否显示校验栏
        dataSubmit: true,  // 是否显示数据提交栏
        events: {             // 事件配置。如果为boolean，等同于对象下show状态
          show: true,         // 是否显示事件配置, 不配置表示显示
          list: [],           // 可用的事件
          config: {           // 事件配置
            event: {          // 事件ID
              id: 'event',    // 事件ID
              name: '',       // 事件名称
              note: [         // 事件参数说明
                {
                  name: '',         // 参数key
                  type: '',         // 参数字段类型
                  description: ''   // 参数说明
                }
              ],
              template: ''      // 事件默认模板
            }
          }
        }
      }
    }
  }
}

事件

| 名称 | 说明 | 回调参数 | | ------ | ------------ | -------------- | | submit | 生成json回调 | 当前配置的json |

方法

| 名称 | 说明 | 参数 | 返回 | | ------- | -------------------- | --------------------- | ------- | | getData | 获取当前编辑器的JSON | type: 'string'/'json' | Promise |

插槽

| 名称 | 说明 | | ------------ | ------------------ | | toolbar | 顶部工具栏右侧插槽 | | toolbar-left | 顶部工具栏左侧插槽 |

Avue插件

富文本

import AvueUeditor from 'avue-plugin-ueditor'

Vue.use(AvueUeditor)

打包

组件

$ yarn lib

源码

$ yarn build