优化用户、动物搜索功能，实现模糊搜索
This commit is contained in:
bicey
parent
efbfd6848e
commit
4d493f1f2e
@ -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" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import {copy} from "@/utils/common.js";
|
||||
import {Delete, DocumentAdd, Edit} from "@element-plus/icons-vue";
|
||||
import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
|
||||
import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
|
||||
import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
|
||||
import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
|
||||
|
||||
@ -12,8 +12,8 @@ export default {
|
||||
animals: [],
|
||||
tableData: [],
|
||||
searchInput: {
|
||||
// auth: '',
|
||||
// keyWord: ''
|
||||
state: '',//状态（0正常 1异常）
|
||||
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查询后端的特定动物再赋值，这里用假数据代替一下
|
||||
@ -130,27 +144,38 @@ export default {
|
||||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||||
|
||||
},
|
||||
// searchUser() {
|
||||
// console.log('搜索用户', this.searchInput)
|
||||
// let searchResult = []
|
||||
// this.users.forEach(e => {
|
||||
// if (e.username.includes(this.searchInput.keyWord)) {
|
||||
// searchResult.push(this.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 => {
|
||||
// if (e.auth === this.searchInput.auth) {
|
||||
// searchResult2.push(this.copy(e))
|
||||
// }
|
||||
// })
|
||||
// searchResult = searchResult2
|
||||
// }
|
||||
// this.tableData = searchResult;
|
||||
// },
|
||||
searchAnimal() {
|
||||
console.log('动物搜索',this.searchInput)
|
||||
let searchResult = []//搜索结果数组
|
||||
//第一步匹配搜索选项，如果选择了特定用户身份
|
||||
if (typeof this.searchInput.state ==='number') {
|
||||
this.animals.forEach(e=>{
|
||||
if (e.state === this.searchInput.state) {
|
||||
searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
|
||||
}
|
||||
})
|
||||
}
|
||||
else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
|
||||
searchResult = copy(this.animals)
|
||||
}
|
||||
|
||||
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,23 +207,22 @@ export default {
|
||||
<el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加动物</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="searchInput.keyWord"-->
|
||||
<!-- style="max-width: 300px"-->
|
||||
<!-- placeholder="搜索用户"-->
|
||||
<!-- >-->
|
||||
<!-- <template #prepend>-->
|
||||
<!-- <el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">-->
|
||||
<!-- <el-option label="不选择" value=""/>-->
|
||||
<!-- <el-option label="管理员" :value="0"/>-->
|
||||
<!-- <el-option label="饲养员" :value="1"/>-->
|
||||
<!-- <el-option label="兽医" :value="2"/>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template #append>-->
|
||||
<!-- <el-button :icon="Search" @click="searchUser()"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-input>-->
|
||||
<el-input
|
||||
v-model="searchInput.keyword"
|
||||
style="max-width: 300px"
|
||||
placeholder="搜索动物 空格隔开关键字"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="searchInput.state" placeholder="状态" style="width: 80px">
|
||||
<el-option label="不选择" value=""/>
|
||||
<el-option label="正常" :value="0"/>
|
||||
<el-option label="异常" :value="1"/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="searchAnimal()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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)
|
||||
let searchResult = []
|
||||
console.log('用户搜索',this.searchInput)
|
||||
let searchResult = []//搜索结果数组
|
||||
//第一步匹配搜索选项，如果选择了特定用户身份
|
||||
if (typeof this.searchInput.auth ==='number') {
|
||||
this.users.forEach(e=>{
|
||||
if (e.username.includes(this.searchInput.keyWord)) {
|
||||
searchResult.push(copy(e))
|
||||
if (e.auth === this.searchInput.auth) {
|
||||
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 => {
|
||||
if (e.auth === this.searchInput.auth) {
|
||||
searchResult2.push(copy(e))
|
||||
}
|
||||
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;
|
||||
|
||||
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="搜索用户"
|
||||
>
|
||||
|
||||
@ -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)
|
||||
})
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user