xformbuildengine

install

npm i xformbuildengine

demo

<template>
  <div id="app">
    <x-form-build-engine
      :jsonCodeData="jsonData"
      @submit="handleSubmit"
      ref="xFormBuildEngine"
    />
    <a-button type="primary" @click="handleGetData">
      获取数据
    </a-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      jsonData: {
        list: [
          {
            type: 'input',
            label: '输入框',
            options: {
              type: 'text',
              width: '100%',
              defaultValue: '',
              placeholder: '请输入',
              clearable: false,
              maxLength: null,
              hidden: false,
              disabled: false
            },
            model: 'input_1592205569593',
            key: 'input_1592205569593',
            rules: [
              {
                required: false,
                message: '必填项'
              }
            ]
          },
          {
            type: 'number',
            label: '数字输入框',
            options: {
              width: '100%',
              defaultValue: 0,
              min: null,
              max: null,
              precision: null,
              step: 1,
              hidden: false,
              disabled: false,
              placeholder: '请输入'
            },
            model: 'number_1592205570580',
            key: 'number_1592205570580',
            rules: [
              {
                required: false,
                message: '必填项'
              }
            ]
          },
          {
            type: 'textarea',
            label: '文本框',
            options: {
              width: '100%',
              minRows: 4,
              maxRows: 6,
              maxLength: null,
              defaultValue: '',
              clearable: false,
              hidden: false,
              disabled: false,
              placeholder: '请输入'
            },
            model: 'textarea_1592205571772',
            key: 'textarea_1592205571772',
            rules: [
              {
                required: false,
                message: '必填项'
              }
            ]
          },
          {
            type: 'checkbox',
            label: '多选框',
            options: {
              disabled: false,
              hidden: false,
              defaultValue: [],
              dynamicKey: '',
              dynamic: false,
              options: [
                {
                  value: '1',
                  label: '选项1'
                },
                {
                  value: '2',
                  label: '选项2'
                },
                {
                  value: '3',
                  label: '选项3'
                }
              ]
            },
            model: 'checkbox_1592205573605',
            key: 'checkbox_1592205573605',
            rules: [
              {
                required: false,
                message: '必填项'
              }
            ]
          },
          {
            type: 'rate',
            label: '评分',
            options: {
              defaultValue: 0,
              max: 5,
              disabled: false,
              hidden: false,
              allowHalf: false
            },
            model: 'rate_1592205575740',
            key: 'rate_1592205575740',
            rules: [
              {
                required: false,
                message: '必填项'
              }
            ]
          },
          {
            type: 'editor',
            label: '富文本',
            list: [],
            options: {
              height: 300,
              placeholder: '请输入',
              defaultValue: '',
              chinesization: true,
              hidden: false,
              disabled: false,
              showLabel: false,
              width: '100%'
            },
            model: 'editor_1592205578241',
            key: 'editor_1592205578241',
            rules: [
              {
                required: false,
                message: '必填项'
              }
            ],
            without: true
          }
        ],
        formPropConfig: {
          layout: 'horizontal',
          labelCol: {
            span: 4
          },
          wrapperCol: {
            span: 20
          },
          hideRequiredMark: false,
          customStyle: '',
          previewWidth: 850
        }
      }
    }
  },
  methods: {
    handleSubmit(p) {
      p.then(res => {
        console.log('获取数据成功json ->', res)
      }).catch(err => {
        console.log('获取数据失败', err)
      })
    },
    handleGetData() {
      this.$refs.xFormBuildEngine
        .getData()
        .then(res => {
          console.log('获取数据成功json ->', res)
        })
        .catch(err => {
          console.log('获取数据失败', err)
        })
    }
  }
}
</script>