分页查询
搜索栏
基本布局
<script setup>
import { ref } from 'vue'
const searchEmp = ref({name: '', gender: '', date: [], begin: '', end: ''})
//查询员工列表
const search = () => {
console.log(searchEmp.value);
}
//清空
const clear = () => {
searchEmp.value = {name: '', gender: '', date: []};
search();
}
</script>
<template>
<h1>员工管理</h1>
<!-- 搜索栏 -->
<div class="container">
<el-form :inline="true" :model="searchEmp" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchEmp.name" placeholder="请输入员工姓名" />
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchEmp.gender" placeholder="请选择">
<el-option label="男" value="1" />
<el-option label="女" value="2" />
</el-select>
</el-form-item>
<el-form-item label="入职时间">
<el-date-picker
v-model="searchEmp.date"
type="daterange"
range-separator="到"
start-placeholder="开始日期"
end-placeholder="结束日期"
:size="size"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="primary" @click="clear">清空</el-button>
</el-form-item>
</el-form>
</div>
</template>
<style scoped>
.container {
margin: 15px 10px;
}
</style>
根据接口文档我们要把 data 数组里面的两个元素分别赋值给两个变量 begin 和 end，而且这里必须是实时变化的，这里我需要用到 Vue 里面的 Watch 侦听，接下来介绍一下这个东西。
watch：
作用：侦听一个或多个响应式数据源，并在数据源变化时调用传入的回调函数。
用法：
1：导入 watch 函数。
2：执行 watch 函数，传入要侦听的响应式数据源（ref 对象）和回调函数；
我们如果要侦听对象的全部属性，需要用到深度侦听
我们还可以监听对象的单个属性
我们这个项目中显然要监听这个 date 数组，所以我们用第三个监听方式
//侦听 searchEmp 的 date 属性
watch(()=>searchEmp.value.date, (newVal,oldVal)=>{
if(newVal.length === 2){
searchEmp.value.begin = newVal[0];
searchEmp.value.end = newVal[1];
}else{
searchEmp.value.begin = '';
searchEmp.value.end = '';
}
})
表格
<div class="container">
<el-button type="primary" @click="">新增员工</el-button>
<el-button type="danger" @click="">批量删除 </el-button>
</div>
<div class="container">
<el-table :data="empList" border style="width: 100%">
<el-table-column type="selection" width="55" align="center" />
<el-table-column prop="name" label="姓名" width="120" align="center"/>
<el-table-column prop="gender" label="性别" width="120" align="center">
<template #default="scope">
{{scope.row.gender === 1 ? '男' : '女'}}
</template>
</el-table-column>
<el-table-column prop="img" label="头像" wideth="120" align="center">
<template #default="scope">
<el-image :src="scope.row.img" height="40px" width="40px" />
</template>
</el-table-column>
<el-table-column prop="deptName" label="所属部门" wideth="120" align="center"/>
<el-table-column prop="job" label="职位" wideth="120" align="center">
<template #default="scope">
<span v-if="scope.row.job === 1">班主任</span>
<span v-else-if="scope.row.job === 2">讲师</span>
<span v-else-if="scope.row.job === 3">学工主管</span>
<span v-else-if="scope.row.job === 4">教研主管</span>
<span v-else-if="scope.row.job === 5">咨询师</span>
<span v-else>其他</span>
</template>
</el-table-column>
<el-table-column prop="entryDate" label="入职日期" wideth="180" align="center"/>
<el-table-column prop="updateTime" label="最后操作时间" wideth="200" align="center"/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" size = "small" @click=""><el-icon><EditPen /></el-icon>编辑</el-button>
<el-button type="danger" size = "small" @click=""><el-icon><Delete /></el-icon>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
分页条
<!-- 分页条 -->
<div class="container">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 20, 30, 40]"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
//分页
const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(true)
const total = ref(0);
//每页展示记录数变化
const handleSizeChange = (val) => {
console.log(`每页${val}条记录`)
}
//页码变化时触发
const handleCurrentChange = (val) => {
console.log(`current page: ${val}`)
}
</script>
页面交互
完成了页面的基本布局，接下来就要让前端和后端交互起来了，这里主要分为三步。
1：页面加载完毕后，查询员工信息列表。
2：点击查询按钮，查询员工信息列表。
3：当页码，每页展示记录数发生变化时，查询员工信息列表。
export const queryPageApi = (name,gender,begin,end,page,pageSize) =>
request.get(`/emps?name=${name}&gender=${gender}&begin=${begin}&end=${end}&page=${page}&pageSize=${pageSize}`)
//查询员工列表
const search = async () => {
const result = await queryPageApi(searchEmp.value.name, searchEmp.value.gender,
searchEmp.value.begin, searchEmp.value.end, currentPage.value, pageSize.value);
if(result.code){
empList.value = result.data.rows;
total.value = result.data.total;
}
}
//每页 展示记录数 变化
const handleSizeChange = (val) => {
search();
}
//页码变化时触发
const handleCurrentChange = (val) => {
search();
}
新增员工
对话框
首先肯定需要一个对话框，然后这里我们需要用到 Layout 布局，可以去 Element 官网查看，主要就是把一行分成 24 份，<span> 标签里面写的是那一列 <el-col> 占几份，<el-row>就代表每一行,
<gutter> 写的就是 每行的 每个对话框之间的间距
<!-- 新增员工/修改员工的对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle">
<el-form :model="employee" :rules="rules" ref="empFormRef" label-width="80px">
<!-- 基本信息 -->
<!-- 第一行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户名" prop="username">
<el-input v-model="employee.username" placeholder="请输入员工用户名，2-20个字"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="employee.name" placeholder="请输入员工姓名，2-10个字"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="性别" prop="gender">
<el-select v-model="employee.gender" placeholder="请选择性别" style="width: 100%;">
<el-option v-for="g in genders" :key="g.value" :label="g.name" :value="g.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="phone">
<el-input v-model="employee.phone" placeholder="请输入员工手机号"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第三行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="职位">
<el-select v-model="employee.job" placeholder="请选择职位" style="width: 100%;">
<el-option v-for="j in jobs" :key="j.value" :label="j.name" :value="j.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="薪资">
<el-input v-model="employee.salary" placeholder="请输入员工薪资"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第四行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属部门">
<el-select v-model="employee.deptId" placeholder="请选择部门" style="width: 100%;">
<el-option v-for="d in depts" :key="d.id" :label="d.name" :value="d.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入职日期">
<el-date-picker v-model="employee.entryDate" type="date" style="width: 100%;" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<!-- 第五行 -->
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="/api/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="employee.image" :src="employee.image" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<!-- 工作经历 -->
<!-- 第六行 -->
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="工作经历">
<el-button type="success" size="small" @click="addExprItem">+ 添加工作经历</el-button>
</el-form-item>
</el-col>
</el-row>
<!-- 第七行 ... 工作经历 -->
<el-row :gutter="3" v-for="(expr,index) in employee.exprList">
<el-col :span="10">
<el-form-item size="small" label="时间" label-width="80px">
<el-date-picker type="daterange" v-model="expr.exprDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" ></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item size="small" label="公司" label-width="60px">
<el-input placeholder="请输入公司名称" v-model="expr.company"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item size="small" label="职位" label-width="60px">
<el-input placeholder="请输入职位" v-model="expr.job"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item size="small" label-width="0px">
<el-button type="danger" @click="delExprItem(index)">- 删除</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 底部按钮 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="save">保存</el-button>
</span>
</template>
</el-dialog>
//职位列表数据
const jobs = ref([{ name: '班主任', value: 1 },{ name: '讲师', value: 2 },{ name: '学工主管', value: 3 },{ name: '教研主管', value: 4 },{ name: '咨询师', value: 5 },{ name: '其他', value: 6 }])
//性别列表数据
const genders = ref([{ name: '男', value: 1 }, { name: '女', value: 2 }])
//部门列表数据
const depts = ref([])
//查询所有部门数据
const queryAllDepts = async () => {
const result = await queryAllDeptApi();
if(result.code){
depts.value = result.data;
}
}
文件（图片）上传
主要还是用的 Element 组件里的 Upload上传 组件
<!-- 第五行 -->
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="/api/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="employee.image" :src="employee.image" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
// 文件上传
// 图片上传成功后触发
const handleAvatarSuccess = (response) => {
employee.value.image = response.data;
}
// 文件上传之前触发
const beforeAvatarUpload = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
ElMessage.error('只支持上传图片')
return false
} else if (rawFile.size / 1024 / 1024 > 10) {
ElMessage.error('只能上传10M以内图片')
return false
}
return true
}
添加 / 删除工作经历
我们要明白：Vue 是基于数据驱动视图展示的
我们将要增加的员工信息封装到一个响应式数据里，工作经历和最后一个伪数组 expList 有关，当我们添加的时候，数组自然里面的元素自然多一个，删除的时候，数组里面的元素自然少一个。
const employee = ref({
username: '',
name: '',
gender: '',
phone: '',
job: '',
salary: '',
deptId: '',
entryDate: '',
image: '',
exprList: []
})
先看 添加工作经历，核心就是用这个 v-for 遍历这个 employ.exprList.
//添加工作经历
const addExprItem = () => {
employee.value.exprList.push({company: '', job: '', begin: '', end: '', exprDate: []});
}
<!-- 工作经历 -->
<!-- 第六行 -->
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="工作经历">
<el-button type="success" size="small" @click="addExprItem">+ 添加工作经历</el-button>
</el-form-item>
</el-col>
</el-row>
<!-- 第七行 ... 工作经历 -->
<el-row :gutter="3" v-for="(expr,index) in employee.exprList">
<el-col :span="10">
<el-form-item size="small" label="时间" label-width="80px">
<el-date-picker type="daterange" v-model="expr.exprDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" ></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item size="small" label="公司" label-width="60px">
<el-input placeholder="请输入公司名称" v-model="expr.company"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item size="small" label="职位" label-width="60px">
<el-input placeholder="请输入职位" v-model="expr.job"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item size="small" label-width="0px">
<el-button type="danger" @click="delExprItem(index)">- 删除</el-button>
</el-form-item>
</el-col>
</el-row>
再看 删除工作经历
const delExprItem = (index) => {
employee.value.exprList.splice(index,1);
}
还有一个问题，通过接口文档可以发现，我前端给后端的数据里面的 exprList 里面封装的是 begin 和 end，但是此时我的日期封装在 exprDate 这个伪数组里面，exprDate[0] 就是 begin;
exprDate[1] 就是 end，所以我们要用之前学的 watch 事件侦听来给 begin end 赋值。这里注意要用深度侦听
//侦听-employee员工对象中的工作经历信息
watch(() => employee.value.exprList, (newVal, oldVal) => {
if(employee.value.exprList && employee.value.exprList.length > 0){
employee.value.exprList.forEach((expr) => {
expr.begin = expr.exprDate[0];
expr.end = expr.exprDate[1];
})
}
}, {deep: true}) //深度侦听
保存
//新增
export const addApi = (emp) => request.post('/emps', emp);
//保存员工
const save = async () => {
//表单校验
if(!empFormRef.value) return;
empFormRef.value.validate(async (valid) => { //valid 表示是否校验通过: true 通过 / false 不通过
if(valid){ //通过
const result = await addApi(employee.value);
if(result.code) {//成功
ElMessage.success('保存成功');
dialogVisible.value = false;
search();
}else { //失败了
ElMessage.error(result.msg);
}
}else { //不通过
ElMessage.error('表单校验不通过');
}
})
}
//表单引用
const empFormRef = ref();
//表单校验规则
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 20, message: '用户名长度应在2到20个字符之间', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '姓名长度应在2到10个字符之间', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
/**
* 正则表达式: / ..... / ; ^ : 以...开始 ; $ : 以 ... 结束
* [3-9] : 范围 3-9 之间
* \d : 数字, [0-9]
* {9} : 量词
*/
{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
]
});
//新增员工
const addEmp = () => {
dialogVisible.value = true;
dialogTitle.value = '新增员工';
employee.value = {
username: '',
name: '',
gender: '',
phone: '',
job: '',
salary: '',
deptId: '',
entryDate: '',
image: '',
exprList: []
}
//重置表单的校验规则-提示信息
if (empFormRef.value){
empFormRef.value.resetFields();
}
}
修改员工
两步操作：
1：点击“编辑”按钮，执行根据 ID 查询员工信息，页面回显。
2：点击“保存”按钮，执行修改操作
先来看查询回显
//根据ID查询
export const queryByIdApi = (id) => request.get(`/emps/${id}`);
因为工作日期那里 v-model 绑定的是 exprList.exprDate，而我们根据 id 查询回来的是 exprList.begin 和 exprList.end，所以我们要对 exprList.exprDate 进行赋值
//修改员工
const edit = async (id) => {
const result = await queryByIdApi(id);
if(result.code){
employee.value = result.data;
dialogVisible.value = true;
dialogTitle.value = '编辑员工';
//给exprList中的日期格式转换成数组
let exprList = employee.value.exprList;
if(exprList && exprList.length > 0){
exprList.forEach((expr) => {
expr.exprDate = [expr.begin, expr.end];
})
}
}
}
再来完成保存操作。
//修改
export const updateApi = (emp) => request.put('/emps', emp);
因为 修改 和 新增 都是同一个对话框，所以直接在同一个 save 方法上进行操作即可，和部门管理一样，根据 id 是否存在来判断是修改还是保存。
//保存员工
const save = async () => {
//表单校验
if(!empFormRef.value) return;
empFormRef.value.validate(async (valid) => { //valid 表示是否校验通过: true 通过 / false 不通过
if(valid){ //通过
let result ;
if(employee.value.id){ //修改
result = await updateApi(employee.value);
}else{ //新增
result = await addApi(employee.value);
}
if(result.code){//成功
ElMessage.success('保存成功');
dialogVisible.value = false;
search();
}else{ //失败了
ElMessage.error(result.msg);
}
}else { //不通过
ElMessage.error('表单校验不通过');
}
})
}
删除员工
首先是删除单个员工
//删除
export const deleteApi = (ids) => request.delete(`/emps?ids=${ids}`);
//删除员工
const deleteEmp = async (id) => {
//弹出确认框
ElMessageBox.confirm('您确认删除该员工吗?','提示',
{ confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
).then(async () => { //确认
const result = await deleteApi(id);
if(result.code){
ElMessage.success('删除成功');
search();
}else{
ElMessage.error(result.msg);
}
}).catch(() => { //取消
ElMessage.info('您已取消删除');
})
}
然后是批量删除，分为两步
1：为表格的复选框绑定事件，点击复选框之后，获取到目前选中的条件的 id（多个 id 可以封装到数组之中）。
2：为“批量”删除按钮绑定事件，发送异步请求到服务端，根据 id 批量删除员工信息。
我们要先为表格绑定一个多选事件，参照 “饿了么” 文档
<el-table :data="empList" border style="width: 100%" @selection-change="handleSelectionChange">
const selectIds = ref();
//选中时触发
const handleSelectionChange = (val) => {
selectIds.value = val.map((item) => item.id);
}
然后为 “批量删除按钮” 绑定一个方法，和前面的删除单个员工的逻辑大差不差，只是多一个判断。
//批量删除
const deleteByIds = async() => {
//弹出确认框
ElMessageBox.confirm('您确认删除这些员工吗?','提示',
{ confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
).then(async () => { //确认
if(selectIds.value.length > 0){
const result = await deleteApi(selectIds.value);
if(result.code){
ElMessage.success('删除成功');
search();
}else{
ElMessage.error(result.msg);
}
}else{
ElMessage.info('您没有选择任何员工');
}
}).catch(() => { //取消
ElMessage.info('您已取消删除');
})
}
整体
最后是 员工管理部分的完整代码
<script setup>
import { ref, watch, onMounted } from 'vue';
import { queryPageApi, addApi, queryByIdApi,updateApi,deleteApi} from '@/api/emp';
import { queryAllApi as queryAllDeptApi } from '@/api/dept';
import { ElMessage } from 'element-plus'
import{ ElMessageBox} from 'element-plus';
//元数据
//职位列表数据
const jobs = ref([{ name: '班主任', value: 1 },{ name: '讲师', value: 2 },{ name: '学工主管', value: 3 },{ name: '教研主管', value: 4 },{ name: '咨询师', value: 5 },{ name: '其他', value: 6 }])
//性别列表数据
const genders = ref([{ name: '男', value: 1 }, { name: '女', value: 2 }])
//部门列表数据
const depts = ref([])
//搜索表单对象
const searchEmp = ref({name: '', gender: '', date: [], begin: '', end: ''})
//侦听searchEmp的date属性
watch(() => searchEmp.value.date, (newVal, oldVal) => {
if(newVal.length == 2){
searchEmp.value.begin = newVal[0];
searchEmp.value.end = newVal[1];
}else {
searchEmp.value.begin = '';
searchEmp.value.end = '';
}
})
//钩子函数
onMounted(() => {
search(); //查询员工列表数据
queryAllDepts();//查询所有部门列表数据
})
//查询所有部门数据
const queryAllDepts = async () => {
const result = await queryAllDeptApi();
if(result.code){
depts.value = result.data;
}
}
//查询员工列表
const search = async () => {
const result = await queryPageApi(searchEmp.value.name, searchEmp.value.gender,
searchEmp.value.begin, searchEmp.value.end, currentPage.value, pageSize.value);
if(result.code){
empList.value = result.data.rows;
total.value = result.data.total;
}
}
//清空
const clear = () => {
searchEmp.value = {name: '', gender: '', date: [], begin: '', end: ''};
search();
}
//员工列表数据
const empList = ref([])
//分页
const currentPage = ref(1); //页码
const pageSize = ref(10); //每页展示记录数
const background = ref(true); //背景色
const total = ref(0); //总记录数
//每页 展示记录数 变化
const handleSizeChange = (val) => {
search();
}
//页码变化时触发
const handleCurrentChange = (val) => {
search();
}
//新增员工
const addEmp = () => {
dialogVisible.value = true;
dialogTitle.value = '新增员工';
employee.value = {
username: '',
name: '',
gender: '',
phone: '',
job: '',
salary: '',
deptId: '',
entryDate: '',
image: '',
exprList: []
}
//重置表单的校验规则-提示信息
if (empFormRef.value){
empFormRef.value.resetFields();
}
}
//新增/修改表单
const employee = ref({
username: '',
name: '',
gender: '',
phone: '',
job: '',
salary: '',
deptId: '',
entryDate: '',
image: '',
exprList: []
})
// 控制弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('新增员工')
// 文件上传
// 图片上传成功后触发
const handleAvatarSuccess = (response) => {
employee.value.image = response.data;
}
// 文件上传之前触发
const beforeAvatarUpload = (rawFile) => {
if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
ElMessage.error('只支持上传图片')
return false
} else if (rawFile.size / 1024 / 1024 > 10) {
ElMessage.error('只能上传10M以内图片')
return false
}
return true
}
//添加工作经历
const addExprItem = () => {
employee.value.exprList.push({company: '', job: '', begin: '', end: '', exprDate: []});
}
//删除工作经历
const delExprItem = (index) => {
employee.value.exprList.splice(index,1);
}
//侦听-employee员工对象中的工作经历信息
watch(() => employee.value.exprList, (newVal, oldVal) => {
if(employee.value.exprList && employee.value.exprList.length > 0){
employee.value.exprList.forEach((expr) => {
expr.begin = expr.exprDate[0];
expr.end = expr.exprDate[1];
})
}
}, {deep: true}) //深度侦听
//保存员工
const save = async () => {
//表单校验
if(!empFormRef.value) return;
empFormRef.value.validate(async (valid) => { //valid 表示是否校验通过: true 通过 / false 不通过
if(valid){ //通过
let result ;
if(employee.value.id){ //修改
result = await updateApi(employee.value);
}else{ //新增
result = await addApi(employee.value);
}
if(result.code){//成功
ElMessage.success('保存成功');
dialogVisible.value = false;
search();
}else{ //失败了
ElMessage.error(result.msg);
}
}else { //不通过
ElMessage.error('表单校验不通过');
}
})
}
//表单引用
const empFormRef = ref();
//表单校验规则
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 20, message: '用户名长度应在2到20个字符之间', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '姓名长度应在2到10个字符之间', trigger: 'blur' }
],
gender: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
/**
* 正则表达式: / ..... / ; ^ : 以...开始 ; $ : 以 ... 结束
* [3-9] : 范围 3-9 之间
* \d : 数字, [0-9]
* {9} : 量词
*/
{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
]
});
//修改员工
const edit = async (id) => {
const result = await queryByIdApi(id);
if(result.code){
employee.value = result.data;
dialogVisible.value = true;
dialogTitle.value = '编辑员工';
//给exprList中的日期格式转换成数组
let exprList = employee.value.exprList;
if(exprList && exprList.length > 0){
exprList.forEach((expr) => {
expr.exprDate = [expr.begin, expr.end];
})
}
}
}
//删除员工
const deleteEmp = async (id) => {
//弹出确认框
ElMessageBox.confirm('您确认删除该员工吗?','提示',
{ confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
).then(async () => { //确认
const result = await deleteApi(id);
if(result.code){
ElMessage.success('删除成功');
search();
}else{
ElMessage.error(result.msg);
}
}).catch(() => { //取消
ElMessage.info('您已取消删除');
})
}
const selectIds = ref();
//选中时触发
const handleSelectionChange = (val) => {
selectIds.value = val.map((item) => item.id);
}
//批量删除
const deleteByIds = async() => {
//弹出确认框
ElMessageBox.confirm('您确认删除这些员工吗?','提示',
{ confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning'}
).then(async () => { //确认
if(selectIds.value.length > 0){
const result = await deleteApi(selectIds.value);
if(result.code){
ElMessage.success('删除成功');
search();
}else{
ElMessage.error(result.msg);
}
}else{
ElMessage.info('您没有选择任何员工');
}
}).catch(() => { //取消
ElMessage.info('您已取消删除');
})
}
</script>
<template>
<h1>员工管理</h1>
<!-- 搜索栏 -->
<div class="container">
<el-form :inline="true" :model="searchEmp" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="searchEmp.name" placeholder="请输入员工姓名" />
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchEmp.gender" placeholder="请选择">
<el-option label="男" value="1" />
<el-option label="女" value="2" />
</el-select>
</el-form-item>
<el-form-item label="入职时间">
<el-date-picker
v-model="searchEmp.date"
type="daterange"
range-separator="到"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button type="info" @click="clear">清空</el-button>
</el-form-item>
</el-form>
</div>
<!-- 功能按钮 -->
<div class="container">
<el-button type="primary" @click="addEmp">+ 新增员工</el-button>
<el-button type="danger" @click="deleteByIds">- 批量删除</el-button>
</div>
<!-- 数据展示表格 -->
<div class="container">
<el-table :data="empList" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column prop="name" label="姓名" width="120" align="center"/>
<el-table-column label="性别" width="120" align="center">
<template #default="scope">
{{ scope.row.gender == 1 ? '男' : '女' }}
</template>
</el-table-column>
<el-table-column label="头像" width="120" align="center">
<template #default="scope">
<img :src="scope.row.image" height="30px">
</template>
</el-table-column>
<el-table-column prop="deptName" label="所属部门" width="120" align="center"/>
<el-table-column prop="job" label="职位" width="120" align="center">
<template #default="scope">
<span v-if="scope.row.job == 1">班主任</span>
<span v-else-if="scope.row.job == 2">讲师</span>
<span v-else-if="scope.row.job == 3">学工主管</span>
<span v-else-if="scope.row.job == 4">教研主管</span>
<span v-else-if="scope.row.job == 5">咨询师</span>
<span v-else>其他</span>
</template>
</el-table-column>
<el-table-column prop="entryDate" label="入职日期" width="180" align="center"/>
<el-table-column prop="updateTime" label="最后操作时间" width="200" align="center"/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon> 编辑</el-button>
<el-button type="danger" size="small" @click="deleteEmp(scope.row.id)"><el-icon><Delete /></el-icon> 删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页条 -->
<div class="container">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 20, 30, 50, 75, 100]"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<!-- 新增员工/修改员工的对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle">
<el-form :model="employee" :rules="rules" ref="empFormRef" label-width="80px">
<!-- 基本信息 -->
<!-- 第一行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户名" prop="username">
<el-input v-model="employee.username" placeholder="请输入员工用户名，2-20个字"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
<el-input v-model="employee.name" placeholder="请输入员工姓名，2-10个字"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第二行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="性别" prop="gender">
<el-select v-model="employee.gender" placeholder="请选择性别" style="width: 100%;">
<el-option v-for="g in genders" :key="g.value" :label="g.name" :value="g.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="phone">
<el-input v-model="employee.phone" placeholder="请输入员工手机号"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第三行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="职位">
<el-select v-model="employee.job" placeholder="请选择职位" style="width: 100%;">
<el-option v-for="j in jobs" :key="j.value" :label="j.name" :value="j.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="薪资">
<el-input v-model="employee.salary" placeholder="请输入员工薪资"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- 第四行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属部门">
<el-select v-model="employee.deptId" placeholder="请选择部门" style="width: 100%;">
<el-option v-for="d in depts" :key="d.id" :label="d.name" :value="d.id"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="入职日期">
<el-date-picker v-model="employee.entryDate" type="date" style="width: 100%;" placeholder="选择日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
<!-- 第五行 -->
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="头像">
<el-upload
class="avatar-uploader"
action="/api/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="employee.image" :src="employee.image" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</el-form-item>
</el-col>
</el-row>
<!-- 工作经历 -->
<!-- 第六行 -->
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="工作经历">
<el-button type="success" size="small" @click="addExprItem">+ 添加工作经历</el-button>
</el-form-item>
</el-col>
</el-row>
<!-- 第七行 ... 工作经历 -->
<el-row :gutter="3" v-for="(expr,index) in employee.exprList">
<el-col :span="10">
<el-form-item size="small" label="时间" label-width="80px">
<el-date-picker type="daterange" v-model="expr.exprDate" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" ></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item size="small" label="公司" label-width="60px">
<el-input placeholder="请输入公司名称" v-model="expr.company"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item size="small" label="职位" label-width="60px">
<el-input placeholder="请输入职位" v-model="expr.job"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item size="small" label-width="0px">
<el-button type="danger" @click="delExprItem(index)">- 删除</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 底部按钮 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="save">保存</el-button>
</span>
</template>
</el-dialog>
</template>
<style scoped>
.container {
margin: 10px 0px;
}
.avatar {
height: 40px;
}
.avatar-uploader .avatar {
width: 78px;
height: 78px;
display: block;
}
.avatar-uploader .el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 78px;
height: 78px;
text-align: center;
border-radius: 10px;
/* 添加灰色的虚线边框 */
border: 1px dashed var(--el-border-color);
}
</style>
import request from "@/utils/request";
//查询员工列表数据
export const queryPageApi = (name,gender,begin,end,page,pageSize) =>
request.get(`/emps?name=${name}&gender=${gender}&begin=${begin}&end=${end}&page=${page}&pageSize=${pageSize}`)
//新增
export const addApi = (emp) => request.post('/emps', emp);
//根据ID查询
export const queryByIdApi = (id) => request.get(`/emps/${id}`);
//修改
export const updateApi = (emp) => request.put('/emps', emp);
//删除
export const deleteApi = (ids) => request.delete(`/emps?ids=${ids}`);
扫一扫
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
