186 lines
3.9 KiB
Vue
186 lines
3.9 KiB
Vue
<template>
|
|
<el-main>
|
|
<el-card shadow="never" header="过滤器">
|
|
<xFilterBar filterName="filterName" :options="options" @filterChange="change">
|
|
<template #default="{filterLength, openFilter}">
|
|
<el-badge :value="filterLength" type="danger" :hidden="filterLength<=0">
|
|
<el-button icon="el-icon-filter" @click="openFilter"></el-button>
|
|
</el-badge>
|
|
</template>
|
|
</xFilterBar>
|
|
</el-card>
|
|
<el-alert title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,在@/config/filterBar.js中可以更改运算符以及其他配置,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适" type="success" style="margin:20px 0;"></el-alert>
|
|
<el-card shadow="never" header="返回值">
|
|
<pre>{{ filterData }}</pre>
|
|
</el-card>
|
|
</el-main>
|
|
</template>
|
|
|
|
<script>
|
|
import xFilterBar from '@/components/xFilterBar';
|
|
|
|
export default {
|
|
name: 'filterBar',
|
|
components: {
|
|
xFilterBar
|
|
},
|
|
data() {
|
|
return {
|
|
filterData : {},
|
|
defaultFilter : [],
|
|
options: [
|
|
{
|
|
label: '订单号',
|
|
value: 'id',
|
|
type: 'text',
|
|
selected: true,
|
|
placeholder: '请输入订单号'
|
|
},
|
|
{
|
|
label: '类型',
|
|
value: 'type',
|
|
type: 'select',
|
|
operator: '=',
|
|
selected: true,
|
|
placeholder: '请选择类型',
|
|
extend: {
|
|
data:[
|
|
{
|
|
label: "选项1",
|
|
value: "1"
|
|
},
|
|
{
|
|
label: "选项2",
|
|
value: "2"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
label: '类型(多选)',
|
|
value: 'type2',
|
|
type: 'select',
|
|
operator: '=',
|
|
placeholder: '请选择类型',
|
|
extend: {
|
|
multiple: true,
|
|
data:[
|
|
{
|
|
label: "选项1",
|
|
value: "1"
|
|
},
|
|
{
|
|
label: "选项2",
|
|
value: "2"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
{
|
|
label: '通知(异步)',
|
|
value: 'noticeType',
|
|
type: 'select',
|
|
operator: '=',
|
|
placeholder: '请选择通知类型',
|
|
extend: {
|
|
request: async () => {
|
|
var list = await this.$api.system.dic.get.get()
|
|
return list.data.map(item => {
|
|
return {
|
|
label: item.label,
|
|
value: item.value
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
{
|
|
label: '通知(远程搜索)',
|
|
value: 'noticeType2',
|
|
type: 'select',
|
|
operator: '=',
|
|
placeholder: '请输入关键词后检索',
|
|
extend: {
|
|
remote: true,
|
|
request: async (query) => {
|
|
var data = {
|
|
keyword: query,
|
|
}
|
|
var list = await this.$api.system.dic.get.get(data)
|
|
return list.data.map(item => {
|
|
return {
|
|
label: item.label,
|
|
value: item.value
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
{
|
|
label: '关键词(标签)',
|
|
value: 'tags',
|
|
type: 'tags',
|
|
operator: 'include',
|
|
operators: [
|
|
{
|
|
label: '包含',
|
|
value: 'include',
|
|
},
|
|
{
|
|
label: '不包含',
|
|
value: 'notinclude',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '开关(可重复)',
|
|
value: 'switch',
|
|
type: 'switch',
|
|
repeat: true,
|
|
operator: '='
|
|
},
|
|
{
|
|
label: '日期单选',
|
|
value: 'date',
|
|
type: 'date',
|
|
operator: '=',
|
|
operators: [
|
|
{
|
|
label: '等于',
|
|
value: '=',
|
|
},
|
|
{
|
|
label: '不等于',
|
|
value: '!=',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: '日期范围',
|
|
value: 'date2',
|
|
type: 'daterange'
|
|
},
|
|
{
|
|
label: '自定义日期',
|
|
value: 'date3',
|
|
type: 'customDate',
|
|
placeholder: '请选择月份',
|
|
extend: {
|
|
dateType: 'month',
|
|
valueFormat: 'YYYY-MM'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
change(data){
|
|
this.filterData = data;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|