form-generator 添加 iframe组件若依

form-generator的作者是这样介绍的:Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中;也可导出JSON表单,使用配套的解析器将JSON解析成真实的表单。

本文是在 RuoYi-flowable 的基础上修改的，如果是在RuoYi原版本上修改也是差不多的，找到对应的文件就行。

一、全局注册ifarme组件，src/main.js

// iframe组件
import iFrame from "@/components/iFrame/index"
Vue.component('iFrame', iFrame)

二、将组件添加到表单设计器config.js，src/utils/generator/config.js，在文件最后添加

// iFrame组件 【左面板】
export const iframeComponents = [
  {
    __config__: {
      label: 'iframe组件',
      showLabel: false,
      changeTag: true,
      tag: 'i-frame',
      tagIcon: 'row',
      defaultValue: undefined,
      span: 24,
      layout: 'colFormItem',
      document: '#'
    },
    style: { height: '300px', width: '100%' },
    height: 300,
  }
]

三、组件属性的可视化修改，/src/views/tool/build/RightPanel.vue

      <!-- ifarme组件的默认值显示为链接地址 -->
      <el-form-item v-if="activeData.__vModel__!==undefined" :label="activeData.__config__.tag !== 'i-frame' ? '默认值' : '链接地址'">
        <el-input
          :value="setDefaultValue(activeData.__config__.defaultValue)"
          :placeholder="activeData.__config__.tag !== 'i-frame' ? '请输入默认值' : '请输入链接地址(src)'"
          @input="onDefaultValueInput"
        />
      </el-form-item>

// 导入添加iframeComponents
import {
  inputComponents, selectComponents, layoutComponents, iframeComponents
} from '@/utils/generator/config'

// tagList() 添加iframe组件
computed: {
    tagList() {
      return [
        {
          label: '输入型组件',
          options: inputComponents
        },
        {
          label: '选择型组件',
          options: selectComponents
        },
        {
          label: 'iframe组件',
          options: iframeComponents
        }
      ]
    },
}

四、生成html代码，/src/utils/generator/html.js

// iframe组件生成html代码时带上src，非必要，在编辑表单页面点击运行按钮生成的html代码会带上src
const layouts = {
  colFormItem(scheme) {
    const tagDom = (config.tag === 'i-frame' && config.defaultValue)
      ? `<${config.tag} :src="${config.defaultValue}" />`
      : tags[config.tag] ? tags[config.tag](scheme) : null
  }
}

// 添加iframe组件的html输出
const tags = {
  'i-frame': el => {
    const {
      tag
    } = attrBuilder(el)
    const src = `:src=""`
    return `<${tag} ${src} />`
  },
}

五、json渲染表单添加iframe组件支持，src/components/render/render.js

function vModel(dataObject, defaultValue, config) {
  // iframe组件设置src
  if (config.tag === 'i-frame') {
    dataObject.attrs["src"] = defaultValue;
    return;
  }
}

参考：
https://github.com/JakHuang/form-generator
表单设计器 · 开发教程
 .vue代码生成器 · 开发教程
 表单解析器 · 开发教程

我来吐槽