saas-web/src/views/vab/filterBar.vue

<template>
	<el-main>
		<el-card shadow="never" header="过滤器">
			<scFilterBar 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>
			</scFilterBar>
		</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 scFilterBar from '@/components/scFilterBar';

	export default {
		name: 'filterBar',
		components: {
			scFilterBar
		},
		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>