初步完成动物管理的动物添加、删除功能

src/components/ZooAnimalFormDialog.vue

@@ -1,11 +1,101 @@
 <script>
 export default {
-  name: "ZooAnimalFormDialog"
+  name: "ZooAnimalFormDialog",
+  data() {
+    return {
+      form:{
+        id: '',
+        name: '',
+        sex: '雄',
+        species: '',//种类
+        weight: 0,
+        height: 0,
+        state: 0,//状态（0正常 1异常）
+        roleId: null,//饲养员id
+        color: '',//颜色
+        features: '',//特征
+        habit: ''//生活习性
+      },
+      formAction: {
+        idDisable:false,
+      }
+    }
+  },
+  props: {
+    animal: {
+      type: Object,
+    }
+  },
+  mounted() {
+    // 如果传入了对象，说明是编辑
+    if (this.animal) {
+      this.form = this.animal
+      this.formAction.idDisable = true
+    }
+  },
+  beforeUnmount() {
+    console.log('ZooAnimalFormDialog-beforeUnmount',this);
+  }
 }
 </script>
 
 <template>
-
+  <el-form label-width="auto">
+<!--    <div>-->
+<!--      animalForm:{-->
+<!--      id: '',-->
+<!--      name: '',-->
+<!--      sex: '雄',-->
+<!--      species: '',//种类-->
+<!--      weight: 0,-->
+<!--      height: 0,-->
+<!--      state: 0,//状态（0正常 1异常）-->
+<!--      roleId: null,//饲养员id-->
+<!--      color: '',//颜色-->
+<!--      features: '',//特征-->
+<!--      habit: ''//生活习性-->
+<!--      }-->
+<!--    </div>-->
+    <el-form-item label="动物ID">
+      <el-input v-model="form.id" placeholder="请设置动物ID" :disabled="formAction.idDisable"/>
+    </el-form-item>
+    <el-form-item label="动物名称">
+      <el-input v-model="form.name" placeholder="动物名称"/>
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-select v-model="form.sex" placeholder="选择性别">
+        <el-option label="雄性" value="雄性"/>
+        <el-option label="雌性" value="雌性"/>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="动物种类">
+      <el-input v-model="form.species" placeholder="动物种类"/>
+    </el-form-item>
+    <el-form-item label="动物体重">
+      <el-input v-model="form.weight" placeholder="动物体重"/>
+    </el-form-item>
+    <el-form-item label="动物身高">
+      <el-input v-model="form.height" placeholder="动物身高"/>
+    </el-form-item>
+    <el-form-item label="动物状态">
+      <el-input v-model="form.state" placeholder="动物状态"/>
+    </el-form-item>
+    <el-form-item label="饲养员ID">
+      <el-input v-model="form.roleId" placeholder="饲养员ID"/>
+    </el-form-item>
+    <el-form-item label="动物颜色">
+      <el-input v-model="form.color" placeholder="动物颜色"/>
+    </el-form-item>
+    <el-form-item label="动物特征">
+      <el-input v-model="form.features" placeholder="动物特征"/>
+    </el-form-item>
+    <el-form-item label="生活习性">
+      <el-input v-model="form.habit" placeholder="生活习性"/>
+    </el-form-item>
+    <div class="right">
+      <slot :form="form"></slot>
+    </div>
+  </el-form>
 </template>
 
 <style scoped>

src/components/ZooUserFormDialog.vue

@@ -3,11 +3,13 @@ export default {
   name: "ZooUserFormDialog",
   data() {
     return {
-      userForm: {
+      form: {
         username: '',
         password: '',
         auth: 0,
-
+      },
+      formAction: {
+        usernameDisable:false,
       }
     }
   },
@@ -19,7 +21,8 @@ export default {
   mounted() {
     // 如果传入了对象，说明是编辑
     if (this.user) {
-      this.userForm = this.user
+      this.formAction.usernameDisable = true
+      this.form = this.user
     }
   },
   beforeUnmount() {
@@ -31,25 +34,25 @@ export default {
 <template>
   <el-form label-width="auto">
     <el-form-item label="用户名">
-      <el-input v-model="userForm.username" autocomplete="off" placeholder="请设置用户名"/>
+      <el-input v-model="form.username" placeholder="请设置用户名" :disabled="formAction.usernameDisable"/>
     </el-form-item>
     <el-form-item label="密码">
       <el-input
-          v-model="userForm.password"
+          v-model="form.password"
           type="password"
           placeholder="请设置登录密码"
           show-password
       />
     </el-form-item>
     <el-form-item label="身份">
-      <el-select v-model="userForm.auth" placeholder="选择身份">
+      <el-select v-model="form.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>
+      <slot :form="form"></slot>
     </div>
   </el-form>
 </template>

src/pages/ZooAnimal.vue

@@ -1,15 +1,37 @@
 <script>
 import {copy} from "@/utils/common.js";
+import {Delete, DocumentAdd, Edit} from "@element-plus/icons-vue";
+import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
+import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
 
 export default {
   name: "ZooAnimal",
+  components: {ZooAnimalFormDialog, ZooUserFormDialog},
   data() {
     return {
       animals:[],
-      tableData:[]
+      tableData:[],
+      searchInput: {
+        // auth: '',
+        // keyWord: ''
+      },
+      dialog: {
+        addDialogVisible: false,//添加动物对话框
+        editDialogVisible: false,//编辑用户对话框
+        editData: {}
+      }
     }
   },
   computed: {
+    DocumentAdd() {
+      return DocumentAdd
+    },
+    Edit() {
+      return Edit
+    },
+    Delete() {
+      return Delete
+    },
     dataFilters() {
       // 计算格式化后的数组
       // let data = copy(this.tableData)
@@ -24,7 +46,114 @@ export default {
       // })
       // return data
       return this.tableData
-    }
+    },
+  },
+  methods: {
+    showEditDialog(animal) {
+      //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
+      this.dialog.editData = this.animals.find(e => e.id === animal.id)
+      console.log('点击了编辑', this.dialog.editData)
+      this.dialog.editDialogVisible = true
+    },
+    // 判断表单是否为空
+    isEmpty(form) {
+      // if (!form.username || !form.password) {
+      if (!form.name) {
+        //返回提示
+        return ElMessage({
+          message: '动物名不能为空',
+          type: 'warning',
+        })
+      }
+    },
+    editAnimal(form) {
+      console.log('确认编辑动物', form)
+      //判断是否为空
+      return this.isEmpty(form);
+      //编辑失败
+      if (false) {
+        return ElMessage({
+          message: '编辑失败',
+          type: 'warning',
+        })
+      }
+      //编辑成功
+      if (false) {
+        return ElMessage({
+          message: '编辑成功',
+          type: 'success',
+        })
+      }
+      // 此处重新拉取数据
+      this.dialog.editDialogVisible = false//添加成功关闭窗口
+    },
+    deleteUser(animal) {
+      console.log('删除动物', animal)
+      return ElMessageBox.confirm(
+          '该操作不可撤销，是否继续？',
+          '删除动物：'+animal.name,
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+      ).then(() => {
+        //进行删除操作
+        // ……
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+      }).catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+    },
+    addAnimal(form) {
+      console.log('添加动物', form)
+      //验证是否为空
+      return this.isEmpty(form);
+      //添加失败
+      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;
+    // },
+
   },
   mounted() {
     //数据生成器
@@ -32,7 +161,7 @@ export default {
       let animal = {
         id: i,
         name: 'animal' + (i + 3),
-        sex: Math.floor(Math.random() * 2) === 0 ? '雌' : '雄',
+        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),
@@ -53,7 +182,7 @@ export default {
   <div class="animals-root">
     <div class="select">
       <div class="left">
-<!--        <el-button type="primary" :icon="User" @click="dialog.addDialogVisible = true">创建用户</el-button>-->
+        <el-button type="primary" :icon="DocumentAdd" @click="dialog.addDialogVisible = true">添加动物</el-button>
       </div>
       <div class="right">
 <!--        <el-input-->
@@ -103,6 +232,35 @@ export default {
       </el-table>
     </div>
   </div>
+
+  <!--  添加动物对话框-->
+  <el-dialog v-model="dialog.addDialogVisible" title="添加动物" width="500" align-center draggable overflow>
+    <ZooAnimalFormDialog>
+      <template #default="scope">
+        <el-button @click="dialog.addDialogVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="addAnimal(scope.form)">
+          添加
+        </el-button>
+      </template>
+    </ZooAnimalFormDialog>
+  </el-dialog>
+
+  <!--  编辑用户对话框-->
+  <el-dialog v-model="dialog.editDialogVisible" title="编辑动物" width="500" align-center draggable overflow
+             destroy-on-close>
+    <ZooAnimalFormDialog :animal="dialog.editData">
+      <template #default="scope">
+        <el-button @click="dialog.editDialogVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="editAnimal(scope.form)">
+          修改
+        </el-button>
+      </template>
+    </ZooAnimalFormDialog>
+  </el-dialog>
 </template>
 
 <style scoped>

src/pages/ZooUser.vue

@@ -59,7 +59,7 @@ export default {
       dialog: {
         addDialogVisible: false,//添加用户对话框
         editDialogVisible: false,//编辑用户对话框
-        editUser: {}
+        editData: {}
       }
     }
   },
@@ -67,8 +67,8 @@ export default {
     showEditDialog(user) {
       // console.log('点击了编辑',user)
       //这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
-      this.dialog.editUser = this.users.find(e => e.username === user.username)
+      this.dialog.editData = this.users.find(e => e.username === user.username)
-      console.log('点击了编辑', this.dialog.editUser)
+      console.log('点击了编辑', this.dialog.editData)
       this.dialog.editDialogVisible = true
     },
     // 判断表单是否为空
@@ -103,7 +103,9 @@ export default {
       this.dialog.editDialogVisible = false//添加成功关闭窗口
     },
     deleteUser(user) {
-      console.log('确认删除用户', user)
+      //这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
+      user = this.users.find(e => e.username === user.username)
+      console.log('删除用户', user)
       return ElMessageBox.confirm(
           '该操作不可撤销，是否继续？',
           '删除用户：'+user.username,
@@ -236,12 +238,12 @@ export default {
 
   <!--  添加用户对话框-->
   <el-dialog v-model="dialog.addDialogVisible" title="添加用户" width="400" align-center draggable overflow>
-    <ZooUserFormDialog class="dialog-form">
+    <ZooUserFormDialog>
-      <template #default="form">
+      <template #default="scope">
         <el-button @click="dialog.addDialogVisible = false">
           取消
         </el-button>
-        <el-button type="primary" @click="addUser(form)">
+        <el-button type="primary" @click="addUser(scope.form)">
           添加
         </el-button>
       </template>
@@ -251,12 +253,12 @@ export default {
   <!--  编辑用户对话框-->
   <el-dialog v-model="dialog.editDialogVisible" title="编辑用户" width="400" align-center draggable overflow
              destroy-on-close>
-    <ZooUserFormDialog :user="dialog.editUser">
+    <ZooUserFormDialog :user="dialog.editData">
-      <template #default="form">
+      <template #default="scope">
         <el-button @click="dialog.editDialogVisible = false">
           取消
         </el-button>
-        <el-button type="primary" @click="editUser(form)">
+        <el-button type="primary" @click="editUser(scope.form)">
           修改
         </el-button>
       </template>