twmodule

0.0.98 • Public • Published

说明文档

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

指令操作

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);
      }
    },

Readme

Keywords

none

Package Sidebar

Install

npm i twmodule

Weekly Downloads

3

Version

0.0.98

License

MIT

Unpacked Size

1.41 MB

Total Files

6

Last publish

Collaborators

  • yuany06