npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

zr-vue3-iview-query

v1.0.2

Published

this is vue module

Downloads

1

Readme

安装

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 查询条件配置项

| 名称 | 描述 | | ---- | ---- | | 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(inputRegion,date--daterange、datetimerange),cn 等| | paramToString | 当多选组件绑定值为数组时,可以设置paramToString为true,将传给后台的参数由数组转换为字符串| | includeEqualsStart | 当op设置为bt时,第一项默认是大于等于ge,可通过设置includeEqualsStart为false,设置查询数据是大于gt,不包含等于| | includeEqualsEnd |当op设置为bt时,第二项默认是小于等于le,可通过设置includeEqualsEnd为false,设置查询数据是小于lt,不包含等于|

  // '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>