新增员工
对话框布局实现
在 src/views/emp/index.vue 中增加如下代码
点我查看代码
vue
<script setup>
import { ref, watch, onMounted } from "vue";
import { queryPageApi } from "@/api/emp";
import { ElMessage } from "element-plus";
const searchEmp = ref({
name: "",
gender: "",
date: [],
begin: "",
end: "",
});
//侦听searchEmp中的date属性
watch(
() => searchEmp.value.date,
(newValue, oldValue) => {
if (newValue.length == 2) {
searchEmp.value.begin = newValue[0];
searchEmp.value.end = newValue[1];
} else {
searchEmp.value.begin = "";
searchEmp.value.end = "";
}
}
);
onMounted(() => {
search();
});
//查询员工
const search = async () => {
console.log("Search:", searchEmp.value);
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 total = ref(0);
// 分页处理
const handleSizeChange = (val) => {
search();
};
const handleCurrentChange = (val) => {
search();
};
//新增员工
const addEmp = () => {
dialogVisible.value = true;
dialogTitle.value = "新增员工";
};
//新增/修改表单
const employeeFormRef = ref(null);
const employee = ref({
username: "",
name: "",
gender: "",
phone: "",
job: "",
salary: "",
deptId: "",
entryDate: "",
image: "",
exprList: [],
});
// 控制弹窗
const dialogVisible = ref(false);
const dialogTitle = ref("新增员工");
//文件上传
// 图片上传成功后触发
const handleAvatarSuccess = (response, uploadFile) => {
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;
};
</script>
<template>
<h1>员工管理</h1>
<br />
<el-form :inline="true" :model="searchEmp">
<el-form-item label="姓名">
<el-input
v-model="searchEmp.name"
placeholder="请输入员工姓名"
></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchEmp.gender" placeholder="请选择">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</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-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button @click="clear">清空</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="addEmp"> + 新增员工</el-button>
<el-button type="danger" @click=""> - 批量删除</el-button>
<br /><br />
<!-- 表格 -->
<el-table :data="empList" border style="width: 100%">
<el-table-column
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120"
align="center"
></el-table-column>
<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" width="40" class="img" align="center" />
</template>
</el-table-column>
<el-table-column
prop="deptName"
label="部门名称"
width="120"
align="center"
></el-table-column>
<el-table-column 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>
<el-table-column
prop="updateTime"
label="最后操作时间"
width="200"
align="center"
></el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button size="small" type="primary" @click="">编辑</el-button>
<el-button size="small" type="danger" @click="">删除</el-button>
</template>
</el-table-column>
</el-table>
<br />
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<!-- 新增/修改员工的对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle">
<el-form ref="employeeFormRef" :model="employee" label-width="80px">
<!-- 基本信息 -->
<!-- 第一行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户名">
<el-input
v-model="employee.username"
placeholder="请输入员工用户名，2-20个字"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名">
<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="性别">
<el-select
v-model="employee.gender"
placeholder="请选择性别"
style="width: 100%"
>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号">
<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 label="班主任" value="1"></el-option>
<el-option label="讲师" value="2"></el-option>
<el-option label="学工主管" value="3"></el-option>
<el-option label="教研主管" value="4"></el-option>
<el-option label="咨询师" value="5"></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 label="研发部" value="1"></el-option>
<el-option label="市场部" value="2"></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=""
>+ 添加工作经历</el-button
>
</el-form-item>
</el-col>
</el-row>
<!-- 第七行 ... 工作经历 -->
<el-row :gutter="3">
<el-col :span="10">
<el-form-item size="small" label="时间" label-width="80px">
<el-date-picker
type="daterange"
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="请输入公司名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item size="small" label="职位" label-width="60px">
<el-input placeholder="请输入职位"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item size="small" label-width="0px">
<el-button type="danger">- 删除</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="">保存</el-button>
</span>
</template>
</el-dialog>
</template>
<style scoped>
.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: 1px dashed var(--el-border-color);
}
</style>页面布局优化
表单中的数据动态展示 。比如：所属部门、职位、性别，这些源数据我们可以定义在 js 代码中，在页面中基于 v-for 指令，遍历展示出来，便于项目的统一维护处理
点我查看代码
vue
<script setup>
import { ref, watch, onMounted } from "vue";
import { queryPageApi } from "@/api/emp";
import { ElMessage } from "element-plus";
import { queryAllApi as queryAllDeptApi } from "@/api/dept";
//职位列表数据
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 deptList = ref([]);
const searchEmp = ref({
name: "",
gender: "",
date: [],
begin: "",
end: "",
});
//侦听searchEmp中的date属性
watch(
() => searchEmp.value.date,
(newValue, oldValue) => {
if (newValue.length == 2) {
searchEmp.value.begin = newValue[0];
searchEmp.value.end = newValue[1];
} else {
searchEmp.value.begin = "";
searchEmp.value.end = "";
}
}
);
onMounted(async () => {
search();
//加载所有部门数据
const result = await queryAllDeptApi();
if (result.code) {
deptList.value = result.data;
}
});
//查询员工
const search = async () => {
console.log("Search:", searchEmp.value);
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 total = ref(0);
// 分页处理
const handleSizeChange = (val) => {
search();
};
const handleCurrentChange = (val) => {
search();
};
//新增员工
const addEmp = () => {
dialogVisible.value = true;
dialogTitle.value = "新增员工";
};
//新增/修改表单
const employeeFormRef = ref(null);
const employee = ref({
username: "",
name: "",
gender: "",
phone: "",
job: "",
salary: "",
deptId: "",
entryDate: "",
image: "",
exprList: [],
});
// 控制弹窗
const dialogVisible = ref(false);
const dialogTitle = ref("新增员工");
//文件上传
// 图片上传成功后触发
const handleAvatarSuccess = (response, uploadFile) => {
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;
};
</script>
<template>
<h1>员工管理</h1>
<br />
<el-form :inline="true" :model="searchEmp">
<el-form-item label="姓名">
<el-input
v-model="searchEmp.name"
placeholder="请输入员工姓名"
></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchEmp.gender" placeholder="请选择">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</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-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button @click="clear">清空</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="addEmp"> + 新增员工</el-button>
<el-button type="danger" @click=""> - 批量删除</el-button>
<br /><br />
<!-- 表格 -->
<el-table :data="empList" border style="width: 100%">
<el-table-column
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120"
align="center"
></el-table-column>
<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" width="40" class="img" align="center" />
</template>
</el-table-column>
<el-table-column
prop="deptName"
label="部门名称"
width="120"
align="center"
></el-table-column>
<el-table-column 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>
<el-table-column
prop="updateTime"
label="最后操作时间"
width="200"
align="center"
></el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button size="small" type="primary" @click="">编辑</el-button>
<el-button size="small" type="danger" @click="">删除</el-button>
</template>
</el-table-column>
</el-table>
<br />
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<!-- 新增/修改员工的对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle">
<el-form ref="employeeFormRef" :model="employee" label-width="80px">
<!-- 基本信息 -->
<!-- 第一行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户名">
<el-input
v-model="employee.username"
placeholder="请输入员工用户名，2-20个字"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名">
<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="性别">
<el-select
v-model="employee.gender"
placeholder="请选择性别"
style="width: 100%"
>
<el-option
v-for="gender in genders"
:key="gender.name"
:label="gender.name"
:value="gender.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号">
<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="job in jobs"
:key="job.name"
:label="job.name"
:value="job.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="dept in deptList"
:key="dept.id"
:label="dept.name"
:value="dept.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=""
>+ 添加工作经历</el-button
>
</el-form-item>
</el-col>
</el-row>
<!-- 第七行 ... 工作经历 -->
<el-row :gutter="3">
<el-col :span="10">
<el-form-item size="small" label="时间" label-width="80px">
<el-date-picker
type="daterange"
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="请输入公司名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item size="small" label="职位" label-width="60px">
<el-input placeholder="请输入职位"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item size="small" label-width="0px">
<el-button type="danger">- 删除</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="">保存</el-button>
</span>
</template>
</el-dialog>
</template>
<style scoped>
.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: 1px dashed var(--el-border-color);
}
</style>新增 / 删除员工工作经历
思路分析
点击 "添加工作经历" 按钮后，新添加一条工作经历；点击每一条后面的 "删除" 按钮，需要删除当前工作经历
员工的过往工作经历可能是多条，点击 "添加员工工作经历" 按钮，如何增加一个条目 ？ 点击每一条后面的删除按钮，需要删除当前条件？
Vue 是基于数据驱动视图展示的
"添加" 时，我们可以往数组中添加数据
"删除" 时，可以删除数组中的元素
一旦数据发生变化，视图中的展示就会发生变化。
代码实现
（1）在 src/views/emp/index.vue 中的 <script> </script> 中增加如下代码
js
//工作经历
//动态添加工作经历 .
const addExprItem = () => {
employee.value.exprList.push({
exprDate: [],
begin: "",
end: "",
company: "",
job: "",
});
};
//动态删除工作经历 .
const delExprItem = (index) => {
employee.value.exprList.splice(index, 1);
};
//监听-employee员工对象中的工作经历数据
watch(
() => employee.value.exprList,
(newValue, oldValue) => {
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 }
);（2）在 src/views/emp/index.vue 中的 <template> </template> 中的按钮绑定事件，并遍历展示工作经历信息
html
<!-- 新增/修改员工的对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle">
<el-form ref="employeeFormRef" :model="employee" label-width="80px">
<!-- 基本信息 -->
<!-- 第一行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户名">
<el-input
v-model="employee.username"
placeholder="请输入员工用户名，2-20个字"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名">
<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="性别">
<el-select
v-model="employee.gender"
placeholder="请选择性别"
style="width: 100%;"
>
<el-option
v-for="gender in genders"
:key="gender.name"
:label="gender.name"
:value="gender.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号">
<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="job in jobs"
:key="job.name"
:label="job.name"
:value="job.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="dept in deptList"
:key="dept.id"
:label="dept.name"
:value="dept.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="">保存</el-button>
</span>
</template>
</el-dialog>完整代码
点我查看代码
vue
<script setup>
import { ref, watch, onMounted } from "vue";
import { queryPageApi } from "@/api/emp";
import { ElMessage } from "element-plus";
import { queryAllApi as queryAllDeptApi } from "@/api/dept";
//职位列表数据
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 deptList = ref([]);
const searchEmp = ref({
name: "",
gender: "",
date: [],
begin: "",
end: "",
});
//侦听searchEmp中的date属性
watch(
() => searchEmp.value.date,
(newValue, oldValue) => {
if (newValue.length == 2) {
searchEmp.value.begin = newValue[0];
searchEmp.value.end = newValue[1];
} else {
searchEmp.value.begin = "";
searchEmp.value.end = "";
}
}
);
onMounted(async () => {
search();
//加载所有部门数据
const result = await queryAllDeptApi();
if (result.code) {
deptList.value = result.data;
}
});
//查询员工
const search = async () => {
console.log("Search:", searchEmp.value);
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 total = ref(0);
// 分页处理
const handleSizeChange = (val) => {
search();
};
const handleCurrentChange = (val) => {
search();
};
//新增员工
const addEmp = () => {
dialogVisible.value = true;
dialogTitle.value = "新增员工";
};
//新增/修改表单
const employeeFormRef = ref(null);
const employee = ref({
username: "",
name: "",
gender: "",
phone: "",
job: "",
salary: "",
deptId: "",
entryDate: "",
image: "",
exprList: [],
});
// 控制弹窗
const dialogVisible = ref(false);
const dialogTitle = ref("新增员工");
//文件上传
// 图片上传成功后触发
const handleAvatarSuccess = (response, uploadFile) => {
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({
exprDate: [],
begin: "",
end: "",
company: "",
job: "",
});
};
//动态删除工作经历 .
const delExprItem = (index) => {
employee.value.exprList.splice(index, 1);
};
//监听-employee员工对象中的工作经历数据
watch(
() => employee.value.exprList,
(newValue, oldValue) => {
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 }
);
</script>
<template>
<h1>员工管理</h1>
<br />
<el-form :inline="true" :model="searchEmp">
<el-form-item label="姓名">
<el-input
v-model="searchEmp.name"
placeholder="请输入员工姓名"
></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchEmp.gender" placeholder="请选择">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</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-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button @click="clear">清空</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="addEmp"> + 新增员工</el-button>
<el-button type="danger" @click=""> - 批量删除</el-button>
<br /><br />
<!-- 表格 -->
<el-table :data="empList" border style="width: 100%">
<el-table-column
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120"
align="center"
></el-table-column>
<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" width="40" class="img" align="center" />
</template>
</el-table-column>
<el-table-column
prop="deptName"
label="部门名称"
width="120"
align="center"
></el-table-column>
<el-table-column 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>
<el-table-column
prop="updateTime"
label="最后操作时间"
width="200"
align="center"
></el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button size="small" type="primary" @click="">编辑</el-button>
<el-button size="small" type="danger" @click="">删除</el-button>
</template>
</el-table-column>
</el-table>
<br />
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<!-- 新增/修改员工的对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle">
<el-form ref="employeeFormRef" :model="employee" label-width="80px">
<!-- 基本信息 -->
<!-- 第一行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户名">
<el-input
v-model="employee.username"
placeholder="请输入员工用户名，2-20个字"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="姓名">
<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="性别">
<el-select
v-model="employee.gender"
placeholder="请选择性别"
style="width: 100%"
>
<el-option
v-for="gender in genders"
:key="gender.name"
:label="gender.name"
:value="gender.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="手机号">
<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="job in jobs"
:key="job.name"
:label="job.name"
:value="job.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="dept in deptList"
:key="dept.id"
:label="dept.name"
:value="dept.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="">保存</el-button>
</span>
</template>
</el-dialog>
</template>
<style scoped>
.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: 1px dashed var(--el-border-color);
}
</style>页面交互
保存员工基本信息
基本的页面布局，我们完成之后，接下来，就需要完成页面的交互操作。 当点击 “保存” 按钮，需要执行如下操作
（1）点击保存之后，发送异步请求到服务端，提交数据
（2）保存完毕之后，如果成功，关闭对话框，重新加载列表数据
（3）保存完毕之后，如果失败，提示错误信息
（1）在 emp.js 中定义新增函数 addApi，并在 emp/index.vue 中引入该函数
js
//新增
export const addApi = (emp) => request.post("/emps", emp);（2）为 "保存" 按钮绑定事件
html
<!-- ........ 前面的代码省略了......... -->
<!-- 底部按钮 -->
<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>（3）在 <script></script> 中定义函数 save
js
//保存员工信息
const save = async () => {
const result = await addApi(employee.value);
if (result.code) {
ElMessage.success("新增员工成功");
dialogVisible.value = false;
search();
} else {
ElMessage.error(result.msg);
}
};（4）每次点击新增员工，上一次的信息需要清空，优化 emp/index.vue 中的 addEmp 函数
js
//新增员工
const addEmp = () => {
dialogVisible.value = true;
dialogTitle.value = "新增员工";
employee.value = {
username: "",
name: "",
gender: "",
phone: "",
job: "",
salary: "",
deptId: "",
entryDate: "",
image: "",
exprList: [],
};
};表单校验
（1）在 src/views/emp/index.vue 中的 <script> </script> 中添加表单校验规则
js
//表单校验规则
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" },
{
pattern: /^1[3-9]\d{9}$/,
message: "请输入有效的手机号",
trigger: "blur",
},
],
});（2）为表单绑定校验规则
html
<!-- 新增/修改员工的对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle">
<el-form ref="employeeFormRef" :model="employee" :rules="rules" label-width="80px">
<!-- 第一行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="用户名" prop="username">
......
</el-col>
<el-col :span="12">
<el-form-item label="姓名" prop="name">
......
</el-row>
<!-- 第二行 -->
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="性别" prop="gender">
......
</el-col>
<el-col :span="12">
<el-form-item label="手机号" prop="phone">
......
</el-row>
</el-dialog>（3）保存表单校验
js
const save = async () => {
employeeFormRef.value.validate(async (valid) => {
if (valid) {
// 校验通过
const result = await addApi(employee.value);
if (result.code) {
ElMessage.success("新增员工成功");
dialogVisible.value = false;
search();
} else {
ElMessage.error(result.msg);
}
}
});
};完整代码
点我查看代码
vue
<script setup>
import { ref, watch, onMounted } from "vue";
import { queryPageApi, addApi } from "@/api/emp";
import { ElMessage } from "element-plus";
import { queryAllApi as queryAllDeptApi } from "@/api/dept";
//职位列表数据
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 deptList = ref([]);
const searchEmp = ref({
name: "",
gender: "",
date: [],
begin: "",
end: "",
});
//侦听 searchEmp 中的 date 属性
watch(
() => searchEmp.value.date,
(newValue, oldValue) => {
if (newValue.length == 2) {
searchEmp.value.begin = newValue[0];
searchEmp.value.end = newValue[1];
} else {
searchEmp.value.begin = "";
searchEmp.value.end = "";
}
}
);
onMounted(async () => {
search();
//加载所有部门数据
const result = await queryAllDeptApi();
if (result.code) {
deptList.value = result.data;
}
});
//查询员工
const search = async () => {
console.log("Search:", searchEmp.value);
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 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 (employeeFormRef.value) {
employeeFormRef.value.resetFields();
}
};
//新增/修改表单
const employeeFormRef = ref(null);
const employee = ref({
username: "",
name: "",
gender: "",
phone: "",
job: "",
salary: "",
deptId: "",
entryDate: "",
image: "",
exprList: [],
});
// 控制弹窗
const dialogVisible = ref(false);
const dialogTitle = ref("新增员工");
//文件上传
// 图片上传成功后触发
const handleAvatarSuccess = (response, uploadFile) => {
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({
exprDate: [],
begin: "",
end: "",
company: "",
job: "",
});
};
//动态删除工作经历 .
const delExprItem = (index) => {
employee.value.exprList.splice(index, 1);
};
//监听-employee 员工对象中的工作经历数据
watch(
() => employee.value.exprList,
(newValue, oldValue) => {
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 () => {
employeeFormRef.value.validate(async (valid) => {
if (valid) {
// 校验通过
const result = await addApi(employee.value);
if (result.code) {
ElMessage.success("新增员工成功");
dialogVisible.value = false;
search();
} else {
ElMessage.error(result.msg);
}
}
});
};
//表单校验规则
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" },
{ pattern: /^1\d{10}$/g, message: "请输入有效的手机号", trigger: "blur" },
],
});
</script>
<template>
<h1>员工管理</h1>
<br />
<el-form :inline="true" :model="searchEmp">
<el-form-item label="姓名">
<el-input
v-model="searchEmp.name"
placeholder="请输入员工姓名"
></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchEmp.gender" placeholder="请选择">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</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-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
<el-button @click="clear">清空</el-button>
</el-form-item>
</el-form>
<el-button type="primary" @click="addEmp"> + 新增员工</el-button>
<el-button type="danger" @click=""> - 批量删除</el-button>
<br /><br />
<!-- 表格 -->
<el-table :data="empList" border style="width: 100%">
<el-table-column
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120"
align="center"
></el-table-column>
<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" width="40" class="img" align="center" />
</template>
</el-table-column>
<el-table-column
prop="deptName"
label="部门名称"
width="120"
align="center"
></el-table-column>
<el-table-column 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>
<el-table-column
prop="updateTime"
label="最后操作时间"
width="200"
align="center"
></el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button size="small" type="primary" @click="">编辑</el-button>
<el-button size="small" type="danger" @click="">删除</el-button>
</template>
</el-table-column>
</el-table>
<br />
<!-- 分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<!-- 新增/修改员工的对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle">
<el-form
ref="employeeFormRef"
:model="employee"
:rules="rules"
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="gender in genders"
:key="gender.name"
:label="gender.name"
:value="gender.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="job in jobs"
:key="job.name"
:label="job.name"
:value="job.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="dept in deptList"
:key="dept.id"
:label="dept.name"
:value="dept.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>
.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: 1px dashed var(--el-border-color);
}
</style>