初步完成动物管理的数据呈现、优化样式

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": "更多需要提供的数据请写在接口文档里"
+   }
+}
+```
+后端修改对应的用户返回结果
 
 # 开发进度
 

src/components/ZooAnimalFormDialog.vue

@@ -0,0 +1,13 @@
+<script>
+export default {
+  name: "ZooAnimalFormDialog"
+}
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/ZooAside.vue

@@ -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>

src/components/ZooFooter.vue

@@ -5,7 +5,7 @@ export default {
 </script>
 
 <template>
-  <div class="footer">
+  <div id="footer">
     <slot>我是底栏插槽</slot>
   </div>
 </template>

src/components/ZooHeader.vue

@@ -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;

src/components/ZooMain.vue

@@ -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;
 }
 

src/components/ZooUserFormDialog.vue

@@ -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>

src/pages/ZooAnimal.vue

@@ -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>

src/pages/ZooLogin.vue

@@ -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;

src/pages/ZooPanel.vue

@@ -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;*/

src/pages/ZooUser.vue

@@ -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) {
+    addUser(form) {
-      console.log('添加用户',user)
+      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>
+      <div class="left">
-      <el-input
+        <el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">创建用户</el-button>
-          v-model="searchInput.keyWord"
+      </div>
-          style="max-width: 300px"
+      <div class="right">
-          placeholder="搜索用户"
+        <el-input
-      >
+            v-model="searchInput.keyWord"
-        <template #prepend>
+            style="max-width: 300px"
-          <el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">
+            placeholder="搜索用户"
-            <el-option label="不选择" value=""/>
+        >
-            <el-option label="管理员" :value="0"/>
+          <template #prepend>
-            <el-option label="饲养员" :value="1"/>
+            <el-select v-model="searchInput.auth" placeholder="身份" style="width: 90px">
-            <el-option label="兽医" :value="2"/>
+              <el-option label="不选择" value=""/>
-          </el-select>
+              <el-option label="管理员" :value="0"/>
-        </template>
+              <el-option label="饲养员" :value="1"/>
-        <template #append>
+              <el-option label="兽医" :value="2"/>
-          <el-button :icon="Search" @click="searchUser()"/>
+            </el-select>
-        </template>
+          </template>
-      </el-input>
+          <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 :data="dataFilters" style="width: 100%;height: 100%" empty-text="暂无数据" table-layout="auto">
-        <el-table-column fixed prop="username" label="用户名" width="150"/>
+        <el-table-column fixed prop="username" label="用户名" />
-        <el-table-column prop="password" label="密码" width="120"/>
+        <el-table-column prop="password" label="密码" />
-        <el-table-column prop="auth" label="身份" width="120"/>
+        <el-table-column prop="auth" label="身份" />
-        <el-table-column prop="" label="占位置" width="700"/>
+<!--        <el-table-column prop="" label="占位置" width="700"/>-->
-        <el-table-column fixed="right" label="Operations" width="130">
+        <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 @click="dialog.addDialogVisible = false">
-            取消</el-button>
+          取消
-          <el-button type="primary" @click="addUser(form)">
+        </el-button>
-            添加</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>
+  <el-dialog v-model="dialog.editDialogVisible" title="编辑用户" width="400" align-center draggable overflow
-      <ZooUserFormDialog :user="dialog.editUser">
+             destroy-on-close>
-        <template #default="form">
+    <ZooUserFormDialog :user="dialog.editUser">
-          <el-button @click="dialog.editDialogVisible = false">
+      <template #default="form">
-            取消</el-button>
+        <el-button @click="dialog.editDialogVisible = false">
-          <el-button type="primary" @click="editUser(form)">
+          取消
-            修改</el-button>
+        </el-button>
-        </template>
+        <el-button type="primary" @click="editUser(form)">
-      </ZooUserFormDialog>
+          修改
+        </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>

src/router/index.js

@@ -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},//需要权限
                 }
             ]
         },

src/utils/common.js

@@ -0,0 +1,6 @@
+
+//深拷贝任何值
+export function copy(value) {
+    let result = JSON.stringify(value)
+    return JSON.parse(result)
+}