diff --git a/src/assets/font/scicon/iconfont.css b/src/assets/font/scicon/iconfont.css
index 388ecc91..85250f49 100644
--- a/src/assets/font/scicon/iconfont.css
+++ b/src/assets/font/scicon/iconfont.css
@@ -7,7 +7,6 @@
 
 [class*="sc-icon-"] {
   font-family: "scicon" !important;
-  font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/components/scFilterBar/index.vue b/src/components/scFilterBar/index.vue
index b5a89e5c..cd9b9d04 100644
--- a/src/components/scFilterBar/index.vue
+++ b/src/components/scFilterBar/index.vue
@@ -1,251 +1,284 @@
+<!--
+ * @Descripttion: 过滤器V2
+ * @version: 2.0
+ * @Author: sakuya
+ * @Date: 2021年7月30日14:48:41
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
 <template>
 	<div class="sc-filterBar">
-		<div class="sc-filterBar-scrollbar" ref="scFilterBarScrollbar">
-			<div class="sc-filterBar-tags">
-				<div class="filter-tag" v-for="item in filter" :key="item.keyLabel"><span class="field">{{item.keyLabel}}</span><span class="value">{{item.valueLabel}}<i @click="handleClose(item)" class="el-icon-close"></i></span></div>
-			</div>
-		</div>
-		<el-popover title="新建过滤器" :width="550" trigger="manual" v-model:visible="isadd">
-			<template #reference>
-				<el-button class="button-new-tag" size="small" type="primary" @click="openAdd" icon="el-icon-zoom-in"></el-button>
-			</template>
-			<el-form ref="ruleForm" :model="addFilterForm" :rules="addFilterRules" label-width="80px" style="padding-top:10px;">
-				<el-form-item label="字段" prop="field">
-					<el-select v-model="addFilterForm.field" placeholder="请选择" value-key="value" @change="fieldChange" filterable clearable>
-						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item" :disabled="item.disabled">
-						</el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item label="值" prop="value">
-
-					<el-input v-if="!addFilterForm.field.type" v-model="addFilterForm.value" placeholder="请先选择过滤字段" disabled style="width: 400px;"></el-input>
-
-					<el-input v-if="addFilterForm.field.type=='text'" v-model="addFilterForm.value" placeholder="请输入内容" clearable style="width: 400px;"></el-input>
-
-					<el-select v-if="addFilterForm.field.type=='select'" v-model="addFilterForm.value" :loading="selectLoading" :multiple="addFilterForm.field.extend?addFilterForm.field.extend.multiple:false" :remote="addFilterForm.field.extend?addFilterForm.field.extend.remote:false" @visible-change="visibleChange($event)" :remote-method="remoteMethod" filterable clearable placeholder="请选择/输入关键词" style="width: 400px;">
-						<el-option v-for="item in addFilterForm.field.extend.data" :key="item.value" value-key="value" :label="item.label" :value="item"></el-option>
-					</el-select>
-
-					<el-date-picker v-if="addFilterForm.field.type=='date'" v-model="addFilterForm.value" type="date" placeholder="请选择日期" style="width: 400px;"></el-date-picker>
-					<el-date-picker v-if="addFilterForm.field.type=='daterange'" v-model="addFilterForm.value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择日期" style="width: 400px;"></el-date-picker>
-					<el-date-picker v-if="addFilterForm.field.type=='datetime'" v-model="addFilterForm.value" type="datetime" placeholder="请选择日期" style="width: 400px;"></el-date-picker>
-					<el-date-picker v-if="addFilterForm.field.type=='datetimerange'" v-model="addFilterForm.value" type="datetimerange" :default-time="defaultTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="请选择日期" style="width: 400px;"></el-date-picker>
-
-				</el-form-item>
-				<el-form-item >
-					<el-button class="button-new-tag" type="primary" @click="ok" icon="el-icon-search">立即过滤</el-button>
-					<el-button class="button-new-tag" @click="cancel">取消</el-button>
-				</el-form-item>
-			</el-form>
-		</el-popover>
-
-
+		<el-badge :value="filterObjLength" type="danger" :hidden="filterObjLength<=0">
+			<el-button size="small" icon="sc-icon-filter-fill" @click="openFilter"></el-button>
+		</el-badge>
+		<el-drawer title="过滤器" v-model="drawer" :size="650" append-to-body>
+			<el-container v-loading="saveLoading">
+				<el-main style="padding:0">
+					<el-tabs class="root">
+						<el-tab-pane lazy>
+							<template #label>
+								<div class="tabs-label">过滤项</div>
+							</template>
+							<el-scrollbar>
+								<div class="sc-filter-main">
+									<h2>设置过滤条件</h2>
+									<div v-if="filter.length<=0"  class="nodata">
+										没有默认过滤条件，请点击增加过滤项
+									</div>
+									<table v-else>
+										<colgroup>
+											<col width="50">
+											<col width="140">
+											<col width="120">
+											<col>
+											<col width="40">
+										</colgroup>
+										<tr v-for="(item,index) in filter" :key="index">
+											<td>
+												<el-tag size="medium">{{index+1}}</el-tag>
+											</td>
+											<td>
+												<el-select v-model="item.field" placeholder="过滤字段" filterable @change="fieldChange(item)">
+													<el-option v-for="field in fields" :key="field.value" :label="field.label" :value="field"></el-option>
+												</el-select>
+											</td>
+											<td>
+												<el-select v-model="item.operator" placeholder="运算符">
+													<el-option v-for="ope in operator" :key="ope.value" :label="ope.label" :value="ope.value"></el-option>
+												</el-select>
+											</td>
+											<td>
+												<el-input v-if="!item.field.type" v-model="item.value" placeholder="请选择过滤字段" disabled></el-input>
+												<!-- 输入框 -->
+												<el-input v-if="item.field.type=='text'" v-model="item.value" :placeholder="item.field.placeholder||'请输入'"></el-input>
+												<!-- 下拉框 -->
+												<el-select v-if="item.field.type=='select'" v-model="item.value" :placeholder="item.field.placeholder||'请选择'" filterable :multiple="item.field.extend.multiple" :loading="item.selectLoading" @visible-change="visibleChange($event, item)" :remote="item.field.extend.remote" :remote-method="(query)=>{remoteMethod(query, item)}">
+													<el-option v-for="field in item.field.extend.data" :key="field.value" :label="field.label" :value="field.value"></el-option>
+												</el-select>
+												<!-- 日期 -->
+												<el-date-picker v-if="item.field.type=='date'" v-model="item.value" type="date" value-format="YYYY-MM-DD" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
+												<!-- 日期范围 -->
+												<el-date-picker v-if="item.field.type=='daterange'" v-model="item.value" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"  start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
+												<!-- 日期时间 -->
+												<el-date-picker v-if="item.field.type=='datetime'" v-model="item.value" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
+												<!-- 日期时间范围 -->
+												<el-date-picker v-if="item.field.type=='datetimerange'" v-model="item.value" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
+												<!-- 开关 -->
+												<el-switch v-if="item.field.type=='switch'" v-model="item.value"></el-switch>
+											</td>
+											<td>
+												<i class="el-icon-delete del" @click="delFilter(index)"></i>
+											</td>
+										</tr>
+									</table>
+									<el-button type="text" icon="el-icon-plus" @click="addFilter">增加过滤项</el-button>
+								</div>
+							</el-scrollbar>
+						</el-tab-pane>
+						<el-tab-pane lazy>
+							<template #label>
+								<div class="tabs-label">常用</div>
+							</template>
+							<el-scrollbar>
+								<my ref="my" :data="myFilter" :filterName="filterName" @selectMyfilter="selectMyfilter"></my>
+							</el-scrollbar>
+						</el-tab-pane>
+					</el-tabs>
+				</el-main>
+				<el-footer>
+					<el-button type="primary" @click="ok" :disabled="filter.length<=0">立即过滤</el-button>
+					<el-button type="primary" plain @click="saveMy" :disabled="filter.length<=0">另存为常用</el-button>
+					<el-button @click="clear">清空过滤</el-button>
+				</el-footer>
+			</el-container>
+		</el-drawer>
 	</div>
 </template>
 
 <script>
+	import config from "@/config/filterBar";
+	import my from './my'
+
 	export default {
 		name: 'filterBar',
+		components: {
+			my
+		},
 		props: {
-			options: { type: Object, default: () => {} },
-			defaultFilter: { type: Object, default: () => {} }
+			filterName: { type: String, default: "" },
+			options: { type: Object, default: () => {} }
 		},
 		data() {
 			return {
-				defaultTime: [
-					new Date(2000, 1, 1, 0, 0, 0),
-					new Date(2000, 2, 1, 23, 59, 59)
-				],
-				isadd: false,
-				selectLoading: false,
-				addFilterForm: {
-					field: '',
-					value: ''
-				},
-				addFilterRules: {
-					field: [{required: true, message: '请选择过滤字段', trigger: 'change'}],
-					value: [{required: true, message: '过滤值不能为空', trigger: 'change'}]
-				},
-				filter: []
+				drawer: false,
+				operator: config.operator,
+				fields: this.options,
+				filter: [],
+				myFilter: [],
+				filterObjLength: 0,
+				saveLoading: false
+			}
+		},
+		computed: {
+			filterObj(){
+				const obj = {}
+				this.filter.forEach((item) => {
+					obj[item.field.value] = `${item.value}${config.separator}${item.operator}`
+				})
+				return obj
 			}
 		},
 		mounted(){
-			this.filter = this.defaultFilter || [];
-			this.scrollInit()
+			//默认显示的过滤项
+			this.fields.forEach((item) => {
+				if(item.selected){
+					this.filter.push({
+						field: item,
+						operator: item.operator || 'include',
+						value: ''
+					})
+				}
+			})
 		},
 		methods: {
-			openAdd(){
-				if(this.isadd){
-					this.isadd = false;
-				}else{
-					this.isadd = true;
-				}
-
-				//判断已有数据，禁用处理
-				for(let f of this.options){
-					const _f = this.filter.find((item)=>{return item.key === f.value});
-					if(_f){
-						f.disabled = true
-					}else{
-						f.disabled = false
-					}
-				}
+			//打开过滤器
+			openFilter(){
+				this.drawer = true
 			},
-			async remoteMethod(query){
-				if(query !== ''){
-					this.selectLoading = true;
-					try {
-					var data = await this.addFilterForm.field.extend.request(query);
-					}catch (error) {
-						console.log(error);
-					}
-					this.addFilterForm.field.extend.data = data;
-					this.selectLoading = false;
-				}else{
-					this.addFilterForm.field.extend.data = [];
+			//增加过滤项
+			addFilter(){
+				if(this.fields.length<=0){
+					this.$message.warning('无过滤项');
+					return false
 				}
-			},
-			async visibleChange(isopen){
-				if(isopen && this.addFilterForm.field.extend && this.addFilterForm.field.extend.request && !this.addFilterForm.field.extend.remote){
-					//如果字段类型为异步获取数据就在这里处理
-					this.selectLoading = true;
-					try {
-					var data = await this.addFilterForm.field.extend.request();
-					}catch (error) {
-						console.log(error);
-					}
-					this.addFilterForm.field.extend.data = data;
-					this.selectLoading = false;
-				}
-			},
-			fieldChange(){
-				this.addFilterForm.value = '';
-				if(this.addFilterForm.field.type=='select'){
-					this.addFilterForm.field.type=''
-					this.$nextTick(() => {
-						this.addFilterForm.field.type='select'
-					})
-				}
-				if(this.addFilterForm.field.type=='date'){
-					this.addFilterForm.field.type=''
-					this.$nextTick(() => {
-						this.addFilterForm.field.type='date'
-					})
-				}
-			},
-			ok() {
-				this.$refs.ruleForm.validate((valid) => {
-					if (valid) {
-						var item = {
-							keyLabel: this.addFilterForm.field.label,
-							valueLabel: this.addFilterForm.value,
-							key: this.addFilterForm.field.value,
-							value: this.addFilterForm.value
-						}
-						if(this.addFilterForm.field.type=='select'){
-							if(this.addFilterForm.field.extend && this.addFilterForm.field.extend.multiple){
-								item.valueLabel = this.addFilterForm.value.map(v => v.label).join(",");
-								item.value = this.addFilterForm.value.map(v => v.value).join(",");
-							}else{
-								item.valueLabel = this.addFilterForm.value.label;
-								item.value = this.addFilterForm.value.value;
-							}
-						}
-						if(this.addFilterForm.field.type=='date'){
-							item.valueLabel = this.dateFormat(this.addFilterForm.value, 'yyyy-MM-dd');
-							item.value = this.dateFormat(this.addFilterForm.value, 'yyyy-MM-dd');
-						}
-						if(this.addFilterForm.field.type=='datetime'){
-							item.valueLabel = this.dateFormat(this.addFilterForm.value, 'yyyy-MM-dd hh:mm:ss');
-							item.value = this.dateFormat(this.addFilterForm.value, 'yyyy-MM-dd hh:mm:ss');
-						}
-						if(this.addFilterForm.field.type=='daterange'){
-							item.valueLabel = this.addFilterForm.value.map(item => this.dateFormat(item, 'yyyy-MM-dd')).join(" - ")
-							item.value = this.addFilterForm.value.map(item => this.dateFormat(item, 'yyyy-MM-dd')).join(" - ")
-						}
-						if(this.addFilterForm.field.type=='datetimerange'){
-							item.valueLabel = this.addFilterForm.value.map(item => this.dateFormat(item, 'yyyy-MM-dd hh:mm:ss')).join(" - ")
-							item.value = this.addFilterForm.value.map(item => this.dateFormat(item, 'yyyy-MM-dd hh:mm:ss')).join(" - ")
-						}
-						this.filter.push(item);
-						this.cancel();
-						this.change();
-					}else{
-						return false;
-					}
+				const filterNum = this.fields[this.filter.length] || this.fields[0]
+				this.filter.push({
+					field: filterNum,
+					operator: filterNum.operator || 'include',
+					value: ''
 				})
+			},
+			//删除过滤项
+			delFilter(index){
+				this.filter.splice(index, 1)
+			},
+			//过滤项字段变更事件
+			fieldChange(tr){
+				let oldType = tr.field.type
+				tr.field.type = ''
+				this.$nextTick(() => {
+					tr.field.type = oldType
+				})
+				tr.operator = tr.field.operator || 'include'
+				tr.value = ''
+			},
+			//下拉框显示事件处理异步
+			async visibleChange(isopen, item){
+				if(isopen && item.field.extend.request && !item.field.extend.remote){
+					item.selectLoading = true;
+					try {
+						var data = await item.field.extend.request()
+					}catch (error) {
+						console.log(error);
+					}
+					item.field.extend.data = data;
+					item.selectLoading = false;
+				}
+			},
+			//下拉框显示事件处理异步搜索
+			async remoteMethod(query, item){
+				if(query !== ''){
+					item.selectLoading = true;
+					try {
+					var data = await item.field.extend.request(query);
+					}catch (error) {
+						console.log(error);
+					}
+					item.field.extend.data = data;
+					item.selectLoading = false;
+				}else{
+					item.field.extend.data = [];
+				}
+			},
+			//选择常用过滤
+			selectMyfilter(item){
+				this.filterObjLength = Object.keys(item.filterObj).length
+				this.$emit('filterChange',item.filterObj)
+				this.drawer = false
+			},
+			//立即过滤
+			ok(){
+				this.filterObjLength = this.filter.length
+				this.$emit('filterChange',this.filterObj)
+				this.drawer = false
+			},
+			//保存常用
+			saveMy(){
+				this.$prompt('常用过滤名称', '另存为常用', {
+					inputPlaceholder: '请输入识别度较高的常用过滤名称',
+					inputPattern: /\S/,
+					inputErrorMessage: '名称不能为空'
+				})
+				.then(async ({ value }) => {
+					this.saveLoading = true
+					const saveObj = {
+						title: value,
+						filterObj: this.filterObj
+					}
+					try {
+						var save = await config.saveMy(this.filterName, saveObj)
+					}catch (error) {
+						this.saveLoading = false
+						console.log(error);
+						return false
+					}
+					if(!save){
+						return false
+					}
 
+					this.myFilter.push(saveObj)
+					this.$message.success(`${this.filterName} 保存常用成功`)
+					this.saveLoading = false
+				})
+				.catch(() => {
+					//
+				})
 			},
-			cancel(){
-				this.isadd = false;
-				this.addFilterForm.value = '';
-				this.$refs.ruleForm.resetFields();
-			},
-			handleClose(item) {
-				this.filter = this.filter.filter(obj => obj.key !== item.key);
-				this.cancel();
-				this.change();
-			},
-			getFilter(){
-				var _filter = this.filter;
-				var formatData = {};
-				_filter.map(item => {
-					formatData.[item.key]=item.value
-				});
-				return formatData;
-			},
-			change(){
-				this.$emit('change', this.getFilter())
-			},
-			scrollInit(){
-				const scrollDiv = this.$refs.scFilterBarScrollbar;
-				scrollDiv.addEventListener('mousewheel', handler, false)
-				function handler(event) {
-					const detail = event.wheelDelta || event.detail;
-					const moveForwardStep = 1;
-					const moveBackStep = -1;
-					let step = 0;
-					if (detail < 0) {
-						step = moveForwardStep * 50;
-					}else{
-						step = moveBackStep * 50;
-					}
-					scrollDiv.scrollLeft += step;
-				}
-			},
-			dateFormat(date, fmt='yyyy-MM-dd'){
-				date = new Date(date)
-				var o = {
-					"M+" : date.getMonth()+1,                 //月份
-					"d+" : date.getDate(),                    //日
-					"h+" : date.getHours(),                   //小时
-					"m+" : date.getMinutes(),                 //分
-					"s+" : date.getSeconds(),                 //秒
-					"q+" : Math.floor((date.getMonth()+3)/3), //季度
-					"S"  : date.getMilliseconds()             //毫秒
-				};
-				if(/(y+)/.test(fmt)) {
-					fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
-				}
-				for(var k in o) {
-					if(new RegExp("("+ k +")").test(fmt)){
-						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
-					}
-				}
-				return fmt;
+			//清空过滤
+			clear(){
+				this.filter = []
+				this.filterObjLength = 0
+				this.$emit('filterChange',this.filterObj)
 			}
 		}
 	}
 </script>
 
 <style scoped>
-	.sc-filterBar {height: 32px;display: flex;align-items:center;}
-	.sc-filterBar-scrollbar {overflow: auto;}
-	.sc-filterBar-scrollbar::-webkit-scrollbar {display: none;}
-	.sc-filterBar-tags {display: flex;}
-	.filter-tag {display: flex;flex-shrink: 0;padding-right:10px;}
-	.filter-tag .field {display: inline-block;background-color: #d9ecff;color: #409eff;height: 32px;line-height: 30px;padding: 0 10px;border-radius: 4px 0 0 4px;border: 1px solid #d9ecff;border-right: 0;}
-	.filter-tag .value {display: inline-block;background-color: #ecf5ff;color: #409eff;height: 32px;line-height: 30px;padding: 0 10px;border-radius: 0 4px 4px 0;border: 1px solid #d9ecff;border-left: 0;}
-	.filter-tag i {height: 16px;width: 16px;line-height: 16px;cursor: pointer;text-align: center;vertical-align: middle;position: relative;top: -1px;right: -5px;border-radius: 50%;}
-	.filter-tag i:hover {background-color: #409eff;color: #FFF;}
+	.tabs-label {padding:0 20px;}
+
+	.nodata {height:46px;line-height: 46px;margin:15px 0;border: 1px dashed #e6e6e6;color: #999;text-align: center;border-radius: 3px;}
+
+	.sc-filter-main {padding:20px;border-bottom: 1px solid #e6e6e6;background: #fff;}
+	.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
+	.sc-filter-main table {width: 100%;margin: 15px 0;}
+	.sc-filter-main table tr {}
+	.sc-filter-main table td {padding:5px 10px 5px 0;}
+	.sc-filter-main table td:deep(.el-input .el-input__inner)  {vertical-align: top;}
+	.sc-filter-main table td .el-select {display: block;}
+	.sc-filter-main table td .el-date-editor.el-input {display: block;width: 100%;}
+	.sc-filter-main table td .del {background: #fff;color: #999;width: 32px;height: 32px;line-height: 32px;text-align: center;border-radius:50%;font-size: 12px;cursor: pointer;}
+	.sc-filter-main table td .del:hover {background: #F56C6C;color: #fff;}
+
+
+
+	.root {
+		display: flex;
+		height: 100%;
+		flex-direction: column
+	}
+	.root:deep(.el-tabs__header) {margin: 0;}
+	.root:deep(.el-tabs__content) {flex: 1;background: #f6f8f9;}
+	.root:deep(.el-tabs__content) .el-tab-pane{overflow: auto;height:100%;}
 </style>
diff --git a/src/components/scFilterBar/my.vue b/src/components/scFilterBar/my.vue
new file mode 100644
index 00000000..cf56e66d
--- /dev/null
+++ b/src/components/scFilterBar/my.vue
@@ -0,0 +1,97 @@
+<!--
+ * @Descripttion: 过滤器V2 常用组件
+ * @version: 2.0
+ * @Author: sakuya
+ * @Date: 2021年7月31日16:49:56
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-filter-my">
+		<el-skeleton v-if="loading" :rows="2" animated />
+		<template v-else>
+			<el-empty v-if="myFilter.length<=0" :image-size="100">
+				<template #description>
+					<h2>没有常用的过滤</h2>
+					<p style="margin-top: 10px;max-width: 300px;">常用过滤可以将多个过滤条件保存为一个集合，方便下次进行相同条件的过滤</p>
+				</template>
+			</el-empty>
+			<ul v-else class="sc-filter-my-list">
+				<li v-for="(item, index) in myFilter" :key="index"><el-tag closable size="medium" effect="dark" type="info" @click="selectMyfilter(item)" @close="closeMyfilter(item, index)">{{item.title}}</el-tag></li>
+			</ul>
+		</template>
+	</div>
+
+</template>
+
+<script>
+	import config from "@/config/filterBar";
+
+	export default {
+		props: {
+			filterName: { type: String, default: "" },
+			data: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				loading: false,
+				myFilter: []
+			}
+		},
+		watch:{
+			data: {
+				handler(){
+					this.myFilter = this.data
+				},
+				deep: true
+			}
+		},
+		mounted() {
+			this.myFilter = this.data
+			this.getMyfilter()
+		},
+		methods: {
+			//选择常用过滤
+			selectMyfilter(item){
+				this.$emit('selectMyfilter', item)
+			},
+			//删除常用过滤
+			closeMyfilter(item, index){
+				this.$confirm('此操作将永久删除该常用, 是否继续?', '提示', {
+					type: 'warning'
+				}).then(async () => {
+					try {
+						var del = await config.delMy(this.filterName)
+					}catch (error) {
+						return false
+					}
+					if(!del){
+						return false
+					}
+					this.myFilter.splice(index, 1)
+					this.$message.success('删除常用成功')
+				}).catch(() => {
+					//
+				})
+			},
+			//远程获取我的常用
+			async getMyfilter(){
+				this.loading = true
+				try {
+					this.myFilter = await config.getMy(this.filterName)
+				}catch (error) {
+					return false
+				}
+				this.loading = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-filter-my {padding:15px;}
+	.sc-filter-my-list {list-style-type: none;}
+	.sc-filter-my-list li {margin-bottom: 15px;}
+	.sc-filter-my-list li .el-tag {cursor: pointer;}
+</style>
diff --git a/src/config/filterBar.js b/src/config/filterBar.js
new file mode 100644
index 00000000..15ed8405
--- /dev/null
+++ b/src/config/filterBar.js
@@ -0,0 +1,74 @@
+export default {
+	//运算符
+	operator: [
+		{
+			label: '等于',
+			value: '=',
+		},
+		{
+			label: '不等于',
+			value: '!=',
+		},
+		{
+			label: '大于',
+			value: '>',
+		},
+		{
+			label: '大于等于',
+			value: '>=',
+		},
+		{
+			label: '小于',
+			value: '<',
+		},
+		{
+			label: '小于等于',
+			value: '<=',
+		},
+		{
+			label: '包含',
+			value: 'include',
+		},
+		{
+			label: '不包含',
+			value: 'notinclude',
+		}
+	],
+	//过滤结果运算符的分隔符
+	separator: '|',
+	//获取我的常用
+	getMy: function (name) {
+		return new Promise((resolve) => {
+			console.log(`这里可以根据${name}参数请求接口`)
+			var list = []
+			setTimeout(()=>{
+				resolve(list)
+			},500)
+		})
+	},
+	/**
+	 * 常用保存处理 返回resolve后继续操作
+	 * @name scFilterBar组件的props->filterName
+	 * @obj 过滤项整理好的对象
+	 */
+	saveMy: function (name, obj) {
+		return new Promise((resolve) => {
+			console.log(name, obj)
+			setTimeout(()=>{
+				resolve(true)
+			},500)
+		})
+	},
+	/**
+	 * 常用删除处理 返回resolve后继续操作
+	 * @name scFilterBar组件的props->filterName
+	 */
+	delMy: function (name) {
+		return new Promise((resolve) => {
+			console.log(name)
+			setTimeout(()=>{
+				resolve(true)
+			},500)
+		})
+	}
+}
diff --git a/src/router/systemRouter.js b/src/router/systemRouter.js
index 2d83640e..696294a6 100644
--- a/src/router/systemRouter.js
+++ b/src/router/systemRouter.js
@@ -41,15 +41,6 @@ const routes = [{
 							icon: "el-icon-orange",
 						},
 						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/vab/iconselect'),
-					},
-					{
-						name: "filterbar2",
-						path: "/vab/filterbar2",
-						meta: {
-							title: "过滤器v2",
-							icon: "el-icon-set-up",
-						},
-						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/vab/filterbar2'),
 					}
 				]
 			}
diff --git a/src/utils/pinyin.js b/src/utils/pinyin.js
new file mode 100644
index 00000000..1308b4e6
--- /dev/null
+++ b/src/utils/pinyin.js
@@ -0,0 +1,2 @@
+/* eslint-disable */
+!function(n,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a():"function"==typeof define&&define.amd?define(a):(n="undefined"!=typeof globalThis?globalThis:n||self).PinyinMatch=a()}(this,(function(){"use strict";var n=[],a={},i={};function u(n){for(var a=[],i=[],u=0;n.length>=u;u++)i.push(!0);return e(0,n,[],a,i),a}function e(a,i,u,o,g){if(a!==i.length)for(var h=function(h){var t=i.substring(a,h+1),r=!1;if(n.some((function(n){return 0===n.indexOf(t)}))&&!i[h+1]&&g[h+1]){if(1===t.length)u.push(t);else{var s=[];n.forEach((function(n){0===n.indexOf(t)&&s.push(n)})),u.push(s)}r=!0}else-1!==n.indexOf(t)&&g[h+1]&&(u.push(t),r=!0);if(r){var f=o.length;e(h+1,i,u,o,g),o.length===f&&(g[h+1]=!1),u.pop()}},t=a;i.length>t;t++)h(t);else o.push(u.join(" "))}function o(n){var a=[];return u(n).forEach((function(n){var i=n.split(" "),u=i.length-1;i[u].indexOf(",")?i[u].split(",").forEach((function(n){i.splice(u,1,n),a.push(JSON.parse(JSON.stringify(i)))})):a.push(i)})),0!==a.length&&a[0].length===n.length||a.push(n.split("")),i=function(n,a,i){return a in n?Object.defineProperty(n,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[a]=i,n}({},n,a),a}function g(n,a,i,u){if(!n)return!1;var e=n.split(" ");return e.forEach((function(n){n.length>0&&u&&e.push(n.charAt(0))})),i?e.some((function(n){return 0===n.indexOf(a)})):-1!==e.indexOf(a)}function h(n,u){if(!n||!u)return!1;n=n.toLowerCase(),u=u.replace(/\s+/g,"").toLowerCase();var e=n.indexOf(u);if(-1!==e)return[e,e+u.length-1];var g=t(n.split(""),[u.split("")],u);return g||t(function(n){for(var i=[],u=0,e=n.length;e>u;u++){var o=n.charAt(u);i.push(a[o]||o)}return i}(n),i[u]||o(u),u)}function t(n,a,i){for(var u=0;n.length>u;u++)for(var e=0;a.length>e;e++){var o=a[e],h=o.length,t=h===i.length,r=!0,s=0,f=0,c=0;if(n.length>=h){for(;o.length>s;s++)if(0===s&&" "===n[u+s+f])f+=1,s-=1;else if(" "===n[u+s+c])c+=1,s-=1;else if(!g(n[u+s+c],o[s],!n[u+s+1]||!o[s+1],t)){r=!1;break}if(r)return[u+f,c+u+s-1]}}return!1}return{match:function(i){return n=Object.keys(i),a=function(n){var a={};for(var i in n)for(var u=n[i],e=0,o=u.length;o>e;e++)a[u[e]]=a[u[e]]?a[u[e]]+" "+i:i;return a}(i),h}({a:"阿啊呵腌嗄吖锕",e:"额阿俄恶鹅遏鄂厄饿峨扼娥鳄哦蛾噩愕讹锷垩婀鹗萼谔莪腭锇颚呃阏屙苊轭",ai:"爱埃艾碍癌哀挨矮隘蔼唉皑哎霭捱暧嫒嗳瑷嗌锿砹",ei:"诶",xi:"系西席息希习吸喜细析戏洗悉锡溪惜稀袭夕洒晰昔牺腊烯熙媳栖膝隙犀蹊硒兮熄曦禧嬉玺奚汐徙羲铣淅嘻歙熹矽蟋郗唏皙隰樨浠忾蜥檄郄翕阋鳃舾屣葸螅咭粞觋欷僖醯鼷裼穸饩舄禊诶菥蓰",yi:"一以已意议义益亿易医艺食依移衣异伊仪宜射遗疑毅谊亦疫役忆抑尾乙译翼蛇溢椅沂泄逸蚁夷邑怡绎彝裔姨熠贻矣屹颐倚诣胰奕翌疙弈轶蛾驿壹猗臆弋铱旖漪迤佚翊诒怿痍懿饴峄揖眙镒仡黟肄咿翳挹缢呓刈咦嶷羿钇殪荑薏蜴镱噫癔苡悒嗌瘗衤佾埸圯舣酏劓",an:"安案按岸暗鞍氨俺胺铵谙庵黯鹌桉埯犴揞厂广",han:"厂汉韩含旱寒汗涵函喊憾罕焊翰邯撼瀚憨捍酣悍鼾邗颔蚶晗菡旰顸犴焓撖",ang:"昂仰盎肮",ao:"奥澳傲熬凹鳌敖遨鏖袄坳翱嗷拗懊岙螯骜獒鏊艹媪廒聱",wa:"瓦挖娃洼袜蛙凹哇佤娲呙腽",yu:"于与育余预域予遇奥语誉玉鱼雨渔裕愈娱欲吁舆宇羽逾豫郁寓吾狱喻御浴愉禹俞邪榆愚渝尉淤虞屿峪粥驭瑜禺毓钰隅芋熨瘀迂煜昱汩於臾盂聿竽萸妪腴圄谕觎揄龉谀俣馀庾妤瘐鬻欤鹬阈嵛雩鹆圉蜮伛纡窬窳饫蓣狳肀舁蝓燠",niu:"牛纽扭钮拗妞忸狃",o:"哦噢喔",ba:"把八巴拔伯吧坝爸霸罢芭跋扒叭靶疤笆耙鲅粑岜灞钯捌菝魃茇",pa:"怕帕爬扒趴琶啪葩耙杷钯筢",pi:"被批副否皮坏辟啤匹披疲罢僻毗坯脾譬劈媲屁琵邳裨痞癖陂丕枇噼霹吡纰砒铍淠郫埤濞睥芘蚍圮鼙罴蜱疋貔仳庀擗甓陴",bi:"比必币笔毕秘避闭佛辟壁弊彼逼碧鼻臂蔽拂泌璧庇痹毙弼匕鄙陛裨贲敝蓖吡篦纰俾铋毖筚荸薜婢哔跸濞秕荜愎睥妣芘箅髀畀滗狴萆嬖襞舭",bai:"百白败摆伯拜柏佰掰呗擘捭稗",bo:"波博播勃拨薄佛伯玻搏柏泊舶剥渤卜驳簿脖膊簸菠礴箔铂亳钵帛擘饽跛钹趵檗啵鹁擗踣",bei:"北被备倍背杯勃贝辈悲碑臂卑悖惫蓓陂钡狈呗焙碚褙庳鞴孛鹎邶鐾",ban:"办版半班般板颁伴搬斑扮拌扳瓣坂阪绊钣瘢舨癍",pan:"判盘番潘攀盼拚畔胖叛拌蹒磐爿蟠泮袢襻丬",bin:"份宾频滨斌彬濒殡缤鬓槟摈膑玢镔豳髌傧",bang:"帮邦彭旁榜棒膀镑绑傍磅蚌谤梆浜蒡",pang:"旁庞乓磅螃彷滂逄耪",beng:"泵崩蚌蹦迸绷甭嘣甏堋",bao:"报保包宝暴胞薄爆炮饱抱堡剥鲍曝葆瀑豹刨褒雹孢苞煲褓趵鸨龅勹",bu:"不部步布补捕堡埔卜埠簿哺怖钚卟瓿逋晡醭钸",pu:"普暴铺浦朴堡葡谱埔扑仆蒲曝瀑溥莆圃璞濮菩蹼匍噗氆攵镨攴镤",mian:"面棉免绵缅勉眠冕娩腼渑湎沔黾宀眄",po:"破繁坡迫颇朴泊婆泼魄粕鄱珀陂叵笸泺皤钋钷",fan:"反范犯繁饭泛翻凡返番贩烦拚帆樊藩矾梵蕃钒幡畈蘩蹯燔",fu:"府服副负富复福夫妇幅付扶父符附腐赴佛浮覆辅傅伏抚赋辐腹弗肤阜袱缚甫氟斧孚敷俯拂俘咐腑孵芙涪釜脯茯馥宓绂讣呋罘麸蝠匐芾蜉跗凫滏蝮驸绋蚨砩桴赙菔呒趺苻拊阝鲋怫稃郛莩幞祓艴黻黼鳆",ben:"本体奔苯笨夯贲锛畚坌",feng:"风丰封峰奉凤锋冯逢缝蜂枫疯讽烽俸沣酆砜葑唪",bian:"变便边编遍辩鞭辨贬匾扁卞汴辫砭苄蝙鳊弁窆笾煸褊碥忭缏",pian:"便片篇偏骗翩扁骈胼蹁谝犏缏",zhen:"镇真针圳振震珍阵诊填侦臻贞枕桢赈祯帧甄斟缜箴疹砧榛鸩轸稹溱蓁胗椹朕畛浈",biao:"表标彪镖裱飚膘飙镳婊骠飑杓髟鳔灬瘭",piao:"票朴漂飘嫖瓢剽缥殍瞟骠嘌莩螵",huo:"和活或货获火伙惑霍祸豁嚯藿锪蠖钬耠镬夥灬劐攉",bie:"别鳖憋瘪蹩",min:"民敏闽闵皿泯岷悯珉抿黾缗玟愍苠鳘",fen:"分份纷奋粉氛芬愤粪坟汾焚酚吩忿棼玢鼢瀵偾鲼",bing:"并病兵冰屏饼炳秉丙摒柄槟禀枋邴冫",geng:"更耕颈庚耿梗埂羹哽赓绠鲠",fang:"方放房防访纺芳仿坊妨肪邡舫彷枋鲂匚钫",xian:"现先县见线限显险献鲜洗宪纤陷闲贤仙衔掀咸嫌掺羡弦腺痫娴舷馅酰铣冼涎暹籼锨苋蚬跹岘藓燹鹇氙莶霰跣猃彡祆筅",fou:"不否缶",ca:"拆擦嚓礤",cha:"查察差茶插叉刹茬楂岔诧碴嚓喳姹杈汊衩搽槎镲苴檫馇锸猹",cai:"才采财材菜彩裁蔡猜踩睬",can:"参残餐灿惨蚕掺璨惭粲孱骖黪",shen:"信深参身神什审申甚沈伸慎渗肾绅莘呻婶娠砷蜃哂椹葚吲糁渖诜谂矧胂",cen:"参岑涔",san:"三参散伞叁糁馓毵",cang:"藏仓苍沧舱臧伧",zang:"藏脏葬赃臧奘驵",chen:"称陈沈沉晨琛臣尘辰衬趁忱郴宸谌碜嗔抻榇伧谶龀肜",cao:"草操曹槽糙嘈漕螬艚屮",ce:"策测册侧厕栅恻",ze:"责则泽择侧咋啧仄箦赜笮舴昃迮帻",zhai:"债择齐宅寨侧摘窄斋祭翟砦瘵哜",dao:"到道导岛倒刀盗稻蹈悼捣叨祷焘氘纛刂帱忉",ceng:"层曾蹭噌",zha:"查扎炸诈闸渣咋乍榨楂札栅眨咤柞喳喋铡蚱吒怍砟揸痄哳齄",chai:"差拆柴钗豺侪虿瘥",ci:"次此差词辞刺瓷磁兹慈茨赐祠伺雌疵鹚糍呲粢",zi:"资自子字齐咨滋仔姿紫兹孜淄籽梓鲻渍姊吱秭恣甾孳訾滓锱辎趑龇赀眦缁呲笫谘嵫髭茈粢觜耔",cuo:"措错磋挫搓撮蹉锉厝嵯痤矬瘥脞鹾",chan:"产单阐崭缠掺禅颤铲蝉搀潺蟾馋忏婵孱觇廛谄谗澶骣羼躔蒇冁",shan:"山单善陕闪衫擅汕扇掺珊禅删膳缮赡鄯栅煽姗跚鳝嬗潸讪舢苫疝掸膻钐剡蟮芟埏彡骟",zhan:"展战占站崭粘湛沾瞻颤詹斩盏辗绽毡栈蘸旃谵搌",xin:"新心信辛欣薪馨鑫芯锌忻莘昕衅歆囟忄镡",lian:"联连练廉炼脸莲恋链帘怜涟敛琏镰濂楝鲢殓潋裢裣臁奁莶蠊蔹",chang:"场长厂常偿昌唱畅倡尝肠敞倘猖娼淌裳徜昶怅嫦菖鲳阊伥苌氅惝鬯",zhang:"长张章障涨掌帐胀彰丈仗漳樟账杖璋嶂仉瘴蟑獐幛鄣嫜",chao:"超朝潮炒钞抄巢吵剿绰嘲晁焯耖怊",zhao:"着照招找召朝赵兆昭肇罩钊沼嘲爪诏濯啁棹笊",zhou:"调州周洲舟骤轴昼宙粥皱肘咒帚胄绉纣妯啁诌繇碡籀酎荮",che:"车彻撤尺扯澈掣坼砗屮",ju:"车局据具举且居剧巨聚渠距句拒俱柜菊拘炬桔惧矩鞠驹锯踞咀瞿枸掬沮莒橘飓疽钜趄踽遽琚龃椐苣裾榘狙倨榉苴讵雎锔窭鞫犋屦醵",cheng:"成程城承称盛抢乘诚呈净惩撑澄秤橙骋逞瞠丞晟铛埕塍蛏柽铖酲裎枨",rong:"容荣融绒溶蓉熔戎榕茸冗嵘肜狨蝾",sheng:"生声升胜盛乘圣剩牲甸省绳笙甥嵊晟渑眚",deng:"等登邓灯澄凳瞪蹬噔磴嶝镫簦戥",zhi:"制之治质职只志至指织支值知识直致执置止植纸拓智殖秩旨址滞氏枝芝脂帜汁肢挚稚酯掷峙炙栉侄芷窒咫吱趾痔蜘郅桎雉祉郦陟痣蛭帙枳踯徵胝栀贽祗豸鸷摭轵卮轾彘觯絷跖埴夂黹忮骘膣踬",zheng:"政正证争整征郑丁症挣蒸睁铮筝拯峥怔诤狰徵钲",tang:"堂唐糖汤塘躺趟倘棠烫淌膛搪镗傥螳溏帑羰樘醣螗耥铴瑭",chi:"持吃池迟赤驰尺斥齿翅匙痴耻炽侈弛叱啻坻眙嗤墀哧茌豉敕笞饬踟蚩柢媸魑篪褫彳鸱螭瘛眵傺",shi:"是时实事市十使世施式势视识师史示石食始士失适试什泽室似诗饰殖释驶氏硕逝湿蚀狮誓拾尸匙仕柿矢峙侍噬嗜栅拭嘘屎恃轼虱耆舐莳铈谥炻豕鲥饣螫酾筮埘弑礻蓍鲺贳",qi:"企其起期气七器汽奇齐启旗棋妻弃揭枝歧欺骑契迄亟漆戚岂稽岐琦栖缉琪泣乞砌祁崎绮祺祈凄淇杞脐麒圻憩芪伎俟畦耆葺沏萋骐鳍綦讫蕲屺颀亓碛柒啐汔綮萁嘁蛴槭欹芑桤丌蜞",chuai:"揣踹啜搋膪",tuo:"托脱拓拖妥驼陀沱鸵驮唾椭坨佗砣跎庹柁橐乇铊沲酡鼍箨柝",duo:"多度夺朵躲铎隋咄堕舵垛惰哆踱跺掇剁柁缍沲裰哚隳",xue:"学血雪削薛穴靴谑噱鳕踅泶彐",chong:"重种充冲涌崇虫宠忡憧舂茺铳艟",chou:"筹抽绸酬愁丑臭仇畴稠瞅踌惆俦瘳雠帱",qiu:"求球秋丘邱仇酋裘龟囚遒鳅虬蚯泅楸湫犰逑巯艽俅蝤赇鼽糗",xiu:"修秀休宿袖绣臭朽锈羞嗅岫溴庥馐咻髹鸺貅",chu:"出处础初助除储畜触楚厨雏矗橱锄滁躇怵绌搐刍蜍黜杵蹰亍樗憷楮",tuan:"团揣湍疃抟彖",zhui:"追坠缀揣椎锥赘惴隹骓缒",chuan:"传川船穿串喘椽舛钏遄氚巛舡",zhuan:"专转传赚砖撰篆馔啭颛",yuan:"元员院原源远愿园援圆缘袁怨渊苑宛冤媛猿垣沅塬垸鸳辕鸢瑗圜爰芫鼋橼螈眢箢掾",cuan:"窜攒篡蹿撺爨汆镩",chuang:"创床窗闯幢疮怆",zhuang:"装状庄壮撞妆幢桩奘僮戆",chui:"吹垂锤炊椎陲槌捶棰",chun:"春纯醇淳唇椿蠢鹑朐莼肫蝽",zhun:"准屯淳谆肫窀",cu:"促趋趣粗簇醋卒蹴猝蹙蔟殂徂",dun:"吨顿盾敦蹲墩囤沌钝炖盹遁趸砘礅",qu:"区去取曲趋渠趣驱屈躯衢娶祛瞿岖龋觑朐蛐癯蛆苣阒诎劬蕖蘧氍黢蠼璩麴鸲磲",xu:"需许续须序徐休蓄畜虚吁绪叙旭邪恤墟栩絮圩婿戌胥嘘浒煦酗诩朐盱蓿溆洫顼勖糈砉醑",chuo:"辍绰戳淖啜龊踔辶",zu:"组族足祖租阻卒俎诅镞菹",ji:"济机其技基记计系期际及集级几给积极己纪即继击既激绩急奇吉季齐疾迹鸡剂辑籍寄挤圾冀亟寂暨脊跻肌稽忌饥祭缉棘矶汲畸姬藉瘠骥羁妓讥稷蓟悸嫉岌叽伎鲫诘楫荠戟箕霁嵇觊麂畿玑笈犄芨唧屐髻戢佶偈笄跽蒺乩咭赍嵴虮掎齑殛鲚剞洎丌墼蕺彐芰哜",cong:"从丛匆聪葱囱琮淙枞骢苁璁",zong:"总从综宗纵踪棕粽鬃偬枞腙",cou:"凑辏腠楱",cui:"衰催崔脆翠萃粹摧璀瘁悴淬啐隹毳榱",wei:"为位委未维卫围违威伟危味微唯谓伪慰尾魏韦胃畏帷喂巍萎蔚纬潍尉渭惟薇苇炜圩娓诿玮崴桅偎逶倭猥囗葳隗痿猬涠嵬韪煨艉隹帏闱洧沩隈鲔軎",cun:"村存寸忖皴",zuo:"作做座左坐昨佐琢撮祚柞唑嘬酢怍笮阼胙",zuan:"钻纂攥缵躜",da:"大达打答搭沓瘩惮嗒哒耷鞑靼褡笪怛妲",dai:"大代带待贷毒戴袋歹呆隶逮岱傣棣怠殆黛甙埭诒绐玳呔迨",tai:"台太态泰抬胎汰钛苔薹肽跆邰鲐酞骀炱",ta:"他它她拓塔踏塌榻沓漯獭嗒挞蹋趿遢铊鳎溻闼",dan:"但单石担丹胆旦弹蛋淡诞氮郸耽殚惮儋眈疸澹掸膻啖箪聃萏瘅赕",lu:"路六陆录绿露鲁卢炉鹿禄赂芦庐碌麓颅泸卤潞鹭辘虏璐漉噜戮鲈掳橹轳逯渌蓼撸鸬栌氇胪镥簏舻辂垆",tan:"谈探坦摊弹炭坛滩贪叹谭潭碳毯瘫檀痰袒坍覃忐昙郯澹钽锬",ren:"人任认仁忍韧刃纫饪妊荏稔壬仞轫亻衽",jie:"家结解价界接节她届介阶街借杰洁截姐揭捷劫戒皆竭桔诫楷秸睫藉拮芥诘碣嗟颉蚧孑婕疖桀讦疥偈羯袷哜喈卩鲒骱",yan:"研严验演言眼烟沿延盐炎燕岩宴艳颜殷彦掩淹阎衍铅雁咽厌焰堰砚唁焉晏檐蜒奄俨腌妍谚兖筵焱偃闫嫣鄢湮赝胭琰滟阉魇酽郾恹崦芫剡鼹菸餍埏谳讠厣罨",dang:"当党档荡挡宕砀铛裆凼菪谠",tao:"套讨跳陶涛逃桃萄淘掏滔韬叨洮啕绦饕鼗",tiao:"条调挑跳迢眺苕窕笤佻啁粜髫铫祧龆蜩鲦",te:"特忑忒铽慝",de:"的地得德底锝",dei:"得",di:"的地第提低底抵弟迪递帝敌堤蒂缔滴涤翟娣笛棣荻谛狄邸嘀砥坻诋嫡镝碲骶氐柢籴羝睇觌",ti:"体提题弟替梯踢惕剔蹄棣啼屉剃涕锑倜悌逖嚏荑醍绨鹈缇裼",tui:"推退弟腿褪颓蜕忒煺",you:"有由又优游油友右邮尤忧幼犹诱悠幽佑釉柚铀鱿囿酉攸黝莠猷蝣疣呦蚴莸莜铕宥繇卣牖鼬尢蚰侑",dian:"电点店典奠甸碘淀殿垫颠滇癫巅惦掂癜玷佃踮靛钿簟坫阽",tian:"天田添填甜甸恬腆佃舔钿阗忝殄畋栝掭",zhu:"主术住注助属逐宁著筑驻朱珠祝猪诸柱竹铸株瞩嘱贮煮烛苎褚蛛拄铢洙竺蛀渚伫杼侏澍诛茱箸炷躅翥潴邾槠舳橥丶瘃麈疰",nian:"年念酿辗碾廿捻撵拈蔫鲶埝鲇辇黏",diao:"调掉雕吊钓刁貂凋碉鲷叼铫铞",yao:"要么约药邀摇耀腰遥姚窑瑶咬尧钥谣肴夭侥吆疟妖幺杳舀窕窈曜鹞爻繇徭轺铫鳐崾珧",die:"跌叠蝶迭碟爹谍牒耋佚喋堞瓞鲽垤揲蹀",she:"设社摄涉射折舍蛇拾舌奢慑赦赊佘麝歙畲厍猞揲滠",ye:"业也夜叶射野液冶喝页爷耶邪咽椰烨掖拽曳晔谒腋噎揶靥邺铘揲",xie:"些解协写血叶谢械鞋胁斜携懈契卸谐泄蟹邪歇泻屑挟燮榭蝎撷偕亵楔颉缬邂鲑瀣勰榍薤绁渫廨獬躞",zhe:"这者着著浙折哲蔗遮辙辄柘锗褶蜇蛰鹧谪赭摺乇磔螫",ding:"定订顶丁鼎盯钉锭叮仃铤町酊啶碇腚疔玎耵",diu:"丢铥",ting:"听庭停厅廷挺亭艇婷汀铤烃霆町蜓葶梃莛",dong:"动东董冬洞懂冻栋侗咚峒氡恫胴硐垌鸫岽胨",tong:"同通统童痛铜桶桐筒彤侗佟潼捅酮砼瞳恸峒仝嗵僮垌茼",zhong:"中重种众终钟忠仲衷肿踵冢盅蚣忪锺舯螽夂",dou:"都斗读豆抖兜陡逗窦渎蚪痘蔸钭篼",du:"度都独督读毒渡杜堵赌睹肚镀渎笃竺嘟犊妒牍蠹椟黩芏髑",duan:"断段短端锻缎煅椴簖",dui:"对队追敦兑堆碓镦怼憝",rui:"瑞兑锐睿芮蕊蕤蚋枘",yue:"月说约越乐跃兑阅岳粤悦曰钥栎钺樾瀹龠哕刖",tun:"吞屯囤褪豚臀饨暾氽",hui:"会回挥汇惠辉恢徽绘毁慧灰贿卉悔秽溃荟晖彗讳诲珲堕诙蕙晦睢麾烩茴喙桧蛔洄浍虺恚蟪咴隳缋哕",wu:"务物无五武午吴舞伍污乌误亡恶屋晤悟吾雾芜梧勿巫侮坞毋诬呜钨邬捂鹜兀婺妩於戊鹉浯蜈唔骛仵焐芴鋈庑鼯牾怃圬忤痦迕杌寤阢",ya:"亚压雅牙押鸭呀轧涯崖邪芽哑讶鸦娅衙丫蚜碣垭伢氩桠琊揠吖睚痖疋迓岈砑",he:"和合河何核盖贺喝赫荷盒鹤吓呵苛禾菏壑褐涸阂阖劾诃颌嗬貉曷翮纥盍",wo:"我握窝沃卧挝涡斡渥幄蜗喔倭莴龌肟硪",en:"恩摁蒽",n:"嗯唔",er:"而二尔儿耳迩饵洱贰铒珥佴鸸鲕",fa:"发法罚乏伐阀筏砝垡珐",quan:"全权券泉圈拳劝犬铨痊诠荃醛蜷颧绻犭筌鬈悛辁畎",fei:"费非飞肥废菲肺啡沸匪斐蜚妃诽扉翡霏吠绯腓痱芾淝悱狒榧砩鲱篚镄",pei:"配培坏赔佩陪沛裴胚妃霈淠旆帔呸醅辔锫",ping:"平评凭瓶冯屏萍苹乒坪枰娉俜鲆",fo:"佛",hu:"和护户核湖互乎呼胡戏忽虎沪糊壶葫狐蝴弧瑚浒鹄琥扈唬滹惚祜囫斛笏芴醐猢怙唿戽槲觳煳鹕冱瓠虍岵鹱烀轷",ga:"夹咖嘎尬噶旮伽尕钆尜",ge:"个合各革格歌哥盖隔割阁戈葛鸽搁胳舸疙铬骼蛤咯圪镉颌仡硌嗝鬲膈纥袼搿塥哿虼",ha:"哈蛤铪",xia:"下夏峡厦辖霞夹虾狭吓侠暇遐瞎匣瑕唬呷黠硖罅狎瘕柙",gai:"改该盖概溉钙丐芥赅垓陔戤",hai:"海还害孩亥咳骸骇氦嗨胲醢",gan:"干感赶敢甘肝杆赣乾柑尴竿秆橄矸淦苷擀酐绀泔坩旰疳澉",gang:"港钢刚岗纲冈杠缸扛肛罡戆筻",jiang:"将强江港奖讲降疆蒋姜浆匠酱僵桨绛缰犟豇礓洚茳糨耩",hang:"行航杭巷夯吭桁沆绗颃",gong:"工公共供功红贡攻宫巩龚恭拱躬弓汞蚣珙觥肱廾",hong:"红宏洪轰虹鸿弘哄烘泓訇蕻闳讧荭黉薨",guang:"广光逛潢犷胱咣桄",qiong:"穷琼穹邛茕筇跫蛩銎",gao:"高告搞稿膏糕镐皋羔锆杲郜睾诰藁篙缟槁槔",hao:"好号毫豪耗浩郝皓昊皋蒿壕灏嚎濠蚝貉颢嗥薅嚆",li:"理力利立里李历例离励礼丽黎璃厉厘粒莉梨隶栗荔沥犁漓哩狸藜罹篱鲤砺吏澧俐骊溧砾莅锂笠蠡蛎痢雳俪傈醴栎郦俚枥喱逦娌鹂戾砬唳坜疠蜊黧猁鬲粝蓠呖跞疬缡鲡鳢嫠詈悝苈篥轹",jia:"家加价假佳架甲嘉贾驾嫁夹稼钾挟拮迦伽颊浃枷戛荚痂颉镓笳珈岬胛袈郏葭袷瘕铗跏蛱恝哿",luo:"落罗络洛逻螺锣骆萝裸漯烙摞骡咯箩珞捋荦硌雒椤镙跞瘰泺脶猡倮蠃",ke:"可科克客刻课颗渴壳柯棵呵坷恪苛咳磕珂稞瞌溘轲窠嗑疴蝌岢铪颏髁蚵缂氪骒钶锞",qia:"卡恰洽掐髂袷咭葜",gei:"给",gen:"根跟亘艮哏茛",hen:"很狠恨痕哏",gou:"构购够句沟狗钩拘勾苟垢枸篝佝媾诟岣彀缑笱鞲觏遘",kou:"口扣寇叩抠佝蔻芤眍筘",gu:"股古顾故固鼓骨估谷贾姑孤雇辜菇沽咕呱锢钴箍汩梏痼崮轱鸪牯蛊诂毂鹘菰罟嘏臌觚瞽蛄酤牿鲴",pai:"牌排派拍迫徘湃俳哌蒎",gua:"括挂瓜刮寡卦呱褂剐胍诖鸹栝呙",tou:"投头透偷愉骰亠",guai:"怪拐乖",kuai:"会快块筷脍蒯侩浍郐蒉狯哙",guan:"关管观馆官贯冠惯灌罐莞纶棺斡矜倌鹳鳏盥掼涫",wan:"万完晚湾玩碗顽挽弯蔓丸莞皖宛婉腕蜿惋烷琬畹豌剜纨绾脘菀芄箢",ne:"呢哪呐讷疒",gui:"规贵归轨桂柜圭鬼硅瑰跪龟匮闺诡癸鳜桧皈鲑刽晷傀眭妫炅庋簋刿宄匦",jun:"军均俊君峻菌竣钧骏龟浚隽郡筠皲麇捃",jiong:"窘炯迥炅冂扃",jue:"决绝角觉掘崛诀獗抉爵嚼倔厥蕨攫珏矍蹶谲镢鳜噱桷噘撅橛孓觖劂爝",gun:"滚棍辊衮磙鲧绲丨",hun:"婚混魂浑昏棍珲荤馄诨溷阍",guo:"国过果郭锅裹帼涡椁囗蝈虢聒埚掴猓崞蜾呙馘",hei:"黑嘿嗨",kan:"看刊勘堪坎砍侃嵌槛瞰阚龛戡凵莰",heng:"衡横恒亨哼珩桁蘅",mo:"万没么模末冒莫摩墨默磨摸漠脉膜魔沫陌抹寞蘑摹蓦馍茉嘿谟秣蟆貉嫫镆殁耱嬷麽瘼貊貘",peng:"鹏朋彭膨蓬碰苹棚捧亨烹篷澎抨硼怦砰嘭蟛堋",hou:"后候厚侯猴喉吼逅篌糇骺後鲎瘊堠",hua:"化华划话花画滑哗豁骅桦猾铧砉",huai:"怀坏淮徊槐踝",huan:"还环换欢患缓唤焕幻痪桓寰涣宦垸洹浣豢奂郇圜獾鲩鬟萑逭漶锾缳擐",xun:"讯训迅孙寻询循旬巡汛勋逊熏徇浚殉驯鲟薰荀浔洵峋埙巽郇醺恂荨窨蕈曛獯",huang:"黄荒煌皇凰慌晃潢谎惶簧璜恍幌湟蝗磺隍徨遑肓篁鳇蟥癀",nai:"能乃奶耐奈鼐萘氖柰佴艿",luan:"乱卵滦峦鸾栾銮挛孪脔娈",qie:"切且契窃茄砌锲怯伽惬妾趄挈郄箧慊",jian:"建间件见坚检健监减简艰践兼鉴键渐柬剑尖肩舰荐箭浅剪俭碱茧奸歼拣捡煎贱溅槛涧堑笺谏饯锏缄睑謇蹇腱菅翦戬毽笕犍硷鞯牮枧湔鲣囝裥踺搛缣鹣蒹谫僭戋趼楗",nan:"南难男楠喃囡赧腩囝蝻",qian:"前千钱签潜迁欠纤牵浅遣谦乾铅歉黔谴嵌倩钳茜虔堑钎骞阡掮钤扦芊犍荨仟芡悭缱佥愆褰凵肷岍搴箝慊椠",qiang:"强抢疆墙枪腔锵呛羌蔷襁羟跄樯戕嫱戗炝镪锖蜣",xiang:"向项相想乡象响香降像享箱羊祥湘详橡巷翔襄厢镶飨饷缃骧芗庠鲞葙蟓",jiao:"教交较校角觉叫脚缴胶轿郊焦骄浇椒礁佼蕉娇矫搅绞酵剿嚼饺窖跤蛟侥狡姣皎茭峤铰醮鲛湫徼鹪僬噍艽挢敫",zhuo:"着著缴桌卓捉琢灼浊酌拙茁涿镯淖啄濯焯倬擢斫棹诼浞禚",qiao:"桥乔侨巧悄敲俏壳雀瞧翘窍峭锹撬荞跷樵憔鞘橇峤诮谯愀鞒硗劁缲",xiao:"小效销消校晓笑肖削孝萧俏潇硝宵啸嚣霄淆哮筱逍姣箫骁枭哓绡蛸崤枵魈",si:"司四思斯食私死似丝饲寺肆撕泗伺嗣祀厮驷嘶锶俟巳蛳咝耜笥纟糸鸶缌澌姒汜厶兕",kai:"开凯慨岂楷恺揩锴铠忾垲剀锎蒈",jin:"进金今近仅紧尽津斤禁锦劲晋谨筋巾浸襟靳瑾烬缙钅矜觐堇馑荩噤廑妗槿赆衿卺",qin:"亲勤侵秦钦琴禽芹沁寝擒覃噙矜嗪揿溱芩衾廑锓吣檎螓",jing:"经京精境竞景警竟井惊径静劲敬净镜睛晶颈荆兢靖泾憬鲸茎腈菁胫阱旌粳靓痉箐儆迳婧肼刭弪獍",ying:"应营影英景迎映硬盈赢颖婴鹰荧莹樱瑛蝇萦莺颍膺缨瀛楹罂荥萤鹦滢蓥郢茔嘤璎嬴瘿媵撄潆",jiu:"就究九酒久救旧纠舅灸疚揪咎韭玖臼柩赳鸠鹫厩啾阄桕僦鬏",zui:"最罪嘴醉咀蕞觜",juan:"卷捐圈眷娟倦绢隽镌涓鹃鄄蠲狷锩桊",suan:"算酸蒜狻",yun:"员运云允孕蕴韵酝耘晕匀芸陨纭郧筠恽韫郓氲殒愠昀菀狁",qun:"群裙逡麇",ka:"卡喀咖咔咯佧胩",kang:"康抗扛慷炕亢糠伉钪闶",keng:"坑铿吭",kao:"考靠烤拷铐栲尻犒",ken:"肯垦恳啃龈裉",yin:"因引银印音饮阴隐姻殷淫尹荫吟瘾寅茵圻垠鄞湮蚓氤胤龈窨喑铟洇狺夤廴吲霪茚堙",kong:"空控孔恐倥崆箜",ku:"苦库哭酷裤枯窟挎骷堀绔刳喾",kua:"跨夸垮挎胯侉",kui:"亏奎愧魁馈溃匮葵窥盔逵睽馗聩喟夔篑岿喹揆隗傀暌跬蒉愦悝蝰",kuan:"款宽髋",kuang:"况矿框狂旷眶匡筐邝圹哐贶夼诳诓纩",que:"确却缺雀鹊阙瘸榷炔阕悫",kun:"困昆坤捆琨锟鲲醌髡悃阃",kuo:"扩括阔廓蛞",la:"拉落垃腊啦辣蜡喇剌旯砬邋瘌",lai:"来莱赖睐徕籁涞赉濑癞崃疠铼",lan:"兰览蓝篮栏岚烂滥缆揽澜拦懒榄斓婪阑褴罱啉谰镧漤",lin:"林临邻赁琳磷淋麟霖鳞凛拎遴蔺吝粼嶙躏廪檩啉辚膦瞵懔",lang:"浪朗郎廊狼琅榔螂阆锒莨啷蒗稂",liang:"量两粮良辆亮梁凉谅粱晾靓踉莨椋魉墚",lao:"老劳落络牢捞涝烙姥佬崂唠酪潦痨醪铑铹栳耢",mu:"目模木亩幕母牧莫穆姆墓慕牟牡募睦缪沐暮拇姥钼苜仫毪坶",le:"了乐勒肋叻鳓嘞仂泐",lei:"类累雷勒泪蕾垒磊擂镭肋羸耒儡嫘缧酹嘞诔檑",sui:"随岁虽碎尿隧遂髓穗绥隋邃睢祟濉燧谇眭荽",lie:"列烈劣裂猎冽咧趔洌鬣埒捩躐",leng:"冷愣棱楞塄",ling:"领令另零灵龄陵岭凌玲铃菱棱伶羚苓聆翎泠瓴囹绫呤棂蛉酃鲮柃",lia:"俩",liao:"了料疗辽廖聊寥缪僚燎缭撂撩嘹潦镣寮蓼獠钌尥鹩",liu:"流刘六留柳瘤硫溜碌浏榴琉馏遛鎏骝绺镏旒熘鹨锍",lun:"论轮伦仑纶沦抡囵",lv:"率律旅绿虑履吕铝屡氯缕滤侣驴榈闾偻褛捋膂稆",lou:"楼露漏陋娄搂篓喽镂偻瘘髅耧蝼嵝蒌",mao:"贸毛矛冒貌茂茅帽猫髦锚懋袤牦卯铆耄峁瑁蟊茆蝥旄泖昴瞀",long:"龙隆弄垄笼拢聋陇胧珑窿茏咙砻垅泷栊癃",nong:"农浓弄脓侬哝",shuang:"双爽霜孀泷",shu:"术书数属树输束述署熟殊蔬舒疏鼠淑叔暑枢墅俞曙抒竖蜀薯梳戍恕孰沭赎庶漱塾倏澍纾姝菽黍腧秫毹殳疋摅",shuai:"率衰帅摔甩蟀",lve:"略掠锊",ma:"么马吗摩麻码妈玛嘛骂抹蚂唛蟆犸杩",me:"么麽",mai:"买卖麦迈脉埋霾荬劢",man:"满慢曼漫埋蔓瞒蛮鳗馒幔谩螨熳缦镘颟墁鞔嫚",mi:"米密秘迷弥蜜谜觅靡泌眯麋猕谧咪糜宓汨醚嘧弭脒冖幂祢縻蘼芈糸敉",men:"们门闷瞒汶扪焖懑鞔钔",mang:"忙盲茫芒氓莽蟒邙硭漭",meng:"蒙盟梦猛孟萌氓朦锰檬勐懵蟒蜢虻黾蠓艨甍艋瞢礞",miao:"苗秒妙描庙瞄缪渺淼藐缈邈鹋杪眇喵",mou:"某谋牟缪眸哞鍪蛑侔厶",miu:"缪谬",mei:"美没每煤梅媒枚妹眉魅霉昧媚玫酶镁湄寐莓袂楣糜嵋镅浼猸鹛",wen:"文问闻稳温纹吻蚊雯紊瘟汶韫刎璺玟阌",mie:"灭蔑篾乜咩蠛",ming:"明名命鸣铭冥茗溟酩瞑螟暝",na:"内南那纳拿哪娜钠呐捺衲镎肭",nei:"内那哪馁",nuo:"难诺挪娜糯懦傩喏搦锘",ruo:"若弱偌箬",nang:"囊馕囔曩攮",nao:"脑闹恼挠瑙淖孬垴铙桡呶硇猱蛲",ni:"你尼呢泥疑拟逆倪妮腻匿霓溺旎昵坭铌鲵伲怩睨猊",nen:"嫩恁",neng:"能",nin:"您恁",niao:"鸟尿溺袅脲茑嬲",nie:"摄聂捏涅镍孽捻蘖啮蹑嗫臬镊颞乜陧",niang:"娘酿",ning:"宁凝拧泞柠咛狞佞聍甯",nu:"努怒奴弩驽帑孥胬",nv:"女钕衄恧",ru:"入如女乳儒辱汝茹褥孺濡蠕嚅缛溽铷洳薷襦颥蓐",nuan:"暖",nve:"虐疟",re:"热若惹喏",ou:"区欧偶殴呕禺藕讴鸥瓯沤耦怄",pao:"跑炮泡抛刨袍咆疱庖狍匏脬",pou:"剖掊裒",pen:"喷盆湓",pie:"瞥撇苤氕丿",pin:"品贫聘频拼拚颦姘嫔榀牝",se:"色塞瑟涩啬穑铯槭",qing:"情青清请亲轻庆倾顷卿晴氢擎氰罄磬蜻箐鲭綮苘黥圊檠謦",zan:"赞暂攒堑昝簪糌瓒錾趱拶",shao:"少绍召烧稍邵哨韶捎勺梢鞘芍苕劭艄筲杓潲",sao:"扫骚嫂梢缫搔瘙臊埽缲鳋",sha:"沙厦杀纱砂啥莎刹杉傻煞鲨霎嗄痧裟挲铩唼歃",xuan:"县选宣券旋悬轩喧玄绚渲璇炫萱癣漩眩暄煊铉楦泫谖痃碹揎镟儇",ran:"然染燃冉苒髯蚺",rang:"让壤攘嚷瓤穰禳",rao:"绕扰饶娆桡荛",reng:"仍扔",ri:"日",rou:"肉柔揉糅鞣蹂",ruan:"软阮朊",run:"润闰",sa:"萨洒撒飒卅仨脎",suo:"所些索缩锁莎梭琐嗦唆唢娑蓑羧挲桫嗍睃",sai:"思赛塞腮噻鳃",shui:"说水税谁睡氵",sang:"桑丧嗓搡颡磉",sen:"森",seng:"僧",shai:"筛晒",shang:"上商尚伤赏汤裳墒晌垧觞殇熵绱",xing:"行省星腥猩惺兴刑型形邢饧醒幸杏性姓陉荇荥擤悻硎",shou:"收手受首售授守寿瘦兽狩绶艏扌",shuo:"说数硕烁朔铄妁槊蒴搠",su:"速素苏诉缩塑肃俗宿粟溯酥夙愫簌稣僳谡涑蔌嗉觫",shua:"刷耍唰",shuan:"栓拴涮闩",shun:"顺瞬舜吮",song:"送松宋讼颂耸诵嵩淞怂悚崧凇忪竦菘",sou:"艘搜擞嗽嗖叟馊薮飕嗾溲锼螋瞍",sun:"损孙笋荪榫隼狲飧",teng:"腾疼藤滕誊",tie:"铁贴帖餮萜",tu:"土突图途徒涂吐屠兔秃凸荼钍菟堍酴",wai:"外歪崴",wang:"王望往网忘亡旺汪枉妄惘罔辋魍",weng:"翁嗡瓮蓊蕹",zhua:"抓挝爪",yang:"样养央阳洋扬杨羊详氧仰秧痒漾疡泱殃恙鸯徉佯怏炀烊鞅蛘",xiong:"雄兄熊胸凶匈汹芎",yo:"哟唷",yong:"用永拥勇涌泳庸俑踊佣咏雍甬镛臃邕蛹恿慵壅痈鳙墉饔喁",za:"杂扎咱砸咋匝咂拶",zai:"在再灾载栽仔宰哉崽甾",zao:"造早遭枣噪灶燥糟凿躁藻皂澡蚤唣",zei:"贼",zen:"怎谮",zeng:"增曾综赠憎锃甑罾缯",zhei:"这",zou:"走邹奏揍诹驺陬楱鄹鲰",zhuai:"转拽",zun:"尊遵鳟樽撙",dia:"嗲",nou:"耨"})}}));
diff --git a/src/views/vab/filterBar.vue b/src/views/vab/filterBar.vue
index e095f19e..f17bd8ec 100644
--- a/src/views/vab/filterBar.vue
+++ b/src/views/vab/filterBar.vue
@@ -1,9 +1,9 @@
 <template>
 	<el-main>
 		<el-card shadow="never">
-			<scFilterBar :options="options" :defaultFilter="defaultFilter" @change="change"></scFilterBar>
+			<scFilterBar filterName="filterName" :options="options" @filterChange="change"></scFilterBar>
 		</el-card>
-		<el-alert title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适" type="success" style="margin:20px 0;"></el-alert>
+		<el-alert title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,在@/config/filterBar.js中可以更改运算符以及其他配置,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适" type="success" style="margin:20px 0;"></el-alert>
 		<el-card shadow="never">
 			<pre>{{ filterData }}</pre>
 		</el-card>
@@ -24,14 +24,19 @@
 				defaultFilter : [],
 				options: [
 					{
-						label: '输入框',
-						value: 'name',
-						type: 'text'
+						label: '订单号',
+						value: 'id',
+						type: 'text',
+						selected: true,
+						placeholder: '请输入订单号'
 					},
 					{
-						label: '固定下拉框',
+						label: '类型',
 						value: 'type',
 						type: 'select',
+						operator: '=',
+						selected: true,
+						placeholder: '请选择类型',
 						extend: {
 							data:[
 								{
@@ -46,9 +51,11 @@
 						}
 					},
 					{
-						label: '固定下拉框(多选)',
+						label: '类型(多选)',
 						value: 'type2',
 						type: 'select',
+						operator: '=',
+						placeholder: '请选择类型',
 						extend: {
 							multiple: true,
 							data:[
@@ -64,28 +71,42 @@
 						}
 					},
 					{
-						label: '异步下拉框',
-						value: 'type3',
+						label: '通知(异步)',
+						value: 'noticeType',
 						type: 'select',
+						operator: '=',
+						placeholder: '请选择通知类型',
 						extend: {
 							request: async () => {
-								var list = await this.$API.demo.select.get();
-								return list.data;
+								var list = await this.$API.dic.info.get()
+								return list.data.map(item => {
+									return {
+										label: item.name,
+										value: item.key
+									}
+								})
 							}
 						}
 					},
 					{
-						label: '远程搜索下拉框',
-						value: 'type4',
+						label: '通知(远程搜索)',
+						value: 'noticeType2',
 						type: 'select',
+						operator: '=',
+						placeholder: '请输入关键词后检索',
 						extend: {
 							remote: true,
 							request: async (query) => {
 								var data = {
 									keyword: query,
 								}
-								var list = await this.$API.demo.select.get(data);
-								return list.data;
+								var list = await this.$API.dic.info.get(data)
+								return list.data.map(item => {
+									return {
+										label: item.name,
+										value: item.key
+									}
+								})
 							}
 						}
 					},
diff --git a/src/views/vab/filterbar2.vue b/src/views/vab/filterbar2.vue
deleted file mode 100644
index 53e6bef7..00000000
--- a/src/views/vab/filterbar2.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<!--
- * @Descripttion: 过滤器V2
- * @version: 2.0
- * @Author: sakuya
- * @Date: 2021年7月30日14:48:41
- * @LastEditors:
- * @LastEditTime:
--->
-
-<template>
-	<el-main>
-		<el-card shadow="never">
-			<el-badge :value="2" type="danger">
-				<el-button size="small" icon="sc-icon-filter-line" @click="openFilter"></el-button>
-			</el-badge>
-
-			<el-drawer title="过滤器" v-model="drawer" :size="650">
-				<el-container>
-					<el-main style="padding:0">
-
-						<el-tabs class="root">
-							<el-tab-pane>
-								<template #label>
-									<div class="tabs-label">
-										过滤项
-									</div>
-								</template>
-								<el-scrollbar>
-
-									<div class="sc-filter-main">
-										<h2>设置过滤条件</h2>
-
-										<el-alert v-if="filter.length<=0" title="没有默认过滤条件,请点击增加过滤项" type="warning" :closable="false" center style="margin:15px 0;"></el-alert>
-
-
-										<table v-else>
-											<colgroup>
-												<col width="50">
-												<col width="140">
-												<col>
-												<col width="40">
-											</colgroup>
-											<tr v-for="(item,index) in filter" :key="index">
-												<td>
-													<el-tag size="medium">{{index+1}}</el-tag>
-												</td>
-												<td>
-													<el-select v-model="item.field" placeholder="过滤字段" filterable @change="fieldChange(item)">
-														<el-option v-for="field in fields" :key="field.value" :label="field.label" :value="field"></el-option>
-													</el-select>
-												</td>
-												<td>
-
-													<el-input v-if="item.field.type=='text'" v-model="item.value" :placeholder="item.field.placeholder"></el-input>
-
-													<el-select v-if="item.field.type=='select'" v-model="item.value" :placeholder="item.field.placeholder" filterable :multiple="item.field.extend.multiple">
-														<el-option v-for="field in item.field.extend.data" :key="field.value" :label="field.label" :value="field.value"></el-option>
-													</el-select>
-
-													<el-date-picker v-if="item.field.type=='datetime'" v-model="item.value" type="datetime" :placeholder="item.field.placeholder" style="width: 100%;"></el-date-picker>
-
-													<el-date-picker v-if="item.field.type=='datetimerange'" v-model="item.value" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
-
-													<el-switch v-if="item.field.type=='switch'" v-model="item.value"></el-switch>
-
-												</td>
-												<td>
-													<i class="el-icon-delete del" @click="delFilter(index)"></i>
-												</td>
-											</tr>
-										</table>
-										<el-button type="text" icon="el-icon-plus" @click="addFilter">增加过滤项</el-button>
-									</div>
-
-								</el-scrollbar>
-							</el-tab-pane>
-							<el-tab-pane>
-								<template #label>
-									<div class="tabs-label">
-										常用
-									</div>
-								</template>
-								<el-scrollbar>
-									<ul class="sc-filter-my">
-										<li><label>已过期的用户</label></li>
-										<li><label>类型为正常且已缴费的用户</label></li>
-									</ul>
-								</el-scrollbar>
-							</el-tab-pane>
-						</el-tabs>
-
-					</el-main>
-					<el-footer>
-						<el-button type="primary" @click="ok">立即过滤</el-button>
-						<el-button type="primary" plain @click="savemy">保存常用</el-button>
-						<el-button>重置</el-button>
-					</el-footer>
-				</el-container>
-			</el-drawer>
-
-		</el-card>
-	</el-main>
-</template>
-
-<script>
-	export default {
-		name: 'filterBar2',
-		data() {
-			return {
-				drawer: false,
-				form: {
-					checkboxGroup1: ['1'],
-					radio1: ''
-				},
-				fields: [
-					{
-						label: 'ID',
-						value: 'id',
-						type: 'text',
-						selected: true,
-						placeholder: '请输入ID'
-					},
-					{
-						label: '姓名',
-						value: 'name',
-						type: 'text',
-						placeholder: '请输入姓名'
-					},
-					{
-						label: '类型',
-						value: 'type',
-						type: 'select',
-						selected: true,
-						placeholder: '请选择类型',
-						extend: {
-							//multiple: true,
-							data: [
-								{
-									label: "选项1",
-									value: "1"
-								},
-								{
-									label: "选项2",
-									value: "2"
-								}
-							]
-						}
-					},
-					{
-						label: '注册日期',
-						value: 'date',
-						type: 'datetime',
-						placeholder: '请选择日期时间'
-					},
-					{
-						label: '有效期',
-						value: 'date2',
-						type: 'datetimerange',
-						placeholder: '请选择日期时间'
-					},
-					{
-						label: '是否警用',
-						value: 'switch',
-						type: 'switch'
-					}
-				],
-				filter: []
-			}
-		},
-		mounted() {
-			//默认显示
-			this.fields.forEach((item) => {
-				if(item.selected){
-					this.filter.push({
-						field: item,
-						value: ''
-					})
-				}
-			})
-		},
-		methods: {
-			openFilter(){
-				this.drawer = true
-			},
-			addFilter(){
-				this.filter.push({
-					field: this.fields[0],
-					value: ''
-				})
-			},
-			delFilter(index){
-				console.log(index)
-				this.filter.splice(index, 1)
-			},
-			ok(){
-				console.log(this.filter);
-			},
-			fieldChange(tr){
-				tr.value = ''
-			},
-			savemy(){
-				this.$prompt('请输入常用过滤名称', '提示', {
-					inputPlaceholder: '请输入常用过滤名称'
-				})
-				.then(({ value }) => {
-					console.log(value);
-				})
-				.catch(() => {
-					//
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.tabs-label {padding:0 20px;}
-
-	.sc-filter-main {padding:20px;border-bottom: 1px solid #e6e6e6;background: #fff;}
-	.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
-	.sc-filter-main table {width: 100%;margin: 15px 0;}
-	.sc-filter-main table tr {}
-	.sc-filter-main table td {padding:5px 10px 5px 0;}
-	.sc-filter-main table td .el-select {display: block;}
-	.sc-filter-main table td .el-date-editor.el-input {display: block;width: 100%;}
-	.sc-filter-main table td .del {background: #fff;color: #999;width: 32px;height: 32px;line-height: 32px;text-align: center;border-radius:50%;font-size: 12px;cursor: pointer;}
-	.sc-filter-main table td .del:hover {background: #F56C6C;color: #fff;}
-
-	.sc-filter-my {list-style-type: none;padding:15px;}
-	.sc-filter-my li {font-size: 12px;margin-bottom: 15px;}
-	.sc-filter-my li label {background: #222b45;color: #fff;padding:5px 10px;border-radius:4px;}
-	.sc-filter-my li:hover {box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);position: relative;}
-
-	.root {
-	    display: flex;
-		height: 100%;
-	    flex-direction: column
-	}
-	.root:deep(.el-tabs__header) {margin: 0;}
-	.root:deep(.el-tabs__content) {flex: 1;background: #f6f8f9;}
-	.root:deep(.el-tabs__content) .el-tab-pane{overflow: auto;height:100%;}
-</style>