安装

npm install vue-query-index

在使用模块中引入

<script>
  import QueryComponent from 'vue-query-index'
  export default {
    components: {
         QueryComponent
    },
  }
</script>

使用 zr-vue-iview-query 组件

<QueryComponent
    :config="config"
    :queryTemplate="rules"
    :rowCss="rowConfig"
    :querySpan="querySpan"
    @on-search="search"
    class="custom-query"
    @getSelectOption="getSelectOption"
    ref="query"
>
</QueryComponent>

config 查询条件配置项

| 名称 | 描述 | | ---- | ---- | | type | 筛选条件类型，即组件名称 | | placeholder | placeholder 例: '请输入','请选择' | | value | 初始值 | | code | 需要传给接口的字段名称 | | multiple | type为selectDrop、selectTree的情况下，可通过设置该属性为true实现多选| | maxLength | 最大长度 | | collapse | 是否为折叠显示项 | | fun | 接口名称，筛选条件存在级联的情况下应用 | | levelType | selectDrop组件级联顺序标识，筛选条件存在级联的情况下应用，根据级联层级数组依次递增 | | group | selectDrop组件级联组标识，筛选条件存在级联的情况下应用，用于标识当前级联属于哪组级联，清空时和获取值时只针对同一组的选择项进行操作 | | defaultValue | 默认值 | | regStart | inputRegion组件第一个input的正则 | | regEnd | inputRegion组件第二个input的正则 | | customTemplate | 是否自定义组件 | | component | customTemplate为true时，自定义组件名称 | | dateType | 针对日期类型组件， 可选值为 date、daterange、datetime、datetimerange、year、month | | format | 针对日期类型组件，设置展示的日期格式，针对不同的dateType可设置格式如下   [date / daterange：yyyy-MM-dd]    [datetime / datetimerange：yyyy-MM-dd HH:mm:ss]    [year：yyyy]    [year：yyyy] | | paramsFormat | 针对日期类型组件，设置传给接口的日期格式 例如：YYYY-MM-DD、YYYY-MM-DD HH:mm等| | dateTailCharacter | 针对日期类型组件，dateType为date、datetime、year、month可设置格式化后可拼接的字符串 | | startDateTailCharacter | 针对日期类型组件，dateType为daterange、datetimerange开始日期可设置格式化后可拼接的字符串 | | endDateTailCharacter | 针对日期类型组件， dateType为daterange、datetimerange 结束日期可设置格式化后可拼接的字符串 |

| 组件名称type | 组件描述 | | ---- | ---- | | inputString | 普通 input 输入框 | | inputRegion | input 范围输入框，可通过 regStart、regEnd设置正则限制前后输入框可输入的内容 | | selectDrop | 普通下拉选择框 | | selectTree | 树状下拉选择框 | | date | 日期选择框日 ，使用可参考iview官方文档|

config = [
    {
        type: 'inputString',
        placeholder: '请输入',
        value: '',
        code: 'name',
        label: '姓名',
        maxLength: 17,
        collapse: false
    }
  ]

queryTemplate 查询规则配置项

| 字段名 | 描述 | | ---- | ---- | | field | 对应config的code，传个接口的字段名 | | op | 查询规则，eq，bt，cn | | paramToString | 当多选组件绑定值为数组时，可以设置paramToString为true，将传给后台的参数由数组转换为字符串||

 this.rules = [
          {
            field: 'deptId',
            op: 'eq',
          },
          {
            field: 'regionId',
            op: 'eq',
          },
          {
            field: 'sectorId',
            op: 'eq',
          },
          {
            field: 'dealerId',
            op: 'eq',
            paramToString: true  // 当多选组件绑定值为数组时，可以设置paramToString为true，将传给后台的参数由数组转换为字符串
          },
          {
            field: 'seriesName',
            op: 'cn',
          },
          {
            field: 'alarmDate',
            op: 'bt',
          },
        ];

rowConfig 查询条件布局配置

 rowConfig: {
       xl: 8,
       lg: 12,
       md: 12,
       sm: 24,
       xs: 24,
 }

rowConfig 查询按钮布局配置

querySpan: {
       xl: 16,
       lg: 24,
       md: 24,
       sm: 24,
       xs: 24
 },

on-search 查询方法

search () {
       this.getData(); // 列表数据查询
},

getSelectOption 级联获取下拉项方法

    getSelectOption(value, element) {
      commonQuery[element.fun](value)
        .then((res) => {
          for (const i of this.config) {
            if (i.levelType && i.levelType === element.levelType && i.group === element.group) {
              i.optionList = res;
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }

级联实例 1.0

<template>
  <div>
    <QueryComponent
      :freedomConfig="freedomConfig"
      :queryTemplate="rules"
      ref="query"
      :rowCss="rowConfig"
      class="custom-query"
      @on-search="search"
      @getSelectOption="getSelectOption"
      v-if="showQuery"
    ></QueryComponent>
    <Card :bordered="false" dis-hover class="ivu-mt" ref="card">
      <Table>
      .....
      </Table>
    </Card>
  </div>
</template>
<script>
import commonQuery from '@api/common-query';
import QueryComponent from 'zr-vue-iview-query'

export default {
  components: {
    QueryComponent,
  },
  data() {
    return {
      rowConfig: {
        xl: 8,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      radio: '1',
      rules: [
        {
            field: 'deptId',
            op: 'eq',
          },
          {
            field: 'regionId',
            op: 'eq',
          },
          {
            field: 'sectorId',
            op: 'eq',
          },
          {
            field: 'dealerId',
            op: 'eq',
          },
          {
            field: 'seriesName',
            op: 'cn',
          },
          {
            field: 'alarmDate',
            op: 'eq',
          },
      ],
      customConfig: [
         {
            type: 'selectDrop',
            prompt_msg: '请选择',
            value: '',
            code: 'province',
            label: '省份',
            levelType: 1,
            fun: '',
            collapse: false,
            optionList: this.provinceList, // 页面加载时获取出省份列表
            group:'A'
          },

          {
            type: 'selectDrop',
            prompt_msg: '请选择',
            value: '',
            code: 'city',
            label: '城市',
            levelType: 2, // 省份levelType + 1
            fun: 'getCityAndCountryList', // 选择省份时需要调取的城市接口名称
            collapse: false,
            optionList: [],
            group:'A'
          },
          {
            type: 'selectDrop',
            prompt_msg: '请选择',
            value: '',
            code: 'county',
            label: '区县',
            levelType: 3, // 城市levelType + 1
            fun: 'getCityAndCountryList', // 选择城市时需要调取的区县接口名称
            optionList: [],
            collapse: false,
            group:'A'
          },
          {
            type: 'selectDrop',
            prompt_msg: '请选择',
            value: 'getDealerListByCountry', // 选择区县时需要调取的获取经销商的接口名称
            code: 'dealerId',
            label: '经销商名称',
            levelType: 4,
            fun: '',
            optionList: [],
            collapse: false,
            group:'A'
          },
          {
            type: 'inputString',
            prompt_msg: '请输入',
            value: '',
            code: 'seriesName',
            label: '车系',
            collapse: false,
          }
      ],
      loading: false,
      list: [],
      provinceList: [],
    };
  },
  mounted() {
    this.getData();
   this.getProvince();
  },
  methods: {
    // 查询重置，页码重置1，不查询条数
    search() {
      this.getData();
    },

    // 获取省份选择项，省份是级联的第一级，在页面加载时需要直接获取
    getProvince() {
      return new Promise((resolve) => {
        commonQuery.getPrivinceList().then((res) => {
          this.provinceList = res;
          resolve();
        });
      });
    },

    // 级联数据获取
    getSelectOption(value, element) {
      commonQuery[element.fun](value)  // element.fun为freedomConfig中定义的接口名称，接口统一定义在api/commonQuery.js中。
        .then((res) => {
          for (const i of this.customConfig) {
            if (i.levelType && i.levelType === element.levelType && i.group === element.group) {
              i.optionList = res;
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },

    // 加载列表
    getData() {
      var params = this.$refs.query.handleParams(); // 查询参数
      ...调取接口获取列表数据
    }
  },
};
</script>