循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储

  <el-dialogtitle="创建表单":close-on-click-modal="false":append-to-body="true":visible="isShowForm"fullscreen @close="isShowForm=false">
    <fm-making-formref="makingform"style="height: calc(100vh - 84px);"preview

      generate-code

      generate-json

      upload

      clearable>
      <templateslot="action">
        <el-buttontype="primary"icon="el-icon-upload"size="mini"@click="saveCode()">保存代码</el-button>
      </template>
    </fm-making-form>

    saveCode() { //保存代码
      const json = this.$refs.makingform.getJSON();//getHtml()
      //console.log(json)
      this.$emit('save', JSON.stringify(json)); //触发事件，返回内容
      this.isShowForm = false}

<makingformref="makingform"@save="saveCode" />

saveCode(json) {if (this.isAdd) {this.addForm.content =json

      }else if (this.isEdit) {this.editForm.content =json

      }

    },

showMaking() {if (this.isAdd) {this.$refs.makingform.show()//显示窗口
      } else if (this.isEdit) {this.$refs.makingform.show(this.editForm.content)//显示窗口
}

    },

    show(json) { //显示窗口并加载数据
      this.isShowForm = true
      if (!this.isEmpty(json)) { //表单结构
        this.jsonData =JSON.parse(json)//console.log(this.jsonData)
        this.$nextTick(() =>{this.$refs.makingform.setJSON(this.jsonData);

        })

      }

    },

      hasDynamicForm: false, //是否有动态表单
      dynamicFormJson: '', //动态表单的JSON数据

created() {this.getlist() //获取并显示列表

    //处理动态表单
    var param = { name: 'testuser'}

    dynamicForm.FindByName(param).then(data=>{var result =data.resultif (result && !this.isEmpty(result.content)) {this.dynamicFormJson = result.content //表单数据
        this.hasDynamicForm = true //是否有
}

    })

  },

<template>
  <divclass="app-container">
    <divclass="fm-container">
      <fm-generate-formref="generateForm":data="jsonData":remote="remoteFuncs":value="editData" />
    </div>
  </div>
</template>

<script>import Vue from'vue'import VueEditor from'vue2-editor'Vue.use(VueEditor)

import FormMaking from'form-making'import'form-making/dist/FormMaking.css'Vue.use(FormMaking)



exportdefault{

  props: {

    json: {

      type: String,default:''},

    edit: {

      type: String,default:''}

  },

  data() {return{

      jsonData: {},

      editData: {},

      remoteFuncs: {}

    }

  },

  created() {this.show(this.json,this.edit)

  },

  methods: {

    clear() {this.$nextTick(()=>{this.$refs.generateForm.reset()

      })

    },

    show(json, edit) {//显示窗口并加载数据
      //console.log(json)
      //console.log(edit)

      if(!this.isEmpty(json)) {//表单结构
        this.jsonData=JSON.parse(json)

      }if(!this.isEmpty(edit)) {//表单结构
        this.editData=JSON.parse(edit)

      }

    },

    getData() {//获取动态表单数据并转换JSON
      return this.$refs.generateForm.getData()

    }

  }

}</script>

<stylelang="scss"scoped>.app-container,.fm-container{height:calc(100vh - 84px);
  }
</style>

<style>#app .app-container{padding:0 !important;
    }
</style>

        /// <summary>
        ///扩展JSON数据/// </summary>
        public string ExtensionData { get; set; }