scFilterBar 增加插糟，增加showOperator参数

src/components/scFilterBar/index.vue

@@ -1,17 +1,20 @@
 <!--
  * @Descripttion: 过滤器V2
- * @version: 2.0
+ * @version: 2.1
  * @Author: sakuya
  * @Date: 2021年7月30日14:48:41
- * @LastEditors:
+ * @LastEditors: sakuya
- * @LastEditTime:
+ * @LastEditTime: 2021年10月29日13:05:55
 -->
 
 <template>
 	<div class="sc-filterBar">
-		<el-badge :value="filterObjLength" type="danger" :hidden="filterObjLength<=0">
+		<slot :filterLength="filterObjLength" :openFilter="openFilter">
-			<el-button size="small" icon="sc-icon-filter-fill" @click="openFilter"></el-button>
+			<el-badge :value="filterObjLength" type="danger" :hidden="filterObjLength<=0">
-		</el-badge>
+				<el-button size="small" icon="sc-icon-filter-fill" @click="openFilter"></el-button>
+			</el-badge>
+		</slot>
+
 		<el-drawer title="过滤器" v-model="drawer" :size="650" append-to-body>
 			<el-container v-loading="saveLoading">
 				<el-main style="padding:0">
@@ -30,7 +33,7 @@
 										<colgroup>
 											<col width="50">
 											<col width="140">
-											<col width="120">
+											<col v-if="showOperator" width="120">
 											<col>
 											<col width="40">
 										</colgroup>
@@ -42,9 +45,9 @@
 												<py-select v-model="item.field" :options="fields" placeholder="过滤字段" filterable @change="fieldChange(item)">
 												</py-select>
 											</td>
-											<td>
+											<td v-if="showOperator">
 												<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-option v-for="ope in item.field.operators || operator" :key="ope.value" :label="ope.label" :value="ope.value"></el-option>
 												</el-select>
 											</td>
 											<td>
@@ -108,6 +111,7 @@
 		},
 		props: {
 			filterName: { type: String, default: "" },
+			showOperator: { type: Boolean, default: true },
 			options: { type: Object, default: () => {} }
 		},
 		data() {
@@ -125,7 +129,7 @@
 			filterObj(){
 				const obj = {}
 				this.filter.forEach((item) => {
-					obj[item.field.value] = `${item.value}${config.separator}${item.operator}`
+					obj[item.field.value] = this.showOperator ? `${item.value}${config.separator}${item.operator}` : `${item.value}`
 				})
 				return obj
 			}

src/views/vab/filterBar.vue

@@ -1,10 +1,16 @@
 <template>
 	<el-main>
-		<el-card shadow="never">
+		<el-card shadow="never" header="过滤器">
-			<scFilterBar filterName="filterName" :options="options" @filterChange="change"></scFilterBar>
+			<scFilterBar filterName="filterName" :options="options" @filterChange="change">
+				<template #default="{filterLength, openFilter}">
+					<el-badge :value="filterLength" type="danger" :hidden="filterLength<=0">
+						<el-button size="small" icon="sc-icon-filter-fill" @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">
+		<el-card shadow="never" header="返回值">
 			<pre>{{ filterData }}</pre>
 		</el-card>
 	</el-main>
@@ -114,17 +120,28 @@
 						label: '开关',
 						value: 'switch',
 						type: 'switch',
-						operator: '=',
+						operator: '='
 					},
 					{
 						label: '日期单选',
 						value: 'date',
 						type: 'date',
+						operator: '=',
+						operators: [
+							{
+								label: '等于',
+								value: '=',
+							},
+							{
+								label: '不等于',
+								value: '!=',
+							}
+						]
 					},
 					{
 						label: '日期范围',
 						value: 'date2',
-						type: 'daterange',
+						type: 'daterange'
 					}
 				]
 			}