【Vue.js实战案例】- Vue.js全家桶递归组件实现绩效考核系统中组织层级结构和选人功能

         大家好！先上图看看本次案例的整体效果。

       浪奔，浪流，万里涛涛江水永不休。如果在jq时代来实这个功能简直有些噩梦了，但是自从前端思想发展到现在的以mvvm为主流的大背景下，来实现一个这样繁杂的功能简直不能容易太多。下面就手把手带您一步步拨开这个案例的层层迷雾。

       实现步骤如下：

1.  api构建部门和员工信息接口，vuex全局存放部门list和员工list数据信息。
   api：
   
   

   export default {
     getemployeelist () {
       return {
         returncode: 0,
         message: '',
         result: [
           {
             id: 1,
             employeename: '吴亦凡',
             departmentid: 44
           },
           {
             id: 2,
             employeename: '鹿晗',
             departmentid: 45
           },
           {
             id: 3,
             employeename: '孙红雷',
             departmentid: 44
           },
           {
             id: 4,
             employeename: '周杰伦',
             departmentid: 45
           },
           {
             id: 5,
             employeename: '张国荣',
             departmentid: 45
           },
           {
             id: 6,
             employeename: '陈百强',
             departmentid: 45
           },
           {
             id: 7,
             employeename: '谭咏麟',
             departmentid: 41
           },
           {
             id: 8,
             employeename: '谷村新司',
             departmentid: 45
           },
           {
             id: 9,
             employeename: '中岛美雪',
             departmentid: 46
           },
           {
             id: 10,
             employeename: '周润发',
             departmentid: 47
           },
           {
             id: 14,
             employeename: '周慧敏',
             departmentid: 58
           },
           {
             id: 13,
             employeename: '张学友',
             departmentid: 58
           }
         ]
       }
     },
     getdepartmentlist () {
       return {
         returncode: 0,
         message: '',
         result: [
           {
             id: 40,
             name: '研发一部',
             parentid: 37,
             sequence: 2
           },
           {
             id: 41,
             name: '研发二部',
             parentid: 37,
             sequence: 4
           },
           {
             id: 43,
             name: '市场',
             parentid: 0,
             sequence: 6
           },
           {
             id: 44,
             name: '销售',
             parentid: 0,
             sequence: 4
           },
           {
             id: 45,
             name: '财务',
             parentid: 0,
             sequence: 5
           },
           {
             id: 46,
             name: '研发三部',
             parentid: 37,
             sequence: 1
           },
           {
             id: 47,
             name: '研发四部',
             parentid: 37,
             sequence: 3
           },
           {
             id: 37,
             name: '研发',
             parentid: 0,
             sequence: 5
           },
           {
             id: 58,
             name: '研发一部',
             parentid: 57,
             sequence: 1
           },
           {
             id: 59,
             name: '测试',
             parentid: 0,
             sequence: 5
           },
           {
             id: 60,
             name: '测试一部',
             parentid: 59,
             sequence: 1
           },
           {
             id: 61,
             name: '测试二部',
             parentid: 59,
             sequence: 2
           },
           {
             id: 62,
             name: '研发二部',
             parentid: 57,
             sequence: 2
           }
         ]
       }
     }
   }

   view code

   store:

   import dataapi from '@/api/data.api.js'
   const state = {
     employeelist: [],
     departmentlist: []
   }
   
   const getters = {
     employeelist: state => state.employeelist,
     departmentlist: state => state.departmentlist
   }
   
   const mutations = {
     setemployeelist (state, { employeelist }) {
       state.employeelist = employeelist
     },
     setdepartmentlist (state, { departmentlist }) {
       state.departmentlist = departmentlist
     }
   }
   
   const actions = {
     getemployeelist ({ commit }) {
       let employeeresult = dataapi.getemployeelist()
       if (employeeresult.returncode === 0) {
         commit('setemployeelist', { employeelist: employeeresult.result })
       }
     },
     getdepartmentlist ({ commit }) {
       let departmentresult = dataapi.getdepartmentlist()
       if (departmentresult.returncode === 0) {
         commit('setdepartmentlist', { departmentlist: departmentresult.result })
       }
     }
   }
   
   export default {
     state,
     getters,
     mutations,
     actions,
     namespaced: true
   }

    

2. vue.$set为员工对象增加响应式属性checked控制是否选中，methods中创建选中方法如下：
   

   selectemployee () {
         var self = this
         if (self.employee.checked === undefined) {
           this.$set(self.employee, 'checked', true)
         } else {
           self.employee.checked = !self.employee.checked
         }
       }

    

3. computed计算属性监控文本框输入字段searchkey的变化实现左侧员工列表实时检索功能。
   

   searchemployeelist () {
         var self = this
         if (self.searchkey.trim() === '') {
           console.log(self.employeelist)
           return self.employeelist.filter(item => item.checked === undefined || !item.checked)
         } else {
           return self.employeelist.filter(item => (item.employeename.indexof(self.searchkey.trim()) !== -1) && (item.checked === undefined || !item.checked))
         }
       }

    

4. 构建组织结构树的部门组件，部门下可能存在子部门和员工，所以组件内部再调用部门组件和员工组件，以达到循环递归的效果。
   

   <template>
     <li @click.stop="expandtree()">
       <a :class="lvl|level">
         <span class="expand-tree-icon">
           <i class="fa fa-caret-right" :class="{'active':department.expand}"></i>
         </span>
         <span>
           <i class="lcfont lc-department-o"></i>
         </span>
         <span class="title">
           <span>{{department.name}}</span>
           <span class="title-desc">({{allchildemployeelist.length}}人 )</span>
           <i class="lcfont lc-add" @click.stop="selectdepartmentemployees()" title="添加整个部门成员"></i>
         </span>
       </a>
       <ul v-show="department.expand">
         <child-employee
           v-for="(employee,index) in childemployeelist"
           :employee="employee"
           :lvl="lvl+1"
           :key="index"
         ></child-employee>
         <child-department
           v-for="(department,index) in childdepartmentlist"
           :department="department"
           :employeelist="employeelist"
           :departmentlist="departmentlist"
           :lvl="lvl+1"
           :key="index"
         ></child-department>
       </ul>
     </li>
   </template>

    

5. 结构树之员工组件
   

   <template>
     <li v-on:click.stop="selectemployee()">
       <a class="member-item" v-bind:class="lvl|level" href="javascript:;">
         <div class="lc-avatar flex-se1" name="true" size="30">
           <div class="lc-avatar-30" :title="employee.employeename">
             <span class="lc-avatar-def" style="background-color: rgb(112, 118, 142);">
               <div>{{employee.employeename}}</div>
             </span>
             <div class="lc-avatar-name">{{employee.employeename}}</div>
           </div>
         </div>
         <i class="lcfont" v-bind:class="{'lc-check':employee.checked}"></i>
       </a>
     </li>
   </template>

    

6. 和上面员工的选中原理类似，控制部门节点的展开和合并也通过$set方法扩展一个响应式的expand属性。
   

   expandtree () {
         var self = this
         if (self.department.expand === undefined) {
           self.$set(self.department, 'expand', true)
         } else {
           self.department.expand = !self.department.expand
         }
       }

    

         以上就是核心步骤的整体思路，欢迎讨论。