kxq/zoo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初步完成动物管理的动物添加、删除功能

Browse Source
This commit is contained in:
bicey 2024-05-18 17:59:23 +08:00
parent ed3c4d4a7c
commit 7d209d3fbb
4 changed files with 276 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/ZooAnimalFormDialog.vue
View File

@ -1,11 +1,101 @@
<script>
export default {
name: "ZooAnimalFormDialog"
name: "ZooAnimalFormDialog",
data() {
return {
form:{
id: '',
name: '',
sex: '雄',
species: '',//种类
weight: 0,
height: 0,
state: 0,//状态（0正常 1异常）
roleId: null,//饲养员id
color: '',//颜色
features: '',//特征
habit: ''//生活习性
},
formAction: {
idDisable:false,
}
}
},
props: {
animal: {
type: Object,
}
},
mounted() {
// 如果传入了对象，说明是编辑
if (this.animal) {
this.form = this.animal
this.formAction.idDisable = true
}
},
beforeUnmount() {
console.log('ZooAnimalFormDialog-beforeUnmount',this);
}
}
</script>
<template>
<el-form label-width="auto">
<!-- <div>-->
<!-- animalForm:{-->
<!-- id: '',-->
<!-- name: '',-->
<!-- sex: '雄',-->
<!-- species: '',//种类-->
<!-- weight: 0,-->
<!-- height: 0,-->
<!-- state: 0,//状态（0正常 1异常）-->
<!-- roleId: null,//饲养员id-->
<!-- color: '',//颜色-->
<!-- features: '',//特征-->
<!-- habit: ''//生活习性-->
<!-- }-->
<!-- </div>-->
<el-form-item label="动物ID">
<el-input v-model="form.id" placeholder="请设置动物ID" :disabled="formAction.idDisable"/>
</el-form-item>
<el-form-item label="动物名称">
<el-input v-model="form.name" placeholder="动物名称"/>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="form.sex" placeholder="选择性别">
<el-option label="雄性" value="雄性"/>
<el-option label="雌性" value="雌性"/>
</el-select>
</el-form-item>
<el-form-item label="动物种类">
<el-input v-model="form.species" placeholder="动物种类"/>
</el-form-item>
<el-form-item label="动物体重">
<el-input v-model="form.weight" placeholder="动物体重"/>
</el-form-item>
<el-form-item label="动物身高">
<el-input v-model="form.height" placeholder="动物身高"/>
</el-form-item>
<el-form-item label="动物状态">
<el-input v-model="form.state" placeholder="动物状态"/>
</el-form-item>
<el-form-item label="饲养员ID">
<el-input v-model="form.roleId" placeholder="饲养员ID"/>
</el-form-item>
<el-form-item label="动物颜色">
<el-input v-model="form.color" placeholder="动物颜色"/>
</el-form-item>
<el-form-item label="动物特征">
<el-input v-model="form.features" placeholder="动物特征"/>
</el-form-item>
<el-form-item label="生活习性">
<el-input v-model="form.habit" placeholder="生活习性"/>
</el-form-item>
<div class="right">
<slot :form="form"></slot>
</div>
</el-form>
</template>
<style scoped>

17
src/components/ZooUserFormDialog.vue
View File

@ -3,11 +3,13 @@ export default {
name: "ZooUserFormDialog",
data() {
return {
userForm: {
form: {
username: '',
password: '',
auth: 0,
},
formAction: {
usernameDisable:false,
}
}
},
@ -19,7 +21,8 @@ export default {
mounted() {
// 如果传入了对象，说明是编辑
if (this.user) {
this.userForm = this.user
this.formAction.usernameDisable = true
this.form = this.user
}
},
beforeUnmount() {
@ -31,25 +34,25 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="用户名">
<el-input v-model="userForm.username" autocomplete="off" placeholder="请设置用户名"/>
<el-input v-model="form.username" placeholder="请设置用户名" :disabled="formAction.usernameDisable"/>
</el-form-item>
<el-form-item label="密码">
<el-input
v-model="userForm.password"
v-model="form.password"
type="password"
placeholder="请设置登录密码"
show-password
/>
</el-form-item>
<el-form-item label="身份">
<el-select v-model="userForm.auth" placeholder="选择身份">
<el-select v-model="form.auth" placeholder="选择身份">
<el-option label="管理员" :value="0"/>
<el-option label="饲养员" :value="1"/>
<el-option label="兽医" :value="2"/>
</el-select>
</el-form-item>
<div class="right">
<slot :form="userForm"></slot>
<slot :form="form"></slot>
</div>
</el-form>
</template>

166
src/pages/ZooAnimal.vue
View File

@ -1,15 +1,37 @@
<script>
import {copy} from "@/utils/common.js";
import {Delete, DocumentAdd, Edit} 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:[]
tableData:[],
searchInput: {
// auth: '',
// keyWord: ''
},
dialog: {
addDialogVisible: false,//添加动物对话框
editDialogVisible: false,//编辑用户对话框
editData: {}
}
}
},
computed: {
DocumentAdd() {
return DocumentAdd
},
Edit() {
return Edit
},
Delete() {
return Delete
},
dataFilters() {
// 计算格式化后的数组
// let data = copy(this.tableData)
@ -24,7 +46,114 @@ export default {
// })
// return data
return this.tableData
}
},
},
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//添加成功关闭窗口
},
// 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;
// },
},
mounted() {
//数据生成器
@ -32,7 +161,7 @@ export default {
let animal = {
id: i,
name: 'animal' + (i + 3),
sex: Math.floor(Math.random() * 2) === 0 ? '雌' : '雄',
sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
species: Math.floor(Math.random() * 10).toString(),//种类
weight: (Math.random() * 2000).toFixed(2),
height: (Math.random() * 10).toFixed(2),
@ -53,7 +182,7 @@ export default {
<div class="animals-root">
<div class="select">
<div class="left">
<!-- <el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">创建用户</el-button>-->
<el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加动物</el-button>
</div>
<div class="right">
<!-- <el-input-->
@ -103,6 +232,35 @@ export default {
</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>

22
src/pages/ZooUser.vue
View File

@ -59,7 +59,7 @@ export default {
dialog: {
addDialogVisible: false,//添加用户对话框
editDialogVisible: false,//编辑用户对话框
editUser: {}
editData: {}
}
}
},
@ -67,8 +67,8 @@ export default {
showEditDialog(user) {
// console.log('点击了编辑',user)
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
this.dialog.editUser = this.users.find(e => e.username === user.username)
console.log('点击了编辑', this.dialog.editUser)
this.dialog.editData = this.users.find(e => e.username === user.username)
console.log('点击了编辑', this.dialog.editData)
this.dialog.editDialogVisible = true
},
// 判断表单是否为空
@ -103,7 +103,9 @@ export default {
this.dialog.editDialogVisible = false//添加成功关闭窗口
},
deleteUser(user) {
console.log('确认删除用户', user)
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
user = this.users.find(e => e.username === user.username)
console.log('删除用户', user)
return ElMessageBox.confirm(
'该操作不可撤销，是否继续？',
'删除用户：'+user.username,
@ -236,12 +238,12 @@ export default {
<!-- 添加用户对话框-->
<el-dialog v-model="dialog.addDialogVisible" title="添加用户" width="400" align-center draggable overflow>
<ZooUserFormDialog class="dialog-form">
<template #default="form">
<ZooUserFormDialog>
<template #default="scope">
<el-button @click="dialog.addDialogVisible = false">
取消
</el-button>
<el-button type="primary" @click="addUser(form)">
<el-button type="primary" @click="addUser(scope.form)">
添加
</el-button>
</template>
@ -251,12 +253,12 @@ export default {
<!-- 编辑用户对话框-->
<el-dialog v-model="dialog.editDialogVisible" title="编辑用户" width="400" align-center draggable overflow
destroy-on-close>
<ZooUserFormDialog :user="dialog.editUser">
<template #default="form">
<ZooUserFormDialog :user="dialog.editData">
<template #default="scope">
<el-button @click="dialog.editDialogVisible = false">
取消
</el-button>
<el-button type="primary" @click="editUser(form)">
<el-button type="primary" @click="editUser(scope.form)">
修改
</el-button>
</template>