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-20 18:25:49 +08:00
parent cfb6e87767
commit 3b8c824f43
9 changed files with 162 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@ -145,12 +145,14 @@ breedingPlan: {
后端添加该对象并返回操作结果
## 档案管理
---
## 健康检测
---
## 统计分析
---
# 开发进度
@ -168,7 +170,7 @@ breedingPlan: {
- [x] 基本界面
- [x] 基本方法
- [ ] 优化界面样式
- [x] 优化界面样式
### aside
@ -179,7 +181,7 @@ breedingPlan: {
### footer
- [x] 基本界面
- [ ] 优化界面样式
- [x] 优化界面样式
### main
@ -199,8 +201,8 @@ breedingPlan: {
### 饲养员
- [x] 数据展示
- [ ] 基本功能
- [ ] 基本方法
- [x] 基本功能
- [x] 基本方法
- [ ] 接入后端
### 兽医

26
src/components/ZooAnimalFormDialog.vue
View File

@ -24,6 +24,10 @@ export default {
props: {
animal: {
type: Object,
},
detail:{
type: Boolean,
default: false
}
},
mounted() {
@ -57,43 +61,43 @@ export default {
<!-- }-->
<!-- </div>-->
<el-form-item label="动物ID">
<el-input v-model="form.id" placeholder="请设置动物ID" type="number" :disabled="formAction.idDisable"/>
<el-input v-model="form.id" placeholder="请设置动物ID" type="number" :disabled="formAction.idDisable || detail"/>
</el-form-item>
<el-form-item label="动物名称">
<el-input v-model="form.name" placeholder="动物名称"/>
<el-input v-model="form.name" placeholder="动物名称" :disabled="detail"/>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio-group v-model="form.sex" :disabled="detail">
<el-radio value="雄性">雄性</el-radio>
<el-radio value="雌性">雌性</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="动物种类">
<el-input v-model="form.species" placeholder="动物种类"/>
<el-input v-model="form.species" placeholder="动物种类" :disabled="detail"/>
</el-form-item>
<el-form-item label="动物体重（KG）">
<el-input-number v-model="form.weight" :precision="2" :step="0.1" :min="0" />
<el-input-number v-model="form.weight" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
</el-form-item>
<el-form-item label="动物身高（M）">
<el-input-number v-model="form.height" :precision="2" :step="0.1" :min="0" />
<el-input-number v-model="form.height" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
</el-form-item>
<el-form-item label="动物状态">
<el-radio-group v-model="form.state">
<el-radio-group v-model="form.state" :disabled="detail">
<el-radio :value="0">正常</el-radio>
<el-radio :value="1">异常</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="饲养员ID">
<el-input v-model="form.roleId" type="number" placeholder="饲养员ID"/>
<el-input v-model="form.roleId" type="number" placeholder="饲养员ID" :disabled="detail"/>
</el-form-item>
<el-form-item label="动物颜色">
<el-color-picker v-model="form.color" />
<el-color-picker v-model="form.color" :disabled="detail"/>
</el-form-item>
<el-form-item label="动物特征">
<el-input v-model="form.features" placeholder="动物特征"/>
<el-input v-model="form.features" placeholder="动物特征" :disabled="detail"/>
</el-form-item>
<el-form-item label="生活习性">
<el-input v-model="form.habit" placeholder="生活习性"/>
<el-input v-model="form.habit" placeholder="生活习性" :disabled="detail"/>
</el-form-item>
<div class="right">
<slot :form="form"></slot>

21
src/components/ZooBreedingPlanFormDialog.vue
View File

@ -21,6 +21,10 @@ export default {
props: {
breedingPlan: {
type: Object,
},
detail: {
type: Boolean,
default: false
}
},
mounted() {
@ -39,22 +43,22 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="饲养计划ID">
<el-input v-model="form.id" type="number" placeholder="饲养计划ID" :disabled="formAction.idDisable"/>
<el-input v-model="form.id" type="number" placeholder="饲养计划ID" :disabled="formAction.idDisable || detail"/>
</el-form-item>
<el-form-item label="计划名称">
<el-input v-model="form.name" placeholder="计划名称"/>
<el-input v-model="form.name" placeholder="计划名称" :disabled="detail"/>
</el-form-item>
<el-form-item label="动物种类">
<el-input v-model="form.species" placeholder="动物种类"/>
<el-input v-model="form.species" placeholder="动物种类" :disabled="detail"/>
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="form.sex">
<el-radio-group v-model="form.sex" :disabled="detail">
<el-radio value="雄性">雄性</el-radio>
<el-radio value="雌性">雌性</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="生命阶段">
<el-select v-model="form.phase" placeholder="生命阶段">
<el-select v-model="form.phase" placeholder="生命阶段" :disabled="detail">
<el-option label="幼年期" :value="0"/>
<el-option label="成长期" :value="1"/>
<el-option label="成年期" :value="2"/>
@ -62,21 +66,22 @@ export default {
</el-select>
</el-form-item>
<el-form-item label="动物状态">
<el-radio-group v-model="form.state">
<el-radio-group v-model="form.state" :disabled="detail">
<el-radio :value="0">正常</el-radio>
<el-radio :value="1">异常</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="执行饲养员">
<el-input v-model="form.roleId" type="number" placeholder="执行饲养员"/>
<el-input v-model="form.roleId" type="number" placeholder="执行饲养员" :disabled="detail"/>
</el-form-item>
<el-form-item label="计划描述">
<el-form-item label="计划描述" >
<el-input
v-model="form.describe"
:rows="4"
type="textarea"
placeholder="计划描述"
resize="none"
:disabled="detail"
/>
</el-form-item>
<div class="right">

29
src/components/ZooUserFormDialog.vue
View File

@ -1,21 +1,29 @@
<script>
import {hidePassword, showPassword} from "@/utils/common.js";
export default {
name: "ZooUserFormDialog",
methods: {hidePassword, showPassword},
data() {
return {
form: {
id: '',
username: '',
password: '',
auth: 0,
},
formAction: {
usernameDisable:false,
usernameDisable: false,
}
}
},
props: {
user: {
type: Object,
},
detail: {
type: Boolean,
default: false
}
},
mounted() {
@ -26,15 +34,19 @@ export default {
}
},
beforeUnmount() {
console.log('ZooUserFormDialog-beforeUnmount',this);
console.log('ZooUserFormDialog-beforeUnmount', this);
}
}
</script>
<template>
<el-form label-width="auto">
<el-form-item label="用户ID">
<el-input v-model="form.id" placeholder="请设置用户ID" type="number"
:disabled="formAction.usernameDisable || detail"/>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="form.username" placeholder="请设置用户名" :disabled="formAction.usernameDisable"/>
<el-input v-model="form.username" placeholder="请设置用户名" :disabled="detail"/>
</el-form-item>
<el-form-item label="密码">
<el-input
@ -42,15 +54,14 @@ export default {
type="password"
placeholder="请设置登录密码"
show-password
v-if="detail===false"
/>
<div v-else-if="detail===true" @mouseover="showPassword($event,form.password)"
@mouseleave="hidePassword($event)">••••••••
</div>
</el-form-item>
<el-form-item label="身份">
<!-- <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-radio-group v-model="form.auth">
<el-radio-group v-model="form.auth" :disabled="detail">
<el-radio :value="0">管理员</el-radio>
<el-radio :value="1">饲养员</el-radio>
<el-radio :value="2">兽医</el-radio>

37
src/pages/ZooAnimal.vue
View File

@ -1,6 +1,6 @@
<script>
import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
import {Delete, Document, DocumentAdd,Edit, Search} from "@element-plus/icons-vue";
import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
import {mapActions,mapState} from "vuex";
@ -16,8 +16,9 @@ export default {
},
dialog: {
addDialogVisible: false,//添加动物对话框
editDialogVisible: false,//编辑用户对话框
editData: {}
editDialogVisible: false,//编辑动物对话框
editData: {},
detailDialogVisible: false,//查看详情对话框
}
}
},
@ -27,8 +28,8 @@ export default {
Search() {
return Search
},
DocumentAdd() {
return DocumentAdd
Document() {
return Document
},
Edit() {
return Edit
@ -36,6 +37,9 @@ export default {
Delete() {
return Delete
},
DocumentAdd() {
return DocumentAdd
},
//endregion
...mapState(["animals"])
},
@ -49,6 +53,12 @@ export default {
},
methods: {
...mapActions(["getAnimals"]),
showDetailDialog(animal) {
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
this.dialog.editData = this.animals.find(e => e.id === animal.id)
console.log('点击了动物详情', this.dialog.editData)
this.dialog.detailDialogVisible = true
},
showEditDialog(animal) {
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
this.dialog.editData = this.animals.find(e => e.id === animal.id)
@ -222,8 +232,11 @@ export default {
</el-table-column>
<el-table-column prop="features" label="动物特征" width="200"/>
<el-table-column prop="habit" label="生活习性" width="200"/>
<el-table-column fixed="right" label="操作" width="130">
<el-table-column fixed="right" label="操作" width="190">
<template #default="scope">
<el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
查询
</el-button>
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
编辑
</el-button>
@ -264,6 +277,18 @@ export default {
</template>
</ZooAnimalFormDialog>
</el-dialog>
<!-- 查看动物对话框-->
<el-dialog v-model="dialog.detailDialogVisible" title="查询动物" width="500" align-center draggable overflow
destroy-on-close>
<ZooAnimalFormDialog :animal="dialog.editData" detail>
<template #default="scope">
<el-button @click="dialog.detailDialogVisible = false">
关闭
</el-button>
</template>
</ZooAnimalFormDialog>
</el-dialog>
</template>
<style scoped>

30
src/pages/ZooBreeding.vue
View File

@ -15,9 +15,10 @@ export default {
keyword: ''
},
dialog: {
addDialogVisible: false,//添加动物对话框
editDialogVisible: false,//编辑用户对话框
editData: {}
addDialogVisible: false,//添加饲养计划对话框
editDialogVisible: false,//编辑饲养计划对话框
editData: {},
detailDialogVisible:false//查询饲养计划对话框
}
}
},
@ -49,6 +50,12 @@ export default {
},
methods: {
...mapActions(["getBreedingPlans"]),
showDetailDialog(breedingPlan) {
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
console.log('点击了编辑', this.dialog.editData)
this.dialog.detailDialogVisible = true
},
showEditDialog(breedingPlan) {
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
@ -221,8 +228,11 @@ export default {
</template>
</el-table-column>
<el-table-column prop="describe" label="计划描述" width="300"/>
<el-table-column fixed="right" label="操作" width="130">
<el-table-column fixed="right" label="操作" width="190">
<template #default="scope">
<el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
查询
</el-button>
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
编辑
</el-button>
@ -263,6 +273,18 @@ export default {
</template>
</ZooBreedingPlanFormDialog>
</el-dialog>
<!-- 查看动物对话框-->
<el-dialog v-model="dialog.detailDialogVisible" title="查询饲养计划" width="500" align-center draggable overflow
destroy-on-close>
<ZooBreedingPlanFormDialog :breedingPlan="dialog.editData" detail>
<template #default="scope">
<el-button @click="dialog.detailDialogVisible = false">
关闭
</el-button>
</template>
</ZooBreedingPlanFormDialog>
</el-dialog>
</template>
<style scoped>

47
src/pages/ZooUser.vue
View File

@ -1,8 +1,8 @@
<script>
import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
import {Delete, Edit, Search, User,Document} from "@element-plus/icons-vue";
import {mapState,mapActions} from "vuex";
import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
import {copy, fuzzyMatching, splitKeyWords,showPassword,hidePassword} from "@/utils/common.js";
export default {
@ -23,6 +23,9 @@ export default {
Edit() {
return Edit
},
Document() {
return Document
},
// endregion
@ -46,14 +49,22 @@ export default {
dialog: {
addDialogVisible: false,//添加用户对话框
editDialogVisible: false,//编辑用户对话框
editData: {}
editData: {},
detailDialogVisible: false,//查看用户对话框
}
}
},
methods: {
hidePassword,
showPassword,
...mapActions(['getUsers']),
showDetailDialog(user) {
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
this.dialog.editData = this.users.find(e => e.username === user.username)
console.log('点击了查询', this.dialog.editData)
this.dialog.detailDialogVisible = true
},
showEditDialog(user) {
// console.log('点击了编辑',user)
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
this.dialog.editData = this.users.find(e => e.username === user.username)
console.log('点击了编辑', this.dialog.editData)
@ -173,16 +184,6 @@ export default {
this.tableData = searchResult
},
//鼠标悬浮显示密码
//region
showPassword(event,password){
console.log('showPassword')
event.target.innerText = password
},
hidePassword(event) {
event.target.innerText = '••••••••'
}
//endregion
},
mounted() {
this.getUsers()//获取用户数据
@ -221,6 +222,7 @@ export default {
<!-- <hr/>-->
<div class="table">
<el-table :data="tableData" style="height: 100%" empty-text="暂无数据" border>
<el-table-column fixed prop="id" label="用户ID" width="70"/>
<el-table-column fixed prop="username" label="用户名" width="150"/>
<el-table-column prop="password" label="密码" width="150">
<template #default="scope">
@ -235,8 +237,11 @@ export default {
<span v-else>未知</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="130">
<el-table-column fixed="right" label="操作" width="190">
<template #default="scope">
<el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
查询
</el-button>
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
编辑
</el-button>
@ -277,6 +282,18 @@ export default {
</template>
</ZooUserFormDialog>
</el-dialog>
<!-- 用户详情对话框-->
<el-dialog v-model="dialog.detailDialogVisible" title="查询用户" width="400" align-center draggable overflow
destroy-on-close>
<ZooUserFormDialog :user="dialog.editData" detail>
<template #default="scope">
<el-button @click="dialog.detailDialogVisible = false">
关闭
</el-button>
</template>
</ZooUserFormDialog>
</el-dialog>
</template>
<style scoped>

1
src/store/index.js
View File

@ -51,6 +51,7 @@ const mutations = {
const state = {
//登录用户数据
loginUser: {
id:0,
username: 'user1',
auth: 0
},

19
src/utils/common.js
View File

@ -3,7 +3,7 @@ export function generateUsers() {
//数据生成器
for (let i = 0; i < 100; i++) {
let user = {
userKey: i,
id: i,
username: 'user' + (i + 3),
password: '123456',
auth: Math.floor(Math.random() * 3),
@ -79,6 +79,20 @@ export function copy(value) {
return JSON.parse(result)
}
//鼠标悬浮显示密码
//region
export function showPassword(event,password){
console.log('showPassword')
event.target.innerText = password
}
export function hidePassword(event) {
event.target.innerText = '••••••••'
}
//endregion
//模糊查询
//region
//分割字符串
export function splitKeyWords(keyword) {
let keyset = keyword.split(' ')//提取关键字
@ -107,4 +121,5 @@ function keywordMatching(object, keyword) {
return Object.keys(object).some(key => {
return (object[key] + '').includes(keyword)
})
}
}
//endregion