筛选

src/components/scFilterBar/index.vue

@@ -34,23 +34,24 @@
 					</colgroup>
 					<tr v-for="(item,index) in filter" :key="index">
 						<td>
-							<el-tag :disable-transitions="true">{{index+1}}</el-tag>
+							<el-tag :disable-transitions="true" type="info">{{index+1}}</el-tag>
 						</td>
 						<td>
-							<el-icon v-if="!item.field.selected" class="del" @click="delFilter(index, item)" style="border: 1px solid #e6e6e6;">
+							<el-icon v-if="!item.selected" class="del" @click="delFilter(index, item)" style="border: 1px solid #e6e6e6;">
 								<el-icon-delete />
 							</el-icon>
 						</td>
 						<td>
-							<py-select v-model="item.field" :options="fields" :filter="filter" placeholder="过滤字段" filterable @change="fieldChange(item)">
+							<el-select v-model="item.value" @change="fieldChange(item, index)" :disabled="item.selected">
-							</py-select>
+								<el-option v-for="field in optionsList" :key="field.name" :label="field.label" :value="field.name" :disabled="isDisabled(field.name)"> </el-option>
+							</el-select>
 						</td>
 						<td>
-							<x-item v-model="data" :item="item.field"></x-item>
+							<x-item v-model="data" :item="item"></x-item>
 						</td>
-						<td v-if="item.field.operators">
+						<td v-if="item.operators">
-							<el-select v-model="item.field.operator" placeholder="运算符">
+							<el-select v-model="item.operator" placeholder="运算符">
-								<el-option v-for="ope in item.field.operators || operator" :key="ope.value" v-bind="ope"></el-option>
+								<el-option v-for="ope in item.operators || operator" :key="ope.value" v-bind="ope"></el-option>
 							</el-select>
 						</td>
 					</tr>
@@ -69,54 +70,13 @@
 	</el-dialog> 
 </template>
 
-<style>
-.tabs-label {padding:0 20px;}
-
-.dialogClass .el-dialog__body {
-  	margin: 10px 20px;
-   	padding: 0;
-}
-.dialogClass .el-dialog__footer {
-  text-align: right;
-}
-
-	.nodata {height:46px;line-height: 46px;margin:15px 0;border: 1px dashed #e6e6e6;color: #999;text-align: center;border-radius: 3px;}
-
-	.sc-filter-main {background: #fff; padding-top: 0px}
-	.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
-	.sc-filter-main table {width: 100%;margin: 10px 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%;}
-
-
-
-	.dark .root:deep(.el-tabs__content) {background: var(--el-bg-color-overlay);}
-	.dark .sc-filter-main {background: var(--el-bg-color);border-color:var(--el-border-color-light);}
-	.dark .sc-filter-main table td .del {background: none;}
-	.dark .sc-filter-main table td .del:hover {background: #F56C6C;}
-	.dark .nodata {border-color:var(--el-border-color-light);}
-</style>
-
-
 <script>
 	import config from "@/config/filterBar"
-	import pySelect from './pySelect'
 	import my from './my'
 
 	export default {
 		name: 'filterBar',
 		components: {
-			pySelect,
 			my
 		},
 		props: {
@@ -134,9 +94,11 @@
 				myFilter: [],
 				fieldTop: [],
 				defaultValue: Object.assign({}, this.modelValue),
+				defaultField: [].concat(this.options),
 				filterObjLength: 0,
 				saveLoading: false,
 				data: this.modelValue,
+				optionsList: [],
 			}
 		},
 		watch:{
@@ -148,14 +110,17 @@
 			filterObj(){
 				const obj = {}
 				this.filter.forEach((item) => {
-					if (!this.data[item.field.name] || this.data[item.field.name] == '') {
+					if (!this.data[item.name] || this.data[item.name] == '') {
 					  return; // 跳过当前迭代，继续下一次迭代
 					}
-					obj[item.field.name] = item.field.operator ? this.data[item.field.name]+`${config.separator}${item.field.operator}` : this.data[item.field.name]
+					if (item.options && item.options.items && item.options.items.length>0) {
+						const foundItem = item.options.items.find(o => o.value === this.data[item.name]);
+						if (foundItem?.operator) {
+							item.operator = foundItem.operator;
+						}
+					}
+					obj[item.name] = item.operator ? this.data[item.name]+`${config.separator}${item.operator}` : this.data[item.name]
 				})
-
-				console.log(obj, this.defaultValue, this.data)
-
 				return obj
 			}
 		},
@@ -164,13 +129,24 @@
 			this.fields.forEach((item) => {
 				if(item.selected){
 					this.fieldTop.push(item)
-					this.filter.push({
+					item.value = item.name;
-						field: item,
+					this.filter.push(item)
-					})
 				}
 			})
+			this.optionsList = [].concat(this.fields);
 		},
 		methods: {
+			fieldChange(o, index){
+				const foundObject = this.defaultField.find(obj => obj.name === o.value);
+				this.data[o.name] = '';
+				this.filter[index] = Object.assign(foundObject, {value:o.value});
+			},
+			isDisabled(key){
+				if(this.filter.some(item => item.name === key && !item.repeat)){
+					return true
+				}
+				return false
+			},
 			//打开过滤器
 			openFilter(){
 				this.dialog = true
@@ -178,24 +154,19 @@
 			//增加过滤项
 			addFilter(){
 				//下一组新增过滤
-				var filterArr = this.fields.filter(field => !this.filter.some(item => field.name == item.field.name && !item.field.repeat))
+				var filterArr = this.fields.filter(field => !this.filter.some(item => field.name == item.name && !item.repeat))
 				if(this.fields.length<=0 || filterArr.length<=0){
 					this.$message.warning('无过滤项了');
 					return false
 				}
 				const filterNum = filterArr[0]
-				this.filter.push({
+				filterNum.value = filterNum.name;
-					field: filterNum,
+				this.filter.push(filterNum)
-				})
 			},
 			//删除过滤项
 			delFilter(index, o){
 				this.filter.splice(index, 1)
-				this.data[o.field.name] = '';
+				this.data[o.name] = '';
-			},
-			//过滤项字段变更事件
-			fieldChange(tr){
-				console.log(tr)
 			},
 			//立即过滤
 			ok(){
@@ -218,18 +189,16 @@
 				this.fields.forEach((field) => {
 					var filterValue = item.filterObj[field.value]
 					if(filterValue){
-						var operator = filterValue.split("|")[1]
+						field.operator = filterValue.split("|")[1]
 						var value = filterValue.split("|")[0]
 						if(field.component=='select' && field.options.multiple){
 							value = value.split(",")
 						}else if(field.component=='daterange'){
 							value = value.split(",")
 						}
-						this.filter.push({
+
-							field: field,
+						this.data[field.name] = value;
-							operator: operator,
+						this.filter.push(field)
-							value:  value
-						})
 					}
 				})
 				this.filterObjLength = Object.keys(item.filterObj).length
@@ -271,3 +240,39 @@
 		}
 	}
 </script>
+
+<style>
+	.tabs-label {padding:0 20px;}
+
+	.dialogClass .el-dialog__body {
+	  	margin: 10px 20px;
+	   	padding: 0;
+	}
+	.dialogClass .el-dialog__footer {
+	  text-align: right;
+	}
+	.nodata {height:46px;line-height: 46px;margin:15px 0;border: 1px dashed #e6e6e6;color: #999;text-align: center;border-radius: 3px;}
+	.sc-filter-main {background: #fff; padding-top: 0px}
+	.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
+	.sc-filter-main table {width: 100%;margin: 10px 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%;}
+
+
+
+	.dark .root:deep(.el-tabs__content) {background: var(--el-bg-color-overlay);}
+	.dark .sc-filter-main {background: var(--el-bg-color);border-color:var(--el-border-color-light);}
+	.dark .sc-filter-main table td .del {background: none;}
+	.dark .sc-filter-main table td .del:hover {background: #F56C6C;}
+	.dark .nodata {border-color:var(--el-border-color-light);}
+</style>

src/components/scFilterBar/pySelect.vue

@@ -1,54 +0,0 @@
-<!--
- * @Descripttion: 二次封装el-select 支持拼音
- * @version: 1.0
--->
-
-<template>
-	<el-select ref="select" v-bind="$attrs" :filter-method="filterMethod" @visible-change="visibleChange" :disabled="$attrs.modelValue.selected">
-		<el-option v-for="field in optionsList" :key="field.name" :label="field" :value="field" :disabled="isDisabled(field.name)"> </el-option>
-	</el-select>
-</template>
-
-<script>
-	import pinyin from './pinyin'
-
-	export default {
-		props: {
-			options: { type: Array, default: () => [] },
-			filter: { type: Array, default: () => [] }
-		},
-		data() {
-			return {
-				optionsList: [],
-				optionsList_: []
-			}
-		},
-		mounted() {
-			this.optionsList = this.options
-			this.optionsList_ = [...this.options]
-		},
-		methods: {
-			filterMethod(keyword){
-				if(keyword){
-					this.optionsList = this.optionsList_
-					this.optionsList = this.optionsList.filter((item) =>
-						pinyin.match(item.label, keyword)
-					);
-				}else{
-					this.optionsList = this.optionsList_
-				}
-			},
-			visibleChange(isopen){
-				if(isopen){
-					this.optionsList = this.optionsList_
-				}
-			},
-			isDisabled(key){
-				if(this.filter.find(item => item.field.name == key && !item.field.repeat)){
-					return true
-				}
-				return false
-			}
-		}
-	}
-</script>