beansflight-json-form

BeansFlight-JSON-FORM

版本号:verison 0.23.17

一份配置，轻松搞定配置 Vue 表单渲染

表单可以说是前端开发中最经常遇到的元素之一。在日常表单的开发中，存在着 v-if 条件渲染、满屏 magic number 枚举值，再加上表单之间的复杂的联动交互的情况，往往使得一个看似简单的表单变得愈加臃肿不堪。

表单的联动关系与状态重置往往散落在各个函数方法中，随着需求的不断扩充与变更，使得表单之间的耦合复杂度上升，对于后续的开发者而言，很难清晰快速地了解表单中隐含的业务逻辑与联动关系，这使得表单变得非常不便于维护。

特性

• 数据收集、校验和提交功能的表单生成器，
• 支持双向数据绑定和事件扩展，
• 包含如下组件
  • 复选框、
  • 单选框
  • 输入框、
  • 下拉选择框等表单元素
  • 省市区三级联动,时间选择,
  • 日期选择
  • 文件/图片上传等功能组件
  • 富文本编辑器

一· form 支持的类型文本类型

1.Input：输入框

基础属性

Input.extendType

Input.control

2.Select: 下拉框

基础上属性

select.options

select.options 有 2 中传参形式：

• 传递对象

{
  label: "下拉框",
  type: "select",
  key: "status",
  options: [
      { value: "0", label: "否" },
      { value: "1", label: "是" },
      { value: "2", label: "男" },
      { value: "3", label: "女" },
    ],

  span: 8,
},

• 函数回调

{
  label: "下拉框",
  type: "select",
  key: "status",
  options: (value) => {
    // tempOpts 在data属性中声明
    return this.tempOpts
    },
  span: 8,
},

select.control

3.DatePicker: 日期选择器

基础属性

datePicker.control

4.Cascader: 级联组件

基础属性

cascader.control

5.Checkbox: 多选框

基础属性

checkbox.control

6.Radio: 单选框

基础属性

redio.control

7.Switch: 滑块

基础属性

switch.control

8.upload: 文件上传

基础属性

upload.control

9.rich: 富文本编辑器

基础属性

rich.control

二·安装依赖与配置

依赖安装

yarn add beansflight-json-form

在 main.js 配置引入如下配置

//main.js
....
import beansflightForm from 'beansflight-json-form';
import 'beansflight-json-form/beansflightJsonForm/beansflight-json-form.css';
Vue.use(beansflightForm);
....

三·表单类型

1 tablePanel - 列表

页面展示

使用方式

<table-panel
  border
  ref="mainTable"
  :panelConfig="panelConfig"
  @newAction="newAction"
  @batchDeleteAction="batchDeleteAction"
  @allExportAction="allExportAction"
  @allExportAction="allExportAction"
  :columns="mainTable.columnArray"
  :value="mainTable.data"
  :loading="mainTable.loading"
  :pageNumber="queryForm.pageNum"
  :pageSize="queryForm.pageSize"
  :pageShow="true"
  :pageTotal="mainTablePage.total"
  @onChangePageNum="changeMainTablePagePageNum"
  @onChangePageSize="changeMainTablePagePageSize"
  @on-row-click="onRowClick"
>
  </table-panel>

Table-panel 属性

panelConfig

panelConfig.options

      panelConfig: {
        show: false, // 是否显示顶部默认 新建、批量删除、导出全部、批量导出按钮
        options: [
          {
            title: '逗逗飞新建', // 按钮标题
            type: 'primary', // 按钮主题
            icon: 'md-add', // 按钮图标
            multiple: true,
            privilege: 'merchant-info-list-add', // 按钮权限
            click: () => {},
            multiClick: (res) => console.log("批量操作", res)
            hidden: (row) => {
                  return true | false
                },
          },
          {
            title: '逗逗飞新建', // 按钮标题
            type: 'info', // 按钮主题
            icon: 'ios-trash-outline', // 按钮图标
            privilege: 'merchant-info-list-add', // 按钮权限
            click: () => {},
          },
        ],
      },

columns

columnArray: [
  {
    title: '正常',
    key: 'code',
    minWidth: 100,
  },
   {
    title: '头像',
    key: 'avatar_key',
    type: 'avatar', // 用于枚举处理
    minWidth: 100,
  },
  {
    title: '枚举',
    key: 'status',
    minWidth: 120,
    type: 'enum', // 用于枚举处理
    enumKey: 'STATUS',
  },
  {
    title: "日期",
    key: "createDate",
    formate: "YYYY-MM-DD",  用于日期格式化
    minWidth: 140,
  },
  {
    title: '操作',
    align: 'right',
    fixed: 'right',
    width: 150,
    type: 'handle',
    options: [
      {
        title: '查看',
        type: 'info',
        onClick: (row) => {
        },
      },
      {
        title: '编辑',
        directives: [
          {
            name: 'privilege',
            value: 'agency-info-list-update',
          },
        ],
        onClick: (row) => {},
      },
    ],
  },
],

columons.options

DEMO

columnArray: [
  {
    title: '商户编号',
    key: 'code',
    minWidth: 100,
  },
  {
    title: '商户状态',
    key: 'status',
    minWidth: 120,
    type: 'enum',
    enumKey: 'STATUS',
  },
  {
    title: '电子邮件',
    key: 'email',
    minWidth: 140,
  },
  {
    title: '操作',
    align: 'right',
    fixed: 'right',
    width: 150,
    type: 'handle',
    options: [
      {
        title: '查看',
        type: 'info',
        onClick: (row) => {
          this.$refs.merchantTableDetail.showModal(row);
        },
      },
      {
        title: '编辑',
        directives: [
          {
            name: 'privilege',
            value: 'agency-info-list-update',
          },
        ],
        onClick: (row) => {},
      },
      {
        title: "删除",
        type: "error",
        deleteFlag: true,
        deleteTitle: "删除提示信息",
        directives: [
          {
            // name: "privilege",
            value: "agency-info-list-update",
          },
        ],
        onClick: (row) => {},
      },
    ],
  },
],

2 queryPanel - 查询

页面展示

使用方式

<query-panel :config="formConfig" @query="query" @reset="reset">
  </query-panel>

query-panel 属性

config

config.formModel

formModel: {
          cascVal: [], // 级联
          selOptions: null, // 下拉框
          inputVal: null, // 输入框
          datePickerVal: null, // DatePicker
        },

config.formItems

config.formItems.control

DEMO

formItems: [
  {
    row: [
      {
        label: '省市区', // 标题
        key: 'cascVal', //
        type: 'cascader', // 组件类型 不区分大小写 级联多用于省市区选择  type 取值范围：[select、input、datePicker、 cascader]
        placeholder: '请选择城市/区县(可搜索）', // 占位文字
        span: 6, // 24栏布局 占比 如果不传则是6
        control: {
          // 操作项
          on: {
            change: () => {
              // 回调函数
            }
          }
        },
        options: [
          // 数据选项
          {
            value: 'beijing',
            label: '北京',
            children: [
              {
                value: 'gugong',
                label: '故宫'
              },
              {
                value: 'tiantan',
                label: '天坛'
              },
              {
                value: 'wangfujing',
                label: '王府井'
              }
            ]
          },
          {
            value: 'jiangsu',
            label: '江苏',
            children: [
              {
                value: 'nanjing',
                label: '南京',
                children: [
                  {
                    value: 'fuzimiao',
                    label: '夫子庙'
                  }
                ]
              },
              {
                value: 'suzhou',
                label: '苏州',
                children: [
                  {
                    value: 'zhuozhengyuan',
                    label: '拙政园'
                  },
                  {
                    value: 'shizilin',
                    label: '狮子林'
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        label: '场地',
        key: 'selOptions',
        type: 'select',
        span: 6,
        options: [
          // 下拉框数据
          {
            label: '全部',
            value: '全部'
          },
          {
            label: '零食区',
            value: '零食区间'
          }
        ]
      },
      {
        label: '商户编号',
        key: 'inputVal',
        placeholder: '占位符',
        type: 'Input', // 输入框
        span: 6
      },
      {
        label: '时间框',
        key: 'datePickerVal',
        placeholder: '占位符',
        type: 'datePicker', // 输入框
        // extendType: 'daterange', // date 单选  daterange 时间段
        span: 6
      }
    ]
  }
]

3 editFormPanel - 编辑

页面展示

使用方式

<edit-form-panel
  title="编辑或新建"
  v-model="isShowDetailModal"
  displayed="model"
  :data="detail"
  :config="editConfig"
  @sumbit="sumbit"
  @cancel="cancel"
>
      <template v-slot:footer="data">
       	<div>底部按钮布局</div>
      	<div>{{ data }}</div>
     </template>

  </edit-form-panel>

edit-form-panel 属性

config

config.row

config.row.control

DEMO

      editConfig: [
        {
          splitLine: true, // 是否显示分栏布局 纵向分栏
          lineTitle: '分割线', // 分栏标题
          row: [ // 如果在一个行内布局，则用row嵌套
            {
              label: '修改日期', // label标题
              type: 'datePicker', // 组件类型 不区分大小写 type取值范围['datePicker', 'input', 'select', 'cascader']
              extendType: 'daterange', // 取值范围 [date 单选  daterange 时间段 ]
              key: 'modifyDate',  // 显示的字段名
              placeholder: '占位符', // 占位文字

              rule: [{ // 必填项验证
                type: 'date', required: true, message: '时间不能为空', trigger: 'blur',
              }],
               props: {
                // 扩展属性
                disabled: true, // 设置输入框为禁用状态
              },
              span: 8,
            },
            {
              label: '商户地址',
              type: 'input',
              key: 'address',
              extendType: "password", // 取值范围[text、password、textarea、url、email、date、number、tel]
              key: "name",
              props: {
                // 扩展属性
                disabled: true, // 设置输入框为禁用状态
              },
              rule: [{ required: true, message: '请输入地址', trigger: 'blur' }],
              span: 12,
            },
          ],
        },
      ],

4 detailFormPanel - 查看

页面展示

使用方式

<detail-form-panel
  title="商户详情"
  v-model="isShowDetailModal"
  :data="detail"
  :config="detailConfig"
  displayed="drawer"
>
    <template v-slot:footer="data">
      <div>底部按钮布局</div>
      <div>{{ data }}</div>
    </template>
  </detail-form-panel>

detail-form-panel 属性

config

config.row

config.row.control

DEMO

config: [
  {
    row: [
      {
        label: '修改日期',
        type: 'datePicker',
        key: 'modifyDate',
        placeholder: '占位符',
        // rule: [{
        //   type: 'date', required: true, message: '时间不能为空', trigger: 'blur',
        // }],
        // extendType: 'daterange', // date 单选  daterange 时间段
        span: 24,
      },
    ],
  },
  {
    row: [
      {
        label: '商户地址',
        type: 'input',
        key: 'address',
        // rule: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        extendType: '', // 扩展type
        span: 24,
      },
    ],
  },
],

5 newFormPanel - 新建

页面展示

使用方式

<NewFormPanel
  title="新建"
  v-model="isShowDetailModal"
  :data="newForm"
  :config="newConfig"
  @sumbit="sumbit"
  @cancel="cancel"
>
  </NewFormPanel>

new-form-panel 属性

config

config.row

config.row.control

DEMO

      newConfig: [
        {
          row: [
            {
              label: "商户名称",
              type: "input",
              // extendType: "password", // 取值范围[text、password、textarea、url、email、date、number、tel]
              key: "name",
              props: {
                // 扩展属性
                // disabled: true, // 设置输入框为禁用状态
              },
              span: 8,
            },
            {
              label: "测试滑块",
              type: "switch",
              // extendType: "password", // 取值范围[text、password、textarea、url、email、date、number、tel]
              key: "switchKey",
              props: {
                // 扩展属性
                // disabled: true, // 设置输入框为禁用状态
              },
              span: 8,
            },
            {
              label: "商户统一定价",
              type: "select",
              key: "isUniformprice",
              options: [
                { value: "0", label: "否" },
                { value: "1", label: "是" },
              ],
              span: 8,
              control: { // 组件联动 Switch为选中时，显示此组件
                handle: (form) => {
                  return form.switchKey === true;
                },
              },
            },
            {
              label: "商户状态",
              // type: "select",
              key: "status",
              props: {
                // disabled: true, //是否禁用
              },
              options: [
                // { value: "0", label: "否" },
                { value: "1", label: "是" },
              ],
              span: 8,
              control: { // 组件联动
                handle: (form) => {
                  return form.switchKey === true;
                },
              },
            },
          ],
        },
      ],

6 formPanel - 展示

页面展示

使用方式

<form-panel :data="panelData" :config="panelConfig"></form-panel>

form-panel 属性

config

config.row

config.row.control

DEMO

    panelConfig: [
        {
          row: [
            {
              label: "商户名称",
              type: "input",
              extendType: "textarea", // 取值范围[text、password、textarea、url、email、date、number、tel]
              key: "name",
              props: {
                // 扩展属性
                disabled: true, // 设置输入框为禁用状态
                border: false, // 不显示边框
                bottom: 1,
              },
              control: {
                // 组件联动
                hiddenOption: (form) => {
                  return form.isUniformprice === "0"
                },
              },
              span: 8,
            },
            {
              label: "商户统一定价",
              type: "input",
              // type: "select",
              key: "isUniformprice",
              control: {
                // 组件enum
                enumOption: {
                  type: "STATUS",
                },
              },
              span: 8,
            },
            {
              label: "修改时间",
              type: "input",
              key: "modifyDate",
              control: {
                // 时间格式化
                formatOption: {
                  format: "YYYY-MM-DD",
                },
              },
              span: 8,
            },
          ],
        },
      ],

四·表单必填项验证

表单验证功能同样也是表单不可或缺的功能之一，JSONFom 通过 rule 节点来实现必填项验证

rule 支持的验证数据类型

rule

formConfig: [
  ...
  	{
      row: [
        {
          	...
             rule: [
                {
                  type: "array",
                  required: true,
                  message: "支付渠道不能为空",
                  trigger: "blur",
                },
              ]
						...
        }
      ]
    }
  ...
]