twmodule 0.0.50 → 0.0.52

package/README.md

@@ -61,6 +61,21 @@ npm run test
 
 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、字体
@@ -460,7 +475,7 @@ stepData：{
     formModule:{//整个对象都是非必须的，有配置需求再用
         size:'small',//表单尺寸大小,非必填，默认small
         labelWidth:'75px',//整体label的宽度,非必填，默认值为75px（满足4个字的宽度）最大值为100px(满足6个汉字不换行)
-        hideLabelWidth:'85px',//隐藏表单里面，整体label的宽度,非必填，默认85px(满足5个汉字不换行)
+        hideLabelWidth:'75px',//隐藏表单里面，整体label的宽度,非必填，默认75px(满足4个汉字的宽度)
         reset:true,//是否需要重置按钮,非必填，默认false
         showSearchMore:true//是否需要启用隐藏表单,非必填，默认false
     }
@@ -518,4 +533,177 @@ stepData：{
         {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"
+    @cellClickFBC="cellClickFBC" @changePage="changePage" @selectRow="selectRow"></TwTable>
+
+    //表格整体设置
+    tableInit = {
+      tableClassName:'tableClass',//表样式名
+      size:'small',//表格大小：middle 默认small，
+      select:false,//开启左侧select选项 不要与selectRow同时使用，不然勾选后，selectRow修改的行样式会消失。
+      height:'500',//表格高
+      width:'',//表格宽
+      selectRow:false,//开启选中行数据事件 点击后默认添加checkedRowClass行样式，可以在公共CSS里面强制覆盖改样式。
+      changeRow:{label:'state',value:'fail',addClass:'redFont'},
+      //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 = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        tableSort:true,//开启当前页前端的简单排序
+        align:'left',//对齐方式'left' | 'right' | 'center'
+        fixed:'left',//开启固定列，left/right
+        colSpan: 2,//开启表头列合并，下一列必须设置colSpan: 0,不然表头会错乱
+        tableRowSpan:true,//开启数据行合并
+        isSpecial:{//是否开启字段样式特殊处理
+          textStyle:{"color":"red"}//为单元格的文体设置样式（仅针对文字）
+        }
+      },
+      {
+        title: 'Phone',
+        colSpan: 0,
+        dataIndex: 'phone',
+        isSpecial:{//是否开启字段样式特殊处理
+          isClick:true,//开启状态列点击事件
+          textStyle:{"color":"red","border-bottom":"1px solid 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")}]
+          //状态列数组，name表示要显示的值，没有该字段时，就显示dataindex匹配的值。
+          //value就是dataindex的枚举值，icon:element的图标库，img:本地图片（一定要用require的方式引入）,
+          //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: 'select',
+        dataIndex: 'select',
+        isEdit:{type:'select',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
+        //select,radio,checkBox三种类型，需要有数据源dataList支持，name为展示的名字，value为对应的数值，
+      },
+      {
+        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
+      },
+      {
+        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'},{name:'编辑',icon:'el-icon-edit'},{name:'删除',color:'red',icon:'el-icon-delete'}]}
+        //自定义按钮：统一按钮为文字按钮，name名称 color颜色 icon图标 自带点击事件
+      },
+    ];
+
+    //接口请求回来的参数
+    tableData
+    
+    //对应事件
+    cellClick(params){//单元格的点击事件
+        params = {
+            currItem:currItem,//columns中的列数据
+            rowItem:rowItem//tableData中的行数据
+        }
+    }
+    cellClickFBC(params){//单元格输入组件的focus,blur,change事件(input组件才会使用这个方法)
+        params = {
+            type:type,//事件类型，focus,blur,change三种
+            rowItem:rowItem,
+            currItem:currItem,
+            val:val//change事件才会有的当前输入值
+        }
+    }
+    changePage(params){//分页事件
+    params = {
+            currPage:currPage,//当前页
+            currSize:currSize//分页条数
+        }
+    }
+    selectRow(params){//tableInit.selectRow为true时，开启选中一行后的事件包括样式  
+        params//tableData中的行数据
+    }
+    
+    最简单的使用案例：
+    <TwTable :tableData="tableData" :columns="columns"></TwTable>
+    tableData = [{}];
+    columns = [{}];
 ```