本组件是根据ANTDV 1.x版本进行的二次封装，满足一般的表单需求，数据驱动配置即用，减少Dom的书写，优化代码可读性。

重要！！！！！配置时间的时候必须引入moment模块,并且引入moment方法，否则无法使用时间限定

配置的方法主要通过配置configuration来实现，

注意事项：单个弹出框只能用一个表单，不然无法监听多个表单的变化，对于表单的输入判断，必须保持value跟ruleData的值相对应，动态生成ruleData会导致表单输入失败（antdv本身就是这样设定的，因为数据加载有前后关系）。(上传组件限制默认拦截，但是无法判断多个上传组件合用，一般业务也只会有一个。可以外挂上传组件解决问题)---已解决。使用jsx语法时发现不支持vue的@以及一些语法！！！（不清楚什么原因，希望大佬帮忙解决）

对于一些有递归的业务可以定义两层进行嵌套循环，可以跟react一样完美解决dom递归生成

主要结构为

configuration:{
   //定义item内部的元素的style
    innerStyle:'width:100%',
    //配置按钮的样式跟文字
    change:{
        submit:{
          //按钮上的文字
          title:string,
          style:string
        },
        reset:{
          title:string,
          style:string
        }
  },
  //配置表单的ref属性
  ref:'home',
  //标签文本对齐方式，其中labelAlign的属性有'left' | 'right'
  labelAlign:'right',
  //设置itme的布局形式 可选值'horizontal'|'vertical'|'inline'
  layout:'inline',
  //item的长度
  outStyle:'margin-top:10px;width:48%',
  //表单的值，该值跟ruleFrom里的value对应,为防止重复命名可以在ruleData里面记录
  ruleData:{},
 //表单的属性配置，value要对等ruleData，数组配置，输入相应的字段即可
  ruleFrom:[],
 //设置标题跟输入框的占比
  bang: {labelCol: { span: 4 },wrapperCol: { span: 18 }},
 //验证方式，验证方式的属性名要跟ruleFrom的title对应
  rules: {
          pass: [{ validator: validatePass, trigger: 'change' }],
          checkPass: [{ validator: validatePass2, trigger: 'change' }],
          age: [{ validator: checkAge, trigger: 'change' }],
        }
}

  let checkPending;
    let checkAge = (rule, value, callback) => {
      clearTimeout(checkPending);
      if (!value) {
        return callback(new Error('Please input the age'));
      }
      checkPending = setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('Please input digits'));
        } else {
          if (value < 18) {
            callback(new Error('Age must be greater than 18'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        // console.log(rule,value)
        callback(new Error('Please input the password'));
      } else {
        // console.log(rule,value)
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the password again'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("Two inputs don't match!"));
      } else {
        callback();
      }
    };

组件的使用

//时间选择改变的回调
@dateChange="dateChange"
//滑块按钮改变的回调
@switchChange="switchChange" 
//文件上传拦截的回调
@uploadRequest="uploadRequest" 
//提交表单的回调
@submit="submit" 
//清空表单的回调
@reset="reset"
<hjfForm ref="aa" :configurations="configuration"></hjfForm>

 //如果使用弹出窗进行行为拦截，无需在表单中配置提交按钮。
      setup:{
        // 开启title自定义
        title:()=>{
          return <span style="color:red">ss</span>
        },
        // 开启footer自定义
        footer:()=>{
          return  <a-button slot="footer" key="back">Return</a-button>
        },
        okButtonProps:{ props: { disabled: false } },
        cancelButtonProps:{ props: { disabled: false } },
        //垂直剧中
        centered:true,
        //右上角关闭图标
        closable:true,
        //是否显示
        visible:false,
        //确认按钮的文字
        okText:'确定',
        //取消按钮的文字
        cancelText:'取消',
        //上方的文字
        // title:'11',
        //弹出框的优先层
        // zIndex:''
        //弹出框的宽度
        width:1200,
        //确认按钮的加载动效
        confirmLoading:false
      },

 configuration:{
        //定义最高顶级变量单个item的值
        innerStyle:'width:100%',
        //配置按钮的样式跟文字
        change:{
          submit:{
            title:'提交',
            // style:'background-color:red'
          },
          reset:{
            title:'重置',
            style:'margin-left: 10px'
          }
        },
        //配置表单的ref属性
        ref:'home',
        //设置标题的靠向
        labelAlign:'right',
        //设置itme的布局形式
        // layout:'horizontal',
        layout:'inline',
        //设置长度
        //item的长度
        outStyle:'margin-top:10px;width:48%',
        //表单的值，该值需要跟ruleFrom里的value对应,为防止重复命名可以ruleData里面记录
        ruleData:{
          // pass:'',
          // age:'',
          // area:undefined,
          // delivery:false,
          // checkbox:[],
          // textarea:'',
          // uploadvalue:[],
          // date:[]
        },
        //表单的属性配置，value要对等ruleData
        ruleFrom:[
          {
            //是否可以输入
            disabled:true,
            //为diff算法准备
            id:1,
            //输入框的类型
            type:'password',
            //输入框的提示语句
            placeholder:'输入密码',
            //给验证输入内容的函数提供对应入口
            title:'pass',
            //输入框的label值
            label:'密码',
            //
            feedback:false,
            autocomplete:false,
            value:'pass'
          },
          {
            id:3,
            type:'number',
            title:'age',
            label:'年龄',
            placeholder:'输入年龄',
            feedback:true,
            autocomplete:false,
            value:'age',

          },
          {
            id:4,
            label:'地名',
            title:'area',
            type: 'select',
            placeholder:'选择地名',
            autocomplete:false,
            feedback:false,
            value:'area',
            data:[
              {
                id:1,
                optionValue:'1',
                optionTitle:'上海',
              },
              {
                id:2,
                optionValue:'2',
                optionTitle:'北京',
              }
            ]
          },
          {
            id:5,
            //需要用到的组件类型
            type:'date',
            disabled: true,
            //时间的格式
            format:'YYYY-MM-DD HH:mm:ss',
            //设置大小，//large//default//small
            size:'default',
            //默认选择时间
            defaultValue:[moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
            //时间选择器的类型
            dateType:'range',
            //对应规则判断，理论上除了from都可以不用
            title:'datetime',
            //label使用的字段
            label: '时间',
            feedback: false,
            autocomplete: false,
            //对应配对的存值属性名称
            value:'date',
            //不可以选择的时间
            disabledDateTime:function disabledDateTime() {
              return {
                disabledHours: () =>range(0, 24).splice(4, 20),
                disabledMinutes: () =>range(30, 60),
                disabledSeconds: () => [55, 56],
              };
            },
          //   //不可以选择的日期
          //   disabledDate: function disabledDate(current) {
          //   return current && current < moment().endOf('day');
          // },


          },
          {
            id:6,
            type: 'switch',
            title:'delivery',
            label: '开关',
            value:'delivery'
          },
          {
            id:7,
            type:'checkbox',
            title:'checkbox',
            label: '多选框',
            value:'checkbox',
            data:[
              {
                id:1,
                optionValue:'1',
                optionTitle:'上海',
                name:'q'
              },
              {
                id:2,
                optionValue:'2',
                optionTitle:'北京',
                name:'q'
              }
            ]
          },
          {
            id:8,
            type:'radio',
            title:'radio',
            label:'单选框',
            value:'radio',
            data:[
              {
                id:1,
                optionValue:'1',
                optionTitle:'上海',
                name:'q'
              },
              {
                id:2,
                optionValue:'2',
                optionTitle:'北京',
                name:'q'
              }
            ]
          },
          {
            id:9,
            type:'textarea',
            placeholder:'输入文本',
            title:'textarea',
            label:'密码',
            feedback:false,
            autocomplete:false,
            value:'textarea'
          },
          {
            id:10,
            type: 'upload',
            label: '上传',
            listType:'picture',
            title:'uploadvalue',
            value:'uploadvalue',
            showWay:'head',
            url:'http://localhost',
            multiple:true,
            headers:{},
            text:'上传'
          }
        ],
        //验证方式，验证方式的属性名要跟ruleFrom的title对应
        rules: {
          pass: [{ validator: validatePass, trigger: 'change' }],
          checkPass: [{ validator: validatePass2, trigger: 'change' }],
          age: [{ validator: checkAge, trigger: 'change' }],
        },
        //设置标题跟输入框的占比
        bang: {
          labelCol: { span: 4 },
          wrapperCol: { span: 18 },
        },

      },

输入框的主要类型有password,text,textarea,number.

遇到特定回调需要手动写出，根据title进行判断属于哪个组件，并进行数据处理。event为事件

@change="inputChange(item.title,$event)"
@blur="inputBlur(item.title,$event)"
@click="inputClick(item.title,$event)"
@focus="inputFocus(item.title,$event)"

input的主要api
配置文档
          {
            //input输入框的配置实现
            //设置id
            id:1,
            //输入框前面的label
            label:'输入框',
            //存储值的变量名需要自己写入并且会对应rules的输入内容检测
            value:'pass',
            //输入框的类型  类型分别有text|password|textarea|number|color
            type:'text',
            //输入框是否可以输入值 默认值为false
            disabled:false,
            //输入框的大小 值有 large default small 默认为default
            size:'default',
            //可以点击清除图标删除内容
            allowClear:true,
            //textarea的高度 number
            rows:6,
            //默认显示文本
            placeholder:'默认显示',
            //输入框默认值
            defaultValue:'sdad',
            //带标签的 input，设置后置标签 string|slot
            addonAfter:()=>{
              return <span>后面</span>
            },
            //带标签的 input，设置前置标签 string|slot
            addonBefore:()=>{
              return <span>前面</span>
            },
          }

下拉选择有的模式 'default' | 'multiple' | 'tags' | 'combobox'

配置介绍

{
            //select选择框的配置实现
            //设置id
            id:2,
            //选择框前面的label
            label:'输入框',
            //存储值的变量名需要自己写入并且会对应rules的输入内容检测
            value:'sle',
            //选择框的类型  select
            type:'select',
            //选择框是否可以输入值 默认值为false
            disabled:false,
            //选择框的大小 值有 large default small 默认为default
            size:'default',
            //可以点击清除图标删除内容
            allowClear:true,
            //默认显示文本
            placeholder:'默认显示',
            //默认打开---（无效）
            // defaultOpen:true,
            // 手动控制展开（问题很大）
            // open:false,
            //下拉选择的模式  'default' | 'multiple' | 'tags' | 'combobox'
            mode:'default',
            //开启搜索功能
            showSearch:true,
            //自定义的选择框后缀图标  VNode | slot
            suffixIcon:()=>{return <span>sd</span>},
            //自定义的多选框清除图标   VNode | slot
            removeIcon:()=>{return <span>sd</span>},
            //配置option, id为diff,optionValue为code,optionTitle为要显示的数值
            data:[
              {
                id:1,
                optionValue:1,
                optionTitle:'测试1'
              },
              {
                id:2,
                optionValue:2,
                optionTitle:'测试2'
              }
            ]
          }

 //事件回调，第一个参数为组件的名称，第二为事件回调
@dropdownVisibleChange="selectDropdownVisibleChange(item.value,$event)"
@select="selectSelect(item.value,$event)"
@blur="selectBlur(item.value,$event)"
@change="selectChange(item.value,$event)"
@search="selectSearch(item.value,$event)"

时间选择器一共有三种，通过以下配置即可使用，

{
            //时间选择的配置实现
            //设置id
            id:3,
            //选择框前面的label
            label:'输入框',
            //存储值的变量名需要自己写入并且会对应rules的输入内容检测
            value:'ss',
            //选择框的类型  date
            type:'date',
            //时间选择模式 date|month|range 对应不同的配置
            dateType:'date',
            //时间选择器是否可以输入值 默认值为false
            disabled:false,
            //时间选择器是否显示清除按钮
            allowClear:true,
            //显示的时间格式
            format:'YYYY-MM-DD HH-MM-SS',
            //值的时间格式
            valueFormat:'YYYY-MM-DD HH-MM-SS',
            //时间选择器的大小 large|small
            size:'small',
            //不允许选择的日期
            disabledDate:(e)=>{},
            //不允许选择的时间
            disabledDateTime:(e)=>{},
            //增加时间选择功能
            showTime:true,
            //默认显示
            placeholder:'默认显示',
            //预设时间范围快捷选择{ [range: string]: moment[] } | { [range: string]: () => 				moment[] }
            ranges:{}
          }

 {
            //配合diff
            id:4,
            //label的文字信息
            label:'开关',
            //配置值的变量名
            value:'kai',
            //选择选择框类型为 switch
            type: 'switch',
            //是否可用
            disabled: false,
            //初始是否选中
            defaultChecked:'',
            //加载中的开关
            loading:false,
            //开关大小，可选值：default small
            size:'default',
            //选中时的内容  string|slot
            checkedChildren:()=>{return <span>不选择</span>},
            //非选中时的内容  string|slot
            unCheckedChildren:()=>{return <span>选择</span>}
          }

 @change="switchChange(item.value,$event)"

   {
            //配合diff
            id:5,
            //label的文字信息
            label:'多选',
            //配置值的变量名
            value:'duo',
            //选择选择框类型为 switch
            type: 'checkbox',
            //是否可用
            disabled: false,
            //默认选中的选项 Array
            defaultValue:[1,2],
            //checkbox的配置信息
            data:[
              {
                id:1,
                //真正的值
                optionValue:1,
                //显示的值
                optionTitle:'测试1'
              },
              {
                id:2,
                optionValue:2,
                optionTitle:'测试2'
              }
            ],
            //指定可选项，可以通过 slot="label" slot-scope="option" 定制label
            //string[] | Array<{ label: string value: string disabled?: boolean, 					//indeterminate?: boolean, onChange?: function }>
             options:{}

          }

@change="changeCheckbox(item.value,$event)"

 {
            //配合diff
            id:6,
            //label的文字信息
            label:'多选',
            //配置值的变量名
            value:'duo',
            //选择选择框类型为 switch
            type: 'radio',
            //配置单选的类型 radio|button
            radioType:'button',
            //是否可用
            disabled: false,
            //默认选中的值
            defaultValue:1,
            //RadioGroup 下所有 input[type="radio"] 的 name 属性    string
            name:'ds',
            //以配置形式设置子元素 string[] | Array<{ label: string value: string disabled?: boolean }>
            // options:[],
            //大小，只对按钮样式生效 large | default | small
            size:'default',
            //RadioButton 的风格样式，目前有描边和填色两种风格  outline | solid
            buttonStyle:'outline',
            data: [
              {
                id:1,
                optionValue:1,
                optionTitle:'测试1'
              },
              {
                id:2,
                optionValue:2,
                optionTitle:'测试2'
              }
            ]
          },

@change="radioChange(item.value,$event)"

   {
            //配合diff
            id:7,
            //label的文字信息
            label:'上传',
            //配置值的变量名
            value:'shang',
            //选择选择框类型为 switch
            type: 'upload',
            //是否可用
            disabled: false,
            //接受上传的文件类型
            accept:'',
            //上传的地址
            action:'',
            //设置上传的请求头部，IE10 以上有效
            header:{},
            //是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。
            multiple:true,
            //上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card
            listType:'text',
            
          }

:customRequest="customRequest"
:beforeUpload="beforeUpload"

弹出框的确认事件将会覆盖默认的表单的确认事件（抽取）