hot-form/src/libs/form.js

A project developed based on ant-design-vue and vant whitch do some things on create/render/modify and etc. for forms. Also can custom some component on the form items if you want. 一个基于antdv/vant开发的创建表单组件，包含表单渲染、表单编辑页面、以及植入自定义附加内容的组件

import { address } from './address';
import { industry } from './industry';
import { defaultPolicy } from './defaultTemplate';

// 表单默认的headers字段
export const defaultFormHeader = {
  key: 'header', // 类型键
  _id: 'header', // 唯一标志 `key`
  // 标题
  title: '标题', // 表单标题
  titleColor: '#333', // 标题颜色
  titleBack: '#fff', // 标题背景颜色
  // 主体
  themeBack: '#fff', // 表单主体颜色
  // 提交按钮
  submitTxt: '提交', // 按钮文本
  submitColor: '#fff', // 按钮文本颜色
  submitBack: '#52A7B5', // 按钮背景颜色
};

/**
 * 表单文件
 */
// 表单整体的编辑组件
export const formHeaderEditComponent = 'ETitle';

// 根的key值
export const ROOT_KEY = 0;

// 存储表单的每一项的初始配置(对表单项的描述)
export const formItemDescribe = new Map([
  ['input', {
    key: 'input',
    label: '文本', // 标题
    category: 'basic',
    single: false,
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    props: { value: '', defaultValue: '' }, // value为用户输入的值,defaultValue为默认值
    attrs: { type: 'text', placeholder: '请输入文本' },
    rules: {
      warning: '该项不能为空',
      required: false, // 必填
      maxLength: 100, // 输入最大长度
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DInput', // 渲染表单项组件
    editComponent: 'EInput', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
        ruleLists.get('maxLength')(item.rules.maxLength, `最多不超过${item.rules.maxLength}个字符`),
      ]);
    },
  }],
  ['number', {
    key: 'number',
    category: 'basic',
    single: false,
    label: '数字',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    props: { value: 0, defaultValue: 0 },
    attrs: { type: 'number', placeholder: '请选择数字' },
    rules: {
      warning: '该项不能为空',
      required: false,
      max: 10,
      min: 0,
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DNumber', // 渲染表单项组件
    editComponent: 'ENumber', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
        ruleLists.get('max')(item.rules.max, `最大值不能超过${item.rules.max}`),
        ruleLists.get('min')(item.rules.min, `最小值不能低于${item.rules.min}`),
      ]);
    },
  }],
  ['textarea', {
    key: 'textarea',
    category: 'basic',
    single: false,
    label: '多行文本',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    props: { value: '', defaultValue: '' },
    attrs: { placeholder: '请输入文本', type: 'textarea' },
    rules: {
      warning: '请输入错误提示',
      required: false,
      maxLength: 100,
      maxRows: 4,
      minRows: 1,
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DTextArea', // 渲染表单项组件
    editComponent: 'ETextarea', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
        ruleLists.get('maxLength')(item.rules.maxLength, `最多不超过${item.rules.maxLength}个字符`)
      ]);
    },
  }],
  ['select', {
    key: 'select',
    category: 'basic',
    single: false,
    label: '下拉框',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { placeholder: '请选择一项' },
    props: { value: '', defaultValue: '' },
    options: [{ value: 1, label: '选项1' }, { value: 2, label: '选项2' }],
    rules: {
      warning: '请选择一项',
      required: false,
      multiple: false,
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DSingleSelect', // 渲染表单项组件
    editComponent: 'ESingleSelect', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['checkbox', {
    key: 'checkbox',
    category: 'basic',
    single: false,
    label: '多项选择',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { type: 'checkbox' },
    props: { value: [], defaultValue: [] },
    options: [{ value: 1, label: '跑步' }, { value: 2, label: '打豆豆' }],
    rules: { warning: '请至少选择一项', required: false },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DCheckbox', // 渲染表单项组件
    editComponent: 'EMultiCheckbox', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['radio', {
    key: 'radio',
    category: 'basic',
    single: false,
    label: '单选框',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { type: 'radio' },
    props: { value: '', defaultValue: '' },
    options: [{ value: 1, label: '选项一' }, { value: 2, label: '选项二' }],
    rules: { warning: '请选择', required: false },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DRadio', // 渲染表单项组件
    editComponent: 'ERadio', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['txt', {
    key: 'txt',
    category: 'basic',
    single: false,
    label: '文本',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: {},
    props: { value: '这是文本信息', defaultValue: '' },
    rules: {},
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DTxt', // 渲染表单项组件
    editComponent: 'EText', // 编辑表单项组件
    getDecorator: function() { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([]);
    },
  }],
  ['time', {
    key: 'time',
    category: 'basic',
    single: false,
    label: '时间',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { type: 'time', placeholder: '请选择时间' },
    props: { value: '', defaultValue: '' },
    rules: {
      required: false,
      warning: '请选择时间',
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DTime', // 渲染表单项组件
    editComponent: 'ETime', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['date', {
    key: 'date',
    category: 'basic',
    single: false,
    label: '日期',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { type: 'date', placeholder: '请输入日期' },
    props: { value: '', defaultValue: '' },
    rules: {
      required: false,
      warning: '请选择日期',
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'Date', // 渲染表单项组件
    editComponent: 'EDate', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['upload', {
    key: 'upload',
    category: 'basic',
    single: false,
    label: '图片上传',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { type: 'file' },
    props: { value: [], defaultValue: [] },
    rules: {
      warning: '请选择图片',
      required: false,
      min: 1, // 图片下限
      max: 3, // 图片上限
      accept: ['jpeg', 'png'], // 支持格式
      lists: [], // 用户上传的图片
      action: '', // 上传的地址
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DUpload', // 渲染表单项组件
    editComponent: 'EUpload', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['image', {
    key: 'image',
    category: 'basic',
    single: false,
    label: '图片显示', // 图片展示
    // valid 字段标志本表单项是否为可获取值的字段
    valid: false,
    className: [],
    style: {},
    attrs: {},
    props: { value: '',defaultValue: '' },
    rules: {
      // warning: '请选择图片',
      // required: false,
      link: '', // 图片地址（上传图片展示）
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DImage', // 渲染表单项组件
    editComponent: 'EImg', // 编辑表单项组件
    getDecorator: function() { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([]);
    },
  }],
  ['mobile', {
    key: 'mobile',
    category: 'basic',
    single: false,
    label: '手机',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { type: 'tel', placeholder: '请输入手机号' },
    props: { value: '', defaultValue: '' },
    rules: {
      warning: '请输入手机号码',
      required: false,
      needcode:false,
      codes: '', // 验证码
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DTel', // 渲染表单项组件
    editComponent: 'EMobile', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
        ruleLists.get('mobile')('手机号格式错误'),
      ]);
    },
  }],
  ['email', {
    key: 'email',
    category: 'basic',
    single: false,
    label: '邮箱',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { type: 'email', placeholder: '请输入邮箱' },
    props: { value: '', defaultValue: '' },
    rules: {
      required: false,
      warning: '请输入正确的邮箱',
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DEmail', // 渲染表单项组件
    editComponent: 'EEmail', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
        ruleLists.get('email')('邮箱格式错误'),
      ]);
    },
  }],
  ['cascader', {
    key: 'cascader',
    category: 'basic',
    single: false,
    label: '多级下拉',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { placeholder: '请输入提示' },
    props: { value: [], defaultValue: [] },
    rules: {
      required: false,
      warning: '请选择',
      level: 2, // 自定义情况下的下拉级数（默认2）
      options: 'address', // 级联的数据来源名
      custom: [], // 自定义时的数据来源
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DCascader', // 渲染表单项组件
    editComponent: 'ECascader', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['divider', {
    key: 'divider',
    category: 'basic',
    single: false,
    label: '', // 分割线
    // valid 字段标志本表单项是否为可获取值的字段
    valid: false,
    className: [],
    style: {},
    attrs: {},
    props: {},
    rules: {},
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'Divider', // 渲染表单项组件
    editComponent: 'EDivider', // 编辑表单项组件
    getDecorator: function() { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([]);
    },
  }],
  ['rate', {
    key: 'rate',
    category: 'basic',
    single: false,
    label: '评分',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: {},
    props: { value: 0, defaultValue: 0 },
    rules: {
      required: false, // 必填
      warning: '请评分', // 错误提示
      allowHalf: true, // 是否允许半选
      count: 5, // 满分值
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DRate', // 渲染表单项组件
    editComponent: 'ERate', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['file', {
    key: 'file',
    category: 'basic',
    single: false,
    label: '上传附件',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { type: 'file' },
    props: { value: [], defaultValue: [] },
    rules: {
      warning: '请选择文件',
      required: false,
      max: 1, // 上传数量限制
      accept: [], // 接受上传类型
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DFile', // 渲染表单项组件
    editComponent: 'EFile', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['richEdit', {
    key: 'richEdit',
    category: 'basic',
    single: false,
    label: '富文本',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { placeholder: '请输入富文本内容' },
    props: { value: '', defaultValue: '' },
    rules: {
      warning: '请输入内容',
      required: false,
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DRichEdit', // 渲染表单项组件
    editComponent: 'ERichEdit', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
  ['policy', {
    key: 'policy',
    category: 'basic',
    single: false,
    label: '隐私政策保护声明',
    // valid 字段标志本表单项是否为可获取值的字段
    valid: true,
    className: [],
    style: {},
    attrs: { placeholder: '' },
    props: { value: false, defaultValue: false },
    rules: {
      warning: '请输入内容',
      required: false,
      content: defaultPolicy, // 声明内容
    },
    extra: {}, // 额外存储信息 - 内部不提供修改方案
    renderComponent: 'DPolicy', // 渲染表单项组件
    editComponent: 'EPolicy', // 编辑表单项组件
    getDecorator: function(item) { // 获取校验规则（在此处选取需要的校验规则）
      return getFieldRules([
        ruleLists.get('required')(item.rules.required, item.rules.warning),
      ]);
    },
  }],
]);

// 描述创建表单项入口`type`的集合
export const formItemBasicCollect = [
  { key: 1, text: '文本框', icon: '', type: 'input' },
  { key: 2, text: '数字框', icon: '', type: 'number' },
  { key: 3, text: '多行文本', icon: '', type: 'textarea' },
  { key: 4, text: '下拉框', icon: '', type: 'select' },
  { key: 5, text: '多项选择', icon: '', type: 'checkbox' },
  { key: 6, text: '单选框', icon: '', type: 'radio' },
  { key: 7, text: '文本', icon: '', type: 'txt' },
  { key: 8, text: '时间', icon: '', type: 'time' },
  { key: 9, text: '日期', icon: '', type: 'date' },
  { key: 10, text: '图片上传', icon: '', type: 'upload' },
  { key: 11, text: '图片展示', icon: '', type: 'image' },
  // { key: 12, text: '手机', icon: '', type: 'mobile' },
  { key: 13, text: '邮箱', icon: '', type: 'email' },
  { key: 14, text: '多级下拉', icon: '', type: 'cascader' },
  { key: 15, text: '分割线', icon: '', type: 'divider' },
  { key: 16, text: '评分', icon: '', type: 'rate' },
  { key: 17, text: '上传附件', icon: '', type: 'file' },
  // { key: 18, text: '富文本', icon: '', type: 'richEdit' },
  { key: 19, text: '声明', icon: '', type: 'policy' },
];

// 涉及到的检验规则拆分
export const ruleLists = new Map([
  // 是否必填
  ['required', (isRequire, warning) => ({ required: isRequire, message: warning })],
  // 输入的最大长度限制
  ['maxLength', (max, warning) => ({ validator: val => val.length <= max, message: warning })],
  // 最大数值限制
  ['max', (max, warning) => ({ validator: val => val <= max, message: warning })],
  // 最小数值限制
  ['min', (min, warning) => ({ validator: val => val >= min, message: warning })],
  // 邮箱校验
  ['email', (warning) => ({ validator: val => val ? /^\w+\.?\w+@\w+(\.[a-z]{2,})+$/.test(val) : true, message: warning })],
  // 手机号验证
  ['mobile', (warning) => ({
    validator: val => val ? /^1[3456789]\d{9}$/.test(val) : true,
    message: warning,
  })],
  // type校验
  ['type', (type, warning) => ({ type, message: warning })],
]);

// 级联的数据来源选项(name必须与option的名字相同)
export const cascaderList = [
  { value: 1, label: '地址', name: 'address', option: address },
  { value: 2, label: '行业', name: 'industry', option: industry },
  { value: 3, label: '自定义', name: 'custom', option: [] },
];

/**
 * 获取表单的校验规则
 * @param {*} item 表单项
 * @param {Array} rules - 为执行`ruleLists.get(type)()`之后得到的每项校验的集合
 * @return {Array} 返回值每项为校验规则
 */
export function getFieldRules(rules) {
  return [...rules];
}