Vue 人资 实战篇七 员工管理上 封装通用的组件、formatter属性、过滤器的使用、树形结构、建立公共导入的页面路由、excel的导入和导出、

1.0 封装一个通用的工具栏

目标：封装一个通用的工具栏供大家使用

1.1 通用工具栏的组件结构

在后续的业务开发中，经常会用到一个类似下图的工具栏，作为公共组件，进行一下封装

1. 组件 src/components/PageTools/index.vue

<template>
  <el-card class="page-tools">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <div  v-if="showBefore" class="before">
          <i class="el-icon-info" />
          <!-- 定义前面得插槽 -->
          <slot name="before" />
        </div>
      </el-col>
      <el-col>
        <el-row type="flex" justify="end">
           <!-- 定义后面的插槽 -->
           <slot name="after" />
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
   
  props: {
   
    showBefore: {
   
      type: Boolean,
      default: false
    }

  }
}
</script>

<style lang='scss'>
 .page-tools {
   
    margin: 10px 0;
    .before {
   
      line-height: 34px;
    i {
   
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
    border: 1px solid rgba(145, 213, 255, 1);
    background: rgba(230, 247, 255, 1);
  }
 }
</style>

1.2 组件统一注册

为了方便所有的页面都可以不用引用该组件，可以进行全局注册

1. 提供注册入口 src/componets/index.js

// 该文件负责所有的公共的组件的全局注册   Vue.use
import PageTools from './PageTools'
export default {
   
  install(Vue) {
   
    //  注册全局的通用栏组件对象
    Vue.component('PageTools', PageTools)
  }
}

2. 在入口处进行注册 src/main.js

import Component from '@/components'
Vue.use(Component) // 注册自己的插件

2.0 员工列表页面的基本布局和结构

目标：实现员工列表页面的基本布局和结构

1. 结构代码 src/employees/index.vue

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">共166条记录</span>
        <template slot="after">
          <el-button size="small" type="warning">导入</el-button>
          <el-button size="small" type="danger">导出</el-button>
          <el-button size="small" type="primary">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border>
          <el-table-column label="序号" sortable="" />
          <el-table-column label="姓名" sortable="" />
          <el-table-column label="工号" sortable="" />
          <el-table-column label="聘用形式" sortable="" />
          <el-table-column label="部门" sortable="" />
          <el-table-column label="入职时间" sortable="" />
          <el-table-column label="账户状态" sortable="" />
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template>
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination layout="prev, pager, next" />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

3.0 员工列表数据请求和分页加载

**目标**实现员工数据的加载和分页请求

1. 首先，封装员工的加载请求 src/api/employees.js

/**
 * 获取员工的综合列表数据
 * ***/
export function getEmployeeList(params) {
   
  return request({
   
    url: '/sys/user',
    params
  })
}

2. 然后，实现加载数据和分页的逻辑

import {
    getEmployeeList } from '@/api/employees'
export default {
   
  data() {
   
    return {
   
      loading: false,
      list: [], // 接数据的
      page: {
   
        page: 1, // 当前页码
        size: 10,
        total: 0 // 总数
      }

    }
  },
  created() {
   
    this.getEmployeeList()
  },
  methods: {
   
    changePage(newPage) {
   
      this.page.page = newPage
      this.getEmployeeList()
    },
    async getEmployeeList() {
   
      this.loading = true
      const {
    total, rows } = await getEmployeeList(this.page)
      this.page.total = total
      this.list = rows
      this.loading = false
    }
  }
}

3. 绑定表格

      <el-card v-loading="loading">
        <el-table border :data="list">
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry" />
          <el-table-column label="账户状态" sortable="" prop="enableState" />
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template>
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.size"
            :current-page="page.page"
            :total="page.total"
            @current-change="changePage"
          />
        </el-row>
      </el-card>

4.0 员工列表中的数据进行格式化

目标：将列表中的内容进行格式化

4.1 利用列格式化属性处理聘用形式

上小节中，列表中的聘用形式/入职时间和账户状态需要进行显示内容的处理

那么聘用形式中1代表什么含义，这实际上是我们需要的枚举数据，该数据的存放文件位于我们提供的**资源/枚举中，可以将枚举下的文件夹放于src/api**文件夹下

1. 针对聘用形式，可以使用el-table-column的formatter属性进行设置

  import    EmployeeEnum from '@/api/constant/employees'
 <!-- 格式化聘用形式 -->
    <el-table-column label="聘用形式" sortable :formatter="formatEmployment" />
    
   // 格式化聘用形式
    formatEmployment(row, column, cellValue, index) {
   
      // 要去找 1所对应的值
      const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)
      return obj ? obj.value : '未知'
    }

4.2 过滤器解决时间格式的处理

1. 针对入职时间，我们可以采用作用域插槽进行处理

 <el-table-column label="入职时间" sortable prop="timeOfEntry">
            <template slot-scope="obj">
              {
   {
   
                obj.row.timeOfEntry | 过滤器
              }}
            </template>
  </el-table-column>

2. 在**资源/过滤器中，我们提供了若干工具方法，我们可以将其转化成过滤器，首先将其拷贝到src**
   在**main.js**中将工具方法转化成过滤器

import * as filters from '@/filters' // 引入工具类
// 注册全局的过滤器
Object.keys(filters).forEach(key => {
   
  // 注册过滤器
  Vue.filter(key, filters[key])
})

3. 现在可以愉快的用过滤器的方式使用工具类的方法了

       <el-table-column label="入职时间" sortable="" align="center">
            <!-- 作用域插槽 -->
            <template slot-scope="{ row }">{
   {
    row.timeOfEntry | formatDate }}</template>
       </el-table-column>

4. 最后一项，账户状态，可以用开关组件switch进行显示

 <el-table-column label="账户状态" align="center" sortable="" prop="enableState">
            <template slot-scope="{ row }">
              <!-- 根据当前状态来确定 是否打开开关 -->
              <el-switch :value="row.enableState === 1" />
            </template>
    </el-table-column>

5.0 删除员工功能

**目标**实现删除员工的功能

1. 首先封装 删除员工的请求

/**
 * 删除员工接口
 * ****/

export function delEmployee(id) {
   
  return request({
   
    url: `/sys/user/${
     id}`,
    method: 'delete'
  })
}

2. 删除功能

 <template slot-scope="{ row }">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small" @click="deleteEmployee(row.id)">删除</el-button>
            </template> 
    // 删除员工
    async deleteEmployee(id) {
   
      try {
   
        await this.$confirm('您确定删除该员工吗')
        await delEmployee(id)
        this.getEmployeeList()
        this.$message.success('删
除员工成功')
      } catch (error) {
   
        console.log(error)
      }
    }

6.0 新增员工功能-弹层-校验-部门

目标：实现新增员工的功能

6.1 新建员工弹层组件

当我们点击新增员工时，我们需要一个类似的弹层

1. 类似**组织架构**的组件，同样新建一个弹层组件 src/views/employees/components/add-employee.vue

<template>
  <el-dialog title="新增员工" :visible="showDialog">
    <!-- 表单 -->
    <el-form label-width="120px">
      <el-form-item label="姓名">
        <el-input style="width:50%" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="手机">
        <el-input style="width:50%" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker style="width:50%" placeholder="请选择入职时间" />
      </el-form-item>
      <el-form-item label="聘用形式">
        <el-select style="width:50%" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="工号">
        <el-input style="width:50%" placeholder="请输入工号" />
      </el-form-item>
      <el-form-item label="部门">
        <el-input style="width:50%" placeholder="请选择部门" />
      </el-form-item>
      <el-form-item label="转正时间">
        <el-date-picker style="width:50%" placeholder="请选择转正时间" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small">取消</el-button>
          <el-button type="primary" size="small">确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
export default {
   
  props: {
   
    showDialog: {
   
      type: Boolean,
      default: false
    }
  }
}
</script>

<style>

</style>

6.2 引用弹出层，点击弹出

1. 父组件中引用，弹出层

import AddEmployee from './components/add-employee'

<!-- 放置新增组件 -->
 <add-employee :show-dialog.sync="showDialog" />

 <el