Nixon's Pants Missing

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

    Install

    npm i ekeyrun-public-table

    DownloadsWeekly Downloads

    0

    Version

    1.0.36

    License

    MIT

    Unpacked Size

    2.08 MB

    Total Files

    19

    Last publish

    Collaborators

    • crystal20270407