低代码——表单生成器Form Generator详解（二）——从JSON配置项到动态渲染表单渲染

在设计低代码表单生成器之前，需要了解组件库相关内容的基础内容
ElementUI中Layout布局与Form表单详解

核心流程

表单生成器从 JSON 配置到动态渲染表单的核心流程如下：

1. 解析 JSON 配置：构建表单的结构和规则
2. 组件映射与渲染：将配置转化为可视化表单：表单根组件和表单项（递归，考虑布局列、横）
3. 数据绑定与响应式：实现数据的双向流动
4. 校验机制：确保数据的合法性
5. 表单操作与事件处理：实现交互逻辑

流程总览分析

主要执行流程说明：

1. 初始化阶段 ：

   • 接收表单配置对象formConf
   • 深拷贝配置，初始化表单数据和验证规则
   • 处理每个表单组件的默认值和特殊配置（如文件上传）

2. 渲染阶段 ：

   • 通过render函数创建el-form根组件
   • 递归渲染表单项，根据layout类型选择渲染方式
   • 使用render组件渲染具体的表单元素

3. render组件处理 ：

   • 创建Vue渲染所需的数据对象
   • 处理插槽内容
   • 绑定事件处理器
   • 构建最终的渲染数据对象
   • 渲染具体的表单元素

4. 事件处理 ：

   • 统一的表单提交和重置处理
   • 各个表单元素的值变更处理
   • 特殊组件（如文件上传）的自定义事件处理

文件结构分析

解析配置

/**
 * 表单解析器核心模块
 * 负责将JSON配置转换为可渲染的Vue表单组件
 * 主要功能：
 * - 表单布局生成
 * - 数据初始化
 * - 验证规则构建
 * - 表单事件处理
 */

export default {
  // 组件配置...
  methods: {
    /**
     * 初始化表单数据
     * @param {Array} componentList - 表单组件配置列表
     * @param {Object} formData - 表单数据对象
     */
    initFormData(componentList, formData) {
      // 实现细节...
    },

    /**
     * 构建验证规则
     * @param {Array} componentList - 表单组件列表
     * @param {Object} rules - 验证规则容器
     */
    buildRules(componentList, rules) {
      // 实现细节...
    }
  }
}

配置模板

类图说明：

1. FormConfig ：表单全局配置

   • 定义表单的基本属性如大小、标签位置等
   • 包含一个fields数组存储所有表单组件

2. ComponentConfig ：组件配置

   • 包含组件的核心配置( config )和插槽配置( slot )
   • 定义组件的模型绑定( vModel )和其他属性

3. ConfigObject ：组件核心配置

   • 定义组件的标签、图标、默认值等基本属性
   • 包含布局相关的配置如span和layout
   • 包含验证规则配置

4. SlotObject ：插槽配置

   • 定义组件的插槽内容
   • 包含选项数组(用于select、radio等)
   • 包含输入框的前后置内容

5. ValidationRule ：验证规则

   • 定义必填、正则等验证规则
   • 包含验证消息和触发方式

验证规则

• 定义不同表单组件的验证规则触发方式（blur/change）
• 为表单验证系统提供统一的触发机制配置
• 确保表单组件的验证行为一致性
  

生成代码

js.js

根据表单配置（conf）动态生成 Vue 组件中的 JavaScript 脚本代码，包括 data、rules、methods 等

• 深拷贝配置对象 conf
• 初始化多个代码片段列表：dataList、ruleList、optionsList、propsList、methodList、uploadVarList
• 遍历所有字段，调用 buildAttributes 构造各部分代码
• 汇总成完整脚本并返回

1. 核心执行流程：

• 入口函数 makeUpJs 接收表单配置和类型参数
• 递归处理每个表单字段，构建各种必要的代码片段
• 最终组装生成完整的Vue组件代码

2. 主要函数功能：

- buildAttributes : 递归处理字段属性

- buildData : 处理数据属性和默认值

- buildRules : 构建表单验证规则

- buildOptions : 处理选择器选项配置

- buildProps : 处理组件props

- buildBeforeUpload : 处理文件上传验证

- buildexport : 组装最终组件代码

特点

• 模块化设计，每个函数职责明确
• 支持递归处理复杂表单结构
• 完善的文件上传处理机制
• 灵活的验证规则配置
• 支持动态选项加载

/**
 * 表单生成器的JavaScript代码生成模块
 * 负责将JSON配置转换为Vue组件代码
 */

import { isArray } from 'util'
import { exportDefault, titleCase } from '@/utils/index'
import trigger from './ruleTrigger' // 导入验证规则触发器配置

// 文件大小单位换算常量
const units = {
  KB: '1024',
  MB: '1024 / 1024',
  GB: '1024 / 1024 / 1024'
}

// 全局配置对象
let confGlobal

// 继承属性配置
const inheritAttrs = {
  file: '',
  dialog: 'inheritAttrs: false,'
}


/**
 * 生成Vue组件代码的主入口函数
 * @param {Object} conf - 表单配置对象
 * @param {String} type - 生成类型(file/dialog)
 * @returns {String} 生成的Vue组件代码
 */
export function makeUpJs(conf, type) {
  confGlobal = conf = JSON.parse(JSON.stringify(conf))
  const dataList = []
  const ruleList = []
  const optionsList = []
  const propsList = []
  const methodList = mixinMethod(type)
  const uploadVarList = []

  conf.fields.forEach(el => {
    buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList)
  })

  const script = buildexport(
    conf,
    type,
    dataList.join('\n'),
    ruleList.join('\n'),
    optionsList.join('\n'),
    uploadVarList.join('\n'),
    propsList.join('\n'),
    methodList.join('\n')
  )
  confGlobal = null
  return script
}

/**
 * 构建组件属性
 * 递归处理表单字段，生成数据、规则、选项等配置
 * @param {Object} el - 字段配置对象
 * @param {Array} dataList - 数据属性列表
 * @param {Array} ruleList - 验证规则列表
 * @param {Array} optionsList - 选项配置列表
 * @param {Array} methodList - 方法列表
 * @param {Array} propsList - 属性列表
 * @param {Array} uploadVarList - 上传组件变量列表
 */
function buildAttributes(el, dataList, ruleList, optionsList, methodList, propsList, uploadVarList) {
  buildData(el, dataList)
  buildRules(el, ruleList)

  if (el.__slot__) {
    if (el.__slot__.options && el.__slot__.options.length) {
      buildOptions(el, optionsList)
    }
  } else {
    if (el.options && el.options.length) {
      buildOptions(el, optionsList)
      if (el.__config__.dataType === 'dynamic') {
        const model = `${el.__vModel__}Options`
        const options = titleCase(model)
        buildOptionMethod(`get${options}`, model, methodList)
      }
    }
  }

  if (el.props && el.props.props) {
    buildProps(el, propsList)
  }

  if (el.action && el.__config__.tag === 'el-upload') {
    uploadVarList.push(
      `${el.__vModel__}Action: '${el.action}',
      ${el.__vModel__}fileList: [],`
    )
    methodList.push(buildBeforeUpload(el))
    if (!el['auto-upload']) {
      methodList.push(buildSubmitUpload(el))
    }
  }

  if (el.__config__.children) {
    el.__config__.children.forEach(el2 => {
      buildAttributes(el2, dataList, ruleList, optionsList, methodList, propsList, uploadVarList)
    })
  }
}

/**
 * 混入默认方法
 * 根据类型添加默认的表单操作方法
 * @param {String} type - 组件类型(file/dialog)
 * @returns {Array} 方法列表
 */
function mixinMethod(type) {
  const list = []; 
  const minxins = {
      file: confGlobal.formBtns ? {
        submitForm: `submitForm() {
        this.$refs['${confGlobal.formRef}'].validate(valid => {
          if(!valid) return
        })
      },`,
        resetForm: `resetForm() {
        this.$refs['${confGlobal.formRef}'].resetFields()
      },`
      } : null,
      dialog: {
        onOpen: 'onOpen() {},',
        onClose: `onClose() {
        this.$refs['${confGlobal.formRef}'].resetFields()
      },`,
        close: `close() {
        this.$emit('update:visible', false)
      },`,
        handleConfirm: `handleConfirm() {
        this.$refs['${confGlobal.formRef}'].validate(valid => {
          if(!valid) return
          this.close()
        })
      },`
      }
    }

  const methods = minxins[type]
  if (methods) {
    Object.keys(methods).forEach(key => {
      list.push(methods[key])
    })
  }
  return list
}

/**
 * 构建数据属性
 * 处理字段的默认值配置
 * @param {Object} conf - 字段配置
 * @param {Array} dataList - 数据列表
 */
function buildData(conf, dataList) {
  if (conf.__vModel__ === undefined) return
  let defaultValue
  if (typeof (conf.__config__.defaultValue) === 'string' && !conf.multiple) {
    defaultValue = `'${conf.__config__.defaultValue}'`
  } else {
    defaultValue = `${JSON.stringify(conf.__config__.defaultValue)}`
  }
  dataList.push(`${conf.__vModel__}: ${defaultValue},`)
}

/**
 * 构建验证规则
 * 处理必填和正则验证规则
 * @param {Object} conf - 字段配置
 * @param {Array} ruleList - 规则列表
 */
function buildRules(conf, ruleList) {
  if (conf.__vModel__ === undefined) return
  const rules = []
  if (trigger[conf.__config__.tag]) {
    if (conf.__config__.required) {
      const type = isArray(conf.__config__.defaultValue) ? 'type: \'array\',' : ''
      let message = isArray(conf.__config__.defaultValue) ? `请至少选择一个${conf.__vModel__}` : conf.placeholder
      if (message === undefined) message = `${conf.__config__.label}不能为空`
      rules.push(`{ required: true, ${type} message: '${message}', trigger: '${trigger[conf.__config__.tag]}' }`)
    }
    if (conf.__config__.regList && isArray(conf.__config__.regList)) {
      conf.__config__.regList.forEach(item => {
        if (item.pattern) {
          rules.push(`{ pattern: ${eval(item.pattern)}, message: '${item.message}', trigger: '${trigger[conf.__config__.tag]}' }`)
        }
      })
    }
    ruleList.push(`${conf.__vModel__}: [${rules.join(',')}],`)
  }
}

/**
 * 构建选项配置
 * 处理下拉框、级联选择器等的选项数据
 * @param {Object} conf - 字段配置
 * @param {Array} optionsList - 选项列表
 */
function buildOptions(conf, optionsList) {
  if (conf.__vModel__ === undefined) return
  if (conf.__config__.dataType === 'dynamic') { conf.options = [] }
  const options = conf.__config__.tag ==='el-cascader'?conf.options:conf.__slot__.options;
  const str = `${conf.__vModel__}Options: ${JSON.stringify(options)},`
  optionsList.push(str)
}

/**
 * 构建组件属性
 * 处理组件的props配置
 * @param {Object} conf - 字段配置
 * @param {Array} propsList - 属性列表
 */
function buildProps(conf, propsList) {
  if (conf.__config__.dataType === 'dynamic') {
    conf.valueKey !== 'value' && (conf.props.props.value = conf.valueKey)
    conf.labelKey !== 'label' && (conf.props.props.label = conf.labelKey)
    conf.childrenKey !== 'children' && (conf.props.props.children = conf.childrenKey)
  }
  const str = `${conf.__vModel__}Props: ${JSON.stringify(conf.props.props)},`
  propsList.push(str)
}

/**
 * 构建上传前验证方法
 * 处理文件大小和类型验证
 * @param {Object} conf - 上传组件配置
 * @returns {String} 验证方法代码
 */
function buildBeforeUpload(conf) {
  const unitNum = units[conf.__config__.sizeUnit]; let rightSizeCode = ''; let acceptCode = ''; const
    returnList = []
  if (conf.__config__.fileSize) {
    rightSizeCode = `let isRightSize = file.size / ${unitNum} < ${conf.__config__.fileSize}
    if(!isRightSize){
      this.$message.error('文件大小超过 ${conf.__config__.fileSize}${conf.__config__.sizeUnit}')
    }`
    returnList.push('isRightSize')
  }
  if (conf.accept) {
    acceptCode = `let isAccept = new RegExp('${conf.accept}').test(file.type)
    if(!isAccept){
      this.$message.error('应该选择${conf.accept}类型的文件')
    }`
    returnList.push('isAccept')
  }
  const str = `${conf.__vModel__}BeforeUpload(file) {
    ${rightSizeCode}
    ${acceptCode}
    return ${returnList.join('&&')}
  },`
  return returnList.length ? str : ''
}

/**
 * 构建上传提交方法
 * @param {Object} conf - 上传组件配置
 * @returns {String} 提交方法代码
 */
function buildSubmitUpload(conf) {
  const str = `submitUpload() {
    this.$refs['${conf.__vModel__}'].submit()
  },`
  return str
}

/**
 * 构建选项加载方法
 * 用于动态加载选项数据
 * @param {String} methodName - 方法名
 * @param {String} model - 数据模型名
 * @param {Array} methodList - 方法列表
 */
function buildOptionMethod(methodName, model, methodList) {
  const str = `${methodName}() {
    // TODO 发起请求获取数据
    this.${model}
  },`
  methodList.push(str)
}

/**
 * 构建Vue组件导出代码
 * 组装最终的组件代码结构
 * @param {Object} conf - 配置对象
 * @param {String} type - 组件类型
 * @param {String} data - 数据定义代码
 * @param {String} rules - 验证规则代码
 * @param {String} selectOptions - 选项配置代码
 * @param {String} uploadVar - 上传变量代码
 * @param {String} props - 属性定义代码
 * @param {String} methods - 方法定义代码
 * @returns {String} 完整的Vue组件代码
 */
function buildexport(conf, type, data, rules, selectOptions, uploadVar, props, methods) {
  const str = `${exportDefault}{
  ${inheritAttrs[type]}
  components: {},
  props: [],
  data () {
    return {
      ${conf.formModel}: {
        ${data}
      },
      ${conf.formRules}: {
        ${rules}
      },
      ${uploadVar}
      ${selectOptions}
      ${props}
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    ${methods}
  }
}`
  return str
}

css.js

根据表单字段配置 conf，生成样式（CSS）代码字符串:根据每个字段的 config.tag 类型，从 styles 中匹配对应的样式字符串并加入 CSS 列表，最后拼接成一个完整的样式字符串返回。

const styles = {
  'el-rate': '.el-rate{display: inline-block; vertical-align: text-top;}',
  'el-upload': '.el-upload__tip{line-height: 1.2;}'
}

function addCss(cssList, el) {
  const css = styles[el.__config__.tag]
  css && cssList.indexOf(css) === -1 && cssList.push(css)
  if (el.__config__.children) {
    el.__config__.children.forEach(el2 => addCss(cssList, el2))
  }
}

export function makeUpCss(conf) {
  const cssList = []
  conf.fields.forEach(el => addCss(cssList, el))
  return cssList.join('\n')
}

html.js

根据配置对象 (conf) 自动构建可复用的 Vue 表单模板

此模块的核心作用是：

1. 根据配置生成动态的 Vue 表单代码，包括样式、控件、布局。
2. 通过组件映射和插槽机制提升扩展性和可维护性。
3. 支持 Element UI 的各种表单控件与弹窗包装，适用于低代码平台表单生成器。

主函数

export function makeUpHtml(conf, type) {
  const htmlList = []
  confGlobal = conf
  someSpanIsNot24 = conf.fields.some(item => item.span !== 24)
  conf.fields.forEach(el => {
    htmlList.push(layouts[el.__config__.layout](el))
  })
  //表单子元素
  const htmlStr = htmlList.join('\n')
 //表单
  let temp = buildFormTemplate(conf, htmlStr, type)
  //是否弹出框形式显示
  if (type === 'dialog') {
    temp = dialogWrapper(temp)
  }
  confGlobal = null
  return temp
}

构建表单子元素

布局

layouts : 包含两种布局处理器：

• colFormItem : 处理单列表单项
• rowFormItem : 处理行布局，可包含多个子元素

const layouts = {
  colFormItem(element) {
    let labelWidth = ''
    if (element.__config__.labelWidth && element.__config__.labelWidth !== confGlobal.labelWidth) {
      labelWidth = `label-width="${element.__config__.labelWidth}px"`
    }
    const required = !trigger[element.__config__.tag] && element.__config__.required ? 'required' : ''
    const tagDom = tags[element.__config__.tag] ? tags[element.__config__.tag](element) : null
    let str = `<el-form-item ${labelWidth} label="${element.__config__.label}" prop="${element.__vModel__}" ${required}>
        ${tagDom}
      </el-form-item>`
    str = colWrapper(element, str)
    return str
  },
  rowFormItem(element) {
    const type = element.type === 'default' ? '' : `type="${element.type}"`
    const justify = element.type === 'default' ? '' : `justify="${element.justify}"`
    const align = element.type === 'default' ? '' : `align="${element.align}"`
    const gutter = element.gutter ? `gutter="${element.gutter}"` : ''
    const children = element.__config__.children.map(el => layouts[el.__config__.layout](el))
    let str = `<el-row ${type} ${justify} ${align} ${gutter}>
      ${children.join('\n')}
    </el-row>`
    str = colWrapper(element, str)
    return str
  }
}

子元素映射

const tags = {
  'el-button': el => {
    const {
      tag, disabled
    } = attrBuilder(el)
    const type = el.type ? `type="${el.type}"` : ''
    const icon = el.icon ? `icon="${el.icon}"` : ''
    const size = el.size ? `size="${el.size}"` : ''
    let child = buildElButtonChild(el)

    if (child) child = `\n${child}\n` // 换行
    return `<${el.__config__.tag} ${type} ${icon} ${size} ${disabled}>${child}</${el.__config__.tag}>`
  },
  'el-input': el => {
    const {
      disabled, vModel, clearable, placeholder, width
    } = attrBuilder(el)
    const maxlength = el.maxlength ? `:maxlength="${el.maxlength}"` : ''
    const showWordLimit = el['show-word-limit'] ? 'show-word-limit' : ''
    const readonly = el.readonly ? 'readonly' : ''
    const prefixIcon = el['prefix-icon'] ? `prefix-icon='${el['prefix-icon']}'` : ''
    const suffixIcon = el['suffix-icon'] ? `suffix-icon='${el['suffix-icon']}'` : ''
    const showPassword = el['show-password'] ? 'show-password' : ''
    const type = el.type ? `type="${el.type}"` : ''
    const autosize = el.autosize && el.autosize.minRows
      ? `:autosize="{minRows: ${el.autosize.minRows}, maxRows: ${el.autosize.maxRows}}"`
      : ''
    let child = buildElInputChild(el)

    if (child) child = `\n${child}\n` // 换行
    return `<${el.__config__.tag} ${vModel} ${type} ${placeholder} ${maxlength} ${showWordLimit} ${readonly} ${disabled} ${clearable} ${prefixIcon} ${suffixIcon} ${showPassword} ${autosize} ${width}>${child}</${el.__config__.tag}>`
  },
  'el-input-number': el => {
    const { disabled, vModel, placeholder } = attrBuilder(el)
    const controlsPosition = el['controls-position'] ? `controls-position=${el['controls-position']}` : ''
    const min = el.min ? `:min='${el.min}'` : ''
    const max = el.max ? `:max='${el.max}'` : ''
    const step = el.step ? `:step='${el.step}'` : ''
    const stepStrictly = el['step-strictly'] ? 'step-strictly' : ''
    const precision = el.precision ? `:precision='${el.precision}'` : ''

    return `<${el.__config__.tag} ${vModel} ${placeholder} ${step} ${stepStrictly} ${precision} ${controlsPosition} ${min} ${max} ${disabled}></${el.__config__.tag}>`
  },
  'el-select': el => {
    const {
      disabled, vModel, clearable, placeholder, width
    } = attrBuilder(el)
    const filterable = el.filterable ? 'filterable' : ''
    const multiple = el.multiple ? 'multiple' : ''
    let child = buildElSelectChild(el)

    if (child) child = `\n${child}\n` // 换行
    return `<${el.__config__.tag} ${vModel} ${placeholder} ${disabled} ${multiple} ${filterable} ${clearable} ${width}>${child}</${el.__config__.tag}>`
  },
  'el-radio-group': el => {
    const { disabled, vModel } = attrBuilder(el)
    const size = `size="${el.size}"`
    let child = buildElRadioGroupChild(el)

    if (child) child = `\n${child}\n` // 换行
    return `<${el.__config__.tag} ${vModel} ${size} ${disabled}>${child}</${el.__config__.tag}>`
  },
  'el-checkbox-group': el => {
    const { disabled, vModel } = attrBuilder(el)
    const size = `size="${el.size}"`
    const min = el.min ? `:min="${el.min}"` : ''
    const max = el.max ? `:max="${el.max}"` : ''
    let child = buildElCheckboxGroupChild(el)

    if (child) child = `\n${child}\n` // 换行
    return `<${el.__config__.tag} ${vModel} ${min} ${max} ${size} ${disabled}>${child}</${el.__config__.tag}>`
  },
  'el-switch': el => {
    const { disabled, vModel } = attrBuilder(el)
    const activeText = el['active-text'] ? `active-text="${el['active-text']}"` : ''
    const inactiveText = el['inactive-text'] ? `inactive-text="${el['inactive-text']}"` : ''
    const activeColor = el['active-color'] ? `active-color="${el['active-color']}"` : ''
    const inactiveColor = el['inactive-color'] ? `inactive-color="${el['inactive-color']}"` : ''
    const activeValue = el['active-value'] !== true ? `:active-value='${JSON.stringify(el['active-value'])}'` : ''
    const inactiveValue = el['inactive-value'] !== false ? `:inactive-value='${JSON.stringify(el['inactive-value'])}'` : ''

    return `<${el.__config__.tag} ${vModel} ${activeText} ${inactiveText} ${activeColor} ${inactiveColor} ${activeValue} ${inactiveValue} ${disabled}></${el.__config__.tag}>`
  },
  'el-cascader': el => {
    const {
      disabled, vModel, clearable, placeholder, width
    } = attrBuilder(el)
    const options = el.options ? `:options="${el.__vModel__}Options"` : ''
    const props = el.props ? `:props="${el.__vModel__}Props"` : ''
    const showAllLevels = el['show-all-levels'] ? '' : ':show-all-levels="false"'
    const filterable = el.filterable ? 'filterable' : ''
    const separator = el.separator === '/' ? '' : `separator="${el.separator}"`

    return `<${el.__config__.tag} ${vModel} ${options} ${props} ${width} ${showAllLevels} ${placeholder} ${separator} ${filterable} ${clearable} ${disabled}></${el.__config__.tag}>`
  },
  'el-slider': el => {
    const { disabled, vModel } = attrBuilder(el)
    const min = el.min ? `:min='${el.min}'` : ''
    const max = el.max ? `:max='${el.max}'` : ''
    const step = el.step ? `:step='${el.step}'` : ''
    const range = el.range ? 'range' : ''
    const showStops = el['show-stops'] ? `:show-stops="${el['show-stops']}"` : ''

    return `<${el.__config__.tag} ${min} ${max} ${step} ${vModel} ${range} ${showStops} ${disabled}></${el.__config__.tag}>`
  },
  'el-time-picker': el => {
    const {
      disabled, vModel, clearable, placeholder, width
    } = attrBuilder(el)
    const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : ''
    const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : ''
    const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : ''
    const isRange = el['is-range'] ? 'is-range' : ''
    const format = el.format ? `format="${el.format}"` : ''
    const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : ''
    const pickerOptions = el['picker-options'] ? `:picker-options='${JSON.stringify(el['picker-options'])}'` : ''

    return `<${el.__config__.tag} ${vModel} ${isRange} ${format} ${valueFormat} ${pickerOptions} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${disabled}></${el.__config__.tag}>`
  },
  'el-date-picker': el => {
    const {
      disabled, vModel, clearable, placeholder, width
    } = attrBuilder(el)
    const startPlaceholder = el['start-placeholder'] ? `start-placeholder="${el['start-placeholder']}"` : ''
    const endPlaceholder = el['end-placeholder'] ? `end-placeholder="${el['end-placeholder']}"` : ''
    const rangeSeparator = el['range-separator'] ? `range-separator="${el['range-separator']}"` : ''
    const format = el.format ? `format="${el.format}"` : ''
    const valueFormat = el['value-format'] ? `value-format="${el['value-format']}"` : ''
    const type = el.type === 'date' ? '' : `type="${el.type}"`
    const readonly = el.readonly ? 'readonly' : ''

    return `<${el.__config__.tag} ${type} ${vModel} ${format} ${valueFormat} ${width} ${placeholder} ${startPlaceholder} ${endPlaceholder} ${rangeSeparator} ${clearable} ${readonly} ${disabled}></${el.__config__.tag}>`
  },
  'el-rate': el => {
    const { disabled, vModel } = attrBuilder(el)
    const max = el.max ? `:max='${el.max}'` : ''
    const allowHalf = el['allow-half'] ? 'allow-half' : ''
    const showText = el['show-text'] ? 'show-text' : ''
    const showScore = el['show-score'] ? 'show-score' : ''

    return `<${el.__config__.tag} ${vModel} ${max} ${allowHalf} ${showText} ${showScore} ${disabled}></${el.__config__.tag}>`
  },
  'el-color-picker': el => {
    const { disabled, vModel } = attrBuilder(el)
    const size = `size="${el.size}"`
    const showAlpha = el['show-alpha'] ? 'show-alpha' : ''
    const colorFormat = el['color-format'] ? `color-format="${el['color-format']}"` : ''

    return `<${el.__config__.tag} ${vModel} ${size} ${showAlpha} ${colorFormat} ${disabled}></${el.__config__.tag}>`
  },
  'el-upload': el => {
    const disabled = el.disabled ? ':disabled=\'true\'' : ''
    const action = el.action ? `:action="${el.__vModel__}Action"` : ''
    const multiple = el.multiple ? 'multiple' : ''
    const listType = el['list-type'] !== 'text' ? `list-type="${el['list-type']}"` : ''
    const accept = el.accept ? `accept="${el.accept}"` : ''
    const name = el.name !== 'file' ? `name="${el.name}"` : ''
    const autoUpload = el['auto-upload'] === false ? ':auto-upload="false"' : ''
    const beforeUpload = `:before-upload="${el.__vModel__}BeforeUpload"`
    const fileList = `:file-list="${el.__vModel__}fileList"`
    const ref = `ref="${el.__vModel__}"`
    let child = buildElUploadChild(el)

    if (child) child = `\n${child}\n` // 换行
    return `<${el.__config__.tag} ${ref} ${fileList} ${action} ${autoUpload} ${multiple} ${beforeUpload} ${listType} ${accept} ${name} ${disabled}>${child}</${el.__config__.tag}>`
  },
  tinymce: el => {
    const { tag, vModel, placeholder } = attrBuilder(el)
    const height = el.height ? `:height="${el.height}"` : ''
    const branding = el.branding ? `:branding="${el.branding}"` : ''
    return `<${tag} ${vModel} ${placeholder} ${height} ${branding}></${tag}>`
  }
}

function attrBuilder(el) {
  return {
    vModel: `v-model="${confGlobal.formModel}.${el.__vModel__}"`,
    clearable: el.clearable ? 'clearable' : '',
    placeholder: el.placeholder ? `placeholder="${el.placeholder}"` : '',
    width: el.style && el.style.width ? ':style="{width: \'100%\'}"' : '',
    disabled: el.disabled ? ':disabled=\'true\'' : ''
  }
}

子元素构建

// el-button 子级
function buildElButtonChild(conf) {
  const children = []
  if (conf.__config__.defaultValue) {
    children.push(conf.__config__.defaultValue)
  }
  return children.join('\n')
}

// el-input innerHTML
function buildElInputChild(conf) {
  const children = []
  if (conf.__slot__ && conf.__slot__.prepend) {
    children.push(`<template slot="prepend">${conf.__slot__.prepend}</template>`)
  }
  if (conf.__slot__ && conf.__slot__.append) {
    children.push(`<template slot="append">${conf.__slot__.append}</template>`)
  }
  return children.join('\n')
}

function buildElSelectChild(conf) {
  const children = []
  if (conf.__slot__.options && conf.__slot__.options.length) {
    children.push(`<el-option v-for="(item, index) in ${conf.__vModel__}Options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>`)
  }
  return children.join('\n')
}

function buildElRadioGroupChild(conf) {
  const children = []
  if (conf.__slot__.options && conf.__slot__.options.length) {
    const tag = conf.__config__.optionType === 'button' ? 'el-radio-button' : 'el-radio'
    const border = conf.__config__.border ? 'border' : ''
    children.push(`<${tag} v-for="(item, index) in ${conf.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
  }
  return children.join('\n')
}

function buildElCheckboxGroupChild(conf) {
  const children = []
  if (conf.__slot__.options && conf.__slot__.options.length) {
    const tag = conf.__config__.optionType === 'button' ? 'el-checkbox-button' : 'el-checkbox'
    const border = conf.__config__.border ? 'border' : ''
    children.push(`<${tag} v-for="(item, index) in ${conf.__vModel__}Options" :key="index" :label="item.value" :disabled="item.disabled" ${border}>{{item.label}}</${tag}>`)
  }
  return children.join('\n')
}

function buildElUploadChild(conf) {
  const list = []
  if (conf['list-type'] === 'picture-card') list.push('<i class="el-icon-plus"></i>')
  else list.push(`<el-button size="small" type="primary" icon="el-icon-upload">${conf.__config__.buttonText}</el-button>`)
  if (conf.__config__.showTip) list.push(`<div slot="tip" class="el-upload__tip">只能上传不超过 ${conf.__config__.fileSize}${conf.__config__.sizeUnit} 的${conf.accept}文件</div>`)
  return list.join('\n')
}

表单模板

export function dialogWrapper(str) {
  return `<el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Title">
    ${str}
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </el-dialog>`
}

export function vueTemplate(str) {
  return `<template>
    <div>
      ${str}
    </div>
  </template>`
}

export function vueScript(str) {
  return `<script>
    ${str}
  </script>`
}

export function cssStyle(cssStr) {
  return `<style>
    ${cssStr}
  </style>`
}

function buildFormTemplate(conf, child, type) {
  let labelPosition = ''
  if (conf.labelPosition !== 'right') {
    labelPosition = `label-position="${conf.labelPosition}"`
  }
  const disabled = conf.disabled ? `:disabled="${conf.disabled}"` : ''
  let str = `<el-form ref="${conf.formRef}" :model="${conf.formModel}" :rules="${conf.formRules}" size="${conf.size}" ${disabled} label-width="${conf.labelWidth}px" ${labelPosition}>
      ${child}
      ${buildFromBtns(conf, type)}
    </el-form>`
  if (someSpanIsNot24) {
    str = `<el-row :gutter="${conf.gutter}">
        ${str}
      </el-row>`
  }
  return str
}

function buildFromBtns(conf, type) {
  let str = ''
  if (conf.formBtns && type === 'file') {
    str = `<el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>`
    if (someSpanIsNot24) {
      str = `<el-col :span="24">
          ${str}
        </el-col>`
    }
  }
  return str
}

渲染组件

render.js是表单生成器的渲染核心模块，负责将JSON配置转换为实际的Vue组件。以下是详细分析：

1. 文件结构和主要功能：

• 实现了一个基于Vue render函数的表单渲染器
• 支持动态插槽加载和事件处理
• 提供完整的数据对象构建流程

2. 核心执行流程：

• 初始化时动态加载插槽组件
• 通过render函数将配置转换为DOM
• 处理v-model、事件绑定和属性配置

3. 主要函数功能：

• vModel : 处理双向数据绑定
• mountSlotFiles : 挂载插槽内容
• emitEvents : 处理事件发射
• buildDataObject : 构建渲染数据对象
• makeDataObject : 创建基础数据结构
  

5. 特点和优势：

• 灵活的插槽系统：支持动态加载和自定义插槽内容
• 完善的事件处理：自动转换事件处理器
• 强大的数据处理：支持多种数据类型和属性合并
• 清晰的代码结构：职责分明，易于维护

6. 与其他模块的关系：

• 配合 js.js 处理组件逻辑
• 与 html.js 协同生成完整组件
• 使用 deepClone 确保配置对象的独立性

• render.js 与 js.js 配合处理Vue组件逻辑生成
• 与 html.js 协同完成组件模板和数据绑定
• 通过 deepClone 工具函数确保配置对象的深拷贝独立性
• 使用不同样式区分核心模块( module )和工具函数( tool )

• • render.js 与 js.js 配合处理Vue组件逻辑生成
• 与 html.js 协同完成组件模板和数据绑定
• 通过 deepClone 工具函数确保配置对象的深拷贝独立性
• 使用不同样式区分核心模块( module )和工具函数( tool )

/**
 * 表单渲染器模块
 * 负责将字符串形式配置转换为Vue渲染函数
 * 支持自定义插槽和事件处理
 */

import { deepClone } from '@/utils/index'

// 组件插槽配置对象
const componentChild = {}

/**
 * 动态导入并注册插槽组件
 * 将./slots目录下的所有.js文件挂载到componentChild对象
 * @param {Object} componentChild - 组件插槽配置对象
 * @param {Function} require.context - Webpack的require.context函数
 */
const slotsFiles = require.context('./slots', false, /\.js$/)
const keys = slotsFiles.keys() || []
keys.forEach(key => {
  const tag = key.replace(/^\.\/(.*)\.\w+$/, '$1')
  componentChild[tag] = slotsFiles(key).default
})

/**
 * 处理组件的v-model指令
 * @param {Object} dataObject - 组件数据对象
 * @param {*} defaultValue - 默认值
 */
function vModel(dataObject, defaultValue) {
  dataObject.props.value = defaultValue

  dataObject.on.input = val => {
    this.$emit('input', val)
  }
}

/**
 * 挂载插槽内容
 * @param {Function} h - Vue的createElement函数
 * @param {Object} confClone - 组件配置对象的克隆
 * @param {Array} children - 子节点数组
 */
function mountSlotFiles(h, confClone, children) {
  const childObjs = componentChild[confClone.__config__.tag]
  if (childObjs) {
    Object.keys(childObjs).forEach(key => {
      const childFunc = childObjs[key]
      if (confClone.__slot__ && confClone.__slot__[key]) {
        children.push(childFunc(h, confClone, key))
      }
    })
  }
}

/**
 * 处理事件发射
 * 将字符串类型的事件处理器转换为实际的函数
 * @param {Object} confClone - 组件配置对象的克隆
 */
function emitEvents(confClone) {
  ['on', 'nativeOn'].forEach(attr => {
    const eventKeyList = Object.keys(confClone[attr] || {})
    eventKeyList.forEach(key => {
      const val = confClone[attr][key]
      if (typeof val === 'string') {
        confClone[attr][key] = event => this.$emit(val, event)
      }
    })
  })
}

/**
 * 构建组件的数据对象
 * 处理props、attrs等配置
 * @param {Object} confClone - 组件配置对象的克隆
 * @param {Object} dataObject - 渲染数据对象
 */
function buildDataObject(confClone, dataObject) {
  Object.keys(confClone).forEach(key => {
    const val = confClone[key]
    if (key === '__vModel__') {
      vModel.call(this, dataObject, confClone.__config__.defaultValue)
    } else if (dataObject[key] !== undefined) {
      if (dataObject[key] === null
        || dataObject[key] instanceof RegExp
        || ['boolean', 'string', 'number', 'function'].includes(typeof dataObject[key])) {
        dataObject[key] = val
      } else if (Array.isArray(dataObject[key])) {
        dataObject[key] = [...dataObject[key], ...val]
      } else {
        dataObject[key] = { ...dataObject[key], ...val }
      }
    } else {
      dataObject.attrs[key] = val
    }
  })

  // 清理属性
  clearAttrs(dataObject)
}

/**
 * 清理内部使用的属性
 * @param {Object} dataObject - 渲染数据对象
 */
function clearAttrs(dataObject) {
  delete dataObject.attrs.__config__
  delete dataObject.attrs.__slot__
  delete dataObject.attrs.__methods__
}

/**
 * 创建渲染函数数据对象的基础结构
 * 包含class、attrs、props等Vue渲染函数所需的所有属性
 * @returns {Object} 渲染数据对象
 */
function makeDataObject() {
  // 深入数据对象：
  // https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
  return {
    class: {},
    attrs: {},
    props: {},
    domProps: {},
    nativeOn: {},
    on: {},
    style: {},
    directives: [],
    scopedSlots: {},
    slot: null,
    key: null,
    ref: null,
    refInFor: true
  }
}

/**
 * 表单渲染器组件
 * 使用Vue的render函数将JSON配置转换为实际的DOM
 */
export default {
  props: {
    conf: {
      type: Object,
      required: true
    }
  },
  render(h) {
    const dataObject = makeDataObject()
    const confClone = deepClone(this.conf)
    const children = this.$slots.default || []

    // 如果slots文件夹存在与当前tag同名的文件，则执行文件中的代码
    mountSlotFiles.call(this, h, confClone, children)

    // 将字符串类型的事件，发送为消息
    emitEvents.call(this, confClone)

    // 将json表单配置转化为vue render可以识别的 “数据对象（dataObject）”
    buildDataObject.call(this, confClone, dataObject)

    return h(this.conf.__config__.tag, dataObject, children)
  }
}