twcomp

通威组件库

Usage no npm install needed!

<script type="module">
  import twcomp from 'https://cdn.skypack.dev/twcomp';
</script>

README

说明文档

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

指令操作

npm/cnpm i
依赖包下载

npm run serve
启动开发环境

npm run build
打包正式环境

npm run test
打包测试环境

组件库说明

公共方法

1、changeDate(time, type) //时间格式化
    参数说明：
    time:传入的时间
    type:格式化后返回的格式
        默认：2020-01-01
        date2：20200101
        dataTime ：2020-01-01 01:01:01
        month ：2020-01
        month2 ：202001
        year : 2020
        before : 原始的数据格式
---后续根据项目需求会加入更多格式---

2、changeNum(num,changeType) //数字格式化
    参数说明：
    num:传入的数字
    changeType：格式化后返回的格式
        默认：保留2位小数
        tofixed3：保留三位小数
        comma ：保留2位小数，正数部分添加百分号 //10,000.00
        comma3 ：保留3位小数，正数部分添加百分号 
        percent ：保留两位添加百分号
---后续根据项目需求会加入更多格式---

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

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

公共样式

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、表单

主要用于移动端
 <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,integer(正整数)。
        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();

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" @paginaFunc="paginaFunc"></twPagination>
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'}
    ]
}