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)
            }
        }
    }
}