twmodule 0.0.58 → 0.0.59

package/README.md

@@ -714,4 +714,74 @@ stepData：{
     <TwTable :tableData="tableData" :columns="columns"></TwTable>
     tableData = [{}];
     columns = [{}];
+```
+
+#### 6、form组件(针对PC端)
+```
+ <TwFormMudule :ref="formSetting.refName" :formSettings="formSetting" 
+ :formDatas="formData" :formModule="formModule" @formFBC="formFBC" @isReady="isReady"></TwFormMudule>
+
+ ****如果是弹框表单，element的弹框请加上class="twDialog"统一样式****
+
+ formSetting:{//一个界面使用多次该组件时，则必须定义该对象中的refName属性，只使用一次时，可以不写该对象。
+    refName:'formOne',//一个界面使用多次该组件时，则必须定义该属性，且值不能一样
+    labelWidth:'91px',//label宽度，默认91px（可容纳5个字不换行）
+    formSize:'small'//medium small(默认) mini
+ }
+ formData:{}//承接表单值的对象，一个界面使用多次该组件时，可以公用这一个对象，相应的值都会赋值在里面
+ formModule:[//该数据模型与搜索组件的模型几乎一致。一个界面使用多次该组件时，必须定义多个不同的formModule。
+    //通用字段：label左侧标题  itemValue绑定字段名(必填) itemType组件类型(必填) warningText必填未填时/校验不通过时，出现的提示文字
+    //placeholder占位符 itemChange组件change事件 itemBlur组件blur事件 itemFocus组件focus事件 disabled禁用 readonly只读(下拉组件自带该属性)
+    {label:'活动名称',itemValue:'name',itemType:'text',warningText:'请输入！',itemChange:true,itemBlur:true,itemFocus:true,required:true,isHidden:false},
+    {label:'活动区域',itemValue:'region',itemType:'select',warningText:'请选择！',required:false,isHidden:false,selectList:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
+    {label:'活动人数',itemValue:'number',itemType:'number',disabled:true},
+    {label:'活动内容',itemValue:'content',itemType:'textarea',span:16,warningText:'请输入！',required:false,isHidden:false},
+    {label:'活动时间',itemValue:'date',itemType:'date',dateType:'date',dateFormat:'yyyy年MM月dd日',required:true,isHidden:false},
+    //dateType时间类型date（默认）,month,year,week  dateFormat显示的样式（yyyy年MM月dd日WW周） minDate可选最小日期  maxDate可选最大日期
+    {label:'活动时间',itemValue:'dateRange',itemType:'dateRange',dateType:'date',required:false,isHidden:false},
+    //dateType时间类型date（默认）,month  dateFormat显示的样式（yyyy年MM月dd日） separator分离占位符 startPlaceholder开始占位符
+    // endPlaceholder结束占位符 minDate可选最小日期  maxDate可选最大日期
+    {label:'下拉多选',itemValue:'selectMore',itemType:'selectMore',showAllName:false, selectSearch:true,disabled:false,required:true,isHidden:false,selectList:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
+    //下拉多选时：selectSearch同上 showAllName计数的方式展示选中，而不是全部显示（全部显示可能会使input框变高，影响排版，默认采用计数方式）
+    {label:'下拉级联',itemValue:'selectCascade',itemType:'selectCascade',showAllName:false,selectSearch:true,showAllLevel:false,required:false,isHidden:false,trigger:'click',isSelectMore:true,disabled:false,selectList:[{label:'层级1',value:'1',children:[{label:'层级2-1',value:'1-1',children:[{label:'层级3-1',value:'3-1'},{label:'层级3-2',value:'3-2'}]},{label:'层级2-2',value:'2-2'}]},{label:'层级1-2',value:'1-2'}]},
+    //级联选择时：selectSearch同上 showAllName同上 showAllLevel是否显示选择的所有层级（默认false） trigger触发级联方式hover（默认）、click  isSelectMore是否开启多选 selectList下拉列表，注意对象中必要字段label与value
+    {label:'单选',itemValue:'radio',itemType:'radio',required:false,isHidden:false,radioList:[{name:'花鲢',value:'1',disabled:true},{name:'鲈鱼',value:'2'},{name:'白鲢',value:'3'}]},
+    {label:'多选',itemValue:'checkBox',itemType:'checkBox',required:false,isHidden:false,checkBoxList:[{name:'花鲢',value:'1',disabled:true},{name:'鲈鱼',value:'2'},{name:'白鲢',value:'3'}]},
+    {label:'树形选择',itemValue:'selectTree',itemType:'selectTree',required:false,defaultProps:{ children: 'children',label: 'label'},treeList:[objTree]},
+    //树形结构选择  defaultProps：children与label都是必须替换的，不然默认就得是这2个字段。
+    {label:'金额区间',itemValue:'valueRange1',itemValueSec:'valueRange2',itemType:'valueRange',required:true,isNumber:true},
+    //itemValueSec用于承接第二个input的值
+ ]
+ 
+ 内置方法：
+ onReset:重置整个表单，并消除各种提示。
+ onSubmit:确认必填是否填完，界面给出相应提示，并且触发isReady方法。
+ isReady:{
+    flag:true/false,//该组件内是否通过必填校验
+    data:formData,//整个表单数据
+ }
+ formFBC:{//组件触发change blur focus时的回调方法，所有的单组件特殊逻辑处理皆在该方法中处理。
+     type:type,//change blur focus之一
+     moduleItem:moduleItem,//对应的module
+     formData:formData,//整个表单
+     val:val，//change时的实时返回数据
+ }
+ 
+ 一个界面多次使用该组件时：
+ let resultList = []//用于接收多个表单校验后，返回的状态数据。最后根据所有状态汇总得出是否可以进行后续操作
+    getSubmit(){
+      this.resultList = [];
+      this.$refs[this.formSetting1.refName].onSubmit();//校验时，每个表单都要调用一次
+      this.$refs[this.formSetting2.refName].onSubmit();
+    },
+    getReset(){
+      this.$refs[this.formSetting1.refName].onReset();//重置时，每个表单都要调用一次
+      this.$refs[this.formSetting2.refName].onReset();
+    },
+    isReady(params){
+      this.resultList.push(params);
+      if(this.resultList.length === 2){
+        console.log(this.resultList);
+      }
+    },
 ```