添加查看详情功能

README.md

@@ -145,12 +145,14 @@ breedingPlan: {
 后端添加该对象并返回操作结果
 
 ## 档案管理
-
+---
 
 
 ## 健康检测
+---
 
 ## 统计分析
+---
 
 
 # 开发进度
@@ -168,7 +170,7 @@ breedingPlan: {
 
 - [x] 基本界面
 - [x] 基本方法
-- [ ] 优化界面样式
+- [x] 优化界面样式
 
 ### aside
 
@@ -179,7 +181,7 @@ breedingPlan: {
 ### footer
 
 - [x] 基本界面
-- [ ] 优化界面样式
+- [x] 优化界面样式
 
 ### main
 
@@ -199,8 +201,8 @@ breedingPlan: {
 ### 饲养员
 
 - [x] 数据展示
-- [ ] 基本功能
+- [x] 基本功能
-- [ ] 基本方法
+- [x] 基本方法
 - [ ] 接入后端
 
 ### 兽医

src/components/ZooAnimalFormDialog.vue

@@ -24,6 +24,10 @@ export default {
   props: {
     animal: {
       type: Object,
+    },
+    detail:{
+      type: Boolean,
+      default: false
     }
   },
   mounted() {
@@ -57,43 +61,43 @@ export default {
 <!--      }-->
 <!--    </div>-->
     <el-form-item label="动物ID">
-      <el-input v-model="form.id" placeholder="请设置动物ID" type="number" :disabled="formAction.idDisable"/>
+      <el-input v-model="form.id" placeholder="请设置动物ID" type="number" :disabled="formAction.idDisable || detail"/>
     </el-form-item>
     <el-form-item label="动物名称">
-      <el-input v-model="form.name" placeholder="动物名称"/>
+      <el-input v-model="form.name" placeholder="动物名称" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="性别">
-      <el-radio-group v-model="form.sex">
+      <el-radio-group v-model="form.sex" :disabled="detail">
         <el-radio value="雄性">雄性</el-radio>
         <el-radio value="雌性">雌性</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="动物种类">
-      <el-input v-model="form.species" placeholder="动物种类"/>
+      <el-input v-model="form.species" placeholder="动物种类" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="动物体重（KG）">
-      <el-input-number v-model="form.weight" :precision="2" :step="0.1" :min="0" />
+      <el-input-number v-model="form.weight" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="动物身高（M）">
-      <el-input-number v-model="form.height" :precision="2" :step="0.1" :min="0" />
+      <el-input-number v-model="form.height" :precision="2" :step="0.1" :min="0" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="动物状态">
-      <el-radio-group v-model="form.state">
+      <el-radio-group v-model="form.state" :disabled="detail">
         <el-radio :value="0">正常</el-radio>
         <el-radio :value="1">异常</el-radio>
       </el-radio-group>
     </el-form-item>
     <el-form-item label="饲养员ID">
-      <el-input v-model="form.roleId" type="number" placeholder="饲养员ID"/>
+      <el-input v-model="form.roleId" type="number" placeholder="饲养员ID" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="动物颜色">
-        <el-color-picker v-model="form.color" />
+        <el-color-picker v-model="form.color" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="动物特征">
-      <el-input v-model="form.features" placeholder="动物特征"/>
+      <el-input v-model="form.features" placeholder="动物特征" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="生活习性">
-      <el-input v-model="form.habit" placeholder="生活习性"/>
+      <el-input v-model="form.habit" placeholder="生活习性" :disabled="detail"/>
     </el-form-item>
     <div class="right">
       <slot :form="form"></slot>

src/components/ZooBreedingPlanFormDialog.vue

@@ -21,6 +21,10 @@ export default {
   props: {
     breedingPlan: {
       type: Object,
+    },
+    detail: {
+      type: Boolean,
+      default: false
     }
   },
   mounted() {
@@ -39,22 +43,22 @@ export default {
 <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-input v-model="form.id" type="number" placeholder="饲养计划ID" :disabled="formAction.idDisable || detail"/>
     </el-form-item>
     <el-form-item label="计划名称">
-      <el-input v-model="form.name" placeholder="计划名称"/>
+      <el-input v-model="form.name" placeholder="计划名称" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="动物种类">
-      <el-input v-model="form.species" placeholder="动物种类"/>
+      <el-input v-model="form.species" placeholder="动物种类" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="性别">
-      <el-radio-group v-model="form.sex">
+      <el-radio-group v-model="form.sex" :disabled="detail">
         <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-select v-model="form.phase" placeholder="生命阶段" :disabled="detail">
         <el-option label="幼年期" :value="0"/>
         <el-option label="成长期" :value="1"/>
         <el-option label="成年期" :value="2"/>
@@ -62,21 +66,22 @@ export default {
       </el-select>
     </el-form-item>
     <el-form-item label="动物状态">
-      <el-radio-group v-model="form.state">
+      <el-radio-group v-model="form.state" :disabled="detail">
         <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.roleId" type="number" placeholder="执行饲养员"/>
+      <el-input v-model="form.roleId" type="number" placeholder="执行饲养员" :disabled="detail"/>
     </el-form-item>
-    <el-form-item label="计划描述">
+    <el-form-item label="计划描述" >
       <el-input
           v-model="form.describe"
           :rows="4"
           type="textarea"
           placeholder="计划描述"
           resize="none"
+          :disabled="detail"
       />
     </el-form-item>
     <div class="right">

src/components/ZooUserFormDialog.vue

@@ -1,21 +1,29 @@
 <script>
+import {hidePassword, showPassword} from "@/utils/common.js";
+
 export default {
   name: "ZooUserFormDialog",
+  methods: {hidePassword, showPassword},
   data() {
     return {
       form: {
+        id: '',
         username: '',
         password: '',
         auth: 0,
       },
       formAction: {
-        usernameDisable:false,
+        usernameDisable: false,
       }
     }
   },
   props: {
     user: {
       type: Object,
+    },
+    detail: {
+      type: Boolean,
+      default: false
     }
   },
   mounted() {
@@ -26,15 +34,19 @@ export default {
     }
   },
   beforeUnmount() {
-    console.log('ZooUserFormDialog-beforeUnmount',this);
+    console.log('ZooUserFormDialog-beforeUnmount', this);
   }
 }
 </script>
 
 <template>
   <el-form label-width="auto">
+    <el-form-item label="用户ID">
+      <el-input v-model="form.id" placeholder="请设置用户ID" type="number"
+                :disabled="formAction.usernameDisable || detail"/>
+    </el-form-item>
     <el-form-item label="用户名">
-      <el-input v-model="form.username" placeholder="请设置用户名" :disabled="formAction.usernameDisable"/>
+      <el-input v-model="form.username" placeholder="请设置用户名" :disabled="detail"/>
     </el-form-item>
     <el-form-item label="密码">
       <el-input
@@ -42,15 +54,14 @@ export default {
           type="password"
           placeholder="请设置登录密码"
           show-password
+          v-if="detail===false"
       />
+      <div v-else-if="detail===true" @mouseover="showPassword($event,form.password)"
+           @mouseleave="hidePassword($event)">••••••••
+      </div>
     </el-form-item>
     <el-form-item label="身份">
-<!--      <el-select v-model="form.auth" placeholder="选择身份">-->
+      <el-radio-group v-model="form.auth" :disabled="detail">
-<!--        <el-option label="管理员" :value="0"/>-->
-<!--        <el-option label="饲养员" :value="1"/>-->
-<!--        <el-option label="兽医" :value="2"/>-->
-<!--      </el-select>-->
-      <el-radio-group v-model="form.auth">
         <el-radio :value="0">管理员</el-radio>
         <el-radio :value="1">饲养员</el-radio>
         <el-radio :value="2">兽医</el-radio>

src/pages/ZooAnimal.vue

@@ -1,6 +1,6 @@
 <script>
 import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
-import {Delete, DocumentAdd, Edit, Search} from "@element-plus/icons-vue";
+import {Delete, Document, DocumentAdd,Edit, Search} from "@element-plus/icons-vue";
 import ZooAnimalFormDialog from "@/components/ZooAnimalFormDialog.vue";
 import {mapActions,mapState} from "vuex";
 
@@ -16,8 +16,9 @@ export default {
       },
       dialog: {
         addDialogVisible: false,//添加动物对话框
-        editDialogVisible: false,//编辑用户对话框
+        editDialogVisible: false,//编辑动物对话框
-        editData: {}
+        editData: {},
+        detailDialogVisible: false,//查看详情对话框
       }
     }
   },
@@ -27,8 +28,8 @@ export default {
     Search() {
       return Search
     },
-    DocumentAdd() {
+    Document() {
-      return DocumentAdd
+      return Document
     },
     Edit() {
       return Edit
@@ -36,6 +37,9 @@ export default {
     Delete() {
       return Delete
     },
+    DocumentAdd() {
+      return DocumentAdd
+    },
     //endregion
     ...mapState(["animals"])
   },
@@ -49,6 +53,12 @@ export default {
   },
   methods: {
     ...mapActions(["getAnimals"]),
+    showDetailDialog(animal) {
+      //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
+      this.dialog.editData = this.animals.find(e => e.id === animal.id)
+      console.log('点击了动物详情', this.dialog.editData)
+      this.dialog.detailDialogVisible = true
+    },
     showEditDialog(animal) {
       //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
       this.dialog.editData = this.animals.find(e => e.id === animal.id)
@@ -222,8 +232,11 @@ export default {
         </el-table-column>
         <el-table-column prop="features" label="动物特征" width="200"/>
         <el-table-column prop="habit" label="生活习性" width="200"/>
-        <el-table-column fixed="right" label="操作" width="130">
+        <el-table-column fixed="right" label="操作" width="190">
           <template #default="scope">
+            <el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
+              查询
+            </el-button>
             <el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
               编辑
             </el-button>
@@ -264,6 +277,18 @@ export default {
       </template>
     </ZooAnimalFormDialog>
   </el-dialog>
+
+  <!--  查看动物对话框-->
+  <el-dialog v-model="dialog.detailDialogVisible" title="查询动物" width="500" align-center draggable overflow
+             destroy-on-close>
+    <ZooAnimalFormDialog :animal="dialog.editData" detail>
+      <template #default="scope">
+        <el-button @click="dialog.detailDialogVisible = false">
+          关闭
+        </el-button>
+      </template>
+    </ZooAnimalFormDialog>
+  </el-dialog>
 </template>
 
 <style scoped>

src/pages/ZooBreeding.vue

@@ -15,9 +15,10 @@ export default {
         keyword: ''
       },
       dialog: {
-        addDialogVisible: false,//添加动物对话框
+        addDialogVisible: false,//添加饲养计划对话框
-        editDialogVisible: false,//编辑用户对话框
+        editDialogVisible: false,//编辑饲养计划对话框
-        editData: {}
+        editData: {},
+        detailDialogVisible:false//查询饲养计划对话框
       }
     }
   },
@@ -49,6 +50,12 @@ export default {
   },
   methods: {
     ...mapActions(["getBreedingPlans"]),
+    showDetailDialog(breedingPlan) {
+      //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
+      this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
+      console.log('点击了编辑', this.dialog.editData)
+      this.dialog.detailDialogVisible = true
+    },
     showEditDialog(breedingPlan) {
       //这里使用animal的id查询后端的特定动物再赋值，这里用假数据代替一下
       this.dialog.editData = this.breedingPlans.find(e => e.id === breedingPlan.id)
@@ -221,8 +228,11 @@ export default {
           </template>
         </el-table-column>
         <el-table-column prop="describe" label="计划描述" width="300"/>
-        <el-table-column fixed="right" label="操作" width="130">
+        <el-table-column fixed="right" label="操作" width="190">
           <template #default="scope">
+            <el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
+              查询
+            </el-button>
             <el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
               编辑
             </el-button>
@@ -263,6 +273,18 @@ export default {
       </template>
     </ZooBreedingPlanFormDialog>
   </el-dialog>
+
+  <!--  查看动物对话框-->
+  <el-dialog v-model="dialog.detailDialogVisible" title="查询饲养计划" width="500" align-center draggable overflow
+             destroy-on-close>
+    <ZooBreedingPlanFormDialog :breedingPlan="dialog.editData" detail>
+      <template #default="scope">
+        <el-button @click="dialog.detailDialogVisible = false">
+          关闭
+        </el-button>
+      </template>
+    </ZooBreedingPlanFormDialog>
+  </el-dialog>
 </template>
 
 <style scoped>

src/pages/ZooUser.vue

@@ -1,8 +1,8 @@
 <script>
-import {Delete, Edit, Search, User} from "@element-plus/icons-vue";
+import {Delete, Edit, Search, User,Document} from "@element-plus/icons-vue";
 import {mapState,mapActions} from "vuex";
 import ZooUserFormDialog from "@/components/ZooUserFormDialog.vue";
-import {copy, fuzzyMatching, splitKeyWords} from "@/utils/common.js";
+import {copy, fuzzyMatching, splitKeyWords,showPassword,hidePassword} from "@/utils/common.js";
 
 
 export default {
@@ -23,6 +23,9 @@ export default {
     Edit() {
       return Edit
     },
+    Document() {
+      return Document
+    },
 
     // endregion
 
@@ -46,14 +49,22 @@ export default {
       dialog: {
         addDialogVisible: false,//添加用户对话框
         editDialogVisible: false,//编辑用户对话框
-        editData: {}
+        editData: {},
+        detailDialogVisible: false,//查看用户对话框
       }
     }
   },
   methods: {
+    hidePassword,
+    showPassword,
     ...mapActions(['getUsers']),
+    showDetailDialog(user) {
+      //这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
+      this.dialog.editData = this.users.find(e => e.username === user.username)
+      console.log('点击了查询', this.dialog.editData)
+      this.dialog.detailDialogVisible = true
+    },
     showEditDialog(user) {
-      // console.log('点击了编辑',user)
       //这里使用user的用户名查询后端的特定用户再赋值，这里用假数据代替一下
       this.dialog.editData = this.users.find(e => e.username === user.username)
       console.log('点击了编辑', this.dialog.editData)
@@ -173,16 +184,6 @@ export default {
 
       this.tableData = searchResult
     },
-    //鼠标悬浮显示密码
-    //region
-    showPassword(event,password){
-      console.log('showPassword')
-      event.target.innerText = password
-    },
-    hidePassword(event) {
-      event.target.innerText = '••••••••'
-    }
-    //endregion
   },
   mounted() {
     this.getUsers()//获取用户数据
@@ -221,6 +222,7 @@ export default {
     <!--    <hr/>-->
     <div class="table">
       <el-table :data="tableData" style="height: 100%" empty-text="暂无数据" border>
+        <el-table-column fixed prop="id" label="用户ID" width="70"/>
         <el-table-column fixed prop="username" label="用户名" width="150"/>
         <el-table-column prop="password" label="密码" width="150">
           <template #default="scope">
@@ -235,8 +237,11 @@ export default {
             <span v-else>未知</span>
           </template>
         </el-table-column>
-        <el-table-column fixed="right" label="操作" width="130">
+        <el-table-column fixed="right" label="操作" width="190">
           <template #default="scope">
+            <el-button link type="primary" size="small" :icon="Document" @click="showDetailDialog(scope.row)">
+              查询
+            </el-button>
             <el-button link type="primary" size="small" :icon="Edit" @click="showEditDialog(scope.row)">
               编辑
             </el-button>
@@ -277,6 +282,18 @@ export default {
       </template>
     </ZooUserFormDialog>
   </el-dialog>
+
+  <!--  用户详情对话框-->
+  <el-dialog v-model="dialog.detailDialogVisible" title="查询用户" width="400" align-center draggable overflow
+             destroy-on-close>
+    <ZooUserFormDialog :user="dialog.editData" detail>
+      <template #default="scope">
+        <el-button @click="dialog.detailDialogVisible = false">
+          关闭
+        </el-button>
+      </template>
+    </ZooUserFormDialog>
+  </el-dialog>
 </template>
 
 <style scoped>

src/store/index.js

@@ -51,6 +51,7 @@ const mutations = {
 const state = {
     //登录用户数据
     loginUser: {
+        id:0,
         username: 'user1',
         auth: 0
     },

src/utils/common.js

@@ -3,7 +3,7 @@ export function generateUsers() {
     //数据生成器
     for (let i = 0; i < 100; i++) {
         let user = {
-            userKey: i,
+            id: i,
             username: 'user' + (i + 3),
             password: '123456',
             auth: Math.floor(Math.random() * 3),
@@ -79,6 +79,20 @@ export function copy(value) {
     return JSON.parse(result)
 }
 
+//鼠标悬浮显示密码
+//region
+export function showPassword(event,password){
+    console.log('showPassword')
+    event.target.innerText = password
+}
+
+export function hidePassword(event) {
+    event.target.innerText = '••••••••'
+}
+//endregion
+
+//模糊查询
+//region
 //分割字符串
 export function splitKeyWords(keyword) {
     let keyset = keyword.split(' ')//提取关键字
@@ -107,4 +121,5 @@ function keywordMatching(object, keyword) {
     return Object.keys(object).some(key => {
         return (object[key] + '').includes(keyword)
     })
-}
+}
+//endregion