编写饲养计划表单

src/components/ZooAnimalFormDialog.vue

@@ -57,7 +57,7 @@ export default {
 <!--      }-->
 <!--    </div>-->
     <el-form-item label="动物ID">
-      <el-input v-model="form.id" placeholder="请设置动物ID" :disabled="formAction.idDisable"/>
+      <el-input v-model="form.id" placeholder="请设置动物ID" type="number" :disabled="formAction.idDisable"/>
     </el-form-item>
     <el-form-item label="动物名称">
       <el-input v-model="form.name" placeholder="动物名称"/>

src/components/ZooAside.vue

@@ -46,8 +46,7 @@ export default {
             </el-icon>
             <span>饲养员</span>
           </template>
-          <!--            <el-menu-item index="2-1">动物档案</el-menu-item>-->
+          <el-menu-item index="/panel/breeding" @click="toPath('/panel/breeding')">饲养管理</el-menu-item>
-          <el-menu-item index="2-2">饲养管理</el-menu-item>
         </el-sub-menu>
         <el-sub-menu index="3">
           <template #title>

src/components/ZooBreedingPlanFormDialog.vue

@@ -0,0 +1,86 @@
+<script>
+export default {
+  name: "ZooBreedingFormDialog",
+  data() {
+    return {
+      form: {
+        id: '',//int 饲养计划id
+        name: '',//字符 饲养计划名称
+        species: '',//字符 种类
+        sex: '雄性',//字符 饲养动物性别
+        phase: '',//字符 饲养动物阶段：幼年期、成长期、成年期、老年期
+        state: 0,//int 状态（0正常 1异常）
+        describe: ''//字符 饲养计划的描述
+      },
+      formAction: {
+        idDisable: false,
+      }
+    }
+  },
+  props: {
+    breedingPlan: {
+      type: Object,
+    }
+  },
+  mounted() {
+    // 如果传入了对象，说明是编辑
+    if (this.breedingPlan) {
+      this.form = this.breedingPlan
+      this.formAction.idDisable = true
+    }
+  },
+  beforeUnmount() {
+    console.log('ZooBreedingFormDialog-beforeUnmount', this);
+  }
+}
+</script>
+
+<template>
+  <el-form label-width="auto">
+    <el-form-item label="饲养计划ID">
+      <el-input v-model="form.id" type="number" 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-input v-model="form.species" placeholder="动物种类"/>
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="form.sex">
+        <el-radio value="雄性">雄性</el-radio>
+        <el-radio value="雌性">雌性</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="生命阶段">
+      <el-select v-model="form.phase" placeholder="生命阶段">
+        <el-option label="幼年期" :value="0"/>
+        <el-option label="成长期" :value="1"/>
+        <el-option label="成年期" :value="2"/>
+        <el-option label="老年期" :value="3"/>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="动物状态">
+      <el-radio-group v-model="form.state">
+        <el-radio :value="0">正常</el-radio>
+        <el-radio :value="1">异常</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="计划描述">
+      <el-input
+          v-model="form.describe"
+          :rows="4"
+          type="textarea"
+          placeholder="计划描述"
+          resize="none"
+      />
+    </el-form-item>
+    <div class="right">
+      <slot :form="form"></slot>
+    </div>
+  </el-form>
+</template>
+
+<style scoped>
+
+</style>

src/pages/ZooAnimal.vue

@@ -1,13 +1,12 @@
 <script>
 import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
 import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
-import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
 import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
 import {mapActions,mapState} from "vuex";
 
 export default {
   name: "ZooAnimal",
-  components: {ZooAnimalFormDialog, ZooUserFormDialog},
+  components: {ZooAnimalFormDialog},
   data() {
     return {
       tableData: [],
@@ -58,7 +57,6 @@ export default {
     },
     // 判断表单是否为空
     isEmpty(form) {
-      // if (!form.username || !form.password) {
       if (!form.name) {
         //返回提示
         return ElMessage({

src/pages/ZooBreeding.vue

@@ -0,0 +1,289 @@
+<script>
+import ZooBreedingPlanFormDialog from "@/components/ZooBreedingPlanFormDialog.vue";
+import {mapState,mapActions} from "vuex";
+import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
+import {copy} from "@/utils/common.js";
+
+export default {
+  name: "ZooBreeding",
+  components: {ZooBreedingPlanFormDialog},
+  data() {
+    return {
+      tableData: [],
+      searchInput: {
+        // state: '',//状态（0正常 1异常）
+        // keyword: ''
+      },
+      dialog: {
+        addDialogVisible: false,//添加动物对话框
+        editDialogVisible: false,//编辑用户对话框
+        editData: {}
+      }
+    }
+  },
+  computed: {
+    //图标
+    //region
+    Search() {
+      return Search
+    },
+    DocumentAdd() {
+      return DocumentAdd
+    },
+    Edit() {
+      return Edit
+    },
+    Delete() {
+      return Delete
+    },
+    //endregion
+    ...mapState(["breedingPlans"])
+  },
+  watch: {
+    // searchInput: {
+    //   deep: true,
+    //   handler(val) {
+    //     this.searchAnimal();
+    //   }
+    // }
+  },
+  methods: {
+    ...mapActions(["getBreedingPlans"]),
+    // 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.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: '取消删除',
+    //     })
+    //   })
+    // },
+    addBreedingPlan(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//添加成功关闭窗口
+    },
+    // searchAnimal() {
+    //   console.log('动物搜索', this.searchInput)
+    //   let searchResult = []//搜索结果数组
+    //   //第一步匹配搜索选项，如果选择了特定用户身份
+    //   if (typeof this.searchInput.state === 'number') {
+    //     this.animals.forEach(e => {
+    //       if (e.state === this.searchInput.state) {
+    //         searchResult.push(copy(e))//如果符合特定权限，则添加到搜索结果
+    //       }
+    //     })
+    //   } else { //如果没有选择特定用户身份，代表所有数据都需要参加到下一轮的模糊搜索
+    //     searchResult = copy(this.animals)
+    //   }
+    //
+    //   let searchResult2 = []
+    //   let keyset = splitKeyWords(this.searchInput.keyword)//切割关键字
+    //
+    //   //第二步进行模糊搜索
+    //   searchResult.forEach(e => {
+    //     //如果该对象能匹配上所有关键字，则添加到结果
+    //     // console.log('开始进行模糊匹配,对象、关键字集合分别为',e,keyset)
+    //     let is = fuzzyMatching(e, keyset);
+    //     if (is) {
+    //       searchResult2.push(e)
+    //     }
+    //     // console.log('结束模糊匹配，结果为',e,keyset,is)
+    //   })
+    //   searchResult = searchResult2
+    //
+    //   this.tableData = searchResult
+    // },
+  },
+  mounted() {
+    this.getBreedingPlans()
+    this.tableData = copy(this.breedingPlans);//复制一份给表格展示
+  }
+}
+</script>
+
+<template>
+  <div class="animals-root">
+    <div class="select">
+      <div class="left">
+        <el-button type="primary" :icon="DocumentAdd" @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.state" placeholder="状态" style="width: 80px">-->
+<!--              <el-option label="不选择" value=""/>-->
+<!--              <el-option label="正常" :value="0"/>-->
+<!--              <el-option label="异常" :value="1"/>-->
+<!--            </el-select>-->
+<!--          </template>-->
+<!--          <template #append>-->
+<!--            <el-button :icon="Search" @click="searchAnimal()"/>-->
+<!--          </template>-->
+<!--        </el-input>-->
+<!--      </div>-->
+    </div>
+
+    <!--    <hr/>-->
+<!--    <div class="table">-->
+<!--      <el-table :data="tableData" style="width: 100%;height: 100%" empty-text="暂无数据" border>-->
+<!--        <el-table-column fixed prop="id" label="动物ID"/>-->
+<!--        <el-table-column fixed prop="name" label="动物名称" width="100"/>-->
+<!--        <el-table-column prop="sex" label="性别"/>-->
+<!--        <el-table-column prop="species" label="动物种类" width="90"/>-->
+<!--        <el-table-column prop="weight" label="动物体重（KG）" width="130"/>-->
+<!--        <el-table-column prop="height" label="动物身高（M）" width="130"/>-->
+<!--        <el-table-column prop="state" label="动物状态" width="90">-->
+<!--          <template #default="scope">-->
+<!--            <span v-if="scope.row.state===0" style="color: green">正常</span>-->
+<!--            <span v-else-if="scope.row.state===1" style="color: red">异常</span>-->
+<!--            <span v-else>未知</span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--        <el-table-column prop="roleId" label="饲养员ID" width="120"/>-->
+<!--        <el-table-column prop="color" label="动物颜色" width="150">-->
+<!--          <template #default="scope">-->
+<!--            {{ scope.row.color }}-->
+<!--            <el-color-picker v-model="scope.row.color" disabled/>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+<!--        <el-table-column prop="features" label="动物特征" width="100"/>-->
+<!--        <el-table-column prop="habit" label="生活习性" width="100"/>-->
+<!--        <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>
+
+  <!--  添加动物对话框-->
+  <el-dialog v-model="dialog.addDialogVisible" title="添加饲养计划" width="500" align-center draggable overflow>
+    <ZooBreedingPlanFormDialog>
+      <template #default="scope">
+        <el-button @click="dialog.addDialogVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="addBreedingPlan(scope.form)">
+          添加
+        </el-button>
+      </template>
+    </ZooBreedingPlanFormDialog>
+  </el-dialog>
+
+<!--  &lt;!&ndash;  编辑动物对话框&ndash;&gt;-->
+<!--  <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>
+.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/router/index.js

@@ -7,6 +7,7 @@ import ZooHome from '../pages/ZooHome.vue'
 import ZooUser from "@/pages/ZooUser.vue";
 import ZooAnimal from "@/pages/ZooAnimal.vue";
 import store from "@/store/index.js";
+import ZooBreeding from "@/pages/ZooBreeding.vue";
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -27,22 +28,27 @@ const router = createRouter({
         {
             path: '/panel',
             component:ZooPanel,
-            meta:{isAuth: true},//需要权限
+            // meta:{isAuth: true},//需要权限
             children:[
                 {
                     path: 'home',
                     component: ZooHome,
-                    meta:{isAuth: true},//需要权限
+                    // meta:{isAuth: true},//需要权限
                 },
                 {
                     path:'user',
                     component:ZooUser,
-                    meta:{isAuth: true},//需要权限
+                    // meta:{isAuth: true},//需要权限
                 },
                 {
                     path:'animal',
                     component:ZooAnimal,
-                    meta:{isAuth: true},//需要权限
+                    // meta:{isAuth: true},//需要权限
+                },
+                {
+                    path:'breeding',
+                    component:ZooBreeding,
+                    // meta:{isAuth: true},//需要权限
                 }
             ]
         },
@@ -52,14 +58,14 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
     //判断页面是否需要登录权限才可进入
-    if (to.meta.isAuth) {
+    //不是登录界面都需要权限。。。
-        if (!store.state.loginUser.username) {
+    // console.log(to, from, next);
+    if (to.path !== '/login') {
+        if (!store.state.loginUser) {
             router.replace({
                 path: '/login',
             })
-        } else {
+        }else next()
-            next()
-        }
     } else {
         next()
     }

src/store/index.js

@@ -22,6 +22,10 @@ const actions = {
     //获取动物数据
     getAnimals(context) {
         context.commit('updateAnimals', generateAnimals())
+    },
+    //获取饲养计划
+    getBreedingPlans(context) {
+        context.commit('updateBreedingPlans','')
     }
 }
 
@@ -37,6 +41,10 @@ const mutations = {
     //更新动物集合
     updateAnimals(state, value) {
         state.animals = value
+    },
+    //更新饲养计划
+    updateBreedingPlans(state, value) {
+        state.breedingPlans = value
     }
 }
 
@@ -50,7 +58,8 @@ const state = {
     users: [],
     //动物数据
     animals: [],
-
+    //饲养计划
+    breedingPlans:[],
 
 }