说明文档
该组件为项目提供了一些常用的方法,组件,样式。
指令操作
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);
}
},