feat: 实现KAM mapping的筛选功能

src/views/Layout/src/components/Header/components/KAMMapping.vue

@@ -3,6 +3,7 @@ const customer = ref('')
 const isShowMapping = ref(true)
 const visible = ref(false)
 const myPopover = ref()
+const customerSearchQuery = ref('')
 
 const customerList = ref([
   'alice@dummy customer.com',
@@ -10,7 +11,13 @@ const customerList = ref([
   'charlie@dummy customer.com',
   'dave@dummy customer.com'
 ])
+const showCustomerList = ref(customerList.value)
 
+const filterCustomer = (query: string) => {
+  showCustomerList.value = customerList.value.filter((item) => {
+    return item.includes(query)
+  })
+}
 const changeShowMapping = () => {
   customer.value = ''
 }
@@ -48,7 +55,12 @@ const changeCustomer = (cust: string) => {
           <span class="font_family icon-icon_dropdown_b"></span></div
       ></template>
       <div style="padding: 8px">
-        <el-input class="customer-input" placeholder="Search customer">
+        <el-input
+          v-model="customerSearchQuery"
+          @input="filterCustomer"
+          class="customer-input"
+          placeholder="Search customer"
+        >
           <template #suffix>
             <span class="font_family icon-icon_search_b"></span>
           </template>
@@ -56,7 +68,7 @@ const changeCustomer = (cust: string) => {
         <div class="select-customer-list">
           <div
             class="customer-item"
-            v-for="cust in customerList"
+            v-for="cust in showCustomerList"
             :key="cust"
             @click="changeCustomer(cust)"
           >