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-22 19:36:14 +08:00
parent 6adc227862
commit 8e647163ba
14 changed files with 227 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.vue
View File

@ -1,9 +1,11 @@
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>
<template>
<router-view></router-view>
<el-config-provider :locale="zhCn">
<router-view></router-view>
</el-config-provider>
</template>

12
src/assets/common.css
View File

@ -1,3 +1,5 @@
/*通用样式*/
/*浏览器默认margin为8px，会出现滚动条的问题，因此此处设置为0*/
body {
margin: 0;
@ -35,9 +37,11 @@ body {
transform: translate(-50%, -50%);
}
/*main容器样式*/
/*与pages组件相关的所有样式*/
.table {
height: 546px;
height: 506px;
margin: 0 30px;
}
@ -54,3 +58,9 @@ body {
height: 60px;
line-height: 60px;
}
.pager {
width: 100%;
height: 40px;
/*line-height: 40px;*/
/*padding: 10px;*/
}

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="form.id" placeholder="请设置动物ID" type="number" :disabled="edit || detail"/>
<el-input v-model.number="form.id" placeholder="请设置动物ID" type="number" :disabled="edit || detail"/>
</el-form-item>
<el-form-item label="动物名称">
<el-input v-model="form.name" placeholder="动物名称" :disabled="detail"/>

6
src/components/ZooArchiveFormDialog.vue
View File

@ -47,10 +47,10 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="档案号">
<el-input v-model="form.id" type="number" placeholder="记录号" :disabled="edit || detail"/>
<el-input v-model.number="form.id" type="number" placeholder="记录号" :disabled="edit || detail"/>
</el-form-item>
<el-form-item label="记录的动物ID">
<el-input v-model="form.animalId" type="number" placeholder="记录的动物ID" :disabled="detail"/>
<el-input v-model.number="form.animalId" type="number" placeholder="记录的动物ID" :disabled="detail"/>
</el-form-item>
<el-form-item label="记录的动物名">
<el-input v-model="form.animalName" placeholder="记录的动物名" :disabled="detail"/>
@ -90,7 +90,7 @@ export default {
:disabled="detail"/>
</el-form-item>
<el-form-item label="记录人ID">
<el-input v-model="form.roleId" type="number" placeholder="记录人ID" :disabled="detail"/>
<el-input v-model.number="form.roleId" type="number" placeholder="记录人ID" :disabled="detail"/>
</el-form-item>
<el-form-item label="记录描述">
<el-input

4
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="form.id" type="number" placeholder="饲养计划ID" :disabled="edit || detail"/>
<el-input v-model.number="form.id" type="number" placeholder="饲养计划ID" :disabled="edit || detail"/>
</el-form-item>
<el-form-item label="计划名称">
<el-input v-model="form.name" placeholder="计划名称" :disabled="detail"/>
@ -74,7 +74,7 @@ export default {
</el-radio-group>
</el-form-item>
<el-form-item label="执行饲养员">
<el-input v-model="form.roleId" type="number" placeholder="执行饲养员" :disabled="detail"/>
<el-input v-model.number="form.roleId" type="number" placeholder="执行饲养员" :disabled="detail"/>
</el-form-item>
<el-form-item label="计划描述" >
<el-input

2
src/components/ZooUserFormDialog.vue
View File

@ -42,7 +42,7 @@ export default {
<template>
<el-form label-width="auto">
<el-form-item label="用户ID">
<el-input v-model="form.id" placeholder="请设置用户ID" type="number"
<el-input v-model.number="form.id" placeholder="请设置用户ID" type="number"
:disabled="edit || detail"/>
</el-form-item>
<el-form-item label="用户名">

1
src/main.js
View File

@ -16,4 +16,3 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.use(router)
app.use(store)
app.mount('#app')

38
src/pages/ZooAnimal.vue
View File

@ -2,7 +2,7 @@
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,mapState} from "vuex";
import {mapActions, mapMutations, mapState} from "vuex";
import ZooArchiveTimeline from "@/components/ZooArchiveTimeline.vue";
export default {
@ -10,6 +10,11 @@ export default {
components: {ZooArchiveTimeline, ZooAnimalFormDialog},
data() {
return {
//表格分页显示的数据
pagesData: [],
pageSize: 20,//每页有多少条数据
currentPage: 1,//当前页
// 搜索框的输入
searchInput: {
option: '',//状态（0正常 1异常）
@ -62,6 +67,7 @@ export default {
},
methods: {
...mapActions(["getAnimals"]),
...mapMutations(['updateAnimalsTableData']),
// 显示详情弹窗
showDetail(data) {
@ -237,12 +243,30 @@ export default {
})
searchResult = searchResult2
this.tableData = searchResult
this.updateAnimalsTableData(searchResult)
this.getPagesData()
},
//当前页切换时触发
handleCurrentChange(val) {
console.log('分页被切换',val)
this.currentPage = val
this.getPagesData()
},
getPagesData() {
console.log('获取分页数据')
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
this.pagesData = this.animalsTableData.slice(start, end)
}
},
mounted() {
// 加载完成后拉取数据
this.getAnimals()
//获取分页后显示的数据
this.getPagesData()
}
}
</script>
@ -275,7 +299,7 @@ export default {
<!-- <hr/>-->
<div class="table">
<el-table :data="animalsTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
<el-table-column fixed prop="id" label="动物ID" width="70"/>
<el-table-column fixed prop="name" label="动物名称" width="100"/>
<el-table-column prop="sex" label="性别" width="60"/>
@ -316,6 +340,14 @@ export default {
</el-table-column>
</el-table>
</div>
<!-- 分页-->
<div class="pager relative">
<div class="center">
<el-pagination background layout="total, prev, pager, next, jumper" :total="animalsTableData.length"
:page-size="pageSize" small @current-change="handleCurrentChange"/>
</div>
</div>
</div>
<!-- 添加动物对话框-->

69
src/pages/ZooArchive.vue
View File

@ -1,7 +1,7 @@
<script>
import ZooArchiveFormDialog from "@/components/ZooArchiveFormDialog.vue";
import {Delete, DocumentAdd, Document, Edit, Search, Tickets} from "@element-plus/icons-vue";
import {mapState,mapActions} from "vuex";
import {Delete, DocumentAdd, Document, Edit, Search, Tickets, Timer} from "@element-plus/icons-vue";
import {mapState, mapActions, mapMutations} from "vuex";
import {copy, splitKeyWords, fuzzyMatching, sortByDateTime} from "@/utils/common.js";
import ZooArchiveTimeline from "@/components/ZooArchiveTimeline.vue";
@ -10,6 +10,12 @@ export default {
components: {ZooArchiveTimeline, ZooArchiveFormDialog},
data() {
return {
//表格分页显示的数据
pagesData: [],
pageSize: 20,//每页有多少条数据
currentPage: 1,//当前页
order:1,//排序相关参数
// 搜索框的输入
searchInput: {
option: '',//状态（0正常 1异常）
@ -48,6 +54,9 @@ export default {
Tickets() {
return Tickets
},
Timer() {
return Timer
},
//endregion
...mapState(["archives",'archivesTableData'])
},
@ -61,7 +70,9 @@ export default {
}
},
methods: {
sortByDateTime,
...mapActions(["getArchives"]),
...mapMutations(['updateArchivesTableData']),
// 显示详情弹窗
showDetail(data) {
@ -237,12 +248,51 @@ export default {
})
searchResult = searchResult2
this.tableData = searchResult
this.updateArchivesTableData(searchResult)
this.getPagesData()
},
//按时间排序
timeSort(){
//降序
if (this.order===0){
this.order++
this.updateArchivesTableData(sortByDateTime(copy(this.archivesTableData)))
this.getPagesData()
return
}
//升序
if (this.order===1){
this.order--
this.updateArchivesTableData(sortByDateTime(copy(this.archivesTableData)).reverse())
this.getPagesData()
}
},
//分页相关方法
//region
//当前页切换时触发
handleCurrentChange(val) {
console.log('分页被切换',val)
this.currentPage = val
this.getPagesData()
},
getPagesData() {
console.log('获取分页数据')
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
this.pagesData = this.archivesTableData.slice(start, end)
}
//endregion
},
mounted() {
// 加载完成后拉取数据
this.getArchives()
//获取分页后显示的数据
this.getPagesData()
},
}
</script>
@ -254,6 +304,7 @@ export default {
<el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加记录</el-button>
</div>
<div class="right">
<el-button type="primary" :icon="Timer" @click="timeSort" style="margin-right: 40px">按时间升 / 降序</el-button>
<el-input
v-model="searchInput.keyword"
style="width: 500px"
@ -274,7 +325,7 @@ export default {
</div>
<div class="table">
<el-table :data="archivesTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe :default-sort="{prop: 'date', order: 'descending'}">
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
<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"/>
@ -287,7 +338,7 @@ export default {
</template>
</el-table-column>
<el-table-column prop="type" label="记录类型" width="90"/>
<el-table-column prop="date" label="记录日期" width="110" sortable/>
<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"/>
@ -309,6 +360,14 @@ export default {
</el-table-column>
</el-table>
</div>
<!-- 分页-->
<div class="pager relative">
<div class="center">
<el-pagination background layout="total, prev, pager, next, jumper" :total="archivesTableData.length"
:page-size="pageSize" small @current-change="handleCurrentChange"/>
</div>
</div>
</div>
<!-- 添加记录对话框-->

39
src/pages/ZooBreeding.vue
View File

@ -1,6 +1,6 @@
<script>
import ZooBreedingPlanFormDialog from "@/components/ZooBreedingPlanFormDialog.vue";
import {mapState,mapActions} from "vuex";
import {mapState, mapActions, mapMutations} from "vuex";
import {Delete, DocumentAdd, Document,Edit, Search} from "@element-plus/icons-vue";
import {copy, splitKeyWords,fuzzyMatching} from "@/utils/common.js";
@ -9,7 +9,10 @@ export default {
components: {ZooBreedingPlanFormDialog},
data() {
return {
tableData: [],//表格数据
//表格分页显示的数据
pagesData: [],
pageSize: 20,//每页有多少条数据
currentPage: 1,//当前页
// 搜索框的输入
searchInput: {
@ -58,6 +61,7 @@ export default {
},
methods: {
...mapActions(["getBreedingPlans"]),
...mapMutations(['updateBreedingPlansTableData']),
//显示详情弹窗
showDetail(data) {
@ -212,12 +216,31 @@ export default {
})
searchResult = searchResult2
this.tableData = searchResult
this.updateBreedingPlansTableData(searchResult)
this.getPagesData()
},
//当前页切换时触发
handleCurrentChange(val) {
console.log('分页被切换',val)
this.currentPage = val
this.getPagesData()
},
getPagesData() {
console.log('获取分页数据')
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
this.pagesData = this.breedingPlansTableData.slice(start, end)
}
},
mounted() {
// 加载完成后拉取数据
this.getBreedingPlans()
//获取分页后显示的数据
this.getPagesData()
}
}
</script>
@ -249,7 +272,7 @@ export default {
</div>
<div class="table">
<el-table :data="breedingPlansTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
<el-table :data="pagesData" style="width: 100%;height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
<el-table-column fixed prop="id" label="饲养计划ID" width="100"/>
<el-table-column fixed prop="name" label="饲养计划名称" width="200"/>
<el-table-column prop="roleId" label="执行饲养员" width="100"/>
@ -279,6 +302,14 @@ export default {
</el-table-column>
</el-table>
</div>
<!-- 分页-->
<div class="pager relative">
<div class="center">
<el-pagination background layout="total, prev, pager, next, jumper" :total="breedingPlansTableData.length"
:page-size="pageSize" small @current-change="handleCurrentChange"/>
</div>
</div>
</div>
<!-- 添加饲养计划对话框-->

64
src/pages/ZooUser.vue
View File

@ -1,8 +1,8 @@
<script>
import {Delete, Edit, Search, User,Document} from "@element-plus/icons-vue";
import {mapState,mapActions} from "vuex";
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 {copy, fuzzyMatching, splitKeyWords, showPassword, hidePassword} from "@/utils/common.js";
export default {
@ -10,6 +10,11 @@ export default {
components: {ZooUserFormDialog},
data() {
return {
//表格分页显示的数据
pagesData: [],
pageSize: 20,//每页有多少条数据
currentPage: 1,//当前页
//搜索框的输入
searchInput: {
option: '',
@ -45,7 +50,7 @@ export default {
},
// endregion
...mapState(["users",'usersTableData'])
...mapState(["users", 'usersTableData'])
},
watch: {
// 搜索框存在输入，自动调用搜索
@ -60,6 +65,7 @@ export default {
hidePassword,
showPassword,
...mapActions(['getUsers']),
...mapMutations(['updateUsersTableData']),
//显示详情弹窗
showDetail(data) {
@ -120,7 +126,7 @@ export default {
return ElMessageBox.confirm(
'该操作不可撤销，是否继续？',
'删除用户：' + data.username + '（'+data.id+'）',
'删除用户：' + data.username + '（' + data.id + '）',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -185,19 +191,18 @@ export default {
},
search() {
console.log('搜索',this.searchInput)
console.log('搜索', this.searchInput)
let searchResult = []//搜索结果数组
//第一步匹配搜索选项
if (typeof this.searchInput.option ==='number') {
this.users.forEach(e=>{
if (typeof this.searchInput.option === 'number') {
this.users.forEach(e => {
if (e.auth === this.searchInput.option) {
searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
}
})
}
else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
} else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
searchResult = copy(this.users)
}
@ -205,10 +210,10 @@ export default {
let keyset = splitKeyWords(this.searchInput.keyword)//切割关键字
//第二步进行模糊搜索
searchResult.forEach(e=>{
searchResult.forEach(e => {
//如果该对象能匹配上所有关键字，则添加到结果
// console.log('开始进行模糊匹配,对象、关键字集合分别为',e,keyset)
let is = fuzzyMatching(e,keyset);
let is = fuzzyMatching(e, keyset);
if (is) {
searchResult2.push(e)
}
@ -216,18 +221,37 @@ export default {
})
searchResult = searchResult2
this.tableData = searchResult
this.updateUsersTableData(searchResult)
this.getPagesData()
},
//当前页切换时触发
handleCurrentChange(val) {
console.log('分页被切换',val)
this.currentPage = val
this.getPagesData()
},
getPagesData() {
console.log('获取分页数据')
const start = (this.currentPage - 1) * this.pageSize
const end = start + this.pageSize
this.pagesData = this.usersTableData.slice(start, end)
}
},
mounted() {
// 加载完成后拉取数据
this.getUsers()
//获取分页后显示的数据
this.getPagesData()
},
}
</script>
<template>
<div id="users-root">
<!-- 头部-->
<div class="select">
<div class="left">
<el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">创建用户</el-button>
@ -253,9 +277,9 @@ export default {
</div>
</div>
<!-- <hr/>-->
<!-- 数据-->
<div class="table">
<el-table :data="usersTableData" style="height: 100%" empty-text="暂无数据" border stripe>
<el-table :data="pagesData" style="height: 100%" border stripe :row-style="{height: '40px'}" :cell-style="{padding:'0'}">
<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">
@ -286,8 +310,18 @@ export default {
</el-table-column>
</el-table>
</div>
<!-- 分页-->
<div class="pager relative">
<div class="center">
<el-pagination background layout="total, prev, pager, next, jumper" :total="usersTableData.length"
:page-size="pageSize" small @current-change="handleCurrentChange"/>
</div>
</div>
</div>
<!-- 添加用户对话框-->
<el-dialog v-model="dialog.addDialogVisible" title="添加用户" width="400" align-center draggable overflow>
<ZooUserFormDialog>

1
src/pages/data.vue
View File

@ -43,6 +43,7 @@ export default {
<el-button type="primary" @click="animalsData">生成动物信息</el-button>
<el-button type="primary" @click="breedingPlansData">生成饲养计划信息</el-button>
<el-button type="primary" @click="archiveData">生成档案信息</el-button>
<el-button type="primary" @click="$router.push('/login')">跳转登录</el-button>
</template>
<style scoped>

23
src/store/index.js
View File

@ -51,28 +51,43 @@ const mutations = {
state.users = value
//复制一份给前端表格展示，不轻易修改源数据
state.usersTableData = copy(value)
state.usersTableData = copy(state.users)
},
updateUsersTableData(state, value) {
state.usersTableData = value
},
//更新动物集合
updateAnimals(state, value) {
state.animals = value
//复制一份给前端表格展示，不轻易修改源数据
state.animalsTableData = copy(value)
state.animalsTableData = copy(state.animals)
},
updateAnimalsTableData(state, value) {
state.animalsTableData = value
},
//更新饲养计划
updateBreedingPlans(state, value) {
state.breedingPlans = value
//复制一份给前端表格展示，不轻易修改源数据
state.breedingPlansTableData = copy(value)
state.breedingPlansTableData = copy(state.breedingPlans)
},
updateBreedingPlansTableData(state, value) {
state.breedingPlansTableData = value
},
//更新动物档案
updateArchives(state, value) {
state.archives = value
//复制一份给前端表格展示，不轻易修改源数据
state.archivesTableData = copy(value)
state.archivesTableData = copy(state.archives)
},
updateArchivesTableData(state, value) {
state.archivesTableData = value
}
}

2
src/utils/common.js
View File

@ -287,4 +287,6 @@ export function sortByDateTime(archives) {
return Number(b.time.split(':').join('')) - Number(a.time.split(':').join(''))
}
})
return archives
}