优化测栏界面显示

README.md

@@ -112,6 +112,7 @@ breedingPlan: {
         sex: '雄性',//字符 饲养动物性别
         phase: '',//字符 饲养动物生长阶段：幼年期、成长期、成年期、老年期
         state: 0,//int 状态（0正常 1异常）
+        roleId: null,//负责执行计划的饲养员id
         describe: ''//字符 饲养计划的描述
       }
 ```
@@ -142,6 +143,8 @@ breedingPlan: {
 
 ## 档案管理
 
+
+
 ## 健康检测
 
 ## 统计分析
@@ -172,8 +175,7 @@ breedingPlan: {
 
 ### footer
 
-- [ ] 基本界面
-- [ ] 基本方法
+- [x] 基本界面
 - [ ] 优化界面样式
 
 ### main

src/components/ZooAside.vue

@@ -1,22 +1,22 @@
 <script>
+import {mapState} from "vuex";
 
 export default {
   name: "ZooAside",
   data() {
-    return {
-
-    }
+    return {}
+  },
+  computed: {
+    ...mapState(['loginUser'])
   },
   methods: {
     toPath(path) {
       //跳转信息页
-      console.log('用户通过侧边栏跳转至'+path);
+      console.log('用户通过侧边栏跳转至' + path);
       this.$router.push(path)
     }
   },
-  watch: {
-
-  }
+  watch: {}
 
 }
 </script>
@@ -24,7 +24,18 @@ export default {
 <template>
   <div id="aside">
     <el-col>
-      <h5 class="mb-2">用户功能</h5>
+      <el-icon size="80px" class="aside-icon">
+        <User/>
+      </el-icon>
+      <div class="aside-title">
+        <h3>
+          <span v-if="loginUser.auth===0">管理员</span>
+          <span v-else-if="loginUser.auth===1">饲养员</span>
+          <span v-else-if="loginUser.auth===2">兽医</span>
+        </h3>
+        <h2>{{ loginUser.username }}</h2>
+      </div>
+      <hr/>
       <el-menu
           :default-active="$route.path"
       >
@@ -64,5 +75,25 @@ export default {
 </template>
 
 <style scoped>
+.aside-icon {
+  width: 200px;
+  margin-top: 20px;
+  text-align: center;
+}
+
+.aside-title {
+  margin-top: -30px;
+  text-align: center;
+}
+
+.aside-title h2 {
+  margin-top: -20px;
+  margin-bottom: 10px;
+  color: black
+}
+
+.aside-icon, .aside-title {
+  color: gray;
+}
 
 </style>

src/components/ZooBreedingPlanFormDialog.vue

@@ -10,6 +10,7 @@ export default {
         sex: '雄性',//字符 饲养动物性别
         phase: '',//字符 饲养动物阶段：幼年期、成长期、成年期、老年期
         state: 0,//int 状态（0正常 1异常）
+        roleId: null,//负责执行计划的饲养员id
         describe: ''//字符 饲养计划的描述
       },
       formAction: {
@@ -66,6 +67,9 @@ export default {
         <el-radio :value="1">异常</el-radio>
       </el-radio-group>
     </el-form-item>
+    <el-form-item label="执行饲养员">
+      <el-input v-model="form.roleId" type="number" placeholder="执行饲养员"/>
+    </el-form-item>
     <el-form-item label="计划描述">
       <el-input
           v-model="form.describe"

src/components/ZooHeader.vue

@@ -1,12 +1,12 @@
 <script>
 
-import {HomeFilled, SwitchButton} from "@element-plus/icons-vue";
+import {House, SwitchButton} from "@element-plus/icons-vue";
 
 export default {
   name: "ZooHeader",
   computed: {
-    HomeFilled() {
-      return HomeFilled
+    House() {
+      return House
     },
     SwitchButton() {
       return SwitchButton
@@ -35,7 +35,7 @@ export default {
 <template>
   <div id="header">
     <div class="to-home left">
-      <el-button :icon="HomeFilled" size="large" @click="$router.push('/panel/home')">返回首页</el-button>
+      <el-button :icon="House" size="large" @click="$router.push('/panel/home')">返回首页</el-button>
     </div>
     动物信息管理系统
     <div class="logout right">

src/pages/ZooBreeding.vue

@@ -209,6 +209,7 @@ export default {
       <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>
         <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"/>
         <el-table-column prop="species" label="动物种类" width="90"/>
         <el-table-column prop="sex" label="性别" width="60"/>
         <el-table-column prop="phase" label="生长阶段" width="90"/>

src/pages/ZooUser.vue

@@ -222,7 +222,6 @@ export default {
     <div class="table">
       <el-table :data="tableData" style="height: 100%" empty-text="暂无数据" border>
         <el-table-column fixed prop="username" label="用户名" width="150"/>
-        <!--        <el-table-column prop="password" label="密码" />-->
         <el-table-column prop="password" label="密码" width="150">
           <template #default="scope">
             <div @mouseover="showPassword($event,scope.row.password)" @mouseleave="hidePassword($event)">••••••••</div>

src/store/index.js

@@ -52,7 +52,7 @@ const state = {
     //登录用户数据
     loginUser: {
         username: 'user1',
-        auth: null
+        auth: 0
     },
     //用户数据
     users: [],

src/utils/common.js

@@ -53,6 +53,7 @@ export function generateBreedingPlans() {
             sex: Math.floor(Math.random() * 2) === 0 ? '雌性' : '雄性',
             phase:generatePhase(),
             state: Math.floor(Math.random() * 2),
+            roleId: Math.floor(Math.random() * 100),
             description: Math.floor(Math.random() * 500).toString(),
         }
         breedingPlans.push(breedingPlan)