美文网首页
FormMaking 表单设计器

FormMaking 表单设计器

作者: 廖小芝 | 来源:发表于2021-01-22 11:40 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:FormMaking 表单设计器

          本文链接:https://www.haomeiwen.com/subject/surszktx.html