cmict-form-vue v1.1.0

表单渲染集成

介绍

表单中心第三方集成

软件架构

软件架构说明

安装教程

1. 依赖npm安装

   npm i element-ui@2.15.8 -S

2. main.js添加

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);

3. 表单安装

   npm i cmict-form

    // 全局引入组件库
   import CmictForm  from 'cmict-form'
   import 'cmict-form/lib/cmict-form.css'
   Vue.use(CmictForm) 

4. 页面使用

   <div id="app"> 
       <cmict-form-build  />
   </div>

使用说明

1. 表单查看/填报组件 cmict-form-build

   方法:

   方法名称	参数	说明
   reset	N/A	重置动态表单内容
   validator	N/A	根据设置的规则验证当前表单内容,返回Promise
   getData	N/A	表单验证后,获取当前表单数据,返回Promise

   属性:

   属性名	说明	格式	默认值
   formTemplate	表单模板	json	无
   models	表单填充数据	json	无
   disabled	是否禁用	boolean	false
   renderPreview	当前是否为预览模式	boolean	false
   config	表单的一些基础配置，主要为http的一些参数,譬如在http请求中给header增加参数：config: { httpConfig: (config)=>{ config.headers'aaaa' = 'bbbb' return config } }	object	N/A
   customComponents	自定义组件的配置,具体参加最下方自定义组件示例中的格式	array	N/A

   使用示例:

      <template>
        <div id="app"> 
           <cmict-form-build  :formTemplate="formTemplate" :models="models"/>
        </div>
      </template>
      <script>
      export default {
        data(){
          return {
            models: {} ,
            formTemplate: {}
          }
        },
        created() {
          this.formTemplate = require('./data/basic.json')
        }
      }
      </script>