基于 vue2.x + element-ui 我的自定义表单，你不试试么（一）公司这两年做了一款档案项目，其中需要使用到

公司这两年做了一款档案项目，其中需要使用到自定义表单的功能，希望可以拖拽字段，自定义布局。因为公司的前任领导已经做过了两版自定义表单，但不具备拖拽和自定义布局的功能，所以我在阅读过前两版的代码，重新编写这个第三版的自定义表单，可以拖拽和自定义布局，字段关联校验等功能。大家有需要的可以看看，试试。

先上传送门

下面我将从整个表单的设计来给大家介绍，我也将会把整个表单的设计介绍文档持续更新。本期主要介绍表单、字段、自定义布局、表单关联规则相关内容

Form

一个完整的自定义表单应该是由 字段（Field）、布局数据（Layout）、表单附属规则（AttachedRule）三部分组成。
字段是表单的最小粒度，Field 详情。

Layout 布局数据

布局数据是用来表示表单展现形式的数据。
在创建表单时，可以通过拖拽字段来自定义表单的内容。也可以在表单内右击菜单创建行与列来布置表单。自定义拖拽布局，有如下的核心规则：

字段只能存在于列中
列只能存在于行中
行可以存在于模板容器和列中
模板容器中只能存在行

正是由于上面第三条规则，自定义布局的功能变得十分强大，行与列可以相互嵌套进行布局

// layout
{
  layoutType: 'default',
  pcLayout: {
    rowsData: [
      // ... 自定义布局模式下的结构数据
    ],
    layoutConfig: {
      // ... 自定义布局模式下的表单样式的配置参数
    }
  },
  mobileLayout：[
    // ... 移动端经过排序的字段name集合
  ]
}

AttachedRule 表单附属规则

表单附属规则有 FieldAttachedRule 和 FieldCorrelativeRules

FieldAttachedRule（字段在表单中的附属规则集合）用于描述字段是否必填、是否展示名称、宽度等属性
FieldCorrelativeRules（字段在表单中的关联规则集合）用于描述字段在业务需要的情况下与相关联的字段进行动态展示、修改值等操作

Field 字段

字段是一份表单内的最小粒度。

// field 的数据形式
{
  "name": "teacher_field_159428032900017261", // 字段的唯一值
  "type": "input", // 字段类型
  "label": "单行文本", // 字段名称
  "value": "默认值", // 字段的默认值
  "configurable": true, // 属性是否可配置
  "isFormField": true, // 是否是表单字段
  "attrs": { // 字段的自定义配置属性
    "placeholder": "占位符文字",
    "maxlength": 101,
    "dataType": "phone",
    "pattern": ""
  }
}

现有的字段类型

名称	描述	类型
input	文本输入字段	base（基础字段）
Number	数字输入字段	base（基础字段）
textarea	文本域输入字段	base（基础字段）
date	日期输入字段	base（基础字段）
time	时间输入字段	base（基础字段）
dateRange	日期范围输入字段	base（基础字段）
select	下拉单项选择字段	base（基础字段）
mulSelect	下拉多项选择字段	base（基础字段）
radioGroup	单选框组字段	base（基础字段）
checkboxGroup	多选框组字段	base（基础字段）
switchCom	开关字段	base（基础字段）
title	标题字段	layout（布局字段）
divider	分割线字段	layout（布局字段）
blankLine	空白行字段	layout（布局字段）
subform	明细字表	high（高阶字段）

AttachedRule 字段的附属规则计算

attachedRule 方法接收 required 和 label 两个参数。

required：表单附属规则中自定义配置的是否必填属性
label：字段自定义配置的字段名称填属性

应返回一个 Rule 对象或数组，校验规则参见 async-validator

CorrelativeRule 字段的关联规则计算

CorrelativeRule 主要用于动态计算返回字段的判断条件
CorrelativeRule 方法接收 condition 条件对象一个参数。应返回一个字符串，表示字段关联的判断条件

// 内置 input 字段的关联规则
export default {
  // ...
  correlativeRule(condition) { // 字段的关联规则
    const { value, fieldName, judge, compareFieldName, isCompareField } = condition
    const fieldVal = `form['${fieldName}'].value`
    const judeValue = isCompareField
      ? `form['${compareFieldName}'].value`
      : `'${value}'`
    let str = ''
    switch (judge) {
      case '==':
      case '!=':
        str += `${fieldVal} ${judge} ${judeValue}`
        break;
      case 'nullStr':
        str += `!${fieldVal}`
        break;
      case 'unnullStr':
        str += `${fieldVal}`
        break;
      default:
        str += 'true'
        break;
    }
    return str
  }
  // ...
}

FieldCorrelativeRules

配置字段之间的关联规则

在表单中，因为项目的业务需求，各个字段产生各种关联关系。常见的关联关系如下：

下拉单选/单项选择 选择某一项，修改另一个字段的值

下拉单选/单项选择 选择某一项，控制另一个字段的 显示/隐藏

下拉单选/单项选择 选择某一项，修改另一个含选项字段的 选项列表

填报了多了个字段时，经过条件判断，触发某种 消息提醒

Rule Obj

规则对象的完整属性如下：

名称	说明	类型
key	规则的唯一值	String
conditions	规则的判断条件数组，条件对象详细如下表	Array
T_message	条件满足时的消息提示	String
F_message	条件满足时的消息提示	String
T_handle	条件满足时的执行动作数组，动作对象详细如下表	Array
F_handle	条件不满足时的执行动作数组，动作对象详细如下表	Array

Condition Obj

条件对象的完整属性如下：

名称	说明	类型	可选值	默认值
key	条件的唯一值	String	-	-
type	条件类型	String	condition 条件 / connector 连接符	condition
connector	连接符	String	-	-
fieldName	条件关联的字段name	String	-	-
fieldType	条件关联的字段类型	String	-	-
valueType	条件关联的字段value的类型	String	-	-
judge	条件判断语句, 详细见下表	String	-	-
value	条件判断的值	String	-	-
isCompareField	与表单内的替他字段进行对比	Number	-	-
compareFieldName	用于条件对比的字段的name	String	-	-

Judge

字段可选的条件判断语句完全是根据字段的 value 类型，来展示对应的判断语句选项

名称	说明	通用类型
==	等于	String, Boolean, Number
!=	不等于	String, Boolean, Number
contains	包含	Array
uncontains	不包含	Array
nullStr	为空	String, Number
unnullStr	不为空	String, Number
nullArr	数组为空	Array
unnullArr	数组不为空	Array
大于		Number
<	小于	Number
>=	大于等于	Number
<=	小于等于	Number

Handle Obj

动作对象的完整属性如下：

名称	说明	类型	可选值	默认值
key	条件的唯一值	String	-	-
type	动作类型	String	C_value 修改值 / C_show 显示隐藏 / C_options 修改选项列表	-
fieldName	动作关联的字段name	String	-	-
fieldType	动作关联的字段类型	String	-	-
valueType	动作关联的字段value的类型	String	-	-
value	满足条件时，修改字段的值	String	-	-
show	满足条件时，控制字段的显示隐藏	Boolean	-	true
options	满足条件时，控制字段的选项列表	Array	-	[]

基于 vue2.x + element-ui 我的自定义表单，你不试试么（一）