表單設計器form-marking的使用（一）

前言

項目開發要做工作流，也因此需要一個表單設計功能，所以在網上找到了form-marking這個組件。
官方地址：http://docs.form.making.link

安裝

// 依賴包安裝
npm install form-making -S

引入

// vue引入
// 全局
import FormMaking from '@/lib/vue-form-making'
import '@/lib/vue-form-making/dist/FormMaking.css'

Vue.use(FormMaking)

//局部
import {
  GenerateForm,
  MakingForm
} from '@/lib/vue-form-making'
import '@/lib/vue-form-making/dist/FormMaking.css'

Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)
/* 或寫為
 * Vue.use(GenerateForm)
 * Vue.use(MakingForm)
 */

使用

組件
MakingForm 表單設計組件
GenerateForm 表單生成組件
GenerateAntdForm Ant Design 風格的表單生成器組件

因為項目UI框架使用了element-UI,我這里使用了前兩個組件。

1、 MakingForm

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 700px;"
    upload preview generate-code generate-json clearable
  >
    <!-- upload：上傳 preview：預覽 generate-code：生成代碼 generate-json：生成表單json clearable：清空 -->
  </fm-making-form>
</template>

方法

通過 this.$refs 可以獲取到 MakingForm 實例並調用實例方法
getJSON 獲取設計器配置的json數據
getHtml 獲取設計器生成的可以直接使用的代碼
setJSON 設置設計器配置的json數據
項目中需要通過方法獲取表單的JSON傳給后台，
預覽表單需要通過調接口獲取對應表單的JSON數據，賦給表單生成器綁定的jsonData

2、GenerateForm

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      ref="generateForm"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1606804886162","remoteOption":"option_1606804886162"},"name":"單行文本","key":"1606804886162","model":"input_1606804886162","rules":[]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"100%","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"remoteFunc":"func_1606804889637","remoteOption":"option_1606804889637"},"name":"多行文本","key":"1606804889637","model":"textarea_1606804889637","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"requiredMessage":"","width":"","remote":false,"remoteType":"option","remoteOption":"option_1606804894092","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1606804894092","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"單選框組","key":"1606804894092","model":"radio_1606804894092","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false}},
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        this.$alert(data, '表單數據')
      }).catch(e => {
      })
    }
  }
}
</script>

方法

通過 this.$refs 可以獲取到 GenerateForm 實例並調用實例方法
getData 獲取表單數據
reset 重置表單數據
setData 設置表單數據
getData獲取表單中填寫的表單信息，setData則是用來做回顯

這里沒有把方法介紹完，只介紹用到的一些，后續可能會繼續跟新。