优化逻辑

src/pages/ZooAnimal.vue

@@ -10,8 +10,6 @@ export default {
   components: {ZooArchiveTimeline, ZooAnimalFormDialog},
   data() {
     return {
-      tableData: [],//表格数据
-
       // 搜索框的输入
       searchInput: {
         option: '',//状态（0正常 1异常）
@@ -51,7 +49,7 @@ export default {
       return Tickets
     },
     //endregion
-    ...mapState(["animals",'archives'])
+    ...mapState(["animals",'archives','animalsTableData'])
   },
   watch: {
     // 搜索框存在输入，自动调用搜索
@@ -241,9 +239,6 @@ export default {
   mounted() {
     // 加载完成后拉取数据
     this.getAnimals()
-
-    //复制一份给表格展示，不轻易修改源数据
-    this.tableData = copy(this.animals);
   }
 }
 </script>
@@ -276,7 +271,7 @@ export default {
 
     <!--    <hr/>-->
     <div class="table">
-      <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
+      <el-table :data="animalsTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
         <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"/>

src/pages/ZooArchive.vue

@@ -10,8 +10,6 @@ export default {
   components: {ZooArchiveTimeline, ZooArchiveFormDialog},
   data() {
     return {
-      tableData: [],//表格数据
-
       // 搜索框的输入
       searchInput: {
         option: '',//状态（0正常 1异常）
@@ -26,7 +24,7 @@ export default {
         detailDialogVisible:false,//查询对话框
         timelineDialogVisible:false,//时间线对话框
         timelineData:[]//时间线数据
-      }
+      },
     }
   },
   computed: {
@@ -51,7 +49,7 @@ export default {
       return Tickets
     },
     //endregion
-    ...mapState(["archives"])
+    ...mapState(["archives",'archivesTableData'])
   },
   watch: {
     // 搜索框存在输入，自动调用搜索
@@ -180,6 +178,10 @@ export default {
     showArchives(data) {
       console.log('显示档案', data)
 
+      //从后端获取需要查询的数据，防止数据前后不一致
+      //这里先用假数据代替一下
+      this.dialog.dialogData = this.archives.find(e => e.id === data.id)
+
       this.dialog.timelineData = []
       //从后端获取需要查询的数据，防止数据前后不一致
       //这里先用假数据代替一下
@@ -241,10 +243,7 @@ export default {
   mounted() {
     // 加载完成后拉取数据
     this.getArchives()
-
+  },
-    //复制一份给表格展示，不轻易修改源数据
-    this.tableData = copy(this.archives);
-  }
 }
 </script>
 
@@ -253,6 +252,7 @@ export default {
     <div class="select">
       <div class="left">
         <el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加记录</el-button>
+<!--        <el-button type="primary" :icon="DocumentAdd" @click="getArchives();console.log('刷新了',archives)">刷新vuex数据</el-button>-->
       </div>
       <div class="right">
         <el-input
@@ -275,7 +275,7 @@ export default {
     </div>
 
     <div class="table">
-      <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe :default-sort="{prop: 'date', order: 'descending'}">
+      <el-table :data="archivesTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe :default-sort="{prop: 'date', order: 'descending'}">
         <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"/>
@@ -354,7 +354,7 @@ export default {
   </el-dialog>
 
   <!--查看动物所有记录-->
-  <el-dialog v-model="dialog.timelineDialogVisible" :title="'动物档案'" width="600" align-center draggable overflow
+  <el-dialog v-model="dialog.timelineDialogVisible" :title="'动物档案：'+dialog.dialogData.animalId" width="600" align-center draggable overflow
              destroy-on-close>
     <ZooArchiveTimeline :data="dialog.timelineData">
       <template #operate="scope">

src/pages/ZooBreeding.vue

@@ -45,7 +45,7 @@ export default {
       return Document
     },
     //endregion
-    ...mapState(["breedingPlans"])
+    ...mapState(["breedingPlans",'breedingPlansTableData'])
   },
   watch: {
     // 搜索框存在输入，自动调用搜索
@@ -218,9 +218,6 @@ export default {
   mounted() {
     // 加载完成后拉取数据
     this.getBreedingPlans()
-
-    //复制一份给表格展示，不轻易修改源数据
-    this.tableData = copy(this.breedingPlans);
   }
 }
 </script>
@@ -252,7 +249,7 @@ export default {
     </div>
 
     <div class="table">
-      <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
+      <el-table :data="breedingPlansTableData" style="width: 100%;height: 100%" empty-text="暂无数据" border stripe>
         <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"/>

src/pages/ZooUser.vue

@@ -10,8 +10,6 @@ export default {
   components: {ZooUserFormDialog},
   data() {
     return {
-      tableData: [],//表格数据
-
       //搜索框的输入
       searchInput: {
         option: '',
@@ -47,7 +45,7 @@ export default {
     },
 
     // endregion
-    ...mapState(["users"])
+    ...mapState(["users",'usersTableData'])
   },
   watch: {
     // 搜索框存在输入，自动调用搜索
@@ -224,10 +222,7 @@ export default {
   mounted() {
     // 加载完成后拉取数据
     this.getUsers()
-
+  },
-    //复制一份给表格展示，不轻易修改源数据
-    this.tableData = copy(this.users);
-  }
 }
 </script>
 
@@ -260,7 +255,7 @@ export default {
 
     <!--    <hr/>-->
     <div class="table">
-      <el-table :data="tableData" style="height: 100%" empty-text="暂无数据" border stripe>
+      <el-table :data="usersTableData" style="height: 100%" empty-text="暂无数据" border stripe>
         <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">

src/store/index.js

@@ -1,5 +1,5 @@
 import {createStore} from "vuex";
-import {generateAnimals, generateArchives, generateBreedingPlans, generateUsers} from "@/utils/common.js";
+import {copy, generateAnimals, generateArchives, generateBreedingPlans, generateUsers} from "@/utils/common.js";
 
 const actions = {
     //获取登录用户
@@ -41,18 +41,30 @@ const mutations = {
     //更新用户集合
     updateUsers(state, value) {
         state.users = value
+
+        //复制一份给前端表格展示，不轻易修改源数据
+        state.usersTableData = copy(value)
     },
     //更新动物集合
     updateAnimals(state, value) {
         state.animals = value
+
+        //复制一份给前端表格展示，不轻易修改源数据
+        state.animalsTableData = copy(value)
     },
     //更新饲养计划
     updateBreedingPlans(state, value) {
         state.breedingPlans = value
+
+        //复制一份给前端表格展示，不轻易修改源数据
+        state.breedingPlansTableData = copy(value)
     },
     //更新动物档案
     updateArchives(state, value) {
         state.archives = value
+
+        //复制一份给前端表格展示，不轻易修改源数据
+        state.archivesTableData = copy(value)
     }
 }
 
@@ -73,12 +85,16 @@ const state = {
     // archives:[],
     //用户数据
     users: generateUsers(),
+    usersTableData:[],//用户表格数据
     //动物数据
     animals: generateAnimals(),
+    animalsTableData:[],//动物表格数据
     //饲养计划
     breedingPlans:generateBreedingPlans(),
+    breedingPlansTableData:[],//饲养计划表格数据
     //动物档案
-    archives:generateArchives()
+    archives:generateArchives(),
+    archivesTableData:[],//动物档案表格数据
 }
 
 export default createStore({

src/utils/request.js

@@ -0,0 +1,7 @@
+import store from "@/store/index.js";
+
+export function getUserById(id) {
+    const data = store.state.users.find(e => e.id === id);
+
+    return data;
+}