FormMaking 表单设计器

FormMaking

npm安装

npm install form-making -S

引入 FormMaking

全局引入

import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.use(FormMaking)

//引入部分组件
import {
  GenerateForm,
  MakingForm
} from 'form-making'

Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)

代码

表单设计器 （MakingForm）

<template>
 <fm-making-form 
        ref="makingform" 
        style="height: 500px;" 
        preview
    >
    <template slot="action">
      <!-- 自定义操作区域插槽 -->
      <el-button type="text" icon="el-icon-upload" @click='savaJson'>保存</el-button>
      <el-button type="text" icon="el-icon-upload" @click='downJson'>下载</el-button>
    </template>
    </fm-making-form>
</template>
<script>
 export default {
    methods: {
        savaJson(){ 
           const tempData = Object.assign({
               "json":this.$refs.makingform.getJSON(),//获取json数据
               "html":this.$refs.makingform.getHtml()//获取html代码
           }, this.temp);
           this.$emit('updataJson',tempData)
        },
        downJson(){
          const fileName = this.temp.formName
          const _res = JSON.stringify(this.$refs.makingform.getJSON())
          let blob = new Blob([_res], {type: 'text/json,charset=utf-8'});
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          
          downloadElement.href = href;
          downloadElement.download = fileName +'.json'; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href);
        },
  }
}
   }
</script>

表单生成器 （GenerateForm）（表单渲染）

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </div>
</template>
<script>
export default {
  data(){
let self = this
    return{
      jsonData:null,
      remoteFuncs:{
        func_dep (resolve) {
          // 模拟接口请求
          setTimeout(() => {
            const options = self.optionsArr
            console.log('options',self.optionsArr)
            resolve(options) // 将后端获取的数据放入回调函数中
          }, 2000)
        },
        func_agree (resolve) {
          // 模拟接口请求
          setTimeout(() => {
            const options = self.agreeArr
            resolve(options) // 将后端获取的数据放入回调函数中
          }, 2000)
        },
      },
    }
  },
methods: {
    onSubmit(){
      
        //TODO 提交表单
        this.$refs.generateForm.getData().then(data => {
                // alert(JSON.stringify(data))
                console.log('submit',data)
                this.$emit('completeSubmit',data)
        }).catch(e => {
        })
    },
}
 }
</script>