优化用户、动物搜索功能，实现模糊搜索

src/components/ZooAnimalFormDialog.vue

@@ -84,7 +84,7 @@ export default {
       </el-radio-group>
     </el-form-item>
     <el-form-item label="饲养员ID">
-      <el-input v-model="form.roleId" placeholder="饲养员ID"/>
+      <el-input v-model="form.roleId" type="number" placeholder="饲养员ID"/>
     </el-form-item>
     <el-form-item label="动物颜色">
         <el-color-picker v-model="form.color" />

src/pages/ZooAnimal.vue

@@ -1,6 +1,6 @@
 <script>
-import {copy} from "@/utils/common.js";
+import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
-import {Delete, DocumentAdd, Edit} from "@element-plus/icons-vue";
+import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
 import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
 import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
 
@@ -9,11 +9,11 @@ export default {
   components: {ZooAnimalFormDialog, ZooUserFormDialog},
   data() {
     return {
-      animals:[],
+      animals: [],
-      tableData:[],
+      tableData: [],
       searchInput: {
-        // auth: '',
+        state: '',//状态（0正常 1异常）
-        // keyWord: ''
+        keyword: ''
       },
       dialog: {
         addDialogVisible: false,//添加动物对话框
@@ -23,6 +23,11 @@ export default {
     }
   },
   computed: {
+    //图标
+    //region
+    Search() {
+      return Search
+    },
     DocumentAdd() {
       return DocumentAdd
     },
@@ -32,6 +37,7 @@ export default {
     Delete() {
       return Delete
     },
+    //endregion
     // dataFilters() {
     //   // 计算格式化后的数组
     //   let data = copy(this.tableData)
@@ -45,6 +51,14 @@ export default {
     //   return data
     // },
   },
+  watch: {
+    searchInput: {
+      deep: true,
+      handler(val) {
+        this.searchAnimal();
+      }
+    }
+  },
   methods: {
     showEditDialog(animal) {
       //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
@@ -88,7 +102,7 @@ export default {
       console.log('删除动物', animal)
       return ElMessageBox.confirm(
           '该操作不可撤销，是否继续？',
-          '删除动物：'+animal.name,
+          '删除动物：' + animal.name,
           {
             confirmButtonText: '确定',
             cancelButtonText: '取消',
@@ -130,27 +144,38 @@ export default {
       this.dialog.addDialogVisible = false//添加成功关闭窗口
 
     },
-    // searchUser() {
+    searchAnimal() {
-    //   console.log('搜索用户', this.searchInput)
+      console.log('动物搜索',this.searchInput)
-    //   let searchResult = []
+      let searchResult = []//搜索结果数组
-    //   this.users.forEach(e => {
+      //第一步匹配搜索选项，如果选择了特定用户身份
-    //     if (e.username.includes(this.searchInput.keyWord)) {
+      if (typeof this.searchInput.state ==='number') {
-    //       searchResult.push(this.copy(e))
+        this.animals.forEach(e=>{
-    //     }
+          if (e.state === this.searchInput.state) {
-    //   })
+            searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
-    //   let searchResult2 = []
+          }
-    //   console.log('this.searchInput.auth', this.searchInput.auth, typeof this.searchInput.auth == 'number')
+        })
-    //   if (typeof this.searchInput.auth === 'number') {
+      }
-    //     searchResult.forEach(e => {
+      else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
-    //       if (e.auth === this.searchInput.auth) {
+        searchResult = copy(this.animals)
-    //         searchResult2.push(this.copy(e))
+      }
-    //       }
-    //     })
-    //     searchResult = searchResult2
-    //   }
-    //   this.tableData = searchResult;
-    // },
 
+      let searchResult2 = []
+      let keyset = splitKeyWords(this.searchInput.keyword)//切割关键字
+
+      //第二步进行模糊搜索
+      searchResult.forEach(e=>{
+        //如果该对象能匹配上所有关键字，则添加到结果
+        // console.log('开始进行模糊匹配,对象、关键字集合分别为',e,keyset)
+        let is = fuzzyMatching(e,keyset);
+        if (is) {
+          searchResult2.push(e)
+        }
+        // console.log('结束模糊匹配，结果为',e,keyset,is)
+      })
+      searchResult = searchResult2
+
+      this.tableData = searchResult
+    },
   },
   mounted() {
     //数据生成器
@@ -182,33 +207,32 @@ export default {
         <el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加动物</el-button>
       </div>
       <div class="right">
-<!--        <el-input-->
+        <el-input
-<!--            v-model="searchInput.keyWord"-->
+            v-model="searchInput.keyword"
-<!--            style="max-width: 300px"-->
+            style="max-width: 300px"
-<!--            placeholder="搜索用户"-->
+            placeholder="搜索动物 空格隔开关键字"
-<!--        >-->
+        >
-<!--          <template #prepend>-->
+          <template #prepend>
-<!--            <el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">-->
+            <el-select v-model="searchInput.state" placeholder="状态" style="width: 80px">
-<!--              <el-option label="不选择" value=""/>-->
+              <el-option label="不选择" value=""/>
-<!--              <el-option label="管理员" :value="0"/>-->
+              <el-option label="正常" :value="0"/>
-<!--              <el-option label="饲养员" :value="1"/>-->
+              <el-option label="异常" :value="1"/>
-<!--              <el-option label="兽医" :value="2"/>-->
+            </el-select>
-<!--            </el-select>-->
+          </template>
-<!--          </template>-->
+          <template #append>
-<!--          <template #append>-->
+            <el-button :icon="Search" @click="searchAnimal()"/>
-<!--            <el-button :icon="Search" @click="searchUser()"/>-->
+          </template>
-<!--          </template>-->
+        </el-input>
-<!--        </el-input>-->
       </div>
     </div>
 
     <!--    <hr/>-->
     <div class="table">
       <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>
-        <el-table-column fixed prop="id" label="动物ID" />
+        <el-table-column fixed prop="id" label="动物ID"/>
-        <el-table-column fixed prop="name" label="动物名称" width="100" />
+        <el-table-column fixed prop="name" label="动物名称" width="100"/>
         <el-table-column prop="sex" label="性别"/>
-        <el-table-column prop="species" label="动物种类" width="90" />
+        <el-table-column prop="species" label="动物种类" width="90"/>
         <el-table-column prop="weight" label="动物体重（KG）" width="130"/>
         <el-table-column prop="height" label="动物身高（M）" width="130"/>
         <el-table-column prop="state" label="动物状态" width="90">

src/pages/ZooUser.vue

@@ -1,7 +1,7 @@
 <script>
 import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
 import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
-import {copy} from "@/utils/common.js";
+import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
 
 
 export default {
@@ -57,7 +57,7 @@ export default {
       tableData: [],//用来显示在界面的数据
       searchInput: {
         auth: '',
-        keyWord: ''
+        keyword: ''
       },
       dialog: {
         addDialogVisible: false,//添加用户对话框
@@ -154,24 +154,36 @@ export default {
 
     },
     searchUser() {
-      console.log('搜索用户', this.searchInput)
+      console.log('用户搜索',this.searchInput)
-      let searchResult = []
+      let searchResult = []//搜索结果数组
-      this.users.forEach(e => {
+      //第一步匹配搜索选项，如果选择了特定用户身份
-        if (e.username.includes(this.searchInput.keyWord)) {
+      if (typeof this.searchInput.auth ==='number') {
-          searchResult.push(copy(e))
+        this.users.forEach(e=>{
-        }
-      })
-      let searchResult2 = []
-      console.log('this.searchInput.auth', this.searchInput.auth, typeof this.searchInput.auth == 'number')
-      if (typeof this.searchInput.auth === 'number') {
-        searchResult.forEach(e => {
           if (e.auth === this.searchInput.auth) {
-            searchResult2.push(copy(e))
+            searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
           }
         })
-        searchResult = searchResult2
       }
-      this.tableData = searchResult;
+      else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
+        searchResult = copy(this.users)
+      }
+
+      let searchResult2 = []
+      let keyset = splitKeyWords(this.searchInput.keyword)//切割关键字
+
+      //第二步进行模糊搜索
+      searchResult.forEach(e=>{
+        //如果该对象能匹配上所有关键字，则添加到结果
+        // console.log('开始进行模糊匹配,对象、关键字集合分别为',e,keyset)
+        let is = fuzzyMatching(e,keyset);
+        if (is) {
+          searchResult2.push(e)
+        }
+        // console.log('结束模糊匹配，结果为',e,keyset,is)
+      })
+      searchResult = searchResult2
+
+      this.tableData = searchResult
     },
     //鼠标悬浮显示密码
     showPassword(event,password){
@@ -206,7 +218,7 @@ export default {
       </div>
       <div class="right">
         <el-input
-            v-model="searchInput.keyWord"
+            v-model="searchInput.keyword"
             style="max-width: 300px"
             placeholder="搜索用户"
         >

src/utils/common.js

@@ -1,6 +1,35 @@
-
 //深拷贝任何值
 export function copy(value) {
     let result = JSON.stringify(value)
     return JSON.parse(result)
+}
+
+//分割字符串
+export function splitKeyWords(keyword) {
+    let keyset = keyword.split(' ')//提取关键字
+    keyset = Array.from(new Set(keyset))//关键字去重
+    console.log('切割去重好的关键字', keyset)
+
+    return keyset;
+}
+
+//模糊匹配，传入一个包含多个关键字的数组、一个对象，若匹配则true
+export function fuzzyMatching(object, keyset) {
+    //一个对象的所有属性能匹配所有关键字就返回true，every():遇到false就返回false，所有true就返回true
+    return keyset.every(key => {
+        return keywordMatching(object, key)
+    })
+}
+
+//传入一个关键字，一个对象，只有关键字能匹配对象的某个属性，则true
+function keywordMatching(object, keyword) {
+    //该关键字为空，肯定能匹配上
+    if (keyword === '') {
+        console.log('keywordMatching关键字为空', object, keyword, true)
+        return true
+    }
+    //只要对象的任意属性能匹配一次关键字就返回true，some():遇到true就返回true，所有false就返回false
+    return Object.keys(object).some(key => {
+        return (object[key] + '').includes(keyword)
+    })
 }