完成用户管理的修改添加功能框架

README.md

@@ -95,10 +95,15 @@
 前端提供的数据，用户名
 ```json
 {
-  "username": "user1"
+   "user":{
+      "username": "user2",
+      "password": "123456",
+      "auth": "1",
+      "other": "更多需要提供的数据请写在接口文档里"
+   }
 }
 ```
-后端返回对应的一个用户全部信息
+后端修改对应的用户返回结果
 
 
 

src/components/ZooUserFormDialog.vue

@@ -0,0 +1,55 @@
+<script>
+export default {
+  name: "ZooUserFormDialog",
+  data() {
+    return {
+      userForm: {
+        username: '',
+        password: '',
+        auth: 0
+      }
+    }
+  },
+  props: {
+    user:{
+      type: Object,
+    }
+  },
+  mounted() {
+    // 如果传入了对象，说明是编辑
+    if (this.user) {
+      this.userForm = this.user
+    }
+  }
+}
+</script>
+
+<template>
+  <el-form label-width="auto">
+    <el-form-item label="用户名">
+      <el-input v-model="userForm.username" autocomplete="off" placeholder="请设置用户名"/>
+    </el-form-item>
+    <el-form-item label="密码">
+      <el-input
+          v-model="userForm.password"
+          type="password"
+          placeholder="请设置登录密码"
+          show-password
+      />
+    </el-form-item>
+    <el-form-item label="身份">
+      <el-select v-model="userForm.auth" placeholder="选择身份">
+        <el-option label="管理员" :value="0"/>
+        <el-option label="饲养员" :value="1"/>
+        <el-option label="兽医" :value="2"/>
+      </el-select>
+    </el-form-item>
+    <div class="right">
+      <slot :form="userForm"></slot>
+    </div>
+  </el-form>
+</template>
+
+<style scoped>
+
+</style>

src/pages/ZooLogin.vue

@@ -24,6 +24,14 @@ export default {
         })
       } else {
         //此处接入后端登录接口验证登录用户名和密码，验证通过方可通行
+        //密码错误
+        if (false) {
+          return ElMessage({
+            message: '用户名不存在或密码错误',
+            type: 'error',
+          })
+        }
+        //登录成功
         sessionStorage.setItem('isLogin', 'isLogin');//登录状态
         localStorage.setItem('userName', this.user.username);//本地存储登录用户名
         this.updateUserName(this.user.username);//存储登录用户名

src/pages/ZooUser.vue

@@ -1,10 +1,17 @@
 <script>
-import {Delete, Edit, User} from "@element-plus/icons-vue";
+import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
+import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
 
 
 export default {
   name: "ZooUser",
+  components: {ZooUserFormDialog},
   computed: {
+    //返回图标
+    // region
+    Search() {
+      return Search
+    },
     User() {
       return User
     },
@@ -14,38 +21,122 @@ export default {
     Edit() {
       return Edit
     },
-    usersFilter() {
-      let newusers = JSON.stringify(this.users)
-      newusers = JSON.parse(newusers)//深拷贝数组
+
+    // endregion
+
+    dataFilters() {
       // 计算格式化后的数组
-      newusers.forEach(e => {
+      let data = this.copy(this.tableData)
+      data.forEach(e => {
         if (e.auth === 0) {
           e.auth = '管理员'
-        }
-        else if (e.auth === 1) {
+        } else if (e.auth === 1) {
           e.auth = '饲养员'
-        }
-        else if (e.auth === 2) {
+        } else if (e.auth === 2) {
           e.auth = '兽医'
         }
       })
-      return newusers
+      return data
+    }
+  },
+  watch: {
+    searchInput: {
+      deep: true,
+      handler(val) {
+        this.searchUser();
+      }
     }
   },
   data() {
     return {
-      users: []
+      users: [],//原始用户数据
+      tableData: [],//用来显示在界面的数据
+      searchInput: {
+        auth: '',
+        keyWord: ''
+      },
+      dialog: {
+        addDialogVisible: false,//添加用户对话框
+        editDialogVisible: false,//编辑用户对话框
+        editUser:{}
+      }
     }
   },
   methods: {
+    showEditDialog(user) {
+      console.log('点击了编辑',user)
+      //这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
+      this.dialog.editUser = this.users.find(e => e.username === user.username)
+      console.log('点击了编辑',this.dialog.editUser)
+      this.dialog.editDialogVisible = true
+    },
     editUser(user) {
-      console.log('编辑用户', user)
+      console.log('确认编辑用户', user)
+      //编辑失败
+      if (false) {
+        return ElMessage({
+          message: '编辑失败',
+          type: 'warning',
+        })
+      }
+      //编辑成功
+      if (false) {
+        return ElMessage({
+          message: '编辑成功',
+          type: 'success',
+        })
+      }
+      // 此处重新拉取数据
+      this.dialog.editDialogVisible = false//添加成功关闭窗口
     },
     deleteUser(user) {
-      console.log('删除用户', user)
+      console.log('确认删除用户', user)
     },
-    addUser() {
-      console.log('添加用户')
+    addUser(user) {
+      console.log('添加用户',user)
+      //添加失败
+      if (false) {
+        return ElMessage({
+          message: '该用户已存在',
+          type: 'warning',
+        })
+      }
+      //添加成功
+      if (false) {
+        return ElMessage({
+          message: '添加成功',
+          type: 'success',
+        })
+      }
+      // 此处重新拉取数据
+      this.dialog.addDialogVisible = false//添加成功关闭窗口
+
+    },
+    searchUser() {
+      console.log('搜索用户', this.searchInput)
+      let searchResult = []
+      this.users.forEach(e => {
+        if (e.username.includes(this.searchInput.keyWord)) {
+          searchResult.push(this.copy(e))
+        }
+      })
+      let searchResult2 = []
+      console.log('this.searchInput.auth', this.searchInput.auth, typeof this.searchInput.auth == 'number')
+      if (typeof this.searchInput.auth === 'number') {
+        searchResult.forEach(e => {
+          if (e.auth === this.searchInput.auth) {
+            searchResult2.push(this.copy(e))
+          }
+        })
+        searchResult = searchResult2
+      }
+
+      this.tableData = searchResult;
+    },
+    //深拷贝任何值
+    copy(value) {
+      let result = JSON.stringify(value)
+      return JSON.parse(result)
     }
   },
   mounted() {
@@ -59,6 +150,7 @@ export default {
       }
       this.users.push(user)
     }
+    this.tableData = this.copy(this.users);//复制一份给表格展示
   }
 }
 </script>
@@ -66,18 +158,36 @@ export default {
 <template>
   <div id="root">
     <div class="select">
-      <el-button type="primary" :icon="User" @click="addUser()">添加用户</el-button>
+      <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>
+
     <hr/>
     <div class="table">
-      <el-table :data="usersFilter" style="width: 100%;height: 90%">
+      <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">
           <template #default="scope">
-            <el-button link type="primary" size="small" :icon="Edit" @click="editUser(scope.row)">
+            <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)">
@@ -88,6 +198,30 @@ export default {
       </el-table>
     </div>
   </div>
+
+  <!--  添加用户对话框-->
+  <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>
+      </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>
 </template>
 
 <style scoped>
@@ -100,20 +234,4 @@ export default {
   width: 100%;
   height: 100px;
 }
-
-.el-table .warning-row {
-  --el-table-tr-bg-color: var(--el-color-warning-light-9);
-}
-
-.el-table .success-row {
-  --el-table-tr-bg-color: var(--el-color-success-light-9);
-}
-
-.el-table .info-row {
-  --el-table-tr-bg-color: var(--el-color-info-light-9);
-}
-
-.el-table .danger-row {
-  --el-table-tr-bg-color: var(--el-color-danger-light-9);
-}
 </style>