编写动物档案前端基本界面、功能
This commit is contained in:
bicey
parent
3b8c824f43
commit
0a199d7f68
50
README.md
50
README.md
@ -2,22 +2,22 @@
|
||||
|
||||
本次建设的动物信息分为以下功能：
|
||||
|
||||
1. 数据录入与管理
|
||||
1. 数据录入与管理（基本完成）
|
||||
系统应提供数据录入功能，允许用户输入动物的基本信息，如种类、年龄、性别、体重、健康状况等。同时，系统应具备数据管理功能，包括数据的查询、修改、删除等操作，以便用户能够方便地管理和维护动物信息。
|
||||
|
||||
2. 动物档案管理
|
||||
2. 动物档案管理（进行中）
|
||||
系统应建立动物档案，记录动物的整个生命周期，包括出生日期、疫苗接种记录、疾病治疗记录、饲养记录等。这有助于跟踪动物的健康状况和饲养情况，为动物提供更好的管理和照顾。
|
||||
|
||||
3. 饲养管理
|
||||
3. 饲养管理（基本完成）
|
||||
系统应提供饲养管理功能，包括饲养计划的制定、饲养任务的分配、饲养记录的管理等。这有助于确保动物获得适当的饲料和营养，保持健康生长。
|
||||
|
||||
4. 健康监测与预警
|
||||
4. 健康监测与预警（未开始）
|
||||
系统应具备健康监测功能，定期收集和分析动物的健康数据，如体温、心率、呼吸频率等。同时，系统应提供预警功能，当动物的健康数据出现异常时，及时提醒管理人员采取相应措施。
|
||||
|
||||
5. 统计分析
|
||||
5. 统计分析（未开始）
|
||||
系统应提供统计分析功能，对动物信息、饲养记录、健康数据等进行统计分析，生成各类报表和图表。这有助于管理人员了解动物的整体状况和饲养效果，为决策提供支持。
|
||||
|
||||
6. 用户权限管理
|
||||
6. 用户权限管理（基本完成）
|
||||
系统应建立用户权限管理机制，对不同用户设置不同的权限，如管理员、饲养员、兽医等。这有助于确保系统的安全性和数据的保密性。
|
||||
|
||||
使用的技术/资源：
|
||||
@ -106,7 +106,7 @@
|
||||
## 饲养管理
|
||||
---
|
||||
|
||||
需要后端创建一个表，为了节省时间不需要设置外键什么的
|
||||
需要后端创建一个表，为了节省时间不需要设置外键什么的,参考如下
|
||||
```
|
||||
breedingPlan: {
|
||||
id: '',//int 饲养计划id
|
||||
@ -115,7 +115,7 @@ breedingPlan: {
|
||||
sex: '雄性',//字符 饲养动物性别
|
||||
phase: '',//字符 饲养动物生长阶段：幼年期、成长期、成年期、老年期
|
||||
state: 0,//int 状态（0正常 1异常）
|
||||
roleId: null,//负责执行计划的饲养员id
|
||||
roleId: 1,//负责执行计划的饲养员id
|
||||
describe: ''//字符 饲养计划的描述
|
||||
}
|
||||
```
|
||||
@ -146,7 +146,41 @@ breedingPlan: {
|
||||
|
||||
## 档案管理
|
||||
---
|
||||
需要后端创建一个档案表，参考属性如下
|
||||
```
|
||||
let archive:{
|
||||
id: 1,//int 档案号
|
||||
animalId: 1,//int 该档案记录的动物id
|
||||
animalName: 'animal1',//字符 该档案记录的动物名称
|
||||
phase:'幼年期',//字符 该档案记录的动物生命阶段
|
||||
state:0,//int 动物状态 0正常，1异常
|
||||
type:'日常饲养',// 字符 档案的类型，分为疫苗接种、疾病治疗、日常饲养
|
||||
date:'2024-06-01',//字符 档案记录日期
|
||||
time:'18:30:00',//字符，档案记录时间，时分秒
|
||||
roleId: 1,//负责录入档案的人的id，身份不限
|
||||
description: '描述',//字符 档案的描述
|
||||
}
|
||||
```
|
||||
|
||||
### 档案查询
|
||||
|
||||
前端提供档案号、动物id、或者不提供
|
||||
|
||||
当提供档案号时，返回符合的一条档案
|
||||
当提供动物id时，返回符合动物id的多条档案
|
||||
当不提供时，返回所有档案
|
||||
|
||||
### 档案删除
|
||||
|
||||
前端提供档案号，后端删除并返回结果
|
||||
|
||||
### 档案添加
|
||||
|
||||
前端提供一个档案对象，后端进行添加
|
||||
|
||||
### 档案修改
|
||||
|
||||
前端提供一个档案对象，后端进行修改
|
||||
|
||||
## 健康检测
|
||||
---
|
||||
|
||||
@ -35,3 +35,22 @@ body {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/*与pages组件相关的所有样式*/
|
||||
.table {
|
||||
height: 546px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
.select .left {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.select .right {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
form:{
|
||||
id: '',
|
||||
id: null,
|
||||
name: '',
|
||||
sex: '雄性',
|
||||
species: '',//种类
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
roleId: null,//饲养员id
|
||||
color: '',//颜色
|
||||
features: '',//特征
|
||||
habit: ''//生活习性
|
||||
phase: '幼年期'//生长阶段
|
||||
},
|
||||
formAction: {
|
||||
idDisable:false,
|
||||
@ -96,8 +96,13 @@ export default {
|
||||
<el-form-item label="动物特征">
|
||||
<el-input v-model="form.features" placeholder="动物特征" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="生活习性">
|
||||
<el-input v-model="form.habit" placeholder="生活习性" :disabled="detail"/>
|
||||
<el-form-item label="生命阶段">
|
||||
<el-select v-model="form.phase" placeholder="生命阶段" :disabled="detail">
|
||||
<el-option label="幼年期" :value="0"/>
|
||||
<el-option label="成长期" :value="1"/>
|
||||
<el-option label="成年期" :value="2"/>
|
||||
<el-option label="老年期" :value="3"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div class="right">
|
||||
<slot :form="form"></slot>
|
||||
|
||||
111
src/components/ZooArchiveFormDialog.vue
Normal file
111
src/components/ZooArchiveFormDialog.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "ZooArchiveFormDialog",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: null,//int 档案号
|
||||
animalId: null,//int 该档案记录的动物id
|
||||
animalName: '',//字符 该档案记录的动物名称
|
||||
phase: '幼年期',//字符 该档案记录的动物生命阶段
|
||||
state: 0,//int 动物状态 0正常，1异常
|
||||
type: '日常饲养',// 字符 档案的类型，分为疫苗接种、疾病治疗、日常饲养
|
||||
date: '',//字符 档案记录日期
|
||||
time: '',//字符，档案记录时间
|
||||
roleId: null,//负责录入档案的人的id，身份不限
|
||||
description: '',//字符 档案的描述
|
||||
},
|
||||
formAction: {
|
||||
idDisable: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
archive: {
|
||||
type: Object,
|
||||
},
|
||||
detail: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 如果传入了对象，说明是编辑
|
||||
if (this.archive) {
|
||||
console.log('传入了数据')
|
||||
this.form = this.archive
|
||||
this.formAction.idDisable = true
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
console.log('ZooArchiveFormDialog-beforeUnmount', this);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form label-width="auto">
|
||||
<el-form-item label="档案号">
|
||||
<el-input v-model="form.id" type="number" placeholder="记录号" :disabled="formAction.idDisable || detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录的动物ID">
|
||||
<el-input v-model="form.animalId" type="number" placeholder="记录的动物ID" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录的动物名">
|
||||
<el-input v-model="form.animalName" placeholder="记录的动物名" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="生命阶段">
|
||||
<el-select v-model="form.phase" placeholder="生命阶段" :disabled="detail">
|
||||
<el-option label="幼年期" :value="0"/>
|
||||
<el-option label="成长期" :value="1"/>
|
||||
<el-option label="成年期" :value="2"/>
|
||||
<el-option label="老年期" :value="3"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="动物状态">
|
||||
<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-select v-model="form.type" :disabled="detail">
|
||||
<el-option label="日常饲养" value="日常饲养"/>
|
||||
<el-option label="疾病治疗" value="疾病治疗"/>
|
||||
<el-option label="疫苗接种" value="疫苗接种"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录日期">
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
:disabled="detail"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录时间">
|
||||
<el-time-picker v-model="form.time" type="time" placeholder="选择时间" value-format="HH:mm:ss"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="记录人ID">
|
||||
<el-input v-model="form.roleId" type="number" placeholder="记录人ID" :disabled="detail"/>
|
||||
</el-form-item>
|
||||
<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">
|
||||
<slot :form="form"></slot>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
src/components/ZooArchiveTimeline.vue
Normal file
13
src/components/ZooArchiveTimeline.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "ZooArchiveTimeline"
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -66,7 +66,7 @@ export default {
|
||||
</el-icon>
|
||||
<span>兽医</span>
|
||||
</template>
|
||||
<el-menu-item index="3-1">动物档案</el-menu-item>
|
||||
<el-menu-item index="/panel/archive" @click="toPath('/panel/archive')">动物档案</el-menu-item>
|
||||
<el-menu-item index="3-2">健康检测</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
|
||||
@ -58,7 +58,7 @@ export default {
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="生命阶段">
|
||||
<el-select v-model="form.phase" placeholder="生命阶段" :disabled="detail">
|
||||
<el-select v-model="form.phase" :disabled="detail">
|
||||
<el-option label="幼年期" :value="0"/>
|
||||
<el-option label="成长期" :value="1"/>
|
||||
<el-option label="成年期" :value="2"/>
|
||||
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
id: '',
|
||||
id: null,
|
||||
username: '',
|
||||
password: '',
|
||||
auth: 0,
|
||||
|
||||
@ -223,6 +223,7 @@ export default {
|
||||
<span v-else>未知</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="phase" label="生命阶段" width="90"/>
|
||||
<el-table-column prop="roleId" label="饲养员ID" width="120"/>
|
||||
<el-table-column prop="color" label="动物颜色" width="150">
|
||||
<template #default="scope">
|
||||
@ -231,11 +232,10 @@ export default {
|
||||
</template>
|
||||
</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="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)">
|
||||
编辑
|
||||
@ -292,24 +292,24 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table {
|
||||
/*width: 1300px;*/
|
||||
height: 546px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
/*.table {*/
|
||||
/* !*width: 1300px;*!*/
|
||||
/* height: 546px;*/
|
||||
/* margin: 0 30px;*/
|
||||
/*}*/
|
||||
|
||||
.left {
|
||||
margin-left: 30px;
|
||||
}
|
||||
/*.left {*/
|
||||
/* margin-left: 30px;*/
|
||||
/*}*/
|
||||
|
||||
.right {
|
||||
margin-right: 30px;
|
||||
}
|
||||
/*.right {*/
|
||||
/* margin-right: 30px;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
/*.select {*/
|
||||
/* width: 100%;*/
|
||||
/* height: 60px;*/
|
||||
/* line-height: 60px;*/
|
||||
/*}*/
|
||||
</style>
|
||||
289
src/pages/ZooArchive.vue
Normal file
289
src/pages/ZooArchive.vue
Normal file
@ -0,0 +1,289 @@
|
||||
<script>
|
||||
import ZooArchiveFormDialog from "@/components/ZooArchiveFormDialog.vue";
|
||||
import {Delete, DocumentAdd, Document,Edit, Search} from "@element-plus/icons-vue";
|
||||
import {mapState,mapActions} from "vuex";
|
||||
import {copy, splitKeyWords,fuzzyMatching} from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
name: "ZooArchive",
|
||||
components: {ZooArchiveFormDialog},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
searchInput: {
|
||||
state: '',//状态（0正常 1异常）
|
||||
keyword: ''
|
||||
},
|
||||
dialog: {
|
||||
addDialogVisible: false,//添加对话框
|
||||
editDialogVisible: false,//编辑对话框
|
||||
editData: {},
|
||||
detailDialogVisible:false//查询对话框
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
//图标
|
||||
//region
|
||||
Search() {
|
||||
return Search
|
||||
},
|
||||
DocumentAdd() {
|
||||
return DocumentAdd
|
||||
},
|
||||
Edit() {
|
||||
return Edit
|
||||
},
|
||||
Delete() {
|
||||
return Delete
|
||||
},
|
||||
Document() {
|
||||
return Document
|
||||
},
|
||||
//endregion
|
||||
...mapState(["archives"])
|
||||
},
|
||||
watch: {
|
||||
searchInput: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.searchArchive();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["getArchives"]),
|
||||
showDetailDialog(archive) {
|
||||
//这里使用档案的id查询后端的特定档案再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.archives.find(e => e.id === archive.id)
|
||||
console.log('点击了详情', this.dialog.editData)
|
||||
this.dialog.detailDialogVisible = true
|
||||
},
|
||||
showEditDialog(archive) {
|
||||
//这里使用档案的id查询后端的特定档案再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.archives.find(e => e.id === archive.id)
|
||||
console.log('点击了编辑', this.dialog.editData)
|
||||
this.dialog.editDialogVisible = true
|
||||
},
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.animalId) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '记录的动物ID不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
editArchive(form) {
|
||||
console.log('确认编辑档案', form)
|
||||
//判断是否为空
|
||||
return this.isEmpty(form);
|
||||
//编辑失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '编辑失败',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
//编辑成功
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
message: '编辑成功',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
// 此处重新拉取数据
|
||||
this.getArchives()
|
||||
this.dialog.editDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
deleteArchive(archive) {
|
||||
console.log('删除档案', archive)
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除档案：' + archive.id,
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
// ……
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
},
|
||||
addArchive(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//添加成功关闭窗口
|
||||
},
|
||||
searchArchive() {
|
||||
console.log('档案搜索', this.searchInput)
|
||||
let searchResult = []//搜索结果数组
|
||||
//第一步匹配搜索选项，如果选择了状态
|
||||
if (typeof this.searchInput.state === 'number') {
|
||||
this.archives.forEach(e => {
|
||||
if (e.state === this.searchInput.state) {
|
||||
searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
|
||||
}
|
||||
})
|
||||
} else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
|
||||
searchResult = copy(this.archives)
|
||||
}
|
||||
|
||||
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() {
|
||||
this.getArchives()
|
||||
this.tableData = copy(this.archives);//复制一份给表格展示
|
||||
}
|
||||
}
|
||||
</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: 400px"
|
||||
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="searchArchive()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>
|
||||
<el-table-column fixed prop="id" label="记录号" width="100"/>
|
||||
<el-table-column fixed prop="animalId" label="记录的动物ID" width="120"/>
|
||||
<el-table-column prop="animalName" label="记录的动物名" width="110"/>
|
||||
<el-table-column prop="phase" label="生命阶段" width="90"/>
|
||||
<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="type" label="记录类型" width="90"/>
|
||||
<el-table-column prop="date" label="记录日期" width="110"/>
|
||||
<el-table-column prop="time" label="记录时间" width="90"/>
|
||||
<el-table-column prop="roleId" label="记录人ID" width="90"/>
|
||||
<el-table-column prop="describe" label="记录描述" width="300"/>
|
||||
<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>
|
||||
<el-button link type="danger" size="small" :icon="Delete" @click="deleteArchive(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>
|
||||
<ZooArchiveFormDialog>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.addDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="addArchive(scope.form)">
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
</ZooArchiveFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑记录对话框-->
|
||||
<el-dialog v-model="dialog.editDialogVisible" title="编辑饲养计划" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooArchiveFormDialog :archive="dialog.editData">
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.editDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="editArchive(scope.form)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
</ZooArchiveFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看记录对话框-->
|
||||
<el-dialog v-model="dialog.detailDialogVisible" title="查询饲养计划" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooArchiveFormDialog :archive="dialog.editData" detail>
|
||||
<template #default="scope">
|
||||
<el-button @click="dialog.detailDialogVisible = false">
|
||||
关闭
|
||||
</el-button>
|
||||
</template>
|
||||
</ZooArchiveFormDialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import ZooBreedingPlanFormDialog from "@/components/ZooBreedingPlanFormDialog.vue";
|
||||
import {mapState,mapActions} from "vuex";
|
||||
import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
|
||||
import {Delete, DocumentAdd, Document,Edit, Search} from "@element-plus/icons-vue";
|
||||
import {copy, splitKeyWords,fuzzyMatching} from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
@ -37,6 +37,9 @@ export default {
|
||||
Delete() {
|
||||
return Delete
|
||||
},
|
||||
Document() {
|
||||
return Document
|
||||
},
|
||||
//endregion
|
||||
...mapState(["breedingPlans"])
|
||||
},
|
||||
@ -51,13 +54,13 @@ export default {
|
||||
methods: {
|
||||
...mapActions(["getBreedingPlans"]),
|
||||
showDetailDialog(breedingPlan) {
|
||||
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
|
||||
//这里使用饲养计划的id查询后端的特定饲养计划再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
|
||||
console.log('点击了编辑', this.dialog.editData)
|
||||
console.log('点击了详情', this.dialog.editData)
|
||||
this.dialog.detailDialogVisible = true
|
||||
},
|
||||
showEditDialog(breedingPlan) {
|
||||
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
|
||||
//这里使用饲养计划的id查询后端的特定饲养计划再赋值，这里用假数据代替一下
|
||||
this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
|
||||
console.log('点击了编辑', this.dialog.editData)
|
||||
this.dialog.editDialogVisible = true
|
||||
@ -95,7 +98,7 @@ export default {
|
||||
this.dialog.editDialogVisible = false//添加成功关闭窗口
|
||||
},
|
||||
deleteBreedingPlan(breedingPlan) {
|
||||
console.log('删除动物', breedingPlan)
|
||||
console.log('删除饲养计划', breedingPlan)
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除饲养计划：' + breedingPlan.name,
|
||||
@ -142,7 +145,7 @@ export default {
|
||||
searchBreedingPlan() {
|
||||
console.log('饲养计划搜索', this.searchInput)
|
||||
let searchResult = []//搜索结果数组
|
||||
//第一步匹配搜索选项，如果选择了特定用户身份
|
||||
//第一步匹配搜索选项，如果选择了特定状态
|
||||
if (typeof this.searchInput.state === 'number') {
|
||||
this.breedingPlans.forEach(e => {
|
||||
if (e.state === this.searchInput.state) {
|
||||
@ -187,7 +190,7 @@ export default {
|
||||
<div class="right">
|
||||
<el-input
|
||||
v-model="searchInput.keyword"
|
||||
style="max-width: 400px"
|
||||
style="width: 400px"
|
||||
placeholder="搜索饲养计划 空格隔开关键字"
|
||||
>
|
||||
<template #prepend>
|
||||
@ -219,7 +222,7 @@ export default {
|
||||
<el-table-column prop="roleId" label="执行饲养员" width="100"/>
|
||||
<el-table-column prop="species" label="动物种类" width="90"/>
|
||||
<el-table-column prop="sex" label="性别" width="60"/>
|
||||
<el-table-column prop="phase" label="生长阶段" width="90"/>
|
||||
<el-table-column prop="phase" label="生命阶段" width="90"/>
|
||||
<el-table-column prop="state" label="动物状态" width="90">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.state===0" style="color: green">正常</span>
|
||||
@ -231,7 +234,7 @@ export default {
|
||||
<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)">
|
||||
编辑
|
||||
@ -245,7 +248,7 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加动物对话框-->
|
||||
<!-- 添加饲养计划对话框-->
|
||||
<el-dialog v-model="dialog.addDialogVisible" title="添加饲养计划" width="500" align-center draggable overflow>
|
||||
<ZooBreedingPlanFormDialog>
|
||||
<template #default="scope">
|
||||
@ -259,7 +262,7 @@ export default {
|
||||
</ZooBreedingPlanFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑动物对话框-->
|
||||
<!-- 编辑饲养计划对话框-->
|
||||
<el-dialog v-model="dialog.editDialogVisible" title="编辑饲养计划" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooBreedingPlanFormDialog :breedingPlan="dialog.editData">
|
||||
@ -274,7 +277,7 @@ export default {
|
||||
</ZooBreedingPlanFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看动物对话框-->
|
||||
<!-- 查看饲养计划对话框-->
|
||||
<el-dialog v-model="dialog.detailDialogVisible" title="查询饲养计划" width="500" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooBreedingPlanFormDialog :breedingPlan="dialog.editData" detail>
|
||||
@ -288,24 +291,24 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table {
|
||||
/*width: 1300px;*/
|
||||
height: 546px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
/*.table {*/
|
||||
/* !*width: 1300px;*!*/
|
||||
/* height: 546px;*/
|
||||
/* margin: 0 30px;*/
|
||||
/*}*/
|
||||
|
||||
.left {
|
||||
margin-left: 30px;
|
||||
}
|
||||
/*.left {*/
|
||||
/* margin-left: 30px;*/
|
||||
/*}*/
|
||||
|
||||
.right {
|
||||
margin-right: 30px;
|
||||
}
|
||||
/*.right {*/
|
||||
/* margin-right: 30px;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
/*.select {*/
|
||||
/* width: 100%;*/
|
||||
/* height: 60px;*/
|
||||
/* line-height: 60px;*/
|
||||
/*}*/
|
||||
</style>
|
||||
@ -240,7 +240,7 @@ export default {
|
||||
<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)">
|
||||
编辑
|
||||
@ -297,23 +297,23 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table {
|
||||
/*width: 1300px;*/
|
||||
height: 546px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
/*.table {*/
|
||||
/* !*width: 1300px;*!*/
|
||||
/* height: 546px;*/
|
||||
/* margin: 0 30px;*/
|
||||
/*}*/
|
||||
|
||||
.left {
|
||||
margin-left: 30px;
|
||||
}
|
||||
/*.left {*/
|
||||
/* margin-left: 30px;*/
|
||||
/*}*/
|
||||
|
||||
.right {
|
||||
margin-right: 30px;
|
||||
}
|
||||
/*.right {*/
|
||||
/* margin-right: 30px;*/
|
||||
/*}*/
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
/*.select {*/
|
||||
/* width: 100%;*/
|
||||
/* height: 60px;*/
|
||||
/* line-height: 60px;*/
|
||||
/*}*/
|
||||
</style>
|
||||
@ -8,6 +8,7 @@ import ZooUser from "@/pages/ZooUser.vue";
|
||||
import ZooAnimal from "@/pages/ZooAnimal.vue";
|
||||
import store from "@/store/index.js";
|
||||
import ZooBreeding from "@/pages/ZooBreeding.vue";
|
||||
import ZooArchive from "@/pages/ZooArchive.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
@ -49,6 +50,10 @@ const router = createRouter({
|
||||
path:'breeding',
|
||||
component:ZooBreeding,
|
||||
// meta:{isAuth: true},//需要权限
|
||||
},
|
||||
{
|
||||
path:'archive',
|
||||
component:ZooArchive,
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {createStore} from "vuex";
|
||||
import {generateAnimals, generateBreedingPlans, generateUsers} from "@/utils/common.js";
|
||||
import {generateAnimals, generateArchives, generateBreedingPlans, generateUsers} from "@/utils/common.js";
|
||||
|
||||
const actions = {
|
||||
//更新登录用户
|
||||
@ -26,6 +26,10 @@ const actions = {
|
||||
//获取饲养计划
|
||||
getBreedingPlans(context) {
|
||||
context.commit('updateBreedingPlans',generateBreedingPlans())
|
||||
},
|
||||
//获取动物档案
|
||||
getArchives(context) {
|
||||
context.commit('updateArchives', generateArchives())
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +49,10 @@ const mutations = {
|
||||
//更新饲养计划
|
||||
updateBreedingPlans(state, value) {
|
||||
state.breedingPlans = value
|
||||
},
|
||||
//更新动物档案
|
||||
updateArchives(state, value) {
|
||||
state.archives = value
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,6 +69,8 @@ const state = {
|
||||
animals: [],
|
||||
//饲养计划
|
||||
breedingPlans:[],
|
||||
//动物档案
|
||||
archives:[]
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
//生成用户数据
|
||||
export function generateUsers() {
|
||||
const users = []
|
||||
//数据生成器
|
||||
@ -13,6 +14,7 @@ export function generateUsers() {
|
||||
return users
|
||||
}
|
||||
|
||||
//生成动物数据
|
||||
export function generateAnimals() {
|
||||
const animals = []
|
||||
//数据生成器
|
||||
@ -28,7 +30,7 @@ export function generateAnimals() {
|
||||
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()//生活习性
|
||||
phase: generatePhase()
|
||||
}
|
||||
animals.push(animal)
|
||||
}
|
||||
@ -73,6 +75,38 @@ function generatePhase() {
|
||||
return '老年期'
|
||||
}
|
||||
|
||||
export function generateArchives() {
|
||||
const archives = []
|
||||
for (let i = 0;i<100;i++){
|
||||
let archive={
|
||||
id: i,//档案号
|
||||
animalId: Math.floor(Math.random()*100),//该档案记录的动物id
|
||||
animalName: 'animal' + (i + 3),//该档案记录的动物名称
|
||||
phase:generatePhase(),
|
||||
state:Math.floor(Math.random() * 2),
|
||||
type:generateType(),
|
||||
date:'2024-'+Math.ceil(Math.random()*11).toString().padStart(2,'0')+'-'+Math.ceil(Math.random()*30).toString().padStart(2,'0'),//字符 档案记录日期
|
||||
time:Math.floor(Math.random() * 24).toString().padStart(2,'0')+':'+Math.floor(Math.random()*60).toString().padStart(2,'0')+':'+Math.floor(Math.random()*60).toString().padStart(2,'0'),//记录时间
|
||||
roleId: Math.floor(Math.random() * 100),//负责录入档案的人的id，身份不限
|
||||
description: Math.floor(Math.random() * 500).toString(),
|
||||
}
|
||||
archives.push(archive)
|
||||
}
|
||||
return archives
|
||||
}
|
||||
function generateType() {
|
||||
const type = Math.floor(Math.random() * 3)
|
||||
if (type===0){
|
||||
return '疫苗接种'
|
||||
}
|
||||
if (type===1){
|
||||
return '疾病治疗'
|
||||
}
|
||||
if (type===2){
|
||||
return '日常饲养'
|
||||
}
|
||||
}
|
||||
|
||||
//深拷贝任何值
|
||||
export function copy(value) {
|
||||
let result = JSON.stringify(value)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user