ekeyrun-public-table

1.0.36 • Public • Published

ekeyrun-public-table

动态查询条件及动态生成table组件

安装组件

npm install ekeyrun-public-table

组件调用

<tablePage :tableObj="tableObj" :axiosFn="axiosFn" :formObj="formObj" :treeId="treeId" @tableBtnEv="tableBtnEv" :handleIsDisable="handleIsDisable" ref="tableObjForm" :paginationInfo="paginationInfo"> </tablePage>

script里代码块

 import tablePage from 'ekeyrun-public-table',         //引入组件
 import {getDictByTypeCode,getDictByCodeAndParentValue} from '../../../utils/commons';  //引入获取字典值的方法
 export default {
     components: {
         'tablePage':tablePage
     },
    data() {
        return{
            formObj:{                               //可选,传入查询条件
                dataName:[{key:'topic'}],                   //可选,用于查询条件是否包层,如:查询条件根据名称查询:topic:{name:''},则dataName为topic 
                list:[{                             //查询条件集合
                    father:'topic',                 //可选,但是如果dataName有值则必选,值和dataName的值一样
                    type: 'select',                 //必选,input,select,date,time,datetime,daterange
                    value:'',                       //必选,v-model绑定属性
                    label:'状态',                   //必选,显示名称
                    key:'topicStatus',              //必选,查询条件属性名,与接口需要的属性名一致
                    name:'dictName',                //可选,但是下拉框必选,下拉框匹配的属性显示的名称 用于字典表数据的值,
                    parameter:'dictValue',          //可选,但是下拉框必选,下拉框匹配的属性的值 用于字典表数据的值,
                    child:[],                       //可选,集合,三种情况:
                                                        //1、从字典表数据值(name和parameter赋值为字典表数据的属性);
                                                        //2、是静态值,则格式为:child:[{label:'',value:''}]
                                                        //3、取的是联级数据,就是用于el-cascader数据,该数据需要转换成树形结构数据。
                    keys:['provice','area','city'],                        // 可选,但是如果是用于el-cascader,必选,用于查询条件接口需要的属性
                    props:[                         //可选,默认是以下值,如需变更请自定义props的值。
                        value: 'dictValue',         //用于el-cascader必选。与数组里的value值的属性对应
                        label: 'dictName',          //用于el-cascader必选。与数组里的显示值的属性对应
                        children: 'childList',      //用于el-cascader必选。与数组里的下级属性对应
                        checkStrictly: true],       //用于el-cascader必选。是否严格的遵守父子节点不互相关联                        
                    
                }]
             },
            axiosFn: reqGetTopicPageList,           //必选,列表初始化请求函数
            treeId:[                                //可选,如列表需要根据左边树查询, 两种形式
                  {value:'',k:true},                // 第一种:如果只传字符串,设置k为true,直接赋值value值
                  {id:'treeId',value:''},           //第二种格式:如果需要以id属性值传入如需父节点设置father:''可设置多个id ,需要id:'treeId'
            ],
            tableObj:{                              //必选
                type: 'selection',                  //可选,列表第一列的类型,index或selection。index代表序列,selection代表复选框。
                isDisable:true,                     //可选,用于type 为 'selection' 判断列表的checkbox初始化是否需要处理disabled,如需处理,则设置为true 
                list:[],                            //列表数据
                border:false,                       //可选,默认为false,是否带有纵向边框
                title:[{                            //必选        
                    prop : 'topicStatus',           //必选,对应列内容的字段名,
                    label: '状态',                  //必选,显示的标题,
                    align: 'center',                //可选,列对其方式,默认居中,left、center、right
                    width: '',                      //可选,列宽度
                    fixed: '',                      //可选,列是否固定在左侧或者右侧,默认为空
                    formatter: this.onFormatter,    //可选,列数据格式化,类型:function,方法传入的参数(row,type)列格式化数据,type值为上面prop值,主要用于下拉框值匹配,如定义了方法onFormatter,则formatter:this.onFormatter
                    useComponent: 'switch',         //可选,是否组件类型,目前只支持el-switch组件,传入值为:switch
                    switchClass: '' ,               //可选,用于useComponent为switch时,el-switch样式
                    activeColor: '',                //可选,switch 打开时的背景色, 默认绿色
                    inactiveColor:'',               //可选, switch 关闭时的背景色,默认灰色
                    activeText:  '',                //可选, switch 打开时的文本,默认启用
                    inactiveText: '',               //可选, switch 关闭时的文本, 默认关闭
                    activeValue:  '',               //可选,switch 打开时的值,默认为1,
                    inactiveValue:'',               //可选,switch 关闭时的值,默认为0   
                }],
                btn:[{                              //可选,操作按钮
                    name : '编辑',                  //必选,显示名称 如查看、编辑、删除、发布、取消发布
                    type : 'edit',                  //必选,按钮类型:如view、edit、delete、publish、unpublish
                    permission: false,              //必选,权限 true代表有权限,false代表无权限,
                    k : '',                         //可选,需要根据列字段判断的属性名,对应title里的prop的值。如status
                    show : [],                      //可选,数组类型,属性值的判断,数组类型,如属性status的值为1,2则显示,则show[1,2]
                    btnClass : '',                  //可选操作按钮样式
                 }],
                btnWidth:340,                       //可选,操作列定义的列宽度
            },
            code:{},                                //可选,字典数据值必选
            dictionary:[{                           //可选,如有字典数据则需要
                 dictCode:'publish_status',         // 字典数据code值
                 name:'topicStatus',                //与formObj.list中key属性命名一致,如key属性为topicStatus,则name也为topicStatus              
            }],
            paginationInfo:{                        //可选,是否显示分页,默认有分页。
                show: true                          //必选,true显示,false不显示
            },
          
        },
        created() {
            this.dictionaryCode();                 //可选,如需查询字典数据则用
            this.getDictValue(0,1);                //可选,下来框联动,初始化第一个下拉框的值  
        },
        methods:{
            tableBtnEv(type, row) {                //可选用于按钮操作,根据按钮type值传入来进行业务处理,如弹窗,删除等。
            
            },
            onFormatter(row,type){                 //字典值匹配,通用方法,根据type值来返回
                let dictName=''
                this.formObj.list.forEach(item=>{
                    if(item.key===type){
                        item.child.forEach(chil=>{
                            if(Number(row[type]) == Number(chil.dictValue)){
                                dictName =  chil.dictName;
                                return false;
                            }
                        });
                        return false;
                    }
                });
                return dictName;
            },
            dictionaryCode() {                    //如果需要字典数据,从this.dictionary配置里获取
                let n = 0;
                if(this.formObj){
                    if (this.dictionary && this.dictionary.length > 0) {
                        for (let i = 0; i < this.dictionary.length; i++) {
                            getDictByTypeCode(this.dictionary[i].dictCode, (val) => {   //加载数据字典
                                this.code[this.dictionary[i].name] = val;
                                n += 1;
                                if (n === this.dictionary.length) {  //所有字典加载完成后加载表格
                                    for (let j = 0; j < this.formObj.list.length; j++) {
                                        for (let k in this.code) {
                                            if (this.formObj.list[j].key === k) {
                                                this.formObj.list[j].child = this.code[k];
                                            }
                                        }

                                    }
                                }
                            });
                        }
                    }
                }
            },
            getDictValue(dictValue,key){          //可选,用于下拉框联动' 
                if(key === 'applyOrg' || key === 1){ //applyOrg 为第一个下拉框的属性值,organization_type为字典数据的类型。
                    getDictByCodeAndParentValue('organization_type',dictValue || 0, (val) => {
                        if(key === 1){
                            this.formObj.list[1].child = val;
                        }else{
                            this.formObj.list[2].value = ''; 
                            this.formObj.list[2].child = val;
                        }
                    });
                }

            },
            selectChange(dictValue,name){         //可选,下拉框联动必选。
                this.getDictValue(dictValue,name)
            }
        }
    }
}   

Package Sidebar

Install

npm i ekeyrun-public-table

Weekly Downloads

0

Version

1.0.36

License

MIT

Unpacked Size

2.08 MB

Total Files

19

Last publish

Collaborators

  • crystal20270407