Tangzhangss-web-component NPM

tangzhangss-web-component前端组件库

开发规范:

1.所有组件prop属性type=Function：
    默认都是返回undefined;
    如果需要自定义，请定义返回值（非undefined）;
    如果返回true(==),才会进行后续操作（如果有的话）;

说明文档（所有组件都是基于element-plus 2.2.0,使用习惯几乎一样）

国际化暂时不支持

vue-i18n@next 按规范写即可

TZFrom(表单)

输入选项参考element表单控件

iType=输入类型,
  text|password|textarea => input
  select => select option
    options selectKey selectLabel selectValue  multiple:true
  date datetime
  editor(富文本类型)=》{
      +属性： width:"",宽度:"";
      同时如果需要图片上传至服务器需要传imageUploadApi，imageUploadHeaders（可选），
      默认转base64文本储存；
  }
readonly:只读 
showKey:只读时显示的key 默认prop

rules:表单验证规则

tip:提示语
tipPlacement:提示语方向默认顶部

style:Object{}类型，输入框样式，使用场景》》 iSpan会等比例缩放输入框长度，如果想要输入框占一行且宽度短一些，通过该属性设置

检验：el-form的【props】editColumnRules全局校验-会被每列的rules覆盖，即：如果item.required和rules属性存在，当列的校验不会生效（覆盖）
rules属性[],如:rules:[{type: 'email',message: '请输入正确的邮箱地址',}],

isShow:是否显示,这个方法是外部控制只在初始化的时候（外部数据改变的时候）起作用

isVisibleFunc（from）:该字段是否展示————根据字段名字动态变化 返回true or false

readonly: 该表单只读状态

图片上传api和headers设置

imageUploadApi (post请求)

imageUploadHeaders (Object类型)

 editColumn(){
    return [
        {prop:"remark", label:"备注", iType:'image',iSpan:24,imageUploadApi:"/service_api/aliyunoss/upload_picture/no_auth",imageUploadHeaders:{'X-Token':"---"}},
      ]
  }

TZEditableTable(可编辑表格-使用方式和表格一致，这里仅仅罗列注意事项)

根据表格列的readony属性判断该行是否可以编辑（所以编辑对象不能有这个属性）

table-column(表格的列)

required: true,(不能为空)
validator: (value)=>{} 保存验证器，返回false不保存 true保存
[表格排序]sortable:true; 
        //该字段是否需要排序...  可以定义sortChange时间做额外的处理，参数sortObj:{colume,prop,order}
        //排序的优先级:第一次进行排序的字段具有最高优先级（不管升序和降序和多次改变都一样，如需改变优先级请先清空排序）
[表格列的样式]handleHeaderStyleClass对应element-plus的header-cell-class-name（参数一样）；  function 返回className

TZTable(表格)

表格的删除是单独保存和修改删除，可编辑的表格是批量删除和保存修改

cStyle: 表格的style={}

修改表格样式

document.getElementsByTagName('body')[0].style.setProperty(key, '');
--tz-table-header-bg:列的背景颜色
--tz-table-column-height:列的高度

导出excel暂不支持可编辑表格导出

直接导出显示的列(可通过自定义列展示调整); 默认导出的值和显示的一样，可通过handleValue调整

 exportConfig:{
    type:Object,
    default:()=>{
        fileName:new Date().getTime();//excel文件名
        handleValue:{ //处理导出值
            prop:function(rowObj){
                return rowObj[prop];    
            }
        }
    }
 },

自定义展示列

通过列的名字（label）来区分=》请确保唯一

hide:判定该列是否展示

自定义表格列头单元格内容 render

【支持表格和可编辑表格】在tableColumn属性中写renderHeader即可实现自定义列head，如: 
renderHeader:function(column,index){
    return h('div',{},'hello')
},
【仅支持表格】在tableColumn属性中写renderData即可实现自定义单元格内容，如: 

如果需要自定义单元格内容需要将cType设置成’text‘,其他的暂不支持!!!!

renderData:function(data,column,index){
    return h('div',{},data.id+index);
}

“筛选”=》

需要对tableColumn属性给予fliterable（表示可作为筛选条件）

iType(选填，筛选类型(对饮input类型)，如果没有就跟cType属性一直,如:时间段（dateRange datetimeRange）等需要自定义)
    ！！！如果iType类型为switch,则点击搜索时这个条件一直会有（如果想要查询全部请使用select,并给与selectData数据）
    selectData:[
        {label:"全部",value:""},
        {label:"启用",value:"true"},
        {label:"未启用",value:"false"},
    ]
iSpan:筛选条件占用总比例（24）的长度
isShowFilter（默认展示该条件）
fliterable:true 可以作为筛选条件(默认false)
iType或cType == 'text' 的输入框都是模糊查询

showFilterType属性 Array，可以顶部显示和弹出对话框显示

弹出层展示filter,可选["top", "dialog"],默认["top"]

主要属性:

api-url 配合后端框架使用(
    拉取提交删除的utl,对应post get delete请求
)
 dataList 表格数据（优先使用dataList的数据，所以getTableData拉取数据之后会调用回调处理数据@get-table-data-list（data））   
=>自己传入dataList之后请注意监听@get-table-data-list事件
edit-data-handle(data) 编辑时候数据处理

表格清空功能(prop)

param的构造同后端get请求查询条件map结构

:clear="{
   show:isShowClearBtn,
   param:{
       'usable@EQ':false
        }
}"

操作行为:

表格右上角的操作行为 :operation-others(prop) 表格中每一行记录后面的操作信息如下，两者结构相同

:action-others='[{title:"创建子菜单",icon:"仅支持项目icons目录下的svg图片，写图片名",onClick:editDataHandle(row),isShow:isShow(row)}]'

同时还有系统默认的一些行为可通过一下方式使用

:action=['create','delete',....]

分页:

pagination==null不显示分页数据

     paginationLayout:{
                type:String,
                default:"total, sizes, prev, pager, next, jumper"
            },
            pagination:{
              type:Object,
              default:{
                  totalPages:1,
                  totalElements:0,
                  size:10,//每页显示的行数
                  number:1,//当前页
            }
     },

顶部tabs: (点击之后查询的时候会拼接此查询条件，默认第一个)

:filter-tabs="filterTabs"
```
filterTabs:[
          {
            label:"全部",
            badge:0,//右上角提示的值
            key:"usable",
            value:true,
            onClick:()=>{this.isShowClearBtn=false}//回调
          },
          {
            label:"回收站",
            badge:0,//右上角提示的值
            key:"usable",
            value:false,
            onClick:()=>{this.isShowClearBtn=true}//回调
            apiKey:0//后端返回属性名-与后端对应-不重复（如设置badge的值）
          },
        ],
```

成功回调 editSuccessHandle

提交之前回调 editSubmitBeforeFunc

提交之后回调 editSubmitAfterFunc

删除之前的prop(异步方法，返回false===,取消删除)

beforeDeleteData:{
    type:Function,
    default:async(data)=>true
  }

多选单选

@current-change="currentChange" //单选事件，点击当前行触发
    currentChange(data){
        console.log(data);//点击行数据
    },
@select-change="selectChange" //多选事件,配置selection属性，
    selectChange(array){
        console.log(array); //选中数据
        console.log(this.$refs.tzTable.selectedDataRow)//也可通过组件data直接获取选中的数据
    }

表尾合计

showSummary //是否展示合计
sumText="合计显示名称" //合计字段名字--默认:'合计'--会按照默认逻辑合计
:summaryMethod="summaryMethod" //自定义合计方法

summaryMethod({ columns, data }) {
    console.log(columns,data);//所有的列和数据
    return ['合计','Y1','Y2',3,4]
},

####　合并行和列多行或多列共用一个数据时，可以合并行或列。

通过给 table 传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。也可以返回一个键名为 rowspan 和 colspan 的对象。

function({ row, column, rowIndex, columnIndex })