314 lines
9.4 KiB
Vue
314 lines
9.4 KiB
Vue
<script>
|
||
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";
|
||
|
||
export default {
|
||
name: "ZooAnimal",
|
||
components: {ZooAnimalFormDialog, ZooUserFormDialog},
|
||
data() {
|
||
return {
|
||
animals: [],
|
||
tableData: [],
|
||
searchInput: {
|
||
state: '',//状态（0正常 1异常）
|
||
keyword: ''
|
||
},
|
||
dialog: {
|
||
addDialogVisible: false,//添加动物对话框
|
||
editDialogVisible: false,//编辑用户对话框
|
||
editData: {}
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
//图标
|
||
//region
|
||
Search() {
|
||
return Search
|
||
},
|
||
DocumentAdd() {
|
||
return DocumentAdd
|
||
},
|
||
Edit() {
|
||
return Edit
|
||
},
|
||
Delete() {
|
||
return Delete
|
||
},
|
||
//endregion
|
||
// dataFilters() {
|
||
// // 计算格式化后的数组
|
||
// let data = copy(this.tableData)
|
||
// data.forEach(e => {
|
||
// if (e.state === 0) {
|
||
// e.state = '正常'
|
||
// } else if (e.state === 1) {
|
||
// e.state = '异常'
|
||
// }
|
||
// })
|
||
// return data
|
||
// },
|
||
},
|
||
watch: {
|
||
searchInput: {
|
||
deep: true,
|
||
handler(val) {
|
||
this.searchAnimal();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
showEditDialog(animal) {
|
||
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
|
||
this.dialog.editData = this.animals.find(e => e.id === animal.id)
|
||
console.log('点击了编辑', this.dialog.editData)
|
||
this.dialog.editDialogVisible = true
|
||
},
|
||
// 判断表单是否为空
|
||
isEmpty(form) {
|
||
// if (!form.username || !form.password) {
|
||
if (!form.name) {
|
||
//返回提示
|
||
return ElMessage({
|
||
message: '动物名不能为空',
|
||
type: 'warning',
|
||
})
|
||
}
|
||
},
|
||
editAnimal(form) {
|
||
console.log('确认编辑动物', form)
|
||
//判断是否为空
|
||
return this.isEmpty(form);
|
||
//编辑失败
|
||
if (false) {
|
||
return ElMessage({
|
||
message: '编辑失败',
|
||
type: 'warning',
|
||
})
|
||
}
|
||
//编辑成功
|
||
if (false) {
|
||
return ElMessage({
|
||
message: '编辑成功',
|
||
type: 'success',
|
||
})
|
||
}
|
||
// 此处重新拉取数据
|
||
this.dialog.editDialogVisible = false//添加成功关闭窗口
|
||
},
|
||
deleteUser(animal) {
|
||
console.log('删除动物', animal)
|
||
return ElMessageBox.confirm(
|
||
'该操作不可撤销，是否继续？',
|
||
'删除动物：' + animal.name,
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
).then(() => {
|
||
//进行删除操作
|
||
// ……
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '删除成功',
|
||
})
|
||
}).catch(() => {
|
||
ElMessage({
|
||
type: 'info',
|
||
message: '取消删除',
|
||
})
|
||
})
|
||
},
|
||
addAnimal(form) {
|
||
console.log('添加动物', form)
|
||
//验证是否为空
|
||
return this.isEmpty(form);
|
||
//添加失败
|
||
if (false) {
|
||
return ElMessage({
|
||
message: '该动物已存在',
|
||
type: 'warning',
|
||
})
|
||
}
|
||
//添加成功
|
||
if (false) {
|
||
return ElMessage({
|
||
message: '添加成功',
|
||
type: 'success',
|
||
})
|
||
}
|
||
// 此处重新拉取数据
|
||
this.dialog.addDialogVisible = false//添加成功关闭窗口
|
||
|
||
},
|
||
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() {
|
||
//数据生成器
|
||
for (let i = 0; i < 100; i++) {
|
||
let animal = {
|
||
id: i,
|
||
name: 'animal' + (i + 3),
|
||
sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
|
||
species: Math.floor(Math.random() * 10).toString(),//种类
|
||
weight: Number((Math.random() * 2000).toFixed(2)),
|
||
height: Number((Math.random() * 10).toFixed(2)),
|
||
state: Math.floor(Math.random() * 2),//状态（0正常 1异常）
|
||
roleId: Math.floor(Math.random() * 100),//饲养员id
|
||
color: '',//Math.floor(Math.random() * 255),//颜色
|
||
features: Math.floor(Math.random() * 40).toString(),//特征
|
||
habit: Math.floor(Math.random() * 500).toString()//生活习性
|
||
}
|
||
this.animals.push(animal)
|
||
}
|
||
this.tableData = copy(this.animals);//复制一份给表格展示
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="animals-root">
|
||
<div class="select">
|
||
<div class="left">
|
||
<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.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>
|
||
|
||
<!-- <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="name" label="动物名称" width="100"/>
|
||
<el-table-column prop="sex" label="性别"/>
|
||
<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">
|
||
<template #default="scope">
|
||
<span v-if="scope.row.state===0" style="color: green">正常</span>
|
||
<span v-else-if="scope.row.state===1" style="color: red">异常</span>
|
||
<span v-else>未知</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="roleId" label="饲养员ID" width="120"/>
|
||
<el-table-column prop="color" label="动物颜色" width="90"/>
|
||
<el-table-column prop="features" label="动物特征" width="100"/>
|
||
<el-table-column prop="habit" label="生活习性" width="100"/>
|
||
<el-table-column fixed="right" label="操作" width="130">
|
||
<template #default="scope">
|
||
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
|
||
编辑
|
||
</el-button>
|
||
<el-button link type="danger" size="small" :icon="Delete" @click="deleteUser(scope.row)">
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加动物对话框-->
|
||
<el-dialog v-model="dialog.addDialogVisible" title="添加动物" width="500" align-center draggable overflow>
|
||
<ZooAnimalFormDialog>
|
||
<template #default="scope">
|
||
<el-button @click="dialog.addDialogVisible = false">
|
||
取消
|
||
</el-button>
|
||
<el-button type="primary" @click="addAnimal(scope.form)">
|
||
添加
|
||
</el-button>
|
||
</template>
|
||
</ZooAnimalFormDialog>
|
||
</el-dialog>
|
||
|
||
<!-- 编辑动物对话框-->
|
||
<el-dialog v-model="dialog.editDialogVisible" title="编辑动物" width="500" align-center draggable overflow
|
||
destroy-on-close>
|
||
<ZooAnimalFormDialog :animal="dialog.editData">
|
||
<template #default="scope">
|
||
<el-button @click="dialog.editDialogVisible = false">
|
||
取消
|
||
</el-button>
|
||
<el-button type="primary" @click="editAnimal(scope.form)">
|
||
修改
|
||
</el-button>
|
||
</template>
|
||
</ZooAnimalFormDialog>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.table {
|
||
/*width: 1300px;*/
|
||
height: 516px;
|
||
margin: 0 30px;
|
||
}
|
||
|
||
.left {
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.right {
|
||
margin-right: 30px;
|
||
}
|
||
|
||
|
||
.select {
|
||
width: 100%;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
}
|
||
</style> |