前言

前言
一、封装一个通用的工具栏
- 1.1 通用工具栏效果图
- 1.2 组件基本布局
- 1.3 全局注册组件
二、员工列表展示
- 2.1 员工列表页面效果图
- 2.2 员工列表页面基础布局
- 2.3 获取员工列表数据并分页展示
- 2.4 员工列表中的数据进行格式化
- - 2.4.1 利用列格式化属性处理聘用形式
  - 2.4.2 通过过滤器处理时间格式
  - 2.4.3 开关组件switch显示账户状态
三、实现删除员工功能
四、实现新增员工功能
- 4.1 新建员工弹窗组件效果图：
- 4.2 新建一个弹窗组件
- 4.3 引用弹出层，点击弹出
- 4.4 新增员工的表单校验
- 4.5 获取并展示部门数据
- 4.6 点击弹窗的确定按钮提交表单数据
总结

一、封装一个通用的工具栏

1.1 通用工具栏效果图

在后续的业务开发中，经常会用到一个类似下图的工具栏：

1.2 组件基本布局

在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.3 全局注册组件

首先在src/componets/目录下新建index.vue文件，该文件负责所有的公共的组件的全局注册：

import PageTools from './PageTools'export default {install(Vue) {//  注册全局的通用栏组件对象Vue.component('PageTools', PageTools)}
}

然后在项目入口文件src/main.js中进行注册：

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

二、员工列表展示

2.1 员工列表页面效果图

2.2 员工列表页面基础布局

在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>

2.3 获取员工列表数据并分页展示

首先，在src/api/employees.js中封装获取员工数据的请求：

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

然后，在src/employees/index.vue中实现加载数据和分页的逻辑：

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 = newPagethis.getEmployeeList()},async getEmployeeList() {this.loading = trueconst { total, rows } = await getEmployeeList(this.page)this.page.total = totalthis.list = rowsthis.loading = false}}
}

最后，绑定表格：

  <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-paginationlayout="prev, pager, next":page-size="page.size":current-page="page.page":total="page.total"@current-change="changePage"/></el-row></el-card>

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

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

员工列表中的聘用形式需要我们进行显示内容的处理，可以使用el-table-column的formatter属性进行设置：

//这实际上是我们需要的枚举数据，该数据的存放文件位于src/api文件夹下
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 : '未知'
}

2.4.2 通过过滤器处理时间格式

将提供的工具方法导入src，然后在main.js中将工具方法转化成过滤器：

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

然后在src/employees/index.vue中使用：

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

2.4.3 开关组件switch显示账户状态

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

三、实现删除员工功能

首先，在src/api/employees.js中封装删除员工的请求：

/**
* 删除员工接口
* ****/
export function delEmployee(id) {return request({url: `/sys/user/${id}`,method: 'delete'})
}

然后，在src/employees/index.vue中实现删除功能：

<el-button type="text" size="small" @click="deleteEmployee(row.id)">删除</el-button>// 删除员工async deleteEmployee(id) {try {await this.$confirm('您确定删除该员工吗')await delEmployee(id)this.getEmployeeList()this.$message.success('删除员工成功')} catch (error) {console.log(error)}}

四、实现新增员工功能

4.1 新建员工弹窗组件效果图：

4.2 新建一个弹窗组件

在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>

4.3 引用弹出层，点击弹出

在src/employees/index.vue中添加如下代码：

import AddDemployee from './components/add-employee'<el-button icon="plus" type="primary" size="small" @click="showDialog = true">新增员工</el-button><!-- 放置新增组件 -->
<add-employee :show-dialog.sync="showDialog" />

4.4 新增员工的表单校验

在src/views/employees/components/add-employee.vue中添加校验规则：

  data() {return {formData: {username: '',mobile: '',formOfEmployment: '',workNumber: '',departmentName: '',timeOfEntry: '',correctionTime: ''},rules: {username: [{ required: true, message: '用户姓名不能为空', trigger: 'blur' }, {min: 1, max: 4, message: '用户姓名为1-4位'}],mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, {pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}],formOfEmployment: [{ required: true, message: '聘用形式不能为空', trigger: 'blur' }],workNumber: [{ required: true, message: '工号不能为空', trigger: 'blur' }],departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],timeOfEntry: [{ required: true, message: '入职时间', trigger: 'blur' }]}}}

然后绑定数据：

<el-form :model="formData" :rules="rules" label-width="120px"><el-form-item label="姓名" prop="username"><el-input v-model="formData.username" style="width:50%" placeholder="请输入姓名" /></el-form-item><el-form-item label="手机" prop="mobile"><el-input v-model="formData.mobile" style="width:50%" placeholder="请输入手机号" /></el-form-item><el-form-item label="入职时间" prop="timeOfEntry"><el-date-picker v-model="formData.timeOfEntry" style="width:50%" placeholder="请选择日期" /></el-form-item><el-form-item label="聘用形式" prop="formOfEmployment"><el-select v-model="formData.formOfEmployment" style="width:50%" placeholder="请选择" /></el-form-item><el-form-item label="工号" prop="workNumber"><el-input v-model="formData.workNumber" style="width:50%" placeholder="请输入工号" /></el-form-item><el-form-item label="部门" prop="departmentName"><el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" /></el-form-item><el-form-item label="转正时间" prop="correctionTime"><el-date-picker v-model="formData.correctionTime" style="width:50%" placeholder="请选择日期" /></el-form-item>
</el-form>

4.5 获取并展示部门数据

首先，获取部门数据并将其转化为树形结构：

import { getDepartments } from '@/api/departments'
import { transListToTreeData } from '@/utils'data () {return {treeData: [], // 定义数组接收树形数据showTree: false, // 控制树形的显示或者隐藏loading: false, // 控制树的显示或者隐藏进度条}},methods: {async getDepartments() {this.showTree = truethis.loading = trueconst { depts } = await getDepartments()// depts是数组 但不是树形this.treeData = transListToTreeData(depts, '')this.loading = false},}

然后，点击选择部门显示数据：

<el-form-item label="部门" prop="departmentName"><el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" @focus="getDepartments" /><!-- 放置一个tree组件 --><el-treev-if="showTree"v-loading="loading":data="treeData"default-expand-all="":props="{ label: 'name' }"@node-click="selectNode"/>
</el-form-item>
选择一个部门时触发：selectNode(node) {this.formData.departmentName = node.namethis.showTree = false}

4.6 点击弹窗的确定按钮提交表单数据

在src/api/employees.js中封装新增员工的请求：

/** **
*  新增员工的接口
* **/
export function addEmployee(data) {return request({method: 'post',url: '/sys/user',data})
}

然后在src/views/employees/components/add-employee.vue中调用新增接口：

<el-button size="small" @click="btnCancel">取消</el-button>
<el-button type="primary" size="small" @click="btnOK">确定</el-button>// 点击确定时 校验整个表单
async btnOK() {try {await this.$refs.addEmployee.validate()// 调用新增接口await addEmployee(this.formData) // 新增员工// 告诉父组件更新数据// this.$parent 可以直接调用到父组件的实例 实际上就是父组件this// this.$emitthis.$parent.getEmployeeList()this.$parent.showDialog = false} catch (error) {console.log(error)}
},
btnCancel() {// 重置原来的数据this.formData = {username: '',mobile: '',formOfEmployment: '',workNumber: '',departmentName: '',timeOfEntry: '',correctionTime: ''}this.$refs.addEmployee.resetFields() // 重置校验结果this.$emit('update:showDialog', false)
}

总结

Vue项目实战之人力资源平台系统（七）员工管理模块相关推荐

Vue项目实战之人力资源平台系统（十）图片上传和打印员工信息
前言目录前言一.配置腾讯云空间存储图片 1.1 配置步骤二.图片上传流程解析三.实现文件上传组件 3.1 安装依赖 3.2 上传图片组件的基本布局 3.3 全局注册组件 3.4 点击图片进行 ...
Vue项目实战之人力资源平台系统（一）框架介绍及项目环境搭建
前言目录前言一.vue-element-admin简介二.项目环境搭建 2.1 nodejs环境 2.2 git版本控制 2.3 vscode编辑器三.拉取vue-element-admin ...
Vue项目实战之人力资源平台系统（十一）权限管理模块（上）
前言目录前言一.权限管理的设计思想二.给员工分配角色 2.1 分配角色弹窗效果图 2.1 新建分配角色对话框组件 2.2 获取角色列表 2.3 获取当前用户的角色信息 2.4 点击确定按钮给用 ...
Vue项目实战之电商后台管理系统(二) 主页模块
前言目录前言一.主页布局 1.1 整体布局 1.2 头部区域布局 1.3 左侧菜单布局 1.3.1 静态布局 1.3.2 通过axios请求拦截器来进行权限验证 1.3.3 通过axios获取左 ...
【.NET Core项目实战-统一认证平台】第七章网关篇-自定义客户端限流
上篇文章我介绍了如何在网关上增加自定义客户端授权功能,从设计到编码实现,一步一步详细讲解,相信大家也掌握了自定义中间件的开发技巧了,本篇我们将介绍如何实现自定义客户端的限流功能,来进一步完善网关的基础 ...
JAVA毕设项目社区电商平台系统（java+VUE+Mybatis+Maven+Mysql）
JAVA毕设项目社区电商平台系统(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Web ...
Springboot毕设项目连锁民宿平台系统kw3zf（java+VUE+Mybatis+Maven+Mysql）
Springboot毕设项目连锁民宿平台系统kw3zf(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HB ...
Springboot毕设项目连锁民宿平台系统686l0（java+VUE+Mybatis+Maven+Mysql）
Springboot毕设项目连锁民宿平台系统686l0(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HB ...
【.NET Core项目实战-统一认证平台】第十四章授权篇-自定义授权方式
上篇文章我介绍了如何强制令牌过期的实现,相信大家对IdentityServer4的验证流程有了更深的了解,本篇我将介绍如何使用自定义的授权方式集成老的业务系统验证,然后根据不同的客户端使用不同的认证方 ...

Vue项目实战之人力资源平台系统（七）员工管理模块

前言

目录