search_header_filter_cache v0.4.0

列表页面搜索头请求封装组件

基于element-ui开发

github地址 https://github.com/BalotT/search_header_filter_cache.git

安装

    npm install search_header_filter_cache -S
    

使用

在main.js中 引入并且注册
#main.js
import searchHeader from 'search_header_filter_cache'
import 'search_header_filter_cache/lib/searchHeader.css'
Vue.use(searchHeader);

父组件使用

    <search-header
        ref="searchHeader"
        :btn-list="btnList"
        :input-list="inputList"
        :valid-rules="validRules"
        :cache-proxy="cacheProxy"
         name="****">
    </search-header>

name （当前页面name值）

必须为全局唯一值，用作缓存用户所选输入框习惯，存在localStorage,属性名取名规则为 searchList_${name} 

cacheProxy （记录用户习惯的方法合集）

    cacheProxy:{
        without:true, //如果在父组件定义存取方法设为true
        asyncGet:false,//如果为true get函数需要添加async 返回一个promise对象到子组件
        get: ()=>{
            return JSON.parse(localStorage.getItem('****'))//模拟外部取值
        },
        set:(data)=>{
            console.log(data);
            localStorage.setItem(`****`, JSON.stringify(data));
        }
    }

inputList （所有支持的搜索条件输入框）

        inputList: [
            {
                default:true,
                label: '下拉框异步请求',
                key: 'select_async',
                type: 'select',
                query: true,
                list: async () => {
                    let data = [];
                    let res = await fetch(‘**/**’);
                    if (res.code === 1) {
                        data = res.data.map(item => {
                            return {
                                label: item,
                                value: item
                            }
                        });
                    }
                    return data;
                }
            },
            {
                label: '下拉框初始值',
                key: 'select',
                type: 'select',
                list: [
                    {label: '未送审', value: '未送审'}, 
                    {label: '待审核', value: '待审核'}
                ]
            },
            {
                label: '输入框',
                key: 'input',
                type: 'input',
            },
            {
                label: '日期选择',
                key: 'dataPicker',
                type: 'date',
            },
            {
                label: '日期时间选择',
                key: 'datetime',
                type: 'datetime',
            },
            {
                label: '时间段选择',
                key: 'parent',
                type: 'dateRange',
                value: ['parentStart', 'parentEnd']
            },
            {
                type: 'cascade',
                queryKey: 'label',//最后请求时用的key 查询时需要暴露出来的key
                label:'地区',//作为选择筛选条件的label用
                cascadeList: {
                    area: {
                        label: '区域',
                        key: 'area',
                        nextKey: 'provinces',
                        list: async () => {
                            let data = [];
                            let res = await fetch(‘**/**’);
                            if (res.code === 1) {
                                data = res.data.map(item => {
                                    return {
                                        value: item.layer, 
                                        label: item.name
                                    }
                                });
                            }
                            return data;
                        },
                    },
                    provinces: {
                        label: '省份',
                        key: 'provinces',
                        list: async (param) => {
                            let data = [];
                            let res = await fetch("**/**" + param);
                            if (res.code === 1) {
                                data = res.data.map(item => {
                                    return {
                                        value: item.layer, 
                                        label: item.name
                                    }
                                });
                            }
                            return data;
                        },
                    }
                },
            },
        ]

btnList（所有操作按钮）

    btnList: [
        {
            default: true,
            label: '查询',
            type: 'primary',
            key: 'query',
            className:'red-class',//定义在全局的class名
            isSearch:true,
            icon: 'el-icon-zoom-in',
            show: () => {
                return true
            },
            method: (data,param) => {
                console.log(data,param, '查询');
            },
        },
        {
            label: '新增',
            type: 'success',
            key: 'add',
            show: 0,
            method: (param) => {
                console.log(param, '新增');
            },
        }，
         {
            label: '导出',
            type: 'success',
            key: 'import',
            show: 1,
            method: (param) => {
                console.log(param, '导出');
            },
        },
        {
            label: '多选',
            type: 'success',
            key: 'select',
            show: true,
            method: (param) => {
                console.log(param, '多选');
            },
        },
    ],


        //定义在全局的class 按钮样式覆盖
        <style lang="scss" >
        .red-class{
             color: red !important;
        }
        </style>

validRules（搜索框表单校验规则,同element-ui）

validRules: {
    //属性名对应inputList中的key
    input: [
        {pattern: /^[\u4e00-\u9fa5]+$/, message: '请输入中文', trigger: 'change'}
    ]
},

revertConfig

    | 参数       | 说明               | 类型   | 可选值 | 默认值 |
    |------------|--------------------|--------|-------|-------|
    | class | 清空按钮样式 | string | -     | -     |
    | index | 清空按钮显示位置index       | number | -     | 显示按钮的最后一个位置     |

method

      setDefaultVal  初始化页面默认输入框值 不支持时间 目前只支持input类型的赋值
      this.$refs.searchHeader.setDefaultVal({'select_async':1,'aaa':'初始值初始值'})

      changeBtnStatus  动态修改某个按钮禁用状态 参数为需要改变按钮的key

      setListData 动态修改select下拉列表数据 
      key：需要改变列表的key  ； query **是否为异步请求；  list：异步function 或者纯 数组
        
      sureFilter 筛选时点击确认事件 参数包含对比下来新增选择的