From 7e7e7ed0b5c4dc5640577ebc6f09ebf8e8a7fdae Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Sat, 31 Jul 2021 23:29:53 +0800
Subject: [PATCH] =?UTF-8?q?scFilterBar=20=E5=AD=97=E6=AE=B5=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=85=A8=E6=8B=BC=EF=BC=8C=E9=A6=96=E5=AD=97=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/scFilterBar/index.vue          |  7 +--
 .../scFilterBar}/pinyin.js                    |  0
 src/components/scFilterBar/pySelect.vue       | 51 +++++++++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)
 rename src/{utils => components/scFilterBar}/pinyin.js (100%)
 create mode 100644 src/components/scFilterBar/pySelect.vue

diff --git a/src/components/scFilterBar/index.vue b/src/components/scFilterBar/index.vue
index 4147d0d6..4faa8f15 100644
--- a/src/components/scFilterBar/index.vue
+++ b/src/components/scFilterBar/index.vue
@@ -39,9 +39,8 @@
 												<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>
+												<py-select v-model="item.field" :options="fields" placeholder="过滤字段" filterable @change="fieldChange(item)">
+												</py-select>
 											</td>
 											<td>
 												<el-select v-model="item.operator" placeholder="运算符">
@@ -98,11 +97,13 @@
 
 <script>
 	import config from "@/config/filterBar"
+	import pySelect from './pySelect'
 	import my from './my'
 
 	export default {
 		name: 'filterBar',
 		components: {
+			pySelect,
 			my
 		},
 		props: {
diff --git a/src/utils/pinyin.js b/src/components/scFilterBar/pinyin.js
similarity index 100%
rename from src/utils/pinyin.js
rename to src/components/scFilterBar/pinyin.js
diff --git a/src/components/scFilterBar/pySelect.vue b/src/components/scFilterBar/pySelect.vue
new file mode 100644
index 00000000..bf3274f3
--- /dev/null
+++ b/src/components/scFilterBar/pySelect.vue
@@ -0,0 +1,51 @@
+<!--
+ * @Descripttion: 二次封装el-select 支持拼音
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月31日22:26:56
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<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-select>
+</template>
+
+<script>
+	import pinyin from './pinyin'
+
+	export default {
+		props: {
+			options: { 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_
+				}
+			}
+		}
+	}
+</script>
\ No newline at end of file