zr-vue3-iview-query
v1.0.2
Published
this is vue module
Downloads
6
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>