目录：
（1）操作员页面设计
（2）操作员功能实现
（3）操作员角色更新功能实现
（4）员工资料工具栏页面
（5）员工展示
（6）分页展示员工
（7）添加员工页面绘制
（8）添加员工页面绘制2
（9）添加员工下拉框数据处理、最大工号
（10）员工添加数据检验
（11）员工删除及更新
（12）封装文件的下载请求
（13）高级搜索页面设计
（14）高级搜索动画特效
（15）高级搜索功能实现
（1）操作员页面设计
（2）操作员功能实现
搜索框搜索：还是在初始化列表里面添加一个关键字keywords：
删除操作员方法：
状态开关事件：
在次登录：
（3）操作员角色更新功能实现
SysAdmin.vue详细代码：
<template>
<div>
<div style="margin-top: 10px;display: flex;justify-content: center">
<el-input placeholder="通过用户名搜索用户..." prefix-icon="el-icon-search" v-model="keywords"
style="width: 400px;margin-right: 10px" @keydown.enter.native="doSearch"></el-input>
<el-button type="primary" icon="wl-icon-search" @click="doSearch">搜索</el-button>
</div>
<div class="admin-container">
<!--使用elementUI的卡片-->
<el-card class="admin-card" v-for="(admin,index) in admins" :key="index">
<div slot="header" class="clearfix">
<span>{{admin.name}}</span>
<el-button style="float: right;padding: 3px 0;color: #ff0000" type="text" icon="el-icon-delete"
@click="deleteAdmin(admin)"></el-button>
</div>
<div>
<!--头像-->
<div class="img-container">
<img :src="admin.userFace" :alt="admin.name" :title="admin.name" class="userface-img">
</div>
</div>
<!--用户信息-->
<div class="userinfo-container">
<div>用户名:{{admin.name}}</div>
<div>手机号码:{{admin.phone}}</div>
<div>电话号码:{{admin.telephone}}</div>
<div>地址:{{admin.address}}</div>
<div>用户状态:
<el-switch
v-model="admin.enabled"
active-color="#13ce66"
inactive-color="#ff4949"
@change="enabledChange(admin)"
active-text="启用"
inactive-text="禁用">
</el-switch>
</div>
<div>用户角色:
<el-tag type="success" style="margin-right: 4px" v-for="(role,indexj) in admin.roles" :key="indexj">
{{role.nameZh}}
</el-tag>
<!-- 点击弹出弹出框@show：事件 -->
<el-popover
placement="right"
title="角色列表"
@show="showPop(admin)"
@hide="hidePop(admin)"
width="200"
trigger="click">
<!-- 下拉框-->
<el-select v-model="selectedRoles" multiple placeholder="请选择...">
<el-option
v-for="(r,indexk) in allRoles"
:key="indexk"
:label="r.nameZh"
:value="r.id"></el-option>
</el-select>
<el-button slot="reference" icon="el-icon-more" type="text"></el-button>
</el-popover>
<!--<el-button icon="el-icon-more" type="text"></el-button>-->
</div>
<div>备注:{{admin.remark}}</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
export default {
name: "SysAdmin",
data() {
return {
keywords: '',
//操作员数组
admins: [],
allRoles: [],
//选中的角色
selectedRoles: []
}
},
//当页面刚加载的时候调用initAdmins方法调用后端接口，获取所有操作员列表
mounted() {
this.initAdmins();
},
methods: {
//获取所有操作员列表方法
initAdmins() {
this.getRequest('/system/admin/?keywords=' + this.keywords).then(resp => {
if (resp) {
//把返回的数据赋值给数组
this.admins = resp;
}
})
},
//搜索框搜索
doSearch() {
this.initAdmins();
},
//删除操作员方法
deleteAdmin(admin) {
this.$confirm('此操作将永久删除该【' + admin.name + '】用户, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//调用后端接口：/system/admin
this.deleteRequest('/system/admin/' + admin.id).then(resp => {
//删除成功之后重新调用获取操作员列表的方法
this.initAdmins();
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//更新操作员状态
enabledChange(admin) {
//调用后端接口/system/admin
this.putRequest('/system/admin/', admin).then(resp => {
if (resp) {
//成功之后重新调用获取操作员列表的方法,更新一下
this.initAdmins();
}
})
},
//弹出框隐藏时触发的事件
hidePop(admin) {
let roles = [];
Object.assign(roles, admin.roles);
let flag = false;
if (roles.length != this.selectedRoles.length) {
flag = true;
} else {
for (let i = 0; i < roles.length; i++) {
let role = roles[i];
for (let j = 0; j < this.selectedRoles.length; j++) {
let sr = this.selectedRoles[j];
if (role.id == sr) {
roles.splice(i, 1);
i--;
break;
}
}
}
if (roles.length != 0) {
flag = true;
}
}
if (flag) {
let url = '/system/admin/role?adminId=' + admin.id;
this.selectedRoles.forEach(sr => {
url += '&rids=' + sr;
})
this.putRequest(url).then(resp => {
if (resp) {
this.initAdmins();
}
})
}
},
//弹出框显示事件
showPop(admin) {
//拿到所有角色列表
this.initAllRoles();
//选中的角色
let roles = admin.roles;
this.selectedRoles = [];
roles.forEach(r => {
this.selectedRoles.push(r.id);
})
},
//获取所有角色方法
initAllRoles() {
this.getRequest('/system/admin/roles').then(resp => {
if (resp) {
this.allRoles = resp;
}
})
}
}
}
</script>
<style>
.userinfo-container div {
font-size: 12px;
color: #409eff;
}
.userinfo-container {
margin-top: 20px;
}
.img-container {
width: 100%;
display: flex;
justify-content: center;
}
.userface-img {
width: 72px;
height: 72px;
border-radius: 72px;
}
.admin-container {
margin-top: 10px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.admin-card {
width: 300px;
margin-bottom: 20px;
}
</style>
（4）员工资料工具栏页面
（5）员工展示
...
（6）分页展示员工
点2：
换成每页20条：
搜索性王的：
当点击清空按钮时：
（7）添加员工页面绘制
（8）添加员工页面绘制2
...
（9）添加员工下拉框数据处理、最大工号
政治面貌、职称、职位、下拉框内容展示
（10）员工添加数据检验
先做一个数据校验，校验是否输入了内容：
（11）员工删除及更新
点击编辑：
修改学校为北京大学
在次打开：
删掉这向记录：
（12）封装文件的下载请求
实现导入数据导出数据
axios并不提供下载的功能，我们提供一个插件：先安装：
封装一下做文件下载请求的
download.js：
import axios from 'axios'
const service = axios.create({
//默认类型
responseType: 'arraybuffer'
})
//请求拦截器
service.interceptors.request.use(config => {
//判断是否登录，有token
config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
return config
}, error => {
console.log(error)
});
//响应拦截器
service.interceptors.response.use(
resp => {
const headers = resp.headers;//拿头部信息
let reg = RegExp(/application\/json/);//定义正则表达式
if (headers['content-type'].match(reg)) {//判断head是否跟正则表达式相匹配
//调用方法转换为json字符串
resp.data = uintToString(resp.data);
} else {
//不匹配的话返回stream流
let fileDownload = require('js-file-download');//获取download插件
let fileName = headers["content-disposition"].split(";")
[1].split("filename=")[1];//获取名字
let contentType = headers["content-type"];//获取contentType
fileName = decodeURIComponent(fileName);//转换文件名，防止中文乱码
fileDownload(resp.data, fileName, contentType)
}
},error => {
console.log(error);
}
);
//定义请求
let base = '';
export const downloadRequest = (url, params) => {
return service({
method: 'get',
url: `${base}${url}`,
data: params
})
}
function uintToString(uintArray) {
//编码
let encodedString = String.fromCharCode.apply(null, new
Uint8Array(uintArray)),
//解码
decodedString = decodeURIComponent(escape(encodedString));
return JSON.parse(decodedString);
}
//暴露service
export default service
在main.js引入：
（13）员工数据的导入导出
使用elementUI 的上传文件的组件：
（13）高级搜索页面设计
...
（14）高级搜索动画特效
点击高级搜索：
（15）高级搜索功能实现
EmpBasic.vue:详细代码：
<template>
<div>
<div>
<div style="display: flex;justify-content: space-between">
<div>
<!--clearable:带清空按钮的输入框 @clear：当点击清空按钮触发的事件-->
<el-input prefix-icon="el-icon-search"
placeholder="请输入员工名进行搜索..."
v-model="empName"
@keydown.enter.native="initEmps"
clearable
@clear="initEmps"
:disabled="showAdvanceSearchVisible"
style="width: 300px;margin-right: 10px"></el-input>
<el-button type="primary"
icon="el-icon-search"
@click="initEmps"
:disabled="showAdvanceSearchVisible">搜索
</el-button>
<el-button type="primary"
@click="showAdvanceSearchView">
<i :class="showAdvanceSearchVisible?'fa fa-angle-doubleup':'fa fa-angle-double-down'"
aria-hidden="true"></i>
高级搜索
</el-button>
</div>
<div>
<!-- :before-upload：文件导入时调用的方法， :on-success：成功时调用的方法 :disabled：正在导入-->
<el-upload
action="/employee/basic/import"
:before-upload="beforeUpload"
:headers="headers"
:on-success="onSuccess"
:on-error="onError"
:disabled="importDataDisabled"
style="display: inline-flex;margin-right: 8px"
:show-file-list="false">
<el-button :disabled="importDataDisabled" type="success"
:icon="importDataBtnIcon">
{{importDataBtnText}}
</el-button>
</el-upload>
<el-button type="success" @click="exportData" icon="el-icondownload">
导出数据
</el-button>
<el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">
添加用户
</el-button>
</div>
</div>
<transition name="slide-fade">
<div v-show="showAdvanceSearchVisible"
style="border: 1px solid #409eff;border-radius: 5px;box-sizing:border-box;padding: 5px;margin: 10px 0px">
<el-row>
<el-col :span="5">
政治面貌:
<el-select v-model="searchValue.politicId"
placeholder="政治面貌" size="mini"
style="width: 130px">
<el-option
v-for="item in politicsstatus"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
民族:
<el-select v-model="searchValue.nationId"
placeholder="民族" size="mini" style="width: 130px">
<el-option
v-for="item in nations"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
职位:
<el-select v-model="searchValue.posId"
placeholder="职位" size="mini" style="width: 130px">
<el-option
v-for="item in positions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="4">
职称:
<el-select v-model="searchValue.jobLevelId"
placeholder="职称" size="mini"
style="width: 130px">
<el-option
v-for="item in joblevels"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="7">
聘用形式:
<el-radio-group v-model="searchValue.engageForm">
<el-radio label="劳动合同">劳动合同</el-radio>
<el-radio label="劳务合同">劳务合同</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row style="margin-top: 10px">
<el-col :span="5">
所属部门:
<el-popover
placement="right"
title="请选择部门"
width="200"
trigger="manual"
v-model="visable2">
<el-tree :data="allDeps" :props="defaultProps"
default-expand-all
@node-click="searchHandleNodeClick">
</el-tree>
<div slot="reference"
style="width: 130px;display: inline-flex;
font-size: 13px;border: 1px solid #dedede;height: 24px;border-radius:
5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;
margin-left: 3px"
@click="showDepView2">
{{inputDepName}}
</div>
</el-popover>
</el-col>
<el-col :span="10">
入职日期:
<el-date-picker
v-model="searchValue.beginDateScope"
size="mini"
type="daterange"
value-format="yyyy-MM-dd"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-col>
<el-col :span="5" :offset="4">
<el-button>取消</el-button>
<el-button type="primary"
@click="initEmps('advanced')">搜索
</el-button>
</el-col>
</el-row>
</div>
</transition>
</div>
<!--显示数据-->
<div style="margin-top: 10px">
<el-table
:data="emps"
stripe
border
v-loading="loading"
element-loading-text="正在加载..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
fixed
align="left"
width="90">
</el-table-column>
<el-table-column
prop="workID"
label="工号"
align="left"
width="85">
</el-table-column>
<el-table-column
prop="gender"
label="性别"
width="85">
</el-table-column>
<el-table-column
prop="birthday"
align="left"
width="95"
label="出生日期">
</el-table-column>
<el-table-column
prop="idCard"
align="left"
width="150"
label="身份证号码">
</el-table-column>
<el-table-column
prop="wedlock"
width="70"
label="婚姻状况">
</el-table-column>
<el-table-column
prop="nation.name"
width="50"
label="民族">
</el-table-column>
<el-table-column
prop="nativePlace"
width="80"
label="籍贯">
</el-table-column>
<el-table-column
prop="politicsStatus.name"
label="政治面貌">
</el-table-column>
<el-table-column
prop="email"
align="left"
width="180"
label="电子邮件">
</el-table-column>
<el-table-column
prop="phone"
align="left"
width="100"
label="电话号码">
</el-table-column>
<el-table-column
prop="address"
align="left"
width="220"
label="联系地址">
</el-table-column>
<el-table-column
prop="department.name"
align="left"
width="100"
label="所属部门">
</el-table-column>
<el-table-column
prop="position.name"
width="100"
label="职位">
</el-table-column>
<el-table-column
prop="joblevel.name"
width="100"
label="职称">
</el-table-column>
<el-table-column
prop="engageForm"
align="left"
width="100"
label="聘用形式">
</el-table-column>
<el-table-column
prop="tiptopDegree"
label="最高学历">
</el-table-column>
<el-table-column
prop="school"
align="left"
width="150"
label="毕业院校">
</el-table-column>
<el-table-column
prop="specialty"
align="left"
width="150"
label="专业">
</el-table-column>
<el-table-column
prop="workState"
align="left"
width="70"
label="在职状态">
</el-table-column>
<el-table-column
prop="beginDate"
align="left"
width="95"
label="入职日期">
</el-table-column>
<el-table-column
prop="conversionTime"
align="left"
width="95"
label="转正日期">
</el-table-column>
<el-table-column
prop="beginContract"
align="left"
width="95"
label="合同起始日期">
</el-table-column>
<el-table-column
prop="endContract"
align="left"
width="95"
label="合同截止日期">
</el-table-column>
<el-table-column
align="left"
width="100"
label="合同期限">
<template slot-scope="scope">
<el-tag>{{scope.row.contractTerm}}</el-tag>
年
</template>
</el-table-column>
<el-table-column
fixed="right"
width="200"
label="操作">
<template slot-scope="scope">
<el-button style="padding: 3px" size="mini"
@click="showEditEmpView(scope.row)">编辑
</el-button>
<el-button style="padding: 3px" size="mini"
type="primary">查看高级资料
</el-button>
<el-button style="padding: 3px" size="mini"
type="danger" @click="deleteEmp(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="display: flex;justify-content: flex-end">
<!-- @current-change：改变当前页数的时候触发 @size-change：每页条数改变时触发-->
<el-pagination
background
@current-change="currentChange"
@size-change="sizeChange"
layout="sizes,prev,pager,next,jumper,->,total,slot" :total="total">
</el-pagination>
</div>
</div>
<!--添加按钮弹出框 -->
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="80%">
<div>
<!--表单： rules：校验-->
<el-form :model="emp" :rules="rules" ref="empForm">
<!--采用Layout布局24分栏 -->
<!--第一行-->
<el-row>
<el-col :span="6">
<el-form-item label="姓名：" prop="name">
<el-input size="mini" style="width: 150px" v-model="emp.name" placeholder="请输入员工姓名"
prefix-icon="el-icon-edit"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="性别：" prop="gender">
<el-radio-group v-model="emp.gender" style="margin-top:8px">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出生日期：" prop="birthday">
<el-date-picker
v-model="emp.birthday"
size="mini"
type="date"
value-format="yyyy-MM-dd"
style="width: 150px"
placeholder="出生日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="政治面貌：" prop="politicId">
<el-select v-model="emp.politicId"
placeholder="政治面貌" size="mini" style="width: 200px">
<el-option
v-for="item in politicsstatus"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!--第二行-->
<el-row>
<el-col :span="6">
<el-form-item label="民族：" prop="nationId">
<el-select v-model="emp.nationId"
placeholder="民族" size="mini" style="width: 150px">
<el-option
v-for="item in nations"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="籍贯：" prop="nativePlace">
<el-input size="mini" style="width: 120px" v-model="emp.nativePlace" placeholder="请输入籍贯"
prefix-icon="el-icon-edit"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="电子邮箱：" prop="email">
<el-input size="mini" style="width: 150px" v-model="emp.email" placeholder="请输入电子邮箱"
prefix-icon="el-icon-message"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="联系地址：" prop="address">
<el-input size="mini" style="width: 200px" v-model="emp.address" placeholder="请输入联系地址"
prefix-icon="el-icon-edit"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--第三行-->
<el-row>
<el-col :span="6">
<el-form-item label="职位：" prop="posId">
<el-select v-model="emp.posId" placeholder="职位"
size="mini" style="width: 150px">
<el-option
v-for="item in positions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="职称：" prop="jobLevelId">
<el-select v-model="emp.jobLevelId"
placeholder="职称" size="mini" style="width: 150px">
<el-option
v-for="item in joblevels"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="所属部门：" prop="departmentId">
<el-popover
placement="right"
title="请选择部门"
width="200"
trigger="manual"
v-model="visable">
<!--树形控件-->
<el-tree :data="allDeps"
:props="defaultProps" default-expand-all
@node-click="handleNodeClick">
</el-tree>
<div slot="reference"
style="width: 150px;display: inline-flex;
font-size: 13px;border: 1px solid #dedede;height: 24px;border-radius:
5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box"
@click="showDepView">
{{inputDepName}}
</div>
</el-popover>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="电话号码：" prop="phone">
<el-input size="mini" style="width: 200px" v-model="emp.phone" placeholder="请输入电话号码"
prefix-icon="el-icon-phone"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--第四行-->
<el-row>
<el-col :span="6">
<el-form-item label="工号：" prop="workID">
<el-input size="mini" style="width: 150px" v-model="emp.workID" placeholder="请输入工号"
prefix-icon="el-icon-edit" disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="学历：" prop="tiptopDegree">
<el-select v-model="emp.tiptopDegree"
placeholder="学历" size="mini" style="width: 150px">
<el-option
v-for="item in tiptopDegrees"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="毕业院校：" prop="school">
<el-input size="mini" style="width: 150px" v-model="emp.school" placeholder="请输入毕业院校"
prefix-icon="el-icon-edit"></el-input>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="专业名称：" prop="specialty">
<el-input size="mini" style="width: 200px" v-model="emp.specialty" placeholder="请输入专业名称"
prefix-icon="el-icon-edit"></el-input>
</el-form-item>
</el-col>
</el-row>
<!--第五行-->
<el-row>
<el-col :span="6">
<el-form-item label="入职日期：" prop="beginDate">
<el-date-picker
v-model="emp.beginDate"
size="mini"
type="date"
value-format="yyyy-MM-dd"
style="width: 130px"
placeholder="入职日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="转正日期："
prop="conversionTime">
<el-date-picker
v-model="emp.conversionTime"
size="mini"
type="date"
value-format="yyyy-MM-dd"
style="width: 130px"
placeholder="转正日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同起始日期："
prop="beginContract">
<el-date-picker
v-model="emp.beginContract"
size="mini"
type="date"
value-format="yyyy-MM-dd"
style="width: 130px"
placeholder="合同起始日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同截止日期："
prop="endContract">
<el-date-picker
v-model="emp.endContract"
size="mini"
type="date"
value-format="yyyy-MM-dd"
style="width: 130px"
placeholder="合同截止日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<!--第六行-->
<el-row>
<el-col :span="8">
<el-form-item label="身份证号码：" prop="idCard">
<el-input size="mini" style="width: 180px" v-model="emp.idCard" placeholder="请输入身份证号码"
prefix-icon="el-icon-edit"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="聘用形式：" prop="engageForm">
<el-radio-group v-model="emp.engageForm" style="margin-top:8px">
<el-radio label="劳动合同">劳动合同</el-radio>
<el-radio label="劳务合同">劳务合同</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="婚姻状况：" prop="wedlock">
<el-radio-group v-model="emp.wedlock" style="margin-top:8px">
<el-radio label="已婚">已婚</el-radio>
<el-radio label="未婚">未婚</el-radio>
<el-radio label="离异">离异</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="doAddEmp">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "EmpBasic",
data(){
return{
searchValue: {
politicId: null,
nationId: null,
jobLevelId: null,
posId: null,
engageForm: '',
departmentId: null,
beginDateScope: null
},
//员工数组
emps:[],
loading:false,
//总条数
total:0,
//当前页
currentPage:1,
size:10,
//员工名
empName:'',
//弹出框是否弹出默认是false
dialogVisible:false,
//民族
nations:[],
//职称
joblevels:[],
//政治面貌
politicsstatus:[],
//职位
positions:[],
//固定学历的下拉列表
tiptopDegrees: ['本科', '大专', '硕士', '博士', '高中', '初中', '小学', '其他'],
//树形列表默认为不可见
visable:false,
visable2:false,
//树形列表的对应属性
defaultProps:{
children:'children',
label:'name'
},
//部门数据
allDeps:[],
//回显数据
inputDepName:'',
//弹出框标题
title:'',
importDataBtnText:'导入数据',
importDataBtnIcon:'el-icon-upload2',
//正在导入时的属性
importDataDisabled:false,
headers:{
Authorization:window.sessionStorage.getItem('tokenStr')
},
//高级搜索属性显示
showAdvanceSearchVisible:false,
//添加员工对象
emp: {
id:null,
name: '',
gender: '',
birthday: '',
idCard: '',
wedlock: '',
nationId: null,
nativePlace: '',
politicId: null,
email: '',
phone: '',
address: '',
departmentId: null,
jobLevelId: null,
posId: null,
engageForm: '',
tiptopDegree: '',
specialty: '',
school: '',
beginDate: '',
workID: '',
contractTerm: null,
conversionTime: '',
notWorkDate: '',
beginContract: '',
endContract: '',
workAge: null
},
rules: {
name: [{
required: true, message: '请输入员工姓名', trigger:
'blur'
}],
gender: [{
required: true, message: '请输入性别', trigger:
'blur'
}],
birthday: [{
required: true, message: '请输入出生日期',
trigger: 'blur'
}],
idCard: [{
required: true, message: '请输入身份证号码', trigger:
'blur'
}, {
pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
message: '身份证号码格式不正确',
trigger: 'blur'
}],
wedlock: [{
required: true, message: '请输入婚姻状况', trigger:
'blur'
}],
nationId: [{
required: true, message: '请输入民族', trigger:
'blur'
}],
nativePlace: [{
required: true, message: '请输入籍贯', trigger:
'blur'
}],
politicId: [{
required: true, message: '请输入政治面貌',
trigger: 'blur'
}],
email: [{
required: true, message: '请输入邮箱地址', trigger:
'blur'
}, {
type: 'email',
message: '邮箱格式不正确',
trigger: 'blur'
}],
phone: [{
required: true, message: '请输入电话号码', trigger:
'blur'
}],
address: [{
required: true, message: '请输入员工地址', trigger:
'blur'
}],
departmentId: [{
required: true, message: '请输入部门名称',
trigger: 'blur'
}],
jobLevelId: [{
required: true, message: '请输入职称', trigger:
'blur'
}],
posId: [{
required: true, message: '请输入职位', trigger:
'blur'
}],
engageForm: [{
required: true, message: '请输入聘用形式',
trigger: 'blur'
}],
tiptopDegree: [{
required: true, message: '请输入学历',
trigger: 'blur'
}],
specialty: [{
required: true, message: '请输入专业', trigger:
'blur'
}],
school: [{
required: true, message: '请输入毕业院校', trigger:
'blur'
}],
beginDate: [{
required: true, message: '请输入入职日期',
trigger: 'blur'
}],
workState: [{
required: true, message: '请输入工作状态',
trigger: 'blur'
}],
workID: [{
required: true, message: '请输入工号', trigger:
'blur'
}],
contractTerm: [{
required: true, message: '请输入合同期限',
trigger: 'blur'
}],
conversionTime: [{
required: true, message: '请输入转正日期',
trigger: 'blur'
}],
notWorkDate: [{
required: true, message: '请输入离职日期',
trigger: 'blur'
}],
beginContract: [{
required: true, message: '请输入合同起始日期',
trigger: 'blur'
}],
endContract: [{
required: true, message: '请输入合同结束日期',
trigger: 'blur'
}],
workAge: [{
required: true, message: '请输入工龄', trigger:
'blur'
}],
}
}
},
//当页面刚加载的时候调用initEmps方法调用后端接口，获取所有员工列表列表
mounted(){
this.initEmps();//获取员工列表
this.initData();//获取职位、民族等列表
this.initPositions();//获取职位
},
methods:{
//获取员工列表方法
initEmps(type) {
this.loading = true;
let url = '/employee/basic/?currentPage=' + this.currentPage + '&size=' + this.size;
if (type && type == 'advanced') {
if (this.searchValue.politicId) {
url += '&politicId=' + this.searchValue.politicId;
}
if (this.searchValue.nationId) {
url += '&nationId=' + this.searchValue.nationId;
}
if (this.searchValue.jobLevelId) {
url += '&jobLevelId=' + this.searchValue.jobLevelId;
}
if (this.searchValue.posId) {
url += '&posId=' + this.searchValue.posId
}
if (this.searchValue.engageForm) {
url += '&engageForm=' + this.searchValue.engageForm;
}
if (this.searchValue.departmentId) {
url += '&departmentId=' + this.searchValue.departmentId;
}
if (this.searchValue.beginDateScope) {
url += '&beginDateScope=' + this.searchValue.beginDateScope;
}
} else {
url += '&name=' + this.empName;
}
this.getRequest(url).then(resp => {
this.loading = false;
if (resp) {
this.emps = resp.data;
this.total = resp.total;
}
})
},
//每页条数改变时触发
sizeChange(currentSize) {
this.size = currentSize;
this.initEmps();
},
//当前页改变方法
currentChange(currentPage) {
this.currentPage = currentPage;
//当前也改变，之后调用列表方法
this.initEmps();
},
//显示弹出框方法
showAddEmpView() {
this.title = '添加员工';
//清空员工数据
this.emp = {
id: null,
name: '',
gender: '',
birthday: '',
idCard: '',
wedlock: '',
nationId: null,
nativePlace: '',
politicId: null,
email: '',
phone: '',
address: '',
departmentId: null,
jobLevelId: null,
posId: null,
engageForm: '',
tiptopDegree: '',
specialty: '',
school: '',
beginDate: '',
workID: '',
contractTerm: null,
conversionTime: '',
notWorkDate: '',
beginContract: '',
endContract: '',
workAge: null
}
//清空所处部门
this.inputDepName = '';
//显示弹出框
this.dialogVisible = true;
this.getMaxWorkID();
this.initPositions();
},
//获取去下拉框中的内容 获取职位、民族、职称等列表
initData() {
//首先判断sessionStorage里面有没有民族
if (!window.sessionStorage.getItem("nations")) {
this.getRequest('/employee/basic/nation').then(resp => {
if (resp) {
this.nations = resp;
//存入sessionStorage里面
window.sessionStorage.setItem("nations", JSON.stringify(resp));
}
})
} else {
//存在直接获取
this.nations = JSON.parse(window.sessionStorage.getItem("nations"))
}
//首先判断sessionStorage里面有没有职称
if (!window.sessionStorage.getItem("joblevels")) {
this.getRequest('/employee/basic/joblevel').then(resp => {
if (resp) {
this.joblevels = resp;
window.sessionStorage.setItem("joblevels", JSON.stringify(resp));
}
})
} else {
this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"))
}
//首先判断sessionStorage里面有没有政治面貌
if (!window.sessionStorage.getItem("politicsstatus")) {
this.getRequest('/employee/basic/politicsStatus').then(resp => {
if (resp) {
this.politicsstatus = resp;
window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp));
}
})
} else {
this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"))
}
//首先判断sessionStorage里面有没有部门
if (!window.sessionStorage.getItem("allDeps")) {
this.getRequest('/employee/basic/deps').then(resp => {
if (resp) {
this.allDeps = resp;
window.sessionStorage.setItem("allDeps", JSON.stringify(resp));
}
})
} else {
this.allDeps =
JSON.parse(window.sessionStorage.getItem("allDeps"))
}
},
//获取职位
initPositions() {
this.getRequest('/employee/basic/position').then(resp => {
if (resp) {
this.positions = resp;
}
})
},
//获取最大工号
getMaxWorkID() {
this.getRequest('/employee/basic/maxWorkID').then(resp => {
if (resp) {
this.emp.workID = resp.obj;
}
})
},
//显示部门按钮
showDepView() {
this.visable = !this.visable;
},
//关闭部门按钮
handleNodeClick(data) {
this.inputDepName = data.name;
this.emp.departmentId = data.id;
this.visable = !this.visable;
},
//添加员工方法
doAddEmp() {
//判断是否有id，有id是更新
if (this.emp.id) {
//进行验证验证通过进行更新操作
this.$refs['empForm'].validate(valid => {
if (valid) {
this.putRequest('/employee/basic/', this.emp).then(resp => {
if (resp) {
//将弹出框隐藏
this.dialogVisible = false;
this.initEmps();
}
})
}
})
} else {
//进行验证验证通过进行添加操作
this.$refs['empForm'].validate(valid => {
if (valid) {
this.postRequest('/employee/basic/', this.emp).then(resp => {
if (resp) {
this.dialogVisible = false;
this.initEmps();
}
})
}
})
}
},
//删除员工事件
deleteEmp(data) {
this.$confirm('此操作将永久删除该【' + data.name + '】, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/employee/basic/' + data.id).then(resp => {
if (resp) {
//删除完初始化数据
this.initEmps();
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//修改员工方法
showEditEmpView(data) {
this.title = '编辑员工';
this.emp = data;//展示数据
this.inputDepName = data.department.name;//展示所处部门
this.initPositions();
this.dialogVisible = true;//弹出框显示
},
//导出数据
exportData() {
this.downloadRequest('/employee/basic/export')
},
//导入数据的时的显示方法
beforeUpload() {
this.importDataBtnText = '正在导入';
this.importDataBtnIcon = 'el-icon-loading';
this.importDataDisabled = true;//正在导入时为true，禁用状态
},
//文件上传失败的钩子函数
onError() {
this.importDataBtnText = '导入数据';
this.importDataBtnIcon = 'el-icon-upload2';
this.importDataDisabled = false;//导入成功开启状态false
},
//文件上传成功的钩子函数
onSuccess() {
this.importDataBtnText = '导入数据';
this.importDataBtnIcon = 'el-icon-upload2';
this.importDataDisabled = false;
this.initEmps();
},
//高级搜索框显示的方法
showAdvanceSearchView() {
this.showAdvanceSearchVisible = !this.showAdvanceSearchVisible;
this.searchValue = {
politicId: null,
nationId: null,
jobLevelId: null,
posId: null,
engageForm: '',
departmentId: null,
beginDateScope: null
}
},
//高级搜索中的部门列表
searchHandleNodeClick(data) {
this.inputDepName = data.name;
this.searchValue.departmentId = data.id;
this.visable2 = !this.visable2;
},
//显示部门按钮2
showDepView2() {
this.visable2 = !this.visable2;
},
}
}
</script>
<style scoped>
</style>
2216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
