UP scFilterBar 2.6

1：修复下拉选项丢失
2：增加自定义日期过滤类型
3：增加是否重复过滤

src/components/scFilterBar/index.vue

@@ -1,10 +1,10 @@
 <!--
  * @Descripttion: 过滤器V2
- * @version: 2.5
+ * @version: 2.6
  * @Author: sakuya
  * @Date: 2021年7月30日14:48:41
  * @LastEditors: sakuya
- * @LastEditTime: 2022年5月13日21:15:44
+ * @LastEditTime: 2023年2月7日09:46:45
 -->
 
 <template>
@@ -39,10 +39,10 @@
 										</colgroup>
 										<tr v-for="(item,index) in filter" :key="index">
 											<td>
-												<el-tag>{{index+1}}</el-tag>
+												<el-tag :disable-transitions="true">{{index+1}}</el-tag>
 											</td>
 											<td>
-												<py-select v-model="item.field" :options="fields" placeholder="过滤字段" filterable @change="fieldChange(item)">
+												<py-select v-model="item.field" :options="fields" :filter="filter" placeholder="过滤字段" filterable @change="fieldChange(item)">
 												</py-select>
 											</td>
 											<td v-if="showOperator">
@@ -66,6 +66,8 @@
 												<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-date-picker v-if="item.field.type=='customDate'" v-model="item.value" :type="item.field.extend.dateType||'date'" :value-format="item.field.extend.valueFormat" :placeholder="item.field.placeholder||'请选择'" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
 												<!-- 开关 -->
 												<el-switch v-if="item.field.type=='switch'" v-model="item.value" active-value="1" inactive-value="0"></el-switch>
 												<!-- 标签 -->
@@ -156,11 +158,13 @@
 			},
 			//增加过滤项
 			addFilter(){
-				if(this.fields.length<=0){
+				//下一组新增过滤
+				var filterArr = this.fields.filter(field => !this.filter.some(item => field.value == item.field.value && !item.field.repeat))
+				if(this.fields.length<=0 || filterArr.length<=0){
 					this.$message.warning('无过滤项');
 					return false
 				}
-				const filterNum = this.fields[this.filter.length] || this.fields[0]
+				const filterNum = filterArr[0]
 				this.filter.push({
 					field: filterNum,
 					operator: filterNum.operator || 'include',
@@ -196,8 +200,9 @@
 			},
 			//下拉框显示事件处理异步搜索
 			async remoteMethod(query, item){
-				//无request则不请求异步搜索
-                if(!item.field.extend.request) return;
+                if(!item.field.extend.request) {
+					return false;
+				}
 				if(query !== ''){
 					item.selectLoading = true;
 					try {

src/components/scFilterBar/pySelect.vue

@@ -9,7 +9,7 @@
 
 <template>
 	<el-select v-bind="$attrs" :filter-method="filterMethod" @visible-change="visibleChange">
-		<el-option v-for="field in optionsList" :key="field.value" :label="field.label" :value="field"></el-option>
+		<el-option v-for="field in optionsList" :key="field.value" :label="field.label" :value="field" :disabled="isDisabled(field.value)"></el-option>
 	</el-select>
 </template>
 
@@ -18,7 +18,8 @@
 
 	export default {
 		props: {
-			options: { type: Array, default: () => [] }
+			options: { type: Array, default: () => [] },
+			filter: { type: Array, default: () => [] }
 		},
 		data() {
 			return {
@@ -45,7 +46,14 @@
 				if(isopen){
 					this.optionsList = this.optionsList_
 				}
+			},
+			isDisabled(key){
+				if(this.filter.find(item => item.field.value == key && !item.field.repeat)){
+					return true
+				}else{
+					return false
+				}
 			}
 		}
 	}
-</script>
+</script>

src/views/vab/filterBar.vue

@@ -133,9 +133,10 @@
 						]
 					},
 					{
-						label: '开关',
+						label: '开关(可重复)',
 						value: 'switch',
 						type: 'switch',
+						repeat: true,
 						operator: '='
 					},
 					{
@@ -158,6 +159,16 @@
 						label: '日期范围',
 						value: 'date2',
 						type: 'daterange'
+					},
+					{
+						label: '自定义日期',
+						value: 'date3',
+						type: 'customDate',
+						placeholder: '请选择月份',
+						extend: {
+							dateType: 'month',
+							valueFormat: 'YYYY-MM'
+						}
 					}
 				]
 			}