Ver código fonte

feat: PC远程搜索输入框关键字高亮

zhangying 11 meses atrás
pai
commit
d07fd20e97

+ 15 - 2
vue/src/views/companyService/company/edit.vue

@@ -23,6 +23,9 @@
               @select="normalFirm"
               @search="likeFindFirm"
             >
+              <template #option="item">
+                <span v-html="formatStr(item.firmName)"></span>
+              </template>
             </a-auto-complete>
             <a-button v-if="operationType == 'add'" :loading="normalBtnLoading" style="margin-left: 10px"
                       :disabled="!dataModel.companyName"
@@ -724,7 +727,7 @@ export default defineComponent(
             }
           })
         }
-      }, 200)
+      }, 500)
 
       function workSituationChange() {
         if (formState.dataModel.workSituation) {
@@ -738,6 +741,15 @@ export default defineComponent(
         }
       }
 
+      // 名称搜索关键字高亮
+      const formatStr = (str: any) => {
+        if (!str) {
+          return "";
+        }
+
+        return str.replace(formState.dataModel.companyName, '<span style="color: coral">' + formState.dataModel.companyName + '</span>');
+      }
+
       return {
         ...toRefs(formState),
         loadData,
@@ -771,7 +783,8 @@ export default defineComponent(
         firmNameFetching,
         firmList,
         workSituationChange,
-        insuredCountChange
+        insuredCountChange,
+        formatStr
       }
     },
     mounted() {

+ 11 - 3
vue/src/views/companyService/post/edit.vue

@@ -29,9 +29,7 @@
                           }"
             >
               <template #option="item">
-                <span>
-                  {{ item.professionName }}({{ item.parentProfessionName }})
-                </span>
+                <span v-html="formatStr(item.professionName)"></span>({{ item.parentProfessionName }})
               </template>
             </a-auto-complete>
           </a-form-item>
@@ -617,6 +615,15 @@ export default defineComponent(
         }
       }
 
+      // 名称搜索关键字高亮
+      const formatStr = (str: any) => {
+        if (!str) {
+          return "";
+        }
+
+        return str.replace(postCompany.dataModel.professionName, '<span style="color: coral">' + postCompany.dataModel.professionName + '</span>');
+      }
+
       return {
         ...toRefs(postCompany),
         onJobFindDateChange,
@@ -648,6 +655,7 @@ export default defineComponent(
         recruitCountChange,
         professionList,
         selectProfessionList,
+        formatStr
       }
     },
     created() {