zr-vue3-iview-query v1.0.2

安装

npm install zr-vue3-iview-query

全局引用 main.ts

  import ZrComponent from 'zr-vue3-iview-query'
  const app = createApp({})
  app.use(ZrComponent);
  

局部引用

<script>
  import { QueryComponent } from 'zr-vue3-iview-query'
  export default {
    components: {
         QueryComponent
    },
  }
</script>

注意：在使用typescript的项目中使用zr-vue3-iview-query时，需在项目的shims-vue.d.ts文件中加一句 declare module 'zr-vue3-iview-query'

使用 zr-vue3-iview-query 组件

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

config 查询条件配置项

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

queryTemplate 查询规则配置项

  // 'eq': '等于',
  // 'ne': '不等于',
  // 'lt': '小于',
  // 'le': '小于等于',
  // 'gt': '大于',
  // 'ge': '大于等于',
  // 'bw': '开头是',
  // 'bn': '开头不是',
  // 'ew': '结尾是',
  // 'en': '结尾不是',
  // 'cn': '包含',
  // 'nc': '不包含',
  // 'bt': '介于'
 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',
          },
        ];

rowLayout 查询条件布局配置

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

toolbarLayout 查询按钮布局配置

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

saveState 保留查询条件 true 保留 false不保留，默认不保留

saveStateTab 使用tab切换多个列表保留查询条件时，需要设置saveStateTab标识tab的唯一性

on-search 查询方法

可接收一个参数区分是【查询】还是【重置】操作:'reset'重置，'search'查询

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

changeCascadeOption 级联获取下拉项方法

    changeCascadeOption(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
            :config="customConfig"
            :queryTemplate="rules"
            :labelWidth="150"
            :labelPosition="'right'"
            :rowLayout="rowLayout"
            ref="query"
            @on-search="search"
            @changeCascadeOption="changeCascadeOption"
     ></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-vue3-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();
        });
      });
    },

    // 级联数据获取
    changeCascadeOption(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>