搜索业务员时支持回车搜索业务员

src/views/additionalOrder/additional/modules/salesmanSelect.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="salesmanSelect">
     <div class="search">
-      <el-input v-model="searchValue" prefix-icon="Search" placeholder="请输入负责人姓名，手机号查找" clearable @clear="initData" >
-          <template #append>
-              <el-button class="btn" link type="primary" @click="handleSearch">搜索</el-button>
-          </template>
+      <el-input v-model="searchValue" prefix-icon="Search" @change="handleSearch" placeholder="请输入负责人姓名，手机号查找" clearable
+        @clear="initData">
+        <template #append>
+          <el-button class="btn" link type="primary" @click="handleSearch">搜索</el-button>
+        </template>
       </el-input>
     </div>
     <div class="salesman" v-loading="loading">
-      <div class="salesman-item" :class="{'active': item.checked}" v-for="(item, index) in newList" @click="handleSelect(item, index)">
+      <div class="salesman-item" :class="{ 'active': item.checked }" v-for="(item, index) in newList"
+        @click="handleSelect(item, index)">
         <div class="content">
           <div class="name">
             <span class="">{{ item.name }}</span>
@@ -19,7 +21,9 @@
             <el-tag type="primary" size="small" class="ml-10px">{{ typeAttrList[item.typeAttr] }}</el-tag>
           </div>
         </div>
-        <el-icon v-show="item.checked"><Check /></el-icon>
+        <el-icon v-show="item.checked">
+          <Check />
+        </el-icon>
       </div>
     </div>
     <el-divider style="width: 100%"></el-divider>
@@ -32,7 +36,7 @@
 
 <script setup lang="ts">
 
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
 import api from "@/api";
 
 const emits = defineEmits(['close'])
@@ -42,7 +46,7 @@ let searchValue = ref('')
 let list = ref([])
 let newList = ref([])
 const handleSearch = () => {
-    initData()
+  initData()
 }
 
 // 选择
@@ -54,11 +58,11 @@ const handleSelect = (item, index) => {
   checkedItem.value = item
 }
 
-const typeAttrList=ref({
-  '5':'团队',
-  '6':'个代',
-  '7':'渠道',
-  '8':'电销',
+const typeAttrList = ref({
+  '5': '团队',
+  '6': '个代',
+  '7': '渠道',
+  '8': '电销',
 })
 
 // 取消
@@ -67,7 +71,7 @@ const handleCancel = () => {
 }
 // 确定
 const handleConfirm = () => {
-  if(checkedItem.value) {
+  if (checkedItem.value) {
     emits('close', checkedItem.value)
   } else {
     ElMessage({
@@ -83,12 +87,12 @@ const initData = () => {
   api.operationApi.getBaojiaUserInfoList({
     isMember: 2,
     isEnable: 0,
-    salesman:searchValue.value,
-    fromPage:props.fromPage,
+    salesman: searchValue.value,
+    fromPage: props.fromPage,
   }).then((res: any) => {
-    if(res.code == 200) {
-      if(res.data.records) {
-      loading.value = false
+    if (res.code == 200) {
+      if (res.data.records) {
+        loading.value = false
 
         res.data.records.forEach(item => {
           item.checked = false
@@ -120,18 +124,21 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
-.salesmanSelect{
-  .search{
+.salesmanSelect {
+  .search {
     width: 100%;
-    .btn{
+
+    .btn {
       padding: 0 20px;
     }
   }
-  .salesman{
+
+  .salesman {
     max-height: 400px;
     overflow-y: auto;
     margin: 8px 0;
-    .salesman-item{
+
+    .salesman-item {
       height: 64px;
       padding: 8px 12px;
       font-size: 14px;
@@ -139,28 +146,33 @@ onMounted(() => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      .name{
+
+      .name {
         display: flex;
         align-items: center;
         justify-content: flex-start;
         margin-bottom: 8px;
+
         span:nth-child(1) {
           font-size: 16px;
           color: black;
           width: 130px;
         }
       }
-      &:hover{
+
+      &:hover {
         background: #F4FAFF;
         border-radius: 4px;
       }
     }
-    .active{
+
+    .active {
       background: #F4FAFF;
       border-radius: 4px;
     }
   }
-  .footer{
+
+  .footer {
     display: flex;
     align-items: center;
     justify-content: center;