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-06-09 16:21:01 +08:00
parent fca50296df
commit f3e9ba083b
14 changed files with 167 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ZooAnimalFormDialog.vue
View File

@ -48,7 +48,7 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="动物ID">
<el-input v-model.number="form.id" placeholder="请设置动物ID" type="number" :disabled="edit || detail"/>
<el-input v-model.number="form.id" placeholder="系统自动生成ID" type="number" :disabled="edit || detail || true"/>
</el-form-item>
<el-form-item label="动物名称">
<el-input v-model="form.name" placeholder="动物名称" :disabled="detail"/>

2
src/components/ZooArchiveFormDialog.vue
View File

@ -47,7 +47,7 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="记录号">
<el-input v-model.number="form.id" type="number" placeholder="记录号" :disabled="edit || detail"/>
<el-input v-model.number="form.id" type="number" placeholder="系统自动生成记录号" :disabled="edit || detail || true"/>
</el-form-item>
<el-form-item label="动物ID">
<el-input v-model.number="form.animalId" type="number" placeholder="动物ID" :disabled="detail"/>

2
src/components/ZooAside.vue
View File

@ -19,7 +19,7 @@ export default {
}
},
mounted() {
console.log('auth', this.loginUser)
// console.log('auth', this.loginUser)
}
}

2
src/components/ZooBreedingPlanFormDialog.vue
View File

@ -45,7 +45,7 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="计划ID">
<el-input v-model.number="form.id" type="number" placeholder="饲养计划ID" :disabled="edit || detail"/>
<el-input v-model.number="form.id" type="number" placeholder="系统自动生成ID" :disabled="edit || detail || true"/>
</el-form-item>
<el-form-item label="计划名称">
<el-input v-model="form.name" placeholder="计划名称" :disabled="detail"/>

2
src/components/ZooHealthFormDialog.vue
View File

@ -48,7 +48,7 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="监测号">
<el-input v-model.number="form.id" type="number" placeholder="监测号" :disabled="edit || detail"/>
<el-input v-model.number="form.id" type="number" placeholder="系统自动生成监测号" :disabled="edit || detail || true"/>
</el-form-item>
<el-form-item label="动物ID">
<el-input v-model.number="form.animalId" type="number" placeholder="动物ID" :disabled="detail"/>

6
src/components/ZooUserFormDialog.vue
View File

@ -22,7 +22,7 @@ export default {
type: Boolean,
default: false
},
edit:{
edit: {
type: Boolean,
default: false
}
@ -42,8 +42,8 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="用户ID">
<el-input v-model.number="form.id" placeholder="请设置用户ID" type="number"
:disabled="edit || detail"/>
<el-input v-model.number="form.id" placeholder="系统自动生成ID" type="number"
:disabled="edit || detail|| true"/>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="form.username" placeholder="请设置用户名" :disabled="detail"/>

147
src/pages/ZooAnimal.vue
View File

@ -2,9 +2,9 @@
import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
import {Delete, Document, DocumentAdd, Edit, Search, Tickets} from "@element-plus/icons-vue";
import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
import {mapActions, mapMutations, mapState} from "vuex";
import {mapMutations, mapState} from "vuex";
import ZooArchiveTimeline from "@/components/ZooArchiveTimeline.vue";
import request, {frontendAnimals} from "@/utils/request.js";
import request, {frontendAnimal, frontendAnimals} from "@/utils/request.js";
export default {
name: "ZooAnimal",
@ -67,7 +67,6 @@ export default {
}
},
methods: {
...mapActions(["getAnimals"]),
...mapMutations(['updateAnimals','updateAnimalsTableData']),
// 显示详情弹窗
@ -76,20 +75,18 @@ export default {
//从后端获取需要查询的数据，防止数据前后不一致
request.queryAnimalRequest(data.id).then(response => {
console.log(response.data)
if (response.data.data===null){
this.refresh();
return ElMessage({
message: '该动物不存在，请刷新',
type: 'warning',
})
} else {
this.dialog.dialogData = frontendAnimal(response.data.data)
//显示弹窗
this.dialog.detailDialogVisible = true
}
})
//这里先用假数据代替一下
this.dialog.dialogData = this.animals.find(e => e.id === data.id)
//显示弹窗
this.dialog.detailDialogVisible = true
},
//显示编辑弹窗
@ -97,45 +94,49 @@ export default {
console.log('显示编辑', data)
//从后端获取需要查询的数据，防止数据前后不一致
//这里先用假数据代替一下
this.dialog.dialogData = this.animals.find(e => e.id === data.id)
//显示弹窗
this.dialog.editDialogVisible = true
request.queryAnimalRequest(data.id).then(response => {
if (response.data.data===null){
this.refresh();
return ElMessage({
message: '该动物不存在，请刷新',
type: 'warning',
})
} else {
this.dialog.dialogData = frontendAnimal(response.data.data)
//显示弹窗
this.dialog.editDialogVisible = true
}
})
},
edit(data) {
console.log('编辑', data)
//判断表单是否为空
return this.isEmpty(data);
//验证是否为空
if (this.isEmpty(data)) {
return;
}
//这里将数据传给后端进行数据更新
//编辑失败
if (false) {
return ElMessage({
message: '编辑失败',
type: 'warning',
})
}
request.updateAnimalRequest(data).then(response => {
if (response.data.code===1){
// 编辑成功
// 刷新数据
this.refresh()
//编辑成功
if (false) {
return ElMessage({
message: '编辑成功',
type: 'success',
})
}
this.dialog.editDialogVisible = false//关闭窗口
// //从后端重新拉取数据
// this.getAnimals()
// this.search()
// 刷新数据
this.refresh()
//关闭窗口
this.dialog.editDialogVisible = false
return ElMessage({
message: '编辑成功',
type: 'success',
})
}else {
return ElMessage({
message: '编辑失败',
type: 'warning',
})
}
})
},
delete_(data) {
@ -150,19 +151,34 @@ export default {
type: 'warning',
}
).then(() => {
//进行删除操作
//从后端获取需要查询的数据，防止数据前后不一致
request.queryAnimalRequest(data.id).then(response => {
if (response.data.data===null){
this.refresh();
return ElMessage({
message: '该动物不存在，请刷新',
type: 'warning',
})
} else {
//进行删除操作
request.deleteAnimalRequest(data.id).then(response => {
if (response.data.code===1){
// 刷新数据
this.refresh()
// //从后端重新拉取数据
// this.getAnimals()
// this.search()
// 刷新数据
this.refresh()
// 返回提示
ElMessage({
type: 'success',
message: '删除成功',
// 返回提示
ElMessage({
type: 'success',
message: '删除成功',
})
} else {
ElMessage({
type: 'success',
message: '删除失败',
})
}
})
}
})
}).catch(() => {
ElMessage({
@ -177,26 +193,12 @@ export default {
//验证是否为空
if (this.isEmpty(data)) {
return ElMessage({
message: '请输入动物名称',
type: 'warning',
})
return;
}
//先查询动物是否存在
request.queryAnimalRequest(data.id).then(response => {
if (response.data.data!==null){
return ElMessage({
message: '该动物已存在',
type: 'warning',
})
}
})
request.addAnimalRequest(data).then(response => {
if (response.data.code===1){
//添加成功
// 刷新数据
this.refresh()
@ -206,6 +208,11 @@ export default {
message: '添加成功',
type: 'success',
})
}else {
return ElMessage({
message: '添加失败',
type: 'warning',
})
}
})
},
@ -234,7 +241,10 @@ export default {
// 判断表单是否为空
isEmpty(form) {
if (!form.name) {
return true
return ElMessage({
message: '请输入动物名称',
type: 'warning',
})
}
},
@ -306,9 +316,6 @@ export default {
mounted() {
// 加载完成后拉取数据
this.refresh()
// request.queryAnimalRequest(0).then(response => {
// console.log(response.data,"11111111111111111111111111111")
// })
}
}
</script>

7
src/pages/ZooLogin.vue
View File

@ -26,7 +26,7 @@ export default {
...mapMutations(['updateLoginUser']),
// 登录
login() {
console.log('登录', this.form)
console.log('点击登录', this.form)
//判断表单是否为空
if (!this.form.username || !this.form.password) {
//返回提示
@ -40,8 +40,8 @@ export default {
request.login(this.form).then(response => {
if (response.data.code === 1) {
// 登录成功
this.updateLoginUser(frontendLoginUser(response.data.data, this.form.username))
localStorage.setItem('username', this.form.username);//本地存储登录用户名
this.updateLoginUser(frontendLoginUser(response.data.data))
localStorage.setItem('username', response.data.data.username);//本地存储登录用户名
// 跳转到面板首页
this.$router.push('/panel/home')
return ElMessage({
@ -68,7 +68,6 @@ export default {
//自动填充历史登录的用户
this.form.username = localStorage.getItem('username');
}
}
</script>

6
src/pages/ZooPanel.vue
View File

@ -24,7 +24,13 @@ export default {
ZooFooter
},
mounted() {
console.log("登录用户",this.$store.state.loginUser)
//初始化数据
this.getUsers();
this.getAnimals();
this.getBreedingPlans();
this.getArchives();
this.getHealths();
}
}
</script>

68
src/pages/ZooUser.vue
View File

@ -3,6 +3,7 @@ import {Delete, Edit, Search, User, Document} from "@element-plus/icons-vue";
import {mapState, mapActions, mapMutations} from "vuex";
import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
import {copy, fuzzyMatching, splitKeyWords, showPassword, hidePassword} from "@/utils/common.js";
import request, {frontendUsers} from "@/utils/request.js";
export default {
@ -65,7 +66,7 @@ export default {
hidePassword,
showPassword,
...mapActions(['getUsers']),
...mapMutations(['updateUsersTableData']),
...mapMutations(['updateUsers','updateUsersTableData']),
//显示详情弹窗
showDetail(data) {
@ -163,33 +164,35 @@ export default {
console.log('添加', data)
//验证是否为空
return this.isEmpty(data);
if (this.isEmpty(data)) {
return;
}
//先查询用户是否存在
request.queryUserRequest(data.id).then(response => {
console.log(response.data.data,"aaaaaaaaaaaaaaaaaa")
if (response.data.data!=null){
return ElMessage({
message: '该用户ID已存在',
type: 'warning',
})
}
})
//添加失败
if (false) {
return ElMessage({
message: '该用户已存在',
type: 'warning',
})
}
//添加成功
if (false) {
return ElMessage({
message: '添加成功',
type: 'success',
})
}
request.addUserRequest(data).then(response => {
if (response.data.code===1){
// 刷新数据
this.refresh()
// // 此处重新拉取数据
// this.getUsers()
// this.search()
this.dialog.addDialogVisible = false//添加成功关闭窗口
// 刷新数据
this.refresh()
this.dialog.addDialogVisible = false//添加成功关闭窗口
return ElMessage({
message: '添加成功',
type: 'success',
})
}
})
},
// 判断表单是否为空
@ -257,22 +260,19 @@ export default {
console.log('刷新数据')
//先拉取一遍数据
this.getUsers()
request.queryUserRequest().then(response => {
if (response.data.code === 1) {
this.updateUsers(frontendUsers(response.data.data))
}
//可能输入了搜索关键字，故执行一次搜索
this.search()
//可能输入了搜索关键字，故执行一次搜索
this.search()
//获取结果的分页
this.getPagesData()
//获取结果的分页
this.getPagesData()
})
}
},
mounted() {
// // 加载完成后拉取数据
// this.getUsers()
//
// //获取分页后显示的数据
// this.getPagesData()
this.refresh()
},
}

2
src/router/index.js
View File

@ -76,7 +76,7 @@ router.beforeEach((to, from, next) => {
//不是登录界面都需要权限。。。
// console.log(to, from, next);
if (to.path !== '/login') {
if (!store.state.loginUser) {
if (!store.state.loginUser.username) {
router.replace({
path: '/login',
})

17
src/store/index.js
View File

@ -1,6 +1,6 @@
import {createStore} from "vuex";
import {copy, generateAnimals, generateArchives, generateBreedingPlans, generateUsers} from "@/utils/common.js";
import request, {frontendAnimals, frontendLoginUser} from "@/utils/request.js";
import request, {frontendAnimals, frontendUsers} from "@/utils/request.js";
import router from "@/router/index.js";
const actions = {
@ -8,14 +8,13 @@ const actions = {
getUsers(context) {
console.log('getUsers')
//通过后端获取数据
// request.queryUserRequest().then(response => {
// if (response.data.code === 1) {
// context.commit('updateUsers', response.data.data);
// console.log(response.data.data);
// }
// })
// context.commit('updateUsers', generateUsers())
context.commit('updateUsers', context.state.users);
request.queryUserRequest().then(response => {
if (response.data.code === 1) {
context.commit('updateUsers', frontendUsers(response.data.data));
}
})
// // context.commit('updateUsers', generateUsers())
// context.commit('updateUsers', context.state.users);
},
//获取动物数据
getAnimals(context) {

4
src/utils/common.js
View File

@ -290,7 +290,7 @@ export function hidePassword(event) {
export function splitKeyWords(keyword) {
let keyset = keyword.split(' ')//提取关键字
keyset = Array.from(new Set(keyset))//关键字去重
console.log('切割去重好的关键字', keyset)
// console.log('切割去重好的关键字', keyset)
return keyset;
}
@ -307,7 +307,7 @@ export function fuzzyMatching(object, keyset) {
function keywordMatching(object, keyword) {
//该关键字为空，肯定能匹配上
if (keyword === '') {
console.log('keywordMatching关键字为空', object, keyword, true)
// console.log('keywordMatching关键字为空', object, keyword, true)
return true
}
//只要对象的任意属性能匹配一次关键字就返回true，some():遇到true就返回true，所有false就返回false

34
src/utils/request.js
View File

@ -15,7 +15,7 @@ export default {
//用户请求
addUserRequest(user) {
return instance.post("/zoo/account/add", backendUser(user));
return instance.post("/zoo/account/save", backendUser(user));
},
deleteUserRequest(id) {
return instance.get("/zoo/account/delete", {params: {id}});
@ -91,14 +91,31 @@ export default {
// }
// 将后端对象转化为符合前端需求的对象
export function frontendLoginUser(data, username) {
export function frontendLoginUser(data) {
return {
id: data.roleid,
username: username,
id: data.id,
username: data.username,
auth: data.permissions
};
}
export function frontendUsers(users){
const newUsers = []
users.forEach(user => {
newUsers.push(frontendUser(user));
})
return newUsers
}
export function frontendUser(user){
return {
id: user.id,
username: user.username,
password: user.password,
auth: user.permissions
}
}
export function frontendAnimals(animals) {
const newAnimals = []
animals.forEach((element) => {
@ -111,7 +128,7 @@ export function frontendAnimal(animal) {
return {
id: animal.aId,
name: animal.name,
sex: animal.sex === 0 ? '雄性' : '雌性',
sex: animal.sex,
species: animal.species,//种类
weight: animal.weight,
height: animal.height,
@ -125,7 +142,12 @@ export function frontendAnimal(animal) {
// 将前端对象的属性转为能和后端对应上属性的对象
export function backendUser(user) {
return {}
return {
id: user.id,
username: user.username,
password: user.password,
permissions: user.auth
}
}
export function backendAnimal(animal) {