<template>
<div class="employees-container">
<div class="app-container">
<!-- 全局组件 -->
<page-tools>
<!-- 插入到left插槽位置 -->
<template #left>
<span>总记录数: {{ total }}</span>
</template>
<!-- 插入到right插槽位置 -->
<template #right>
<el-button type="primary" size="small" @click="$router.push('/import')">导入excel</el-button>
<el-button type="primary" size="small" @click="handleDownload">导出excel</el-button>
<el-button type="primary" size="small" @click="addEmployeeFn">新增员工</el-button>
</template>
</page-tools>
<!-- 表格 -->
<el-card style="margin-top: 10px;">
<el-table border :data="employeeList" :default-sort="{prop: 'timeOfEntry'}">
<el-table-column label="序号" type="index" width="80" />
<el-table-column label="姓名" prop="username" />
<el-table-column label="工号" prop="workNumber" />
<el-table-column label="聘用形式" prop="formOfEmployment">
<template #default="scope">
{{ formOfEmployment(scope.row.formOfEmployment) }}
</template>
</el-table-column>
<el-table-column label="部门" prop="departmentName" />
<el-table-column label="入职时间" prop="timeOfEntry" sortable>
<template #default="{ row }">
{{ formatDate(row.timeOfEntry) }}
</template>
</el-table-column>
<el-table-column label="账户状态" prop="enableState" />
<el-table-column label="操作" fixed="right" width="280">
<template #default="scope">
<el-button type="text" size="small" @click="goDetail(scope.row.id)">查看</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="assignRoleFn(scope.row.id)">分配角色</el-button>
<el-button type="text" size="small" @click="delEmployeeFn(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div style="height: 60px; margin-top: 10px">
<el-pagination
:current-page="params.page"
:total="total"
:page-size="params.size"
layout="prev, pager, next"
@current-change="currentPageChangeFn"
/>
</div>
</el-card>
</div>
<!-- 添加员工组件 -->
<AddEmployee
:show-dialog="showDialog"
@close-dialog="closeDialogFn"
@update="hGetEmployeeList"
/>
<!-- 添加分配角色组件 -->
<AssignRole
:cur-id="curId"
:show-role-dialog="showRoleDialog"
@closeAssignDialog="closeAssignDialog"
/>
</div>
</template>
<script>
// 导入组件
import AssignRole from './components/assign-role.vue' // 分配角色组件
import { getExportData } from '@/utils/excelData'
// //引入时间函数
import dayjs from 'dayjs' // ES 2015
import AddEmployee from './components/add-employee.vue'
import { getEmployeeListAPI, delEmployeeAPI } from '@/api/employees'
export default {
name: 'Employee',
components: {
AddEmployee,
AssignRole
},
data() {
return {
curId: '', // 当前点击的角色的id
showRoleDialog: false, // 控制分配角色组件的显示与隐藏
showDialog: false, // 控制添加员工组件的显示与隐藏
employeeList: [], // 员工列表
params: { page: 1, size: 5 },
total: 0
}
},
mounted() {
this.hGetEmployeeList() // 调用 获取员工列表
},
methods: {
// 事件 分配角色
assignRoleFn(id) {
this.curId = id // 把要分配角色的id先保存下来, 传给子组件,做后续操作
this.showRoleDialog = true // 打开 分配角色组件 弹窗
},
// 事件 关闭 分配角色 弹框
closeAssignDialog() {
this.showRoleDialog = false // 关闭 分配角色组件 弹窗
},
// 事件 跳转到 角色详情页
goDetail(id) {
this.$router.push({
path: '/employees/detail',
query: {
id
}
})
},
// 导出 excel
handleDownload() {
import('@/vendor/Export2Excel').then(async excel => {
// 1.准备表头中的中英文对应关系
const headerRelation = {
'手机号': 'mobile',
'姓名': 'username',
'入职日期': 'timeOfEntry',
'工号': 'workNumber',
'转正日期': 'correctionTime',
'部门': 'departmentName'
}
// 2.调用接口准备表格数据 (从数组库拉取当前页的最新的数据完成导出)
const res = await getEmployeeListAPI(this.params)
// 3.调用处理方法进行数据处理
const { data, header } = getExportData(res.rows, headerRelation)
excel.export_json_to_excel({
header: header,
data: data,
filename: 'excel-list',
autoWidth: true,
bookType: 'xlsx'
})
})
},
// 事件 增加员工
addEmployeeFn() {
this.showDialog = true
},
// 事件 关闭弹出
closeDialogFn() { // 子传父
this.showDialog = false
},
// 事件 删除员工
async delEmployeeFn(id) {
// 危险操作,提示用户
this.$confirm('确定删除吗', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
try {
await delEmployeeAPI(id) // 发送后台, 删除员工
this.hGetEmployeeList() // 重新 获取员工列表
this.$message.success('删除员工成功')
} catch (e) {
this.$message.error(e)
}
}).catch(() => {})
},
// 封装 时间处理函数
formatDate(value, str = 'YYYY-MM-DD') {
return dayjs(value).format(str)
},
// //事件 转换聘用形式
formOfEmployment(val) {
const map = {
1: '正式',
2: '非正式'
}
return map[val]
},
// 事件 获取当前页
currentPageChangeFn(page) {
this.params.page = page
this.hGetEmployeeList() // 调用 获取员工列表
},
// 封装 获取员工列表
async hGetEmployeeList() {
const res = await getEmployeeListAPI(this.params)
const { total, rows } = res
this.employeeList = rows
this.total = total
}
}
}
</script>
<style lang="less" scoped>
</style>
form表单和day.js和v-html和map映射和插槽 和分页
最新推荐文章于 2023-10-20 14:31:18 发布