DynamicForm 动态表单

介绍

DynamicForm是一个动态表单组件，根据后端服务返回的json数据渲染表单

引入

import Vue from 'vue';
import DynamicForm from '@lambo-design-mobile/dynamic-form';

Vue.use(DynamicForm);

属性

| 属性 | 类型 | 默认值 | 说明 | | ------------- | ------ |---|---------------------| | value | Object | {} | 表单的数据定义，推荐使用v-model | | metadataId | String | '' | 动态表单的元数据编码 | | customComponents | Object | {} | 自定义组件 | | customValidates | Object | {} | 自定义校验规则 |

Api

• validate 校验form表单当前输入值是否合法
• formReset 重置form校验

自定义组件和自定义校验

创建自定义校验文件check.js

import ajax from "@lambo-design-mobile/shared/utils/ajax";
import config from "@/config/config"

export default {
  checkSingle: async function(rule, value, callback) {
    if (value) {
      let finalUrl = config.upmsServerContext + "/manage/demoUser/get";
      if (finalUrl) {
        let params = {
          userId: value
        };
        const {data} = await ajax.get(finalUrl, {params: params});
        if (data.code == 1 && data.data) {
          callback("用户编码已存在");
        } else {
          callback();
        }
      } else {
        callback();
      }
    } else {
      callback("用户编码不能为空");
    }
  }
}

创建自定义组件文件input.vue

<template>
  <div>
    <Input type="text" v-model="input1" @on-change="changeValue" style="width: 80px"></Input>
    <Select v-model="input2" @on-change="changeValue" style="width: 80px">
      <Option :value="'1'">分钟</Option>
      <Option :value="'2'">小时</Option>
    </Select>
  </div>
</template>

<script>
  export default {
    name: "input2",
    props:{
      value: String
    },
    data(){
      return{
        input1: '',
        input2: ''
      }
    },
    watch: {
      value: function (){
        this.initData()
      }
    },
    methods:{
      initData(){
        if (this.value) {
          this.input1 = this.value.split(",")[0]
          this.input2 = this.value.split(",")[1]
        } else {
          this.input1 = ''
          this.input2 = ''
        }
      },
      changeValue() {
        this.$emit("changeInputValue",this.input1+','+this.input2)
      },
      /*validate(rule, value, callback) {
        console.log("value=",value)
        if (value) {
          if (value) {
            let vv = value.split(",");
            console.log("vv=",vv)
            console.log("vv=",(vv.length == 2 && vv[0] && vv[1]))
            if (vv.length == 2 && vv[0] && vv[1]) {
              callback();
            } else {
              callback("请输入参数2!!!!!");
            }
          } else {
            callback("请输入参数!!!!!");
          }
        } else {
          callback("请输入参数!");
        }
      }*/
    },
    mounted() {
      this.initData();
    }
  }
</script>

<style scoped>

</style>

在编辑页文件form.vue中引入check.js和input.vue

<template>
  <LamboDynamicForm ref="ldForm" v-model="formData"
                    :metadataId="metadataId"
                    :customComponents="customComponents"
                    :customValidates="customValidates"
                    @input="getInput"/>
</template>

<script>
  import LamboDynamicForm from '@lambo-design-mobile/dynamic-form';
  import input2 from './components/input2'
  import checkJs from './components/checkJs'

  export default {
    name: "form",
    data() {
      return {
        formData: {},
        metadataId: '1',
        customComponents: {//自定义组件
          'input2': input2
        },
        customValidates: {//自定义校验规则
          'checkSingle2' : checkJs.checkSingle
        }
      }
    },
    components:{
      LamboDynamicForm
    },
    computed: {
      title: function () {
        return this.$route.meta.title
      }
    },
    methods:{
      getInput(val){
        console.log("input=",val)
      },
      pageGoBack() {
        this.$router.push({ name: '动态表格' })
      },
      async doSubmit() {
        const isValid = await Promise.all([
          this.$refs.ldForm.validate(),
        ])
        console.log("isValid=" + isValid)
      },
      doReset(){
        this.formData = {}
      }
    }
  }
</script>

<style scoped>

</style>