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

<el-dialog title="创建表单" :close-on-click-modal="false" :append-to-body="true" :visible="isShowForm" fullscreen @close="isShowForm=false">
    <fm-making-form
      ref="makingform"
      style="height: calc(100vh - 84px);"
      preview
      generate-code
      generate-json
      upload
      clearable
    >
      <template slot="action">
        <el-button type="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
    }

<makingform ref="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.result
      if (result && !this.isEmpty(result.content)) {
        this.dynamicFormJson = result.content // 表单数据
        this.hasDynamicForm = true // 是否有
      }
    })
  },

<template>
  <div class="app-container">
    <div class="fm-container">
      <fm-generate-form ref="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)
export default {
  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>
<style lang="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; }