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 15:25:19 +08:00
parent 4ec4b70918
commit fd7c0fabf0
6 changed files with 223 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -110,7 +110,7 @@ breedingPlan: {
name: '',//字符 饲养计划名称 name: '',//字符 饲养计划名称
species: '',//字符 种类 species: '',//字符 种类
sex: '雄性',//字符 饲养动物性别 sex: '雄性',//字符 饲养动物性别
phase: '',//字符 饲养动物阶段：幼年期、成长期、成年期、老年期 phase: '',//字符 饲养动物生长阶段：幼年期、成长期、成年期、老年期
state: 0,//int 状态（0正常 1异常） state: 0,//int 状态（0正常 1异常）
describe: ''//字符 饲养计划的描述 describe: ''//字符 饲养计划的描述
} }
@ -193,7 +193,7 @@ breedingPlan: {
### 饲养员 ### 饲养员
- [ ] 数据展示 - [x] 数据展示
- [ ] 基本功能 - [ ] 基本功能
- [ ] 基本方法 - [ ] 基本方法
- [ ] 接入后端 - [ ] 接入后端

16
src/pages/ZooAnimal.vue
View File

@ -52,7 +52,7 @@ export default {
showEditDialog(animal) { showEditDialog(animal) {
//这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下 //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
this.dialog.editData = this.animals.find(e => e.id === animal.id) this.dialog.editData = this.animals.find(e => e.id === animal.id)
console.log('点击了编辑', this.dialog.editData) console.log('点击了动物编辑', this.dialog.editData)
this.dialog.editDialogVisible = true this.dialog.editDialogVisible = true
}, },
// 判断表单是否为空 // 判断表单是否为空
@ -86,7 +86,7 @@ export default {
// 此处重新拉取数据 // 此处重新拉取数据
this.dialog.editDialogVisible = false//添加成功关闭窗口 this.dialog.editDialogVisible = false//添加成功关闭窗口
}, },
deleteUser(animal) { deleteAnimal(animal) {
console.log('删除动物', animal) console.log('删除动物', animal)
return ElMessageBox.confirm( return ElMessageBox.confirm(
'该操作不可撤销，是否继续？', '该操作不可撤销，是否继续？',
@ -180,7 +180,7 @@ export default {
<div class="right"> <div class="right">
<el-input <el-input
v-model="searchInput.keyword" v-model="searchInput.keyword"
style="max-width: 300px" style="width: 400px"
placeholder="搜索动物 空格隔开关键字" placeholder="搜索动物 空格隔开关键字"
> >
<template #prepend> <template #prepend>
@ -200,9 +200,9 @@ export default {
<!-- <hr/>--> <!-- <hr/>-->
<div class="table"> <div class="table">
<el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border> <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="id" label="动物ID" width="70"/>
<el-table-column fixed prop="name" label="动物名称" width="100"/> <el-table-column fixed prop="name" label="动物名称" width="100"/>
<el-table-column prop="sex" label="性别"/> <el-table-column prop="sex" label="性别" width="60"/>
<el-table-column prop="species" label="动物种类" width="90"/> <el-table-column prop="species" label="动物种类" width="90"/>
<el-table-column prop="weight" label="动物体重（KG）" width="130"/> <el-table-column prop="weight" label="动物体重（KG）" width="130"/>
<el-table-column prop="height" label="动物身高（M）" width="130"/> <el-table-column prop="height" label="动物身高（M）" width="130"/>
@ -220,14 +220,14 @@ export default {
<el-color-picker v-model="scope.row.color" disabled/> <el-color-picker v-model="scope.row.color" disabled/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="features" label="动物特征" width="100"/> <el-table-column prop="features" label="动物特征" width="200"/>
<el-table-column prop="habit" label="生活习性" width="100"/> <el-table-column prop="habit" label="生活习性" width="200"/>
<el-table-column fixed="right" label="操作" width="130"> <el-table-column fixed="right" label="操作" width="130">
<template #default="scope"> <template #default="scope">
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)"> <el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
编辑 编辑
</el-button> </el-button>
<el-button link type="danger" size="small" :icon="Delete" @click="deleteUser(scope.row)"> <el-button link type="danger" size="small" :icon="Delete" @click="deleteAnimal(scope.row)">
删除 删除
</el-button> </el-button>
</template> </template>

337
src/pages/ZooBreeding.vue
View File

@ -2,7 +2,7 @@
import ZooBreedingPlanFormDialog from "@/components/ZooBreedingPlanFormDialog.vue"; import ZooBreedingPlanFormDialog from "@/components/ZooBreedingPlanFormDialog.vue";
import {mapState,mapActions} from "vuex"; import {mapState,mapActions} from "vuex";
import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue"; import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
import {copy} from "@/utils/common.js"; import {copy, splitKeyWords,fuzzyMatching} from "@/utils/common.js";
export default { export default {
name: "ZooBreeding", name: "ZooBreeding",
@ -11,8 +11,8 @@ export default {
return { return {
tableData: [], tableData: [],
searchInput: { searchInput: {
// state: '',//状态（0正常 1异常） state: '',//状态（0正常 1异常）
// keyword: '' keyword: ''
}, },
dialog: { dialog: {
addDialogVisible: false,//添加动物对话框 addDialogVisible: false,//添加动物对话框
@ -40,76 +40,77 @@ export default {
...mapState(["breedingPlans"]) ...mapState(["breedingPlans"])
}, },
watch: { watch: {
// searchInput: { searchInput: {
// deep: true, deep: true,
// handler(val) { handler(val) {
// this.searchAnimal(); this.searchBreedingPlan();
// } }
// } }
}, },
methods: { methods: {
...mapActions(["getBreedingPlans"]), ...mapActions(["getBreedingPlans"]),
// showEditDialog(animal) { showEditDialog(breedingPlan) {
// //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下 //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
// this.dialog.editData = this.animals.find(e => e.id === animal.id) this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
// console.log('点击了编辑', this.dialog.editData) console.log('点击了编辑', this.dialog.editData)
// this.dialog.editDialogVisible = true this.dialog.editDialogVisible = true
// }, },
// // 判断表单是否为空 // 判断表单是否为空
// isEmpty(form) { isEmpty(form) {
// if (!form.name) { if (!form.name) {
// //返回提示 //返回提示
// return ElMessage({ return ElMessage({
// message: '动物名不能为空', message: '计划名不能为空',
// type: 'warning', type: 'warning',
// }) })
// } }
// }, },
// editAnimal(form) { editBreedingPlan(form) {
// console.log('确认编辑动物', form) console.log('确认编辑饲养计划', form)
// //判断是否为空 //判断是否为空
// return this.isEmpty(form); return this.isEmpty(form);
// //编辑失败 //编辑失败
// if (false) { if (false) {
// return ElMessage({ return ElMessage({
// message: '编辑失败', message: '编辑失败',
// type: 'warning', type: 'warning',
// }) })
// } }
// //编辑成功 //编辑成功
// if (false) { if (false) {
// return ElMessage({ return ElMessage({
// message: '编辑成功', message: '编辑成功',
// type: 'success', type: 'success',
// }) })
// } }
// // 此处重新拉取数据 // 此处重新拉取数据
// this.dialog.editDialogVisible = false//添加成功关闭窗口 this.getBreedingPlans()
// }, this.dialog.editDialogVisible = false//添加成功关闭窗口
// deleteUser(animal) { },
// console.log('删除动物', animal) deleteBreedingPlan(breedingPlan) {
// return ElMessageBox.confirm( console.log('删除动物', breedingPlan)
// '该操作不可撤销，是否继续？', return ElMessageBox.confirm(
// '删除动物：' + animal.name, '该操作不可撤销，是否继续？',
// { '删除饲养计划：' + breedingPlan.name,
// confirmButtonText: '确定', {
// cancelButtonText: '取消', confirmButtonText: '确定',
// type: 'warning', cancelButtonText: '取消',
// } type: 'warning',
// ).then(() => { }
// //进行删除操作 ).then(() => {
// // …… //进行删除操作
// ElMessage({ // ……
// type: 'success', ElMessage({
// message: '删除成功', type: 'success',
// }) message: '删除成功',
// }).catch(() => { })
// ElMessage({ }).catch(() => {
// type: 'info', ElMessage({
// message: '取消删除', type: 'info',
// }) message: '取消删除',
// }) })
// }, })
},
addBreedingPlan(form) { addBreedingPlan(form) {
console.log('添加饲养计划', form) console.log('添加饲养计划', form)
//验证是否为空 //验证是否为空
@ -131,37 +132,37 @@ export default {
// 此处重新拉取数据 // 此处重新拉取数据
this.dialog.addDialogVisible = false//添加成功关闭窗口 this.dialog.addDialogVisible = false//添加成功关闭窗口
}, },
// searchAnimal() { searchBreedingPlan() {
// console.log('动物搜索', this.searchInput) console.log('饲养计划搜索', this.searchInput)
// let searchResult = []//搜索结果数组 let searchResult = []//搜索结果数组
// //第一步匹配搜索选项，如果选择了特定用户身份 //第一步匹配搜索选项，如果选择了特定用户身份
// if (typeof this.searchInput.state === 'number') { if (typeof this.searchInput.state === 'number') {
// this.animals.forEach(e => { this.breedingPlans.forEach(e => {
// if (e.state === this.searchInput.state) { if (e.state === this.searchInput.state) {
// searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果 searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
// } }
// }) })
// } else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索 } else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
// searchResult = copy(this.animals) searchResult = copy(this.breedingPlans)
// } }
//
// let searchResult2 = [] let searchResult2 = []
// let keyset = splitKeyWords(this.searchInput.keyword)//切割关键字 let keyset = splitKeyWords(this.searchInput.keyword)//切割关键字
//
// //第二步进行模糊搜索 //第二步进行模糊搜索
// searchResult.forEach(e => { searchResult.forEach(e => {
// //如果该对象能匹配上所有关键字，则添加到结果 //如果该对象能匹配上所有关键字，则添加到结果
// // console.log('开始进行模糊匹配,对象、关键字集合分别为',e,keyset) // console.log('开始进行模糊匹配,对象、关键字集合分别为',e,keyset)
// let is = fuzzyMatching(e, keyset); let is = fuzzyMatching(e, keyset);
// if (is) { if (is) {
// searchResult2.push(e) searchResult2.push(e)
// } }
// // console.log('结束模糊匹配，结果为',e,keyset,is) // console.log('结束模糊匹配，结果为',e,keyset,is)
// }) })
// searchResult = searchResult2 searchResult = searchResult2
//
// this.tableData = searchResult this.tableData = searchResult
// }, },
}, },
mounted() { mounted() {
this.getBreedingPlans() this.getBreedingPlans()
@ -176,63 +177,61 @@ export default {
<div class="left"> <div class="left">
<el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加饲养计划</el-button> <el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加饲养计划</el-button>
</div> </div>
<!-- <div class="right">--> <div class="right">
<!-- <el-input--> <el-input
<!-- v-model="searchInput.keyword"--> v-model="searchInput.keyword"
<!-- style="max-width: 300px"--> style="max-width: 400px"
<!-- placeholder="搜索动物 空格隔开关键字"--> placeholder="搜索饲养计划 空格隔开关键字"
<!-- >--> >
<!-- <template #prepend>--> <template #prepend>
<!-- <el-select v-model="searchInput.state" placeholder="状态" style="width: 80px">--> <el-select v-model="searchInput.state" placeholder="状态" style="width: 80px">
<!-- <el-option label="不选择" value=""/>--> <el-option label="不选择" value=""/>
<!-- <el-option label="正常" :value="0"/>--> <el-option label="正常" :value="0"/>
<!-- <el-option label="异常" :value="1"/>--> <el-option label="异常" :value="1"/>
<!-- </el-select>--> </el-select>
<!-- </template>--> </template>
<!-- <template #append>--> <template #append>
<!-- <el-button :icon="Search" @click="searchAnimal()"/>--> <el-button :icon="Search" @click="searchBreedingPlan()"/>
<!-- </template>--> </template>
<!-- </el-input>--> </el-input>
<!-- </div>--> </div>
</div> </div>
<!-- <hr/>--> <!-- <hr/>-->
<!-- <div class="table">--> <!-- id: '',//int 饲养计划id-->
<!-- <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>--> <!-- name: '',//字符 饲养计划名称-->
<!-- <el-table-column fixed prop="id" label="动物ID"/>--> <!-- species: '',//字符 种类-->
<!-- <el-table-column fixed prop="name" label="动物名称" width="100"/>--> <!-- sex: '雄性',//字符 饲养动物性别-->
<!-- <el-table-column prop="sex" label="性别"/>--> <!-- phase: '',//字符 饲养动物阶段：幼年期、成长期、成年期、老年期-->
<!-- <el-table-column prop="species" label="动物种类" width="90"/>--> <!-- state: 0,//int 状态（0正常 1异常）-->
<!-- <el-table-column prop="weight" label="动物体重（KG）" width="130"/>--> <!-- describe: ''//字符 饲养计划的描述-->
<!-- <el-table-column prop="height" label="动物身高（M）" width="130"/>--> <div class="table">
<!-- <el-table-column prop="state" label="动物状态" width="90">--> <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>
<!-- <template #default="scope">--> <el-table-column fixed prop="id" label="饲养计划ID" width="100"/>
<!-- <span v-if="scope.row.state===0" style="color: green">正常</span>--> <el-table-column fixed prop="name" label="饲养计划名称" width="200"/>
<!-- <span v-else-if="scope.row.state===1" style="color: red">异常</span>--> <el-table-column prop="species" label="动物种类" width="90"/>
<!-- <span v-else>未知</span>--> <el-table-column prop="sex" label="性别" width="60"/>
<!-- </template>--> <el-table-column prop="phase" label="生长阶段" width="90"/>
<!-- </el-table-column>--> <el-table-column prop="state" label="动物状态" width="90">
<!-- <el-table-column prop="roleId" label="饲养员ID" width="120"/>--> <template #default="scope">
<!-- <el-table-column prop="color" label="动物颜色" width="150">--> <span v-if="scope.row.state===0" style="color: green">正常</span>
<!-- <template #default="scope">--> <span v-else-if="scope.row.state===1" style="color: red">异常</span>
<!-- {{ scope.row.color }}--> <span v-else>未知</span>
<!-- <el-color-picker v-model="scope.row.color" disabled/>--> </template>
<!-- </template>--> </el-table-column>
<!-- </el-table-column>--> <el-table-column prop="describe" label="计划描述" width="300"/>
<!-- <el-table-column prop="features" label="动物特征" width="100"/>--> <el-table-column fixed="right" label="操作" width="130">
<!-- <el-table-column prop="habit" label="生活习性" width="100"/>--> <template #default="scope">
<!-- <el-table-column fixed="right" label="操作" width="130">--> <el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
<!-- <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="deleteBreedingPlan(scope.row)">
<!-- </el-button>--> 删除
<!-- <el-button link type="danger" size="small" :icon="Delete" @click="deleteUser(scope.row)">--> </el-button>
<!-- 删除--> </template>
<!-- </el-button>--> </el-table-column>
<!-- </template>--> </el-table>
<!-- </el-table-column>--> </div>
<!-- </el-table>-->
<!-- </div>-->
</div> </div>
<!-- 添加动物对话框--> <!-- 添加动物对话框-->
@ -249,20 +248,20 @@ export default {
</ZooBreedingPlanFormDialog> </ZooBreedingPlanFormDialog>
</el-dialog> </el-dialog>
<!-- &lt;!&ndash; 编辑动物对话框&ndash;&gt;--> <!-- 编辑动物对话框-->
<!-- <el-dialog v-model="dialog.editDialogVisible" title="编辑动物" width="500" align-center draggable overflow--> <el-dialog v-model="dialog.editDialogVisible" title="编辑饲养计划" width="500" align-center draggable overflow
<!-- destroy-on-close>--> destroy-on-close>
<!-- <ZooAnimalFormDialog :animal="dialog.editData">--> <ZooBreedingPlanFormDialog :breedingPlan="dialog.editData">
<!-- <template #default="scope">--> <template #default="scope">
<!-- <el-button @click="dialog.editDialogVisible = false">--> <el-button @click="dialog.editDialogVisible = false">
<!-- 取消--> 取消
<!-- </el-button>--> </el-button>
<!-- <el-button type="primary" @click="editAnimal(scope.form)">--> <el-button type="primary" @click="editBreedingPlan(scope.form)">
<!-- 修改--> 修改
<!-- </el-button>--> </el-button>
<!-- </template>--> </template>
<!-- </ZooAnimalFormDialog>--> </ZooBreedingPlanFormDialog>
<!-- </el-dialog>--> </el-dialog>
</template> </template>
<style scoped> <style scoped>

9
src/pages/ZooUser.vue
View File

@ -2,7 +2,7 @@
import {Delete, Edit, Search, User} from "@element-plus/icons-vue"; import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
import {mapState,mapActions} from "vuex"; import {mapState,mapActions} from "vuex";
import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue"; import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
import {copy, fuzzyMatching, generateUsers, splitKeyWords} from "@/utils/common.js"; import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
export default { export default {
@ -88,6 +88,7 @@ export default {
}) })
} }
// 此处重新拉取数据 // 此处重新拉取数据
this.getUsers()
this.dialog.editDialogVisible = false//添加成功关闭窗口 this.dialog.editDialogVisible = false//添加成功关闭窗口
}, },
deleteUser(user) { deleteUser(user) {
@ -105,6 +106,7 @@ export default {
).then(() => { ).then(() => {
//进行删除操作 //进行删除操作
// …… // ……
this.getUsers()
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: '删除成功', message: '删除成功',
@ -135,6 +137,7 @@ export default {
}) })
} }
// 此处重新拉取数据 // 此处重新拉取数据
this.getUsers()
this.dialog.addDialogVisible = false//添加成功关闭窗口 this.dialog.addDialogVisible = false//添加成功关闭窗口
}, },
@ -197,8 +200,8 @@ export default {
<div class="right"> <div class="right">
<el-input <el-input
v-model="searchInput.keyword" v-model="searchInput.keyword"
style="max-width: 300px" style="width: 400px"
placeholder="搜索用户" placeholder="搜索用户 空格隔开关键字"
> >
<template #prepend> <template #prepend>
<el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px"> <el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">

4
src/store/index.js
View File

@ -1,5 +1,5 @@
import {createStore} from "vuex"; import {createStore} from "vuex";
import {generateAnimals, generateUsers} from "@/utils/common.js"; import {generateAnimals, generateBreedingPlans, generateUsers} from "@/utils/common.js";
const actions = { const actions = {
//更新登录用户 //更新登录用户
@ -25,7 +25,7 @@ const actions = {
}, },
//获取饲养计划 //获取饲养计划
getBreedingPlans(context) { getBreedingPlans(context) {
context.commit('updateBreedingPlans','') context.commit('updateBreedingPlans',generateBreedingPlans())
} }
} }

37
src/utils/common.js
View File

@ -35,6 +35,43 @@ export function generateAnimals() {
return animals return animals
} }
// id: '',//int 饲养计划id
// name: '',//字符 饲养计划名称
// species: '',//字符 种类
// sex: '雄性',//字符 饲养动物性别
// phase: '',//字符 饲养动物阶段：幼年期、成长期、成年期、老年期
// state: 0,//int 状态（0正常 1异常）
// describe: ''//字符 饲养计划的描述
export function generateBreedingPlans() {
const breedingPlans = []
for (let i = 0; i < 100; i++) {
let breedingPlan = {
id: i,
name: 'breeding' + (i + 3),
species: Math.floor(Math.random() * 10).toString(),
sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
phase:generatePhase(),
state: Math.floor(Math.random() * 2),
description: Math.floor(Math.random() * 500).toString(),
}
breedingPlans.push(breedingPlan)
}
return breedingPlans
}
function generatePhase() {
const phase = Math.floor(Math.random() * 4)
if (phase===0)
return '幼年期'
if (phase===1)
return '成长期'
if (phase===2)
return '成年期'
if (phase===3)
return '老年期'
}
//深拷贝任何值 //深拷贝任何值
export function copy(value) { export function copy(value) {
let result = JSON.stringify(value) let result = JSON.stringify(value)