Form-Marking表单设计器

前言

因为工作需要，开发一个表单审批流借助了form-marking这个组件。

官网

FormMaking | 可视化低代码表单设计器

安装

// 依赖包安装
npm install form-making -S

引入

// vue引入
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.use(FormMaking)

使用

1.MakingForm​

表单设计器组件，通过可视化方式制作表单页面

<template>
  <fm-making-form 
  	ref="makingform" 
    style="height: 700px;"
    preview 
    generate-code 
    generate-json
  >
  </fm-making-form>
</template>

2.GenerateForm​

表单生成器组件，通过 JSON Schema 快速渲染出表单页面。

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      ref="generateForm"
    >
    </fm-generate-form>

    <el-button type="primary" @click="handleSubmit">Submit</el-button>
    <el-button type="primary" @click="handleSubmit(false)">Submit(不验证表单)</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"remoteFunc":"func_snsjxmdd","remoteOption":"option_snsjxmdd","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"snsjxmdd","model":"input","rules":[{"required":true,"message":"必须填写"}]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"remoteFunc":"func_k3s786xf","remoteOption":"option_k3s786xf","tableColumn":false,"subform":false},"events":{"onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"k3s786xf","model":"textarea","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":"","validatorCheck":false,"validator":"","width":"","remote":false,"remoteType":"datasource","remoteOption":"option_acf5idci","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_acf5idci","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false,"customProps":{},"tableColumn":false,"subform":false},"events":{"onChange":""},"name":"单选框组","key":"acf5idci","model":"radio","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""}]}},
    }
  },
  methods: {
    handleSubmit (validate = true) {
      this.$refs.generateForm.getData(validate).then(data => {
        this.$alert(data, '表单数据')
      })
    }
  }
}
</script>

表单生成器GenerateForm实现案例

<template>
  <div>
    <fm-generate-form
            :data="jsonData"
            :value="editData"
            ref="generateForm"
    >
    </fm-generate-form>
    <el-button v-if="ShowPage=='initiate'" style="float:right;" size="small" type="primary" @click="handleSubmit">提交</el-button>
  </div>

</template>

<script>
  export default {
    data () {
      return {
        jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":true,"requiredMessage":"","dataType":"","dataTypeCheck":true,"dataTypeMessage":"","pattern":"","patternCheck":true,"patternMessage":"","placeholder":"","customClass":"","disabled":true,"labelWidth":100,"isLabelWidth":true,"hidden":true,"dataBind":true,"showPassword":true,"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":true,"requiredMessage":"","disabled":true,"pattern":"","patternMessage":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":true,"hidden":true,"dataBind":true,"remoteFunc":"func_1606804889637","remoteOption":"option_1606804889637"},"name":"多行文本","key":"1606804889637","model":"textarea_1606804889637","rules":[]},{"type":"radio","icon":"icon-radio-active","options":{"inline":true,"defaultValue":"","showLabel":true,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":true,"requiredMessage":"","width":"","remote":true,"remoteType":"option","remoteOption":"option_1606804894092","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1606804894092","customClass":"","labelWidth":100,"isLabelWidth":true,"hidden":true,"dataBind":true,"disabled":true},"name":"单选框组","key":"1606804894092","model":"radio_1606804894092","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":true,"hideErrorMessage":true}},
        editData:{}
      }
    },
    props: ["ShowPage"],
    mounted() {
      let data = {"code":"100","msg":"OK","data":{"createTime":null,"creator":null,"updateTime":null,"updator":null,"delFlag":1,"keyword":null,"id":"c0883d67e97c5ea253f3bb0da6c33199","categoryCode":"C101","title":"SVN申请流程表","code":"svn_application_form","name":"SVN申请流程表","content":null,"formStatus":0,"version":null,"formJson":"{\"list\": [{\"key\": \"1686910782000_77642\", \"icon\": \"icon-input\", \"name\": \"你的邮箱\", \"type\": \"input\", \"model\": \"eMail\", \"rules\": [{\"type\": \"string\", \"message\": \"你的邮箱格式不正确\"}], \"options\": {\"width\": \"100%\", \"pattern\": \"\", \"dataType\": \"string\", \"disabled\": true, \"required\": true, \"maxlength\": 31, \"remoteFunc\": \"func_1686910782000_77642\", \"placeholder\": \"\", \"defaultValue\": \"***@qq.com\", \"showWordLimit\": true}}, {\"key\": \"1695090445000_47292\", \"icon\": \"icon-diy-com-textarea\", \"name\": \"svn路径\", \"type\": \"textarea\", \"model\": \"svnAddress\", \"rules\": [], \"options\": {\"width\": \"100%\", \"pattern\": \"\", \"disabled\": true, \"required\": true, \"maxlength\": -1, \"remoteFunc\": \"func_1695090445000_47292\", \"placeholder\": \"\", \"defaultValue\": \"\", \"showWordLimit\": true}}, {\"key\": \"1686910469000_96157\", \"icon\": \"icon-diy-com-textarea\", \"name\": \"申请原因\", \"type\": \"textarea\", \"model\": \"reason\", \"rules\": [], \"options\": {\"width\": \"100%\", \"pattern\": \"\", \"disabled\": true, \"required\": true, \"maxlength\": 100, \"remoteFunc\": \"func_1686910469000_96157\", \"placeholder\": \"\", \"defaultValue\": \"\", \"showWordLimit\": true}}], \"config\": {\"size\": \"medium\", \"labelWidth\": 100, \"customClass\": \"\", \"labelPosition\": \"right\"}}"},"success":true}
      let res = data.data
      let resultdata = {"code":"100","msg":"获取表单数据成功！","data":{"createTime":"2023-09-22 09:37:40","creator":"JH60001","updateTime":"2023-09-22 09:37:40","updator":"JH60001","delFlag":1,"keyword":null,"id":"5ec71a43bdd74772475e6af076ef5fbb","modelKey":"svn_application_form","businessKey":"4028e4f88ab68108018aba8912d70002","processInstanceId":"9df8a92b58e811eeab3e000c29421fbd","formData":"{\"eMail\":\"***@qq.com\",\"svnAddress\":\"1234\",\"reason\":\"123\"}"},"success":true}
      let result = resultdata.data

      this.jsonData = JSON.parse(res.formJson)
      this.editData = JSON.parse(result.formData)
    },
    methods: {
      handleSubmit () {
        this.$refs.generateForm.getData().then(data => {
          this.$alert(data, '表单数据')
        }).catch(e => {
        })
      }
    }
  }
</script>
<style lang="scss">
</style>

效果图

官方文档上还有很多方法，本次先更新这些