twmodule v0.0.98

说明文档

该组件为项目提供了一些常用的方法，组件，样式。

指令操作

npm/cnpm i
依赖包下载

npm run serve
启动开发环境

npm run build
打包正式环境

npm run test
打包测试环境

组件库说明

公共方法

1、formatDate(time, fmt) //时间格式化
    参数说明：
    time:传入的时间
    fmt:期望的格式（yyyy年MM月dd日 hh时mm分ss秒）

2、changeNum(num,changeType,len) //数字格式化
    参数说明：
    num:传入的数字
    changeType：格式化后返回的格式
        tofixed3--保留三位小数
        comma3--保留3位小数，正数部分添加百分号
        comma：正数部分添加千分位符号 //10,000.00
        percent ：添加百分号
        pointL-返回整数部分
        pointLC-返回整数部分,带千分位
        pointR-返回小数部分
    len：所有类型保留几位小数，默认保留2位小数。

3、sortFunc(arr,word,type,isDate) //数组对象的排序
    参数说明：
    arr：传入的数组
    word：按照对象中的某个字段排序（字段值为可以比较大小的内容，比如时间或数字）
    type：排序规则
        默认||asc：升序
        任意值：降序
    isDate：是否是按时间排序

4、urlSearch(name) //获取路由中的参数
    参数说明：
    name：参数名

5、deepClone(obj)//深度克隆

6、getObjFromList(arr,key,value,child,currObj)//从多层级数组中获取指定key:value的该对象
    arr：数组
    key：key值
    value：value值
    child：子级名字
    currObj：承接返回对象的对象名

7、delRepeat(arr)数组去重
8、delRepeatObj(arr,keyWord)数组对象去重
9、guidance(list,path,_this)新手引导功能
list:引导的参数
path:是否需要跳转页面进行引导
_this:配合path一起传入
例：
this.guidance(this.yindao);
yindao:[//引导顺序依照数组顺序
    {id: 'create1',//DOM组件的ID
    className: 'firstStyle',//可以添加引导框的类名
    title: '新功能引导',//引导框的标题
    description: '现在可以查看XX拉！',//引导框的内容
    position: 'bottom-center'//引导框的位置},
    {id: 'create2',title: '新功能引导',description: '现在可以查看YY拉！',position: 'bottom'},
]
10、resetObj(obj)重置对象，如果遍历时，里面的对象是数组，则会重置为空数组，其他都为空字符串。

公共样式

1、字体

导航文字： .twFontNav
标题文字： .twFontTitle
主要文字： .twFontMain
次要文字： .twFontMinor
辅助文字： .twFontNote

2、主题色

（1）用于移动端的蓝色
    蓝色字体： .twMoFoBlue
    可跳转字体: .twMoFontPoint
    按钮: .twBtnMo
    显示/禁用按钮: .twBtnMo .twMoBgRead

（2）用于PC端的蓝色
    蓝色字体： .twPcFoBlue
    可跳转字体: .twPcFontPoint
    按钮: .twBtnPc
    显示/禁用按钮: .twBtnPc .twPcBgRead
    
（3）主题红色
    蓝色字体： .twRedFoRed
    可跳转字体: .twRedFontPoint
    按钮: .twBtnRed
    显示/禁用按钮: .twBtnRed .twRedBgRead
    
（4）辅助色
    警告：.twWarCo  .twWarBg
    成功: .twSucCo  .twSucBg
    危险：.twDanCo  .twDanBg
    信息：.twInfCo  .twInfBg

（5）中间色
    不可操作背景色：.twDisColor
    页面背景色：.twBgColor
    

3、一些简单的样式

.twBorder     //添加线条
.twBorder-b   //添加底部线条

.twEllipsis   //文字超过1行后结尾截断并出现...
.twEllipsis2  //文字超过2行
.twEllipsis3  //文字超过3行

.twRadius     //圆角弧度5px
.twRadius10   //圆角弧度10px

.twBtnForm    //表单按钮样式
.twBtnBasic   //基础按钮样式

//flex布局样式
.twFlex  
.twFlex-between
.twFlex-around
.twFlexCo
.twFlexCo-between
.twFlexCo-around

......未完待续

公共组件

1、表单

一、主要用于移动端(基于mint-ui),推荐使用第二种表单控件。
 <twForm :formData="data" @getParamsData="func" @formVerify="formVerify" ref="childForm" @gotoPage='gotoPage'></twForm>
    参数说明：
    func：点击表单中的保存按钮后，会在此方法中返回表单所填数据。
    gotoPage:当组件类型为selectPage时，设置该方法，返回一个回调函数，用于后续自己处理逻辑。
    formVerify：（非必要）每当填写某一项表单后，被动触发验证一次表单所有必填
    字段是否填
    写。如果都填写完成，则会在此方法中返回一个对象。
    obj = {
        currState: true,//表示必填已填完（此方法中必为true）。
        mention: "",//该字段为必填字段没有填写时，返回的该项label文案。
        （此方法中，该字段必定为空。主要用于主动触发校验方法时，返回的值。）
        sendData:{}//可用于发起请求的表单数据。
    }
    ref：（非必填）在父组件自定义事件中，通过调用组件内部方法：this.$refs.childForm.verifyReq()
    ，实现主动触发调用表单验证必填字段的方法。返回对象与formVerify中的返回对象一致。
    data:{
        title:'',//为空时，则没有标题。（表单独占一页时，强烈建议title不为空！）
        hideSaveBtn:false,//（可选项，默认false）
        isLocalShow:false,//（可选项，默认false）是否以块级表单显示，默认占屏100vh。
        id:'formId',//此ID为表单ID，也可以用ref方式获取该dom节点。
        formList:[//构建表单数据
            {name:'放养日期',value:'',valueName:'breedDate',require:true,placeholder:'请输入年限',type:'selectDate',timeType:'',startDate:'2018-01-01',endDate:'2021-01-01'},
            {name:'放养品种',showName:'',value:'',valueName:'breedVarietyCode',placeholder:'请选择品种',type:'selectMore',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
            {name:'品种分类',showName:'',value:'',valueName:'varietyClassifyCode',require:true,placeholder:'请选择分类',type:'selectOne',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
            {name:'放养重量',value:'',valueName:'breedWeight',require:true,placeholder:'请输入重量',type:'number',unit:'kg',tofixed:3,blur:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
            {name:'放养数量',value:'',valueName:'breedNumber',require:true,placeholder:'请输入数量',type:'tel',unit:'尾',blur:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
            {name:'放养规格',value:'',valueName:'breedSpecification',require:true,placeholder:'自动计算',type:'number',unit:'克/尾',tofixed:1,readonly:true},
            {name:'单价',value:'',valueName:'price',require:true,placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
            {name:'总金额',value:'',valueName:'totalMoney',placeholder:'自动计算',type:'number',unit:'元',readonly:true,tofixed:2},
            {name:'备注',value:'',valueName:'remark',type:'textarea',limit:200,placeholder:'请输入备注'},
            {name:'模块ID',value:'',valueName:'pkId',isHidden:true},
            {name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
        ]
    }
    
    formList字段说明：
        name：label名字。
        showName：单选或者多选时，选中后需要展示的文案。
        value：传给后台的value值。多选时，value为选中的数组对象
        valueName：传给后台的key。
        require：true为必填。
        type：输入框类型//text,tel,number,selectDate,selectMore,selectOne，textarea。
        timeType：type为selectDate时，timeType选择时间的类型（year,month,不填为默认年月日的格式）。
        startDate：type为selectDate时，设置时间控件的起始时间。
        endtDate：type为selectDate时，设置时间控件的结束时间。
        list：type为selectMore,selectOne时，弹出框的内容。
        tofixed：type为number时，小数位数保留X位。
        limit：type为textarea时，内容字数限制以及右下角的字数实时展示。
        readonly：是否可填。
        isHidden：是否隐藏该项。
        unit：该项单位。
        
        blur：该字段将会与blurContact中的字段进行相加复值到blurResult字段中。
        blurContact：
        blurResult：
        
        ggContact：//如果blur的这个字段会联动2次加法计算，就要启动该字段，值为
        [本身的valueName,'关联的另一个字段']，会计算[]中的2个字段并复值给ggResult字段中。
        ggResult：
    
    额外方法：
    //在组件外主动触发，获取必填验证的表单数据,在getSaveData中返回表单数据
    1、this.$refs.childForm.saveData();
    
    //在组件外主动触发，获取没有必填验证的表单数据,在getSaveData中返回表单数据
    2、this.$refs.childForm.getCurrData();
    
    
    
二、主要用于移动端(基于vant),推荐使用该表单。
<twForms :formData="data" @getParamsData="func" @formVerify="formVerify" ref="childForm" @gotoPage='gotoPage'></twForms>
    参数说明：
    func：点击表单中的保存按钮后，会在此方法中返回表单所填数据。
    gotoPage:当组件类型为selectPage时，设置该方法，返回一个回调函数，用于后续自己处理逻辑。
    formVerify：（非必要）每当填写某一项表单后，被动触发验证一次表单所有必填
    字段是否填写。如果都填写完成，则会在此方法中返回一个对象。
    obj = {
        currState: true,//表示必填已填完（此方法中必为true）。
        mention: "",//该字段为必填字段没有填写时，返回的该项label文案。
        （此方法中，该字段必定为空。主要用于主动触发校验方法时，返回的值。）
        sendData:{}//可用于发起请求的表单数据。
    }
    ref：（非必填）在父组件自定义事件中，通过调用组件内部方法：this.$refs.childForm.verifyReq()
    ，实现主动触发调用表单验证必填字段的方法。返回对象与formVerify中的返回对象一致。
    data:{
        title:'vantForm',
        hideSaveBtn:false,
        isLocalShow:false,
        id:'formId',
        formList:[
            {name:'整数（正负）',id:'',className:'',required:true,showName:'',value:'',valueName:'breedDate1',placeholder:'digit',type:'digit',limit:50,showLimit:false},
            {name:'数字',required:true,value:'',valueName:'breedWeight',placeholder:'number',type:'number',unit:'kg',tofixed:3,isCount:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
            {name:'正整数（电话号码）',required:true,limit:11,value:'',valueName:'breedNumber',placeholder:'请输入数量',type:'tel',unit:'尾',isCount:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
            {name:'放养规格',value:'',required:true,valueName:'breedSpecification',placeholder:'自动计算（数字*正整数）',type:'number',unit:'克/尾',tofixed:1,readonly:true},
            {name:'单价',value:'',required:true,valueName:'price',placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,isCount:true,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
            {name:'总金额',value:'',required:true,valueName:'totalMoney',placeholder:'自动计算（数字*单价）',type:'number',unit:'元',readonly:true,tofixed:2},

            {name:'radio',showName:'',required:true,value:'',valueName:'breedCode111',placeholder:'请选择品种',type:'radio',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'},{name:'品种3',value:'3'},{name:'品种4',value:'4'},{name:'品种5',value:'5'},{name:'品种6',value:'6'}]},
            {name:'radioPop',showName:'',required:true,value:'',valueName:'breedVarietyCode222',placeholder:'请选择品种',type:'radioPop',list:[{name:'品种7',value:'7'},{name:'品种8',value:'8'},{name:'品种9',value:'9'},{name:'品种10',value:'10'},{name:'品种11',value:'11'},{name:'品种12',value:'12'}]},

            {name:'checkBox',showName:'',required:true,value:[],valueName:'breedCode',placeholder:'请选择品种',type:'checkBox',maxChoose:3,list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'},{name:'品种3',value:'3'},{name:'品种4',value:'4'},{name:'品种5',value:'5'},{name:'品种6',value:'6'}]},
            {name:'checkBoxPop',showName:'',required:true,value:[],valueName:'breedVarietyCode',placeholder:'请选择品种',radioCheckColor:'red',type:'checkBoxPop',list:[{name:'品种7',value:'7'},{name:'品种8',value:'8'},{name:'品种9',value:'9'},{name:'品种10',value:'10'},{name:'品种11',value:'11'},{name:'品种12',value:'12'}]},

            {name:'选择客户2',showName:'',required:true,value:'',valueName:'breedDate2',placeholder:'selectPage',type:'selectPage'},
            {name:'放养日期',value:'',required:true,valueName:'breedDate',placeholder:'时间选择',type:'selectDate',timeType:'year',startDate:'2020-01-01',endDate:'2020-12-31'},
            {name:'放养日期2',value:'',required:true,valueName:'breedDate2',placeholder:'时间段选择',type:'selectRange',startDate:'2020-01-01',rangeColor:'#3399ff',rangeType:'range',endDate:'2020-12-31',startText:'出差',endText:'结束'},
             {name:'品种分类',showName:'',required:true,value:'',valueName:'varietyClassifyCode',placeholder:'上拉选择',type:'selectOne',list:
                [{values:[{text:'分类111',value:111},{text:'分类222',value:222}],defaultIndex: 0}]},
            {name:'品种分类2',required:true,showName:'',value:'',valueName:'varietyClassifyCode2',placeholder:'多列上拉选择',type:'selectOne',list:
                [{values:[{text:'分类1',value:1},{text:'分类2',value:2}],defaultIndex: 0},{values:[{text:'分类3',value:3},{text:'分类4',value:4}],defaultIndex: 0},{defaultIndex: 0}]},
            {name:'选址',showName:'',required:true,value:'',valueName:'varietyClassifyCode3',placeholder:'级联上拉选择',type:'selectOneContact',levelNum:3,list:
                    [{
                        text: '浙江',
                        value:'1',
                        children: [{
                            text: '杭州',
                            value:'11',
                            children: [{ text: '西湖区',value:'111' }, { text: '余杭区',value:'112' }]
                        }, {
                            text: '温州',
                            value:'12',
                            children: [{ text: '鹿城区',value:'121' }, { text: '瓯海区',value:'122' }]
                        }]
                    }, {
                        text: '福建',
                        value:'2',
                        children: [{
                            text: '福州',
                            value:'21',
                            children: [{ text: '鼓楼区',value:'211' }, { text: '台江区',value:'212' }]
                        }, {
                            text: '厦门',
                            value:'22',
                            children: [{ text: '思明区',value:'221' }, { text: '海沧区',value:'222' }]
                        }]
                    }]
            },
            {name:'备注',value:'',valueName:'remark',required:true,type:'textarea',limit:200,placeholder:'富文本框inline',isInline:true},
            {name:'备注2',value:'',valueName:'remark2',required:true,type:'textarea',limit:200,placeholder:'富文本框block'},
            {name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
        ]
    }
    
    formList字段说明：
        name：label名字。
        id:'',
        className:'',
        showName：单选或者多选时，选中后需要展示的文案。
        value：传给后台的value值。多选时，value为选中的数组对象
        valueName：传给后台的key。
        required：true为必填。
        list：所有弹出框的内容。
        limit：输入框右下角的字数实时展示（针对手动输入项）。
        showLimit：是否显示右下角字数实时展示（true/false）。
        readonly：是否可填。
        disabled：是否禁用。
        isHidden：是否隐藏该项。
        unit：该项单位。
        errMsg：必填输入框的错误提示。（默认：必填！）
        
        isCount：是否有表单字段需要相互计算。
        countContact：需要进行计算的字段名。//['price','num']
        countResult：计算出来的值赋值到另一个字段。//totalPrice
        countRule：计算规则（eval解析）,注释中的a,b对应countContact数组中的字段，目前可以对4个字段进行计算。//(a*b).toFixed(2) 
        
        第二套计算模板，与上面三个字段的用法完全一致。当某个字段会进行2次计算的时候，可以用第二套模板进行计算
        secContact：//['price','num','discount']
        secResult：//totalPrice
        secRule：为避免变量冲突，abcd变为a1,b1,c1,d1//(a1*b1*c1).toFixed(2) 
        
        type：输入框类型//
            text:文本
            tel:纯数字
            number:数字
                tofixed：type为number时，小数位数保留X位。
            digit: ±整数
            password:密码
            selectPage:触发自定义事件
            
            selectDate:选择时间点
                startDate：起始时间。
                endtDate：结束时间。
                timeType：
                    time：23时59分
                    datetime（默认） ：2020-01-01 01:01:01
                    date ：2020-01-01
                    year-month ：2020-01
                    year：2020
                    
            selectRange:选择时间段
                startDate：起始时间。
                endtDate：结束时间。
                rangeType：
                    single(默认)：选某天
                    range：选时间段
                rangeColor：组件自定义颜色，默认#3399ff
                startText:开始时间下方的文案//'入住'
                endText:结束时间下方的文案//'离店'
                    
            selectOne:上拉选择（单列，多列）
                list:每一列中，values存放展示的数组，defaultIndex设置默认值（0开始）
                //[{values:[{text:'分类111',value:111},{text:'分类222',value:222}],defaultIndex: 0}]
            selectOneContact:级联上拉选择
                list：数据模型见demo
                
            radio:表单内的radio
            radioPop:弹出框的radio
                radioCheckColor：自定义颜色
                
            checkBox:表单内的checkBox
            checkBoxPop:弹出框的checkBox
                radioCheckColor：自定义颜色
                maxChoose：可以选择的最大数量（默认不限制）
                
            textarea:多行文本
                isInline：是否是行内元素。（默认false）
                maxHeight：默认100高度（25为一行）
            
    额外方法：
    //在组件外主动触发，获取必填验证的表单数据,在getSaveData中返回表单数据
    1、this.$refs.childForm.saveData();
    
    //在组件外主动触发，获取没有必填验证的表单数据,在getSaveData中返回表单数据
    2、this.$refs.childForm.getCurrData();

引导方法：
    this.guidance(this.yindao);
    yindao:[
        {
            id: 'create1',
            className: 'firstStyle',
            title: '新功能引导',
            description: '现在可以查看XX拉！',
            position: 'bottom-center'
        },
        {
            id: 'create2',
            title: '新功能引导',
            description: '现在可以查看YY拉！',
            position: 'bottom'
        },
        {
            id: 'create3',
            title: '新功能引导',
            description: '现在可以查看ZZ拉！',
            position: 'bottom'
        }
    ]

版本16的更新内容：

    新增form表单 单项模板：
    <formItem :formData="formData.data"></formItem>
    formData的数据格式与之前整个form表单的对应对象保持一致。

2、搜索

 <twSearch :searchForm="data" @getSendData="func"></twSearch>
    参数说明：
    func：//点击组件中的搜索按钮后，会在此方法中返回组件内所填数据。
    data:{
        formSize:'',//large 默认 small mini
        defaultList:[
            {name:'',value:'',valueName:'keywords',placeholder:'请输入关键字',type:'text'}
        ],
        highList:[
            {name:'所属公司',value:'',valueName:'orgCode',placeholder:'请输入关键字',type:'text'},
            {name:'放养品种',value:'',valueName:'breedCode',placeholder:'请选择品种',type:'selectMore',list:[{label:'品种1',value:'1'},{label:'品种2',value:'2'},{label:'品种3',value:'3'},{label:'品种4',value:'4'},{label:'品种5',value:'5'}]},
            {name:'品种分类',value:'',valueName:'varietyCode',placeholder:'请选择分类',type:'selectOne',list:[{label:'分类1',value:'1'},{label:'分类2',value:'2'}]},
            {name:'放养日期',value:'',valueName:'breedDate',placeholder:'请输入年限',type:'selectDate',dateType:'month'},//默认->date month year
            {name:'放养周期',value:'',placeholder:'请输入周期',type:'selectPeriod',startDate:'startDate',endDate:'endDate'}
        ]
    }
    
    字段说明：
    formSize：为整个组件的大小配置。
    defaultList：默认显示的搜索组件列表。
    highList：高级搜索内的组件列表（有相关触发按钮）。
        name：label名字。
        value：传给后台的value值。多选时，value为选中的数组对象
        valueName：传给后台的key。
        type：输入框类型//text,selectDate,selectPeriod,selectMore,selectOne。
        list：type为selectMore,selectOne时，下拉框的内容。

3、分页

<twPagination :total="total" :size="size" :pageSize="pageSize" @paginaFunc="paginaFunc"></twPagination>
pageSize:每页条数，非必填，默认10条 支持 10,20,30,50
size:样式大小，字符串，非必填，可选值为：'small'。
total：table表的总条数。
paginaFunc：当页数或一页显示多少条触发时，返回一个对象。
            {currPage: 2, currSize: 10}//当前页、每页显示条数

4、步骤条

<Step :stepData="stepData" @toggleStep="toggleStep"></Step>
toggleStep：切换步骤时的回调函数。
stepData：{
    class:'moBlueStep',//moBlueStep redStep pcBlueStep 三种颜色，默认moBlueStep
    icon:'el-icon-success',//完成后的icon图标，可以用element里面的所有icon，默认el-icon-success
    list:[
        {name:'步骤1'},
        {name:'步骤2'},
        {name:'步骤3'}
    ]
}

5、搜索组件

    <TwSearchBox :formData="formData" :formModule="formModule" :formDataList="formDataList" :formDataHideList="formDataHideList"
                              @getSearch="getSearch" @getChange="getChange" @getBlur="getBlur" @getFocus="getFocus"></TwSearchBox>
    
    formData:{} 1，非必须的，有需求3或者需要使用整个表单输入的数据时再用。  
                2，该对象用于承接所有搜索项的输入数据。
                3，可用于数据的默认或者回显，对应的key值必须与formDataList（formDataHideList）中itemValue的值一致。
    
    formModule:{//整个对象都是非必须的，有配置需求再用
        size:'small',//表单尺寸大小,非必填，默认small
        labelWidth:'75px',//整体label的宽度,非必填，默认值为75px（满足4个字的宽度）最大值为100px(满足6个汉字不换行)
        hideLabelWidth:'75px',//隐藏表单里面，整体label的宽度,非必填，默认75px(满足4个汉字的宽度)
        reset:true,//是否需要重置按钮,非必填，默认false
        showSearchMore:true//是否需要启用隐藏表单,非必填，默认false
    }
    
    formDataHideList:[]//非必须，用于隐藏表单数据
    
    getChange://change事件，非必须
    返回 一个对象包含三个值 val,item,formData 当前值-当前列表-输出的表单对象
    getBlur://blur事件，非必须
    返回 一个对象包含二个值 item,formData 当前列表-输出的表单对象
    getFocus://focus事件，非必须
    返回 一个对象包含二个值 item,formData 当前列表-输出的表单对象
    getSearch://必须定义，输出整个对象，包含输入项的所有字段，时间字段未处理，需要自行处理。
    
    getResetFunc:重置的回调函数
    
    formDataList:[//必须定义
        //通用字段：label左侧标题  itemValue绑定字段名(必填) itemType组件类型(必填) placeholder占位符 className组件自定义样式 itemChange组件change事件 itemBlur组件blur事件 itemFocus组件focus事件 disabled禁用 readonly只读(下拉组件自带该属性)
    {label:'文本',itemValue:'text',itemType:'text',className:'className1',itemChange:true,itemBlur:true,itemFocus:true, placeholder:'请输入文本',inputIcon:'el-icon-date',iconDirection:'left',disabled:false,readonly:false},
    {label:'数字',itemValue:'number',itemType:'number',itemChange:true,itemBlur:true,itemFocus:true, placeholder:'请输入数字',inputIcon:'el-icon-date',iconDirection:'right',disabled:false,readonly:false},
        //input输入和数字类型时：inputIcon加入框内图标使用的值为element的icon库；
        //iconDirection：图标位置left(默认)和right
    {label:'下拉单选',itemValue:'select',itemType:'select',selectSearch:true,disabled:false,selectList:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
        //下拉选择时：selectList为下拉列表数据（对象中必要字段为label与value） selectSearch开启列表搜索(默认true)
        //替换字段changeLabel:'',changeValue:''   checkAny：可以选择任意一级
    {label:'下拉多选',itemValue:'selectMore',itemType:'selectMore',showAllName:'showAll',checkAny:true,selectSearch:true,disabled:false,selectList:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
        //下拉多选时：selectSearch同上 showAllName计数的方式展示选中，而不是全部显示（全部显示可能会使input框变高，影响排版，默认采用计数方式，显示全部值就为showAll）
        //替换字段changeLabel:'',changeValue:''   checkAny：可以选择任意一级
    {label:'下拉级联',itemValue:'selectCascade',itemType:'selectCascade',showAllName:false,selectSearch:true,showAllLevel: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是否开启多选（默认false） selectList下拉列表，注意对象中必要字段为label与value
        //替换字段changeLabel:'',changeValue:'',changeChildren:''   checkAny：可以选择任意一级
    {label:'时间选择',itemValue:'date',itemType:'date',dateType:'week',dateFormat:'yyyy第WW周',disabled:false,readonly:false,minDate:'2023-04-23',maxDate:'2023-05-23'},
        //dateType时间类型date,month,year,week  dateFormat显示的自定义样式（yyyy年MM月dd日WW周） 
        //minDate可选最小日期  maxDate可选最大日期
    {label:'时间段选择',itemValue:'dateRange',itemType:'dateRange',dateType:'date',dateFormat:'yyyy年MM月dd日',separator:'-',startPlaceholder:'开始',endPlaceholder:'结束',disabled:false,readonly:false,itemChange:true,minDate:'2023-04-23',maxDate:'2023-05-23'},
        //dateType时间类型date,month,默认date  dateFormat显示的自定义样式（yyyy年MM月dd日） 
        //separator分离占位符 startPlaceholder开始占位符 endPlaceholder结束占位符 minDate可选最小日期  maxDate可选最大日期
    {label:'单选',itemValue:'radio',itemType:'radio',radioList:[{name:'花鲢',value:'1',disabled:true},{name:'鲈鱼',value:'2'},{name:'白鲢',value:'3'},{name:'鲨鱼',value:'4'}]},
    {label:'多选',itemValue:'checkBox',itemType:'checkBox',itemChange:true,checkBoxList:[{name:'花鲢',value:'1',disabled:true},{name:'鲈鱼',value:'2'},{name:'白鲢',value:'3'},{name:'鲨鱼',value:'4'}]},
        //单选，多选 只有change事件
    {label:'树形选择',itemValue:'selectTree',itemType:'selectTree',defaultProps:{ children: 'children',label: 'label'},treeList:[objTree]}
        //树形结构选择:treeList:树结构数据,标准格式为[{}]一个数组里面包含一个一级对象，兼容格式为{}，只有一个对象时会自动包装成[{}]，如果传的数据第一层有2个对象，那么会自动往上包装一层名为“全部”的一级。
        //defaultProps：自定义名称和子集映射对象，children与label都是必须替换的，不然默认就得是这2个字段。
    {label:'金额区间',itemValue:'valueRange1',itemValueSec:'valueRange2',itemType:'valueRange',isNumber:true},
        //itemValueSec是第二个框的匹配值  isNumber:true时  只能输入数字型
    ]
    
    最简单的使用案例：
    <TwSearchBox :formDataList="formDataList" @getSearch="getSearch">
     formDataList:[
        {label:'文本',itemValue:'text',itemType:'text'},
        {label:'数字',itemValue:'number',itemType:'number'},
        {label:'下拉单选',itemValue:'select',itemType:'select',selectList:[]},
        {label:'下拉多选',itemValue:'selectMore',itemType:'selectMore',selectList:[]},
        {label:'下拉级联',itemValue:'selectCascade',itemType:'selectCascade',selectList:[]},
        {label:'时间选择',itemValue:'date',itemType:'date'},
        {label:'单选',itemValue:'radio',itemType:'radio',radioList:[]},
        {label:'多选',itemValue:'checkBox',itemType:'checkBox',checkBoxList:[]},
        {label:'金额区间',itemValue:'valueRange1',itemValueSec:'valueRange2',itemType:'valueRange',isNumber:true},
      ],

6、table组件

    <TwTable :tableInit="tableInit" :tableData="tableData" :columns="columns" @cellClick="cellClick"  @addNewBack="addNewBack"
    @cellClickFBC="cellClickFBC" @changePage="changePage" @selectRow="selectRow" @selectChange="selectChange"></TwTable>

    //表格整体设置
    tableInit = {
      tableClassName:'tableClass',//给表格添加样式名（内置默认样式名：twTableStyle，自带样式，注意覆盖情况）
      tableHeadClass:'twTableHeadClass',//给表头添加样式名（内置默认样式名：tableHeadClass，自带样式，注意覆盖情况）
      size:'small',//表格大小：middle 默认small，
      hideHeader:false,//隐藏表头
      addNewRow:true,//新增一行,使用时，请配合操作列中，添加删除按钮进行新增数据的删除。同时结合addNewBack这个回调，调整新增行数据的特殊值的初始化。
      border:false,//单元格是否要线框
      select:false,//开启左侧select选项 不要与selectRow同时使用，不然勾选后，selectRow修改的行样式会消失。
                    //在tableData中，内置2个参数selectDisabled:true时，当前行禁止不能勾选
                    //selectDefaultChecked:true时，当前行默认勾选
      height:'500',//表格高
      width:'',//表格宽
      selectRow:false,//开启选中行数据事件 点击后默认添加checkedRowClass行样式，可以在公共CSS里面强制覆盖改样式。（与changeRow冲突，不能同时用）
      changeRow:{label:'state',value:'fail',addClass:'redFont'},（与selectRow冲突，不能同时用）
      //label匹配dataindex的值，value为dataindex等于某个值时，添加addClass（需要写在公共CSS里面）
      //例如：当state这一列的值为fail时，这一行的文字都变成蓝色
      /*.redFont{
          color: blue !important;
          .el-checkbox__label,.el-radio__label,input,textarea{//非文字时，需要再定位一层
          color: blue !important;
        }
      */
      pagination:{//是否开启分页，有值就开启
        total:100,
        currPage:1
      }
    }
    
    //table的columns列设置（数组中枚举了所有单元格可能会出现的场景，如有满足不了的需求，
    请联系管理人员添加场景。该table使用的是antd-vue,也可以参照官方API实现自己需要的功能）
    例：  {title: '延期(天)',dataIndex:'yq',
            customCell: (record) => {	// customCell（单元格样式的处理）
            //修改单元格中的样式
              if(parseFloat(record.day) > 0 && parseFloat(record.day) < 6){
                return { style: { 'color': 'orange' } }
              }else if(parseFloat(record.day) > 5){
                return { style: { 'color': 'red' } }
              }else{
                return { style: { 'color': '#333' } }
              }
            },
            customRender:(text) => {// customRender（单元格值的处理）
            //给每个值后面加上单位，后端返回的只是一个数字
              return text + '天'
            }
          }
    columns = [
    {
        title: 'changeImg',
        dataIndex: 'changeImgList',
        isSpecial:{//是否开启字段样式特殊处理
          class:'changeImg',
          type:'imgList',//图片类型，与img数组配合使用，根据不同的状态值显示不同的图片
          imgList:[
              {value:'img1',img:require("../assets/logo.png")},
              {value:'img2',img:require("../assets/gou.png")},
          ]
        }
      },
      {
        title: 'changeImg',
        dataIndex: 'changeImg',
        isSpecial:{//是否开启字段样式特殊处理
          class:'changeImg',
          type:'img',//图片类型，与img数组配合使用，根据不同的状态值显示不同的图片
          img:require("../assets/logo.png")
        }
      },
      {
        title: '附件',
        dataIndex: 'fileList',
        ellipsis:true,
        isFiles:{placeholder:'上传附件',color:'#39f',trigger:'click'},
      },
      {
        title: 'changeNum',
        dataIndex: 'changeNum',
        isSpecial:{//是否开启字段样式特殊处理
          type:'num',//数值类型，与numType配合使用，根据不同的数值类型，格式化数据
          numType:'comma',
          class:'changeNum',
        }
      },
      {
        title: 'Name',
        dataIndex: 'name',
        rowHide:true,//隐藏列
        tableSort:true,//开启当前页前端的简单排序
        align:'left',//对齐方式'left' | 'right' | 'center'
        fixed:'left',//开启固定列，left/right;使用fixed时，必须使用width固定宽度，否则样式会有问题
        width:100,//列宽
        colSpan: 2,//开启表头列合并，下一列必须设置colSpan: 0,不然表头会错乱
        tableRowSpan:true,//开启数据行合并，使用数据行合并时，不建议用isSpecial，特别是使用样式类型时，除了字体颜色外，不会生效
        isSpecial:{//是否开启字段样式特殊处理
          type:'styleList',//样式数组类型，对不同的值，显示不同的样式
          isClick:true,//开启状态列点击事件
          textStyleList:[
            {value:'John Brown',style:{"color":"red","border-bottom":"1px solid red","cursor":"pointer"}},
            {value:'Joe Black',style:{"color":"blue","border-bottom":"1px solid blue","cursor":"pointer"}},
            {value:'Jim Green',style:{"color":"green","border-bottom":"1px solid green","cursor":"pointer"}},
          ]
        }
      },
      {
        title: 'Phone',
        colSpan: 0,
        dataIndex: 'phone',
         isSpecial:{//是否开启字段样式特殊处理
          class:'qwe123',
          type:'style',//样式类型，对显示的内容做统一样式处理
          textStyle:{"color":"red","cursor":"pointer"}
        }
      },
      {
        title: '状态',
        dataIndex: 'state',
        isState:{//开启状态列，根据不同的值，限制不同的状态样式
          isClick:true,//开启状态列点击事件
          stateList:[{name:'成功',value:'success',class:'stateColorBlue',icon:'el-icon-edit'},
            {name:'失败',value:'fail',class:'stateColorRed',styles:{color:'red'}},
            {name:'警告',value:'warning',class:'stateColorYellow'},
            {value:'danger',styles:{color:'red'},class:'stateColorGrey'},
            {value:'ing',styles:{color:'blue'},class:'stateColorGreen',img:require("../assets/logo.png"),imgClass:'logo'}]
          //状态列数组，name表示要显示的值，没有该字段时，就显示dataindex匹配的值。
          //value就是dataindex的枚举值，icon:element的图标库，img:本地图片（一定要用require的方式引入）,imgClass引入图片的样式
          //styles表格中的自定义样式, class内置了五种状态样式，写上class就行了（注意：styles里面的样式会覆盖class内的样式）
        }
      },
      {
        title: 'number/text',
        dataIndex: 'age',
        isEdit:{type:'textBox',cellChange:true,cellFocus:true,cellBlur:true},
        //isEdit：是否向单元格填充输入组件：包含以下类型（带有Box后缀的类型，是对普通类型的增强版，用于输入区域太小，或者需要输入大量文案的时候，推荐使用）
        //text,number,textarea,textBox,numberBox,textareaBox,select,radio,checkBox,switch,date
      },
      {
        title: 'textarea',
        dataIndex: 'textarea',
        isEdit:{type:'textareaBox',cellChange:true,cellFocus:true,cellBlur:true,minDate:'2023-04-01',maxDate:'2023-05-01',dataList:[{value: '111',name: '黄金糕'}, {value: '222',name: '双皮奶'}]},
        //text,number,textarea,textBox,numberBox,textareaBox,select,radio,checkBox,switch,date
      },
      {
        title: 'selectCascade',
        dataIndex: 'selectCascade',
        width:200,
        isEdit:{type:'selectCascade',selectSearch:true,isSelectMore:true,dataList:arrLists},
        //级联选择 selectSearch:true showAllName:true disabled:true showAllLevel:true
        //placeholder trigger:'click/hover' isSelectMore:true checkAny:true
        //changeLabel:'' changeValue:'' changeChildren:'' 
	//使用级联时，宽度至少设置200 不然会有样式问题
      },
      {
        title: 'select',
        dataIndex: 'select',
        isEdit:{type:'select',cellChange:true,cellFocus:true,cellBlur:true,selectSearch:true,isSelectMore:true,showAllName:'showAll',dataList:[{value: '111',name: '黄金糕'}, {value: '222',name: '双皮奶'}]},
        //text,number,textarea,textBox,numberBox,textareaBox,select,radio,checkBox,switch,date
        //select,radio,checkBox三种类型，需要有数据源dataList支持，name为展示的名字，value为对应的数值，
        //搜索功能selectSearch:true/false，多选功能isSelectMore:true/false，计数showAllName:'showAll'/其他（只有值为'showAll'时，才会显示全部选项）。
      },
      {
        title: 'date',
        dataIndex: 'date',
        isEdit:{type:'date',dateType:'date',cellChange:true,cellFocus:true,cellBlur:true,minDate:'2023-04-01',maxDate:'2023-05-01',dataList:[{value: '111',name: '黄金糕'}, {value: '222',name: '双皮奶'}]},
        //text,number,textarea,textBox,numberBox,textareaBox,select,radio,checkBox,switch,date
        //date为时间选择组件，dateType可为date（默认date） month year。minDate为最小可选，maxDate为最大可选。
      },
      {
        title: 'radio',
        dataIndex: 'radio',
        width: 180,
        isEdit:{type:'radio',cellChange:true,cellFocus:true,cellBlur:true,minDate:'2023-04-01',maxDate:'2023-05-01',dataList:[{value: '111',name: '黄金糕'}, {value: '222',name: '双皮奶'}]},
        //text,number,textarea,textBox,numberBox,textareaBox,select,radio,checkBox,switch,date
        //twRadioDisabled:true,行数据有该字段时，该行radio禁用      
      },
      {
        title: 'checkBox',
        dataIndex: 'checkBox',
        isEdit:{type:'checkBox',cellChange:true,cellFocus:true,cellBlur:true,minDate:'2023-04-01',maxDate:'2023-05-01',dataList:[{value: '111',name: '黄金糕'}, {value: '222',name: '双皮奶'}]},
        //text,number,textarea,textBox,numberBox,textareaBox,select,radio,checkBox,switch,date
      },
      {
        title: 'switch',
        dataIndex: 'switch',
        width: 80,
        isEdit:{type:'switch',cellChange:true,cellFocus:true,cellBlur:true,minDate:'2023-04-01',maxDate:'2023-05-01',dataList:[{value: '111',name: '黄金糕'}, {value: '222',name: '双皮奶'}]},
        //text,number,textarea,textBox,numberBox,textareaBox,select,radio,checkBox,switch,date
        //switch时，如果dataindex匹配的值不为布尔型或者为''空值时，会直接按ture显示
      },
      {
        title: 'Address',
        dataIndex: 'address',
        twEllipsis:1,//超出多少行出现省略号，目前支持1和2，twEllipsis会覆盖ellipsis的效果，并且会让表头搜索功能失效
        width:150,
        colSearch:true,//表头搜索功能，与twEllipsis冲突，不能共用,如果非要用，就使用ellipsis: true。但是没有twEllipsis悬浮框的效果
        ellipsis: true,//超出1行出现省略号，twEllipsis会覆盖ellipsis的效果。
      },
      {
        title: 'html',
        dataIndex: 'html',
        isHtml:[{value:'red',html:'<div style="width: 100%;height: 10px;background-color: red"></div>'}
        ,{value:'blue',html:'<div style="width: 100%;height: 10px;background-color: blue"></div>'}],
        //html类型时，根据数组对象中，不同的value显示不同的自定义html单元格样式
        //value用来匹配dataindex在tableData中的值
      },
      {
        title: '操作',
        isBtn:{btnList:[{name:'查看',color:'#3399ff',isShowBtn:'checkBtn'},{name:'编辑',icon:'el-icon-edit',hideBtn:true},{name:'删除',color:'red',icon:'el-icon-delete'}]}
        //自定义按钮：统一按钮为文字按钮，name名称 color颜色 icon图标 自带点击事件 
        //isShowBtn按钮是否隐藏,对应的值为自定义字段（例：checkBtn），不写该属性默认为显示，在相应的行数据中
        //根据自定义逻辑确定checkBtn:true/false（显示/隐藏）
      },
    ];

    //接口请求回来的参数
    tableData
    
    //对应事件
    addNewBack(params){//新增行数据的回调，用于新增行数据后，某些字段需要特殊处理或者初始化一些值
        params//tableData的整个数组对象，修改最后一个对象就行了。建议用$set赋值
    }
    cellClick(params){//单元格的点击事件
        params = {
            currDataItem:currDataItem,//tableData中的行数据
            columnItem:columnItem//columns中的列数据
        }
    }
    cellClickFBC(params){//单元格输入组件的focus,blur,change事件(input组件才会使用这个方法)
        params = {
            type:type,//事件类型，focus,blur,change三种
            currDataItem:currDataItem,
            columnItem:columnItem,
            val:val//change事件才会有的当前输入值
        }
    }
    changePage(params){//分页事件
    params = {
            currPage:currPage,//当前页
            currSize:currSize//分页条数
        }
    }
    selectChange(params){//tableInit.select为true时，开启第一列勾选，此为勾选后的回调
    params = {
            selectList:[],//勾选对象数组
            selectIndex:[]//勾选index的数组
        }
    }
    selectRow(params){//tableInit.selectRow为true时，开启选中一行后的事件包括样式  
        params//tableData中的行数据
    }
    
    最简单的使用案例：
    <TwTable :tableData="tableData" :columns="columns"></TwTable>
    tableData = [{}];
    columns = [{}];

6、form组件(针对PC端)

 <TwFormPC :ref="formSetting.refName" :formSetting="formSetting" 
 :formData="formData" :formModule="formModule" @formFBC="formFBC" @isReady="isReady"></TwFormPC>

 ****如果是弹框表单，element的弹框请加上class="twDialog"统一样式****

 formSetting:{//一个界面使用多次该组件时，则必须定义该对象中的refName属性，只使用一次时，可以不写该对象。
    refName:'formOne',//一个界面使用多次该组件时，则必须定义该属性，且值不能一样
    labelWidth:'91px',//label宽度，默认91px（可容纳5个字不换行）
    formSize:'small'//medium small(默认) mini
 }
 formData:{}//承接表单值的对象，一个界面使用多次该组件时，可以公用这一个对象，相应的值都会赋值在里面
 formModule:[//该数据模型与搜索组件的模型几乎一致。一个界面使用多次该组件时，必须定义多个不同的formModule。
    //通用字段：label左侧标题  itemValue绑定字段名(必填) itemType组件类型(必填) 
    //warningText必填未填时/校验不通过时，出现的提示文字,span:12,offset:4，栅格式布局
    //placeholder占位符 itemChange组件change事件 itemBlur组件blur事件 itemFocus组件focus事件 disabled禁用 readonly只读(下拉组件自带该属性)
    {itemType:'title',itemValue:'标题',span:24,class:'newStyle'},//标题行，独占一行需要用span:24,内置了基础样式，新增class可强制修改样式。
    {label:'活动名称',itemValue:'name',itemType:'text',warningText:'请输入！',itemChange:true,itemBlur:true,itemFocus:true,required:true,isHidden:false},
    {label:'活动区域',itemValue:'region',itemType:'select',filterable:true,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:12,offset:4,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:'showAll', selectSearch:true,disabled:false,required:true,isHidden:false,selectList:[{name:'选项1',value:'1'},{name:'选项2',value:'2'}]},
    //下拉多选时：selectSearch同上 showAllName计数的方式展示选中，而不是全部显示，（全部显示可能会使input框变高，影响排版，默认采用计数方式，显示全部值就为showAll）
    {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的值
 ]
 
 内置方法：
 getReset:重置整个表单，并消除各种提示。
 getSubmit:确认必填是否填完，界面给出相应提示，并且触发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].getSubmit();//校验时，每个表单都要调用一次
      this.$refs[this.formSetting2.refName].getSubmit();
    },
    getReset(){
      this.$refs[this.formSetting1.refName].getReset();//重置时，每个表单都要调用一次
      this.$refs[this.formSetting2.refName].getReset();
    },
    isReady(params){
      this.resultList.push(params);
      if(this.resultList.length === 2){
        console.log(this.resultList);
      }
    },