初步完成动物管理的数据呈现、优化样式
This commit is contained in:
bicey
parent
491a667d03
commit
118bab0973
57
README.md
57
README.md
@ -105,7 +105,64 @@
|
||||
```
|
||||
后端修改对应的用户返回结果
|
||||
|
||||
## 动物信息管理功能
|
||||
|
||||
### 动物查询
|
||||
|
||||
打开界面直接显示数据、需要管理员权限
|
||||
|
||||
前端提供的数据，用户名
|
||||
```json
|
||||
{
|
||||
"username": "user1"
|
||||
}
|
||||
```
|
||||
后端根据用户名查询用户是否有权限访问再返回数据
|
||||
|
||||
若成功，返回所有用户的结果集（节省时间不搞分页了）
|
||||
|
||||
### 用户添加
|
||||
|
||||
需要管理员权限
|
||||
|
||||
前端提供的数据
|
||||
|
||||
```json
|
||||
{
|
||||
"user":{
|
||||
"username": "user2",
|
||||
"password": "123456",
|
||||
"auth": "1",
|
||||
"other": "更多需要提供的数据请写在接口文档里"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
后端返回状态码，哪个码表示什么意思记得写一下
|
||||
|
||||
### 用户删除
|
||||
|
||||
前端提供的数据，用户名
|
||||
```json
|
||||
{
|
||||
"username": "user1"
|
||||
}
|
||||
```
|
||||
后端删除对应的用户返回结果
|
||||
|
||||
### 用户编辑
|
||||
前端提供的数据，用户名
|
||||
```json
|
||||
{
|
||||
"user":{
|
||||
"username": "user2",
|
||||
"password": "123456",
|
||||
"auth": "1",
|
||||
"other": "更多需要提供的数据请写在接口文档里"
|
||||
}
|
||||
}
|
||||
```
|
||||
后端修改对应的用户返回结果
|
||||
|
||||
# 开发进度
|
||||
|
||||
|
||||
13
src/components/ZooAnimalFormDialog.vue
Normal file
13
src/components/ZooAnimalFormDialog.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "ZooAnimalFormDialog"
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -22,14 +22,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="aside">
|
||||
<div id="aside">
|
||||
<el-col>
|
||||
<h5 class="mb-2">用户功能</h5>
|
||||
<el-menu
|
||||
:default-active="$route.path"
|
||||
>
|
||||
<el-sub-menu index="1">
|
||||
<template #title>
|
||||
<template #title="scope">
|
||||
<el-icon>
|
||||
<location/>
|
||||
</el-icon>
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
</template>
|
||||
<el-menu-item index="/panel/home" @click="toPath('/panel/home')">首页</el-menu-item>
|
||||
<el-menu-item index="/panel/user" @click="toPath('/panel/user')">用户管理</el-menu-item>
|
||||
<el-menu-item index="1-3">动物基本数据</el-menu-item>
|
||||
<el-menu-item index="/panel/animal" @click="toPath('/panel/animal')">动物基本数据</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index="2">
|
||||
<template #title>
|
||||
|
||||
@ -5,7 +5,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div id="footer">
|
||||
<slot>我是底栏插槽</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -29,7 +29,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<div id="header">
|
||||
<div class="to-home left">
|
||||
<el-button :icon="HomeFilled" size="large" @click="$router.push('/panel/home')">返回首页</el-button>
|
||||
</div>
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
#header {
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
line-height: 60px;
|
||||
|
||||
@ -5,13 +5,13 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<div id="main">
|
||||
<slot>我是主内容插槽</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main {
|
||||
#main {
|
||||
background-color: ghostwhite;
|
||||
}
|
||||
|
||||
|
||||
@ -6,12 +6,13 @@ export default {
|
||||
userForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
auth: 0
|
||||
auth: 0,
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
user:{
|
||||
user: {
|
||||
type: Object,
|
||||
}
|
||||
},
|
||||
@ -20,6 +21,9 @@ export default {
|
||||
if (this.user) {
|
||||
this.userForm = this.user
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
console.log('ZooUserFormDialog-beforeUnmount',this);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,129 @@
|
||||
<script>
|
||||
import {copy} from "@/utils/common.js";
|
||||
|
||||
export default {
|
||||
name: "ZooAnimal"
|
||||
name: "ZooAnimal",
|
||||
data() {
|
||||
return {
|
||||
animals:[],
|
||||
tableData:[]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataFilters() {
|
||||
// 计算格式化后的数组
|
||||
// let data = copy(this.tableData)
|
||||
// data.forEach(e => {
|
||||
// if (e.auth === 0) {
|
||||
// e.auth = '管理员'
|
||||
// } else if (e.auth === 1) {
|
||||
// e.auth = '饲养员'
|
||||
// } else if (e.auth === 2) {
|
||||
// e.auth = '兽医'
|
||||
// }
|
||||
// })
|
||||
// return data
|
||||
return this.tableData
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//数据生成器
|
||||
for (let i = 0; i < 100; i++) {
|
||||
let animal = {
|
||||
id: i,
|
||||
name: 'animal' + (i + 3),
|
||||
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),
|
||||
state: Math.floor(Math.random() * 2),//状态（0正常 1异常）
|
||||
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()//生活习性
|
||||
}
|
||||
this.animals.push(animal)
|
||||
}
|
||||
this.tableData = copy(this.animals);//复制一份给表格展示
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="animals-root">
|
||||
<div class="select">
|
||||
<div class="left">
|
||||
<!-- <el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">创建用户</el-button>-->
|
||||
</div>
|
||||
<div class="right">
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="searchInput.keyWord"-->
|
||||
<!-- style="max-width: 300px"-->
|
||||
<!-- placeholder="搜索用户"-->
|
||||
<!-- >-->
|
||||
<!-- <template #prepend>-->
|
||||
<!-- <el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">-->
|
||||
<!-- <el-option label="不选择" value=""/>-->
|
||||
<!-- <el-option label="管理员" :value="0"/>-->
|
||||
<!-- <el-option label="饲养员" :value="1"/>-->
|
||||
<!-- <el-option label="兽医" :value="2"/>-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template #append>-->
|
||||
<!-- <el-button :icon="Search" @click="searchUser()"/>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-input>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <hr/>-->
|
||||
<div class="table">
|
||||
<el-table :data="dataFilters" style="width: 100%;height: 100%" empty-text="暂无数据" table-layout="auto">
|
||||
<el-table-column fixed prop="id" label="动物ID" />
|
||||
<el-table-column fixed prop="name" label="动物名称" />
|
||||
<el-table-column prop="sex" label="性别"/>
|
||||
<el-table-column prop="species" label="种类" />
|
||||
<el-table-column prop="weight" label="体重" />
|
||||
<el-table-column prop="height" label="身高" />
|
||||
<el-table-column prop="state" label="状态" />
|
||||
<el-table-column prop="roleId" label="饲养员ID" />
|
||||
<el-table-column prop="color" label="颜色" />
|
||||
<el-table-column prop="features" label="特征" />
|
||||
<el-table-column prop="habit" label="生活习性" />
|
||||
<el-table-column fixed="right" label="操作" width="130">
|
||||
<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="deleteUser(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table {
|
||||
/*width: 1300px;*/
|
||||
height: 516px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="root">
|
||||
<div id="login-root">
|
||||
<div class="center">
|
||||
<el-card style="width: 480px" shadow="always" header="登录">
|
||||
<el-form :model="user" label-width="auto" style="max-width: 600px">
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.root {
|
||||
#login-root {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
background-color: skyblue;
|
||||
|
||||
@ -27,7 +27,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="root center">
|
||||
<div id="panel-root" class="center">
|
||||
<ZooAside class="aside absolute"></ZooAside>
|
||||
<ZooHeader class="header absolute"></ZooHeader>
|
||||
<ZooMain class="main absolute"><router-view></router-view></ZooMain>
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.root {
|
||||
#panel-root {
|
||||
width: 1300px;
|
||||
height: 700px;
|
||||
/*background-color: pink;*/
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
|
||||
import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
|
||||
import {copy} from "@/utils/common.js";
|
||||
|
||||
|
||||
export default {
|
||||
@ -26,7 +27,7 @@ export default {
|
||||
|
||||
dataFilters() {
|
||||
// 计算格式化后的数组
|
||||
let data = this.copy(this.tableData)
|
||||
let data = copy(this.tableData)
|
||||
data.forEach(e => {
|
||||
if (e.auth === 0) {
|
||||
e.auth = '管理员'
|
||||
@ -58,20 +59,32 @@ export default {
|
||||
dialog: {
|
||||
addDialogVisible: false,//添加用户对话框
|
||||
editDialogVisible: false,//编辑用户对话框
|
||||
editUser:{}
|
||||
editUser: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showEditDialog(user) {
|
||||
console.log('点击了编辑',user)
|
||||
// console.log('点击了编辑',user)
|
||||
//这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
|
||||
this.dialog.editUser = this.users.find(e => e.username === user.username)
|
||||
console.log('点击了编辑',this.dialog.editUser)
|
||||
console.log('点击了编辑', this.dialog.editUser)
|
||||
this.dialog.editDialogVisible = true
|
||||
},
|
||||
editUser(user) {
|
||||
console.log('确认编辑用户', user)
|
||||
// 判断表单是否为空
|
||||
isEmpty(form) {
|
||||
if (!form.username || !form.password) {
|
||||
//返回提示
|
||||
return ElMessage({
|
||||
message: '用户名和密码不能为空',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
},
|
||||
editUser(form) {
|
||||
console.log('确认编辑用户', form)
|
||||
//判断是否为空
|
||||
return this.isEmpty(form);
|
||||
//编辑失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -91,9 +104,32 @@ export default {
|
||||
},
|
||||
deleteUser(user) {
|
||||
console.log('确认删除用户', user)
|
||||
return ElMessageBox.confirm(
|
||||
'该操作不可撤销，是否继续？',
|
||||
'删除用户：'+user.username,
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(() => {
|
||||
//进行删除操作
|
||||
// ……
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功',
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: '取消删除',
|
||||
})
|
||||
})
|
||||
},
|
||||
addUser(user) {
|
||||
console.log('添加用户',user)
|
||||
addUser(form) {
|
||||
console.log('添加用户', form)
|
||||
//验证是否为空
|
||||
return this.isEmpty(form);
|
||||
//添加失败
|
||||
if (false) {
|
||||
return ElMessage({
|
||||
@ -130,14 +166,9 @@ export default {
|
||||
})
|
||||
searchResult = searchResult2
|
||||
}
|
||||
|
||||
this.tableData = searchResult;
|
||||
},
|
||||
//深拷贝任何值
|
||||
copy(value) {
|
||||
let result = JSON.stringify(value)
|
||||
return JSON.parse(result)
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
//数据生成器
|
||||
@ -150,42 +181,46 @@ export default {
|
||||
}
|
||||
this.users.push(user)
|
||||
}
|
||||
this.tableData = this.copy(this.users);//复制一份给表格展示
|
||||
this.tableData = copy(this.users);//复制一份给表格展示
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="root">
|
||||
<div id="users-root">
|
||||
<div class="select">
|
||||
<el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">添加用户</el-button>
|
||||
<el-input
|
||||
v-model="searchInput.keyWord"
|
||||
style="max-width: 300px"
|
||||
placeholder="搜索用户"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">
|
||||
<el-option label="不选择" value=""/>
|
||||
<el-option label="管理员" :value="0"/>
|
||||
<el-option label="饲养员" :value="1"/>
|
||||
<el-option label="兽医" :value="2"/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="searchUser()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
<div class="left">
|
||||
<el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">创建用户</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-input
|
||||
v-model="searchInput.keyWord"
|
||||
style="max-width: 300px"
|
||||
placeholder="搜索用户"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">
|
||||
<el-option label="不选择" value=""/>
|
||||
<el-option label="管理员" :value="0"/>
|
||||
<el-option label="饲养员" :value="1"/>
|
||||
<el-option label="兽医" :value="2"/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="searchUser()"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<!-- <hr/>-->
|
||||
<div class="table">
|
||||
<el-table :data="dataFilters" style="width: 100%;height: 90%" empty-text="暂无数据">
|
||||
<el-table-column fixed prop="username" label="用户名" width="150"/>
|
||||
<el-table-column prop="password" label="密码" width="120"/>
|
||||
<el-table-column prop="auth" label="身份" width="120"/>
|
||||
<el-table-column prop="" label="占位置" width="700"/>
|
||||
<el-table-column fixed="right" label="Operations" width="130">
|
||||
<el-table :data="dataFilters" style="width: 100%;height: 100%" empty-text="暂无数据" table-layout="auto">
|
||||
<el-table-column fixed prop="username" label="用户名" />
|
||||
<el-table-column prop="password" label="密码" />
|
||||
<el-table-column prop="auth" label="身份" />
|
||||
<!-- <el-table-column prop="" label="占位置" width="700"/>-->
|
||||
<el-table-column fixed="right" label="操作" width="130">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
|
||||
编辑
|
||||
@ -203,35 +238,51 @@ export default {
|
||||
<el-dialog v-model="dialog.addDialogVisible" title="添加用户" width="400" align-center draggable overflow>
|
||||
<ZooUserFormDialog class="dialog-form">
|
||||
<template #default="form">
|
||||
<el-button @click="dialog.addDialogVisible = false">
|
||||
取消</el-button>
|
||||
<el-button type="primary" @click="addUser(form)">
|
||||
添加</el-button>
|
||||
<el-button @click="dialog.addDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="addUser(form)">
|
||||
添加
|
||||
</el-button>
|
||||
</template>
|
||||
</ZooUserFormDialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 编辑用户对话框-->
|
||||
<el-dialog v-model="dialog.editDialogVisible" title="编辑用户" width="400" align-center draggable overflow>
|
||||
<ZooUserFormDialog :user="dialog.editUser">
|
||||
<template #default="form">
|
||||
<el-button @click="dialog.editDialogVisible = false">
|
||||
取消</el-button>
|
||||
<el-button type="primary" @click="editUser(form)">
|
||||
修改</el-button>
|
||||
</template>
|
||||
</ZooUserFormDialog>
|
||||
<el-dialog v-model="dialog.editDialogVisible" title="编辑用户" width="400" align-center draggable overflow
|
||||
destroy-on-close>
|
||||
<ZooUserFormDialog :user="dialog.editUser">
|
||||
<template #default="form">
|
||||
<el-button @click="dialog.editDialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button type="primary" @click="editUser(form)">
|
||||
修改
|
||||
</el-button>
|
||||
</template>
|
||||
</ZooUserFormDialog>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.table {
|
||||
/*width: 1300px;*/
|
||||
height: 500px;
|
||||
height: 516px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
.left {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
@ -5,6 +5,7 @@ import ZooLogin from '../pages/ZooLogin.vue'
|
||||
import ZooPanel from "@/pages/ZooPanel.vue";
|
||||
import ZooHome from '../pages/ZooHome.vue'
|
||||
import ZooUser from "@/pages/ZooUser.vue";
|
||||
import ZooAnimal from "@/pages/ZooAnimal.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
@ -36,6 +37,11 @@ const router = createRouter({
|
||||
path:'user',
|
||||
component:ZooUser,
|
||||
meta:{isAuth: true},//需要权限
|
||||
},
|
||||
{
|
||||
path:'animal',
|
||||
component:ZooAnimal,
|
||||
meta:{isAuth: true},//需要权限
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
6
src/utils/common.js
Normal file
6
src/utils/common.js
Normal file
@ -0,0 +1,6 @@
|
||||
|
||||
//深拷贝任何值
|
||||
export function copy(value) {
|
||||
let result = JSON.stringify(value)
|
||||
return JSON.parse(result)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user