云e办前端学习笔记（十一）员工基本资料管理
2024-04-30 09:00:34
前言
本系列博客基于B站的云e办管理系统，前端和后端我都自己敲了一遍，这里做一个学习记录。云e办的原始视频链接如下：https://www.bilibili.com/video/BV1Ai4y1P7Tk?p=1
其中，导入导出数据需要安装插件
npm install js-file-download
工具类
import axios from 'axios'//默认返回类型
const service = axios.create({responseType: 'arraybuffer'
})
//请求拦截器
//在有权限（登录）的情况下，后端接口才能够提供下载服务
service.interceptors.request.use(config => {config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');return config;
}, error => {console.log(error);
})//响应拦截器
//首先拿到响应头，然后将响应头和定义的正则表达式匹配，说明这是一个正常的请求，
// 然后调用转String方法，以String类型json对象返回响应数据
//否则，默认是以流的形式返回
service.interceptors.response.use(resp => {const headers = resp.headers;let reg = RegExp(/application\/json/);if (headers['content-type'].match(reg)) {resp.data = unitToString(resp.data);} else {let fileDownload = require('js-file-download'); //引进来的filedownload插件let fileName = headers['content-disposition'].split(';')[1].split('filename=')[1]; //文件名let contentType = headers['content-type']; // 响应类型fileName = decodeURIComponent(fileName); //文件名格式进行转换,防止中文乱码fileDownload(resp.data, fileName, contentType);}},error => {console.log(error);})
//json数据的处理，一个是加密，一个是解密
function unitToString(unitArray) {let encodeString = String.fromCharCode.apply(null, new Uint8Array(unitArray));let decodeString = decodeURIComponent(escape(encodeString));return JSON.parse(decodeString)
}let base = '';
//下载请求
export const downloadRequest = (url, params) => {return service({method: 'get',url: `${base}${url}`,data: params})
}export default service
员工基本资料
<template><div><div><div style="display: flex; justify-content: space-between"><div>
<!-- 搜索输入框--><el-inputprefix-icon="el-icon-search"placeholder="请输入登账人姓名进行搜索..."v-model="empName"@keydown.enter.native="initEmps"clearable@clear="initEmps":disabled="showSearch"style="width: 300px"></el-input>
<!-- 搜索按钮--><el-buttonstyle="margin-left: 10px"icon="el-icon-search"type="primary"@click="initEmps":disabled="showSearch">搜索</el-button>
<!-- 高级搜索按钮--><el-button type="primary" @click="showSearch = !showSearch"><i:class="showSearch ? 'fa fa-angle-double-up' : 'fa fa-angle-double-down'"aria-hidden="true"></i>高级搜索</el-button></div><div><el-uploadstyle="display: inline-flex; margin-right: 8px":show-file-list="false":before-upload="beforeUpload":on-success="onSuccess":headers="headers":on-error="onError":disabled="importDataDisabled"action="/employee/import"><el-buttontype="success":disabled="importDataDisabled":icon="importDataBtnIcon">{{ importDataBtnText }}</el-button></el-upload><el-button type="success" @click="exportData" icon="el-icon-download">导出数据</el-button><el-buttontype="primary"icon="el-buttton-plus"@click="showAddEmpView">添加固定资产</el-button></div></div></div><transition name="slide-fade"><divv-show="showSearch"style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 7px;margin: 15px 0px;"><el-row><el-col :span="5">政治面貌:<el-selectv-model="searchValue.politicId"size="mini"placeholder="政治面貌"style="width: 130px"><el-optionv-for="item in politicsstatus":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-col><el-col :span="4">民族:<el-selectv-model="searchValue.nationId"size="mini"placeholder="民族"style="width: 130px"><el-optionv-for="item in nations":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-col><el-col :span="4">职位:<el-selectv-model="searchValue.posId"size="mini"placeholder="职位"style="width: 130px"><el-optionv-for="item in positions":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-col><el-col :span="4">职称:<el-selectv-model="searchValue.jobLevelId"size="mini"placeholder="职称"style="width: 130px"><el-optionv-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-popoverplacement="bottom"title="请选择仓库"width="200"trigger="manual"v-model="visible2"><el-tree:data="allDeps":props="defaultProps"default-expand-all@node-click="searchhandleNodeClick"></el-tree><divslot="reference"style="width: 130px;height: 24px;display: inline-flex;border: 1px solid #dedede;border-radius: 5px;cursor: pointer;align-items: center;font-size: 13px;padding-left: 8px;box-sizing: border-box;"@click="showDepView2">{{ inputDepName }}</div></el-popover></el-col><el-col :span="10">入库日期:<el-date-pickersize="mini"v-model="searchValue.beginDateScope"type="daterange"value-format="yyy-MM-dd"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-col><el-col :span="5" :offset="4"><el-buttonsize="mini"icon="el-icon-search"type="primary"@click="initEmps('advanced')">搜索</el-button><el-button size="mini">取消</el-button></el-col></el-row></div></transition><!-- 资产信息表格--><div style="margin-top: 20px"><el-table:data="emps"borderstripev-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>
<!-- fixed：冻结--><el-table-columnprop="name"label="登账人姓名"fixed="left"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="50"></el-table-column><el-table-columnprop="birthday"label="出生日期"align="left"width="95"></el-table-column><el-table-columnprop="idCard"label="身份证号"align="left"width="150"></el-table-column><el-table-column prop="wedlock" label="婚姻状况" width="70"></el-table-column><el-table-column prop="nation.name" label="民族" width="50"></el-table-column><el-table-column prop="nativePlace" label="籍贯" width="88"></el-table-column><el-table-columnprop="politicsStatus.name"label="政治面貌"width="100"></el-table-column><el-table-column prop="email" label="邮箱" align="left" width="180"></el-table-column><el-table-column prop="phone" label="电话号码" width="100"></el-table-column><el-table-columnprop="address"label="联系地址"align="left"width="270"></el-table-column><el-table-columnprop="joblevel.name"label="职称"align="left"width="100"></el-table-column><el-table-columnprop="department.name"label="仓库名称"align="left"width="100"></el-table-column><el-table-column prop="position.name" label="职位" width="100"></el-table-column><el-table-columnprop="engageForm"label="入库形式"align="left"width="100"></el-table-column><!-- <el-table-column prop="tiptopDegree" label="最高学历" width="80">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="school"--><!-- label="毕业院校"--><!-- align="left"--><!-- width="150"--><!-- >--><!-- </el-table-column>--><!-- <el-table-column prop="specialty" label="专业" align="left" width="150">--><!-- </el-table-column>--><!-- <el-table-column--><!-- prop="workState"--><!-- label="仓库状态"--><!-- align="left"--><!-- width="70"--><!-- >--><!-- </el-table-column>--><el-table-columnprop="beginDate"label="入库日期"align="left"width="95"></el-table-column><el-table-columnprop="conversionTime"label="正式入库日期"align="left"width="95"></el-table-column><el-table-columnprop="beginContract"label="合同起始日期"align="left"width="95"></el-table-column><el-table-columnprop="endContract"label="合同截止日期"align="left"width="95"></el-table-column><el-table-columnprop="contractTerm"label="合同期限"align="left"width="100"><template slot-scope="scope"><el-tag>{{ scope.row.contractTerm }}</el-tag>年</template></el-table-column><el-table-column label="操作" width="200" fixed="right"><template slot-scope="scope"><el-button@click="showEditView(scope.row)"style="padding: 3px"size="mini">编辑</el-button><el-button style="padding: 3px" size="mini" type="primary">查看高级资料</el-button><el-buttonstyle="padding: 3px"size="mini"type="danger"@click="deleteEmp(scope.row)">删除</el-button></template></el-table-column></el-table>
<!-- 分页展示，-->
<!-- sizes, prev, pager, next, jumper：数据数量，上一条数据，当前页面，下一页，跳转到……页-->
<!-- @current-change：跳转页面事件-->
<!-- @size-change：当前展示数据数量事件--><div style="display: flex; justify-content: flex-end"><el-paginationbackground@current-change="currentChange"@size-change="sizeChange"layout="sizes, prev, pager, next, jumper, ->, total":total="total"></el-pagination></div></div>
<!-- 新建资产信息弹出框--><el-dialog :visible.sync="dialogVisible" :title="title" width="80%"><div><el-form ref="empForm" :model="emp" :rules="rules">
<!-- 24分栏布局--><el-row><el-col :span="6"><el-form-item label="姓名:" prop="name"><el-inputv-model="emp.name"placeholder="请输入登账人姓名"prefix-icon="el-icon-edit"size="mini"style="width: 150px"></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 :5px"><el-radio label="男" style="margin-top: 10px">男</el-radio><el-radio label="女" style="margin-top: 10px">女</el-radio></el-radio-group></el-form-item></el-col><el-col :span="6"><el-form-item label="出生日期" prop="birthday">
<!-- 日期选择器-->
<!-- value-format：格式--><el-date-pickerv-model="emp.birthday"size="mini"style="width: 150px"align="right"type="date"placeholder="选择日期"value-format="yyyy-MM-dd"></el-date-picker></el-form-item></el-col><el-col :span="7"><el-form-item label="政治面貌" prop="politicId"><el-selectv-model="emp.politicId"size="mini"placeholder="政治面貌"style="width: 200px"><el-optionv-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-selectv-model="emp.nationId"size="mini"placeholder="民族"style="width: 150px"><el-optionv-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-inputv-model="emp.nativePlace"size="mini"placeholder="请输入籍贯"prefix-icon="el-icon-edit"style="width: 120px"></el-input></el-form-item></el-col><el-col :span="6"><el-form-item label="电子邮箱: " prop="email"><el-inputsize="mini"prefix-icon="el-icon-message"v-model="emp.email"placeholder="请输入邮箱"style="width: 150px"></el-input></el-form-item></el-col><el-col :span="7"><el-form-item label="联系地址" prop="address"><el-inputsize="mini"prefix-icon="el-icon-edit"v-model="emp.address"placeholder="请输入地址"style="width: 200px"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="6"><el-form-item label="职位" prop="posId"><el-selectv-model="emp.posId"size="mini"placeholder="职位"style="width: 150px"><el-optionv-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-selectv-model="emp.jobLevelId"size="mini"placeholder="职称"style="width: 120px"><el-optionv-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-popoverplacement="bottom"title="请选择仓库"width="200"trigger="manual"v-model="visible"><el-tree:data="allDeps":props="defaultProps"default-expand-all@node-click="handleNodeClick"></el-tree><divslot="reference"style="width: 120px;height: 24px;display: inline-flex;border: 1px solid #dedede;border-radius: 5px;cursor: pointer;align-items: center;font-size: 13px;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-inputprefix-icon="el-icon-phone"v-model="emp.phone"size="mini"style="width: 200px"placeholder="请输入电话号码"></el-input></el-form-item></el-col></el-row><el-row><el-col :span="6"><el-form-item label="固定资产编号: " prop="workID"><el-inputprefix-icon="el-icon-edit"size="mini"v-model="emp.workID"style="width: 150px"placeholder="请输入固定资产编号"disabled></el-input></el-form-item></el-col><!-- <el-col :span="5">--><!-- <el-form-item label="学历:" prop="tiptopDegree">--><!-- <el-select--><!-- v-model="emp.tiptopDegree"--><!-- size="mini"--><!-- placeholder="最高学历"--><!-- style="width: 120px"--><!-- >--><!-- <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"--><!-- prefix-icon="el-icon-edit"--><!-- v-model="emp.school"--><!-- style="width: 150px"--><!-- placeholder="请输入学校"--><!-- ></el-input>--><!-- </el-form-item>--><!-- </el-col>--><!-- <el-col :span="7">--><!-- <el-form-item label="专业名称" prop="specialty">--><!-- <el-input--><!-- size="mini"--><!-- prefix-icon="el-icon-edit"--><!-- v-model="emp.specialty"--><!-- style="width: 200px"--><!-- placeholder="请输入专业"--><!-- ></el-input>--><!-- </el-form-item>--><!-- </el-col>--></el-row><el-row><el-col :span="6"><el-form-item label="入库日期" prop="beginDate"><el-date-pickerv-model="emp.beginDate"size="mini"type="date"placeholder="入库日期"style="width: 150px"value-format="yyyy-MM-dd"></el-date-picker></el-form-item></el-col><el-col :span="5"><el-form-item label="正式入库日期: " prop="conversionTime"><el-date-pickerv-model="emp.conversionTime"size="mini"type="date"placeholder="正式入库日期"value-format="yyyy-MM-dd"style="width: 120px"></el-date-picker></el-form-item></el-col><el-col :span="6"><el-form-item label="合同起始日期:" prop="beginContract"><el-date-pickerv-model="emp.beginContract"size="mini"type="date"placeholder="合同起始日期"style="width: 150px"value-format="yyyy-MM-dd"></el-date-picker></el-form-item></el-col><el-col :span="7"><el-form-item label="合同截止日期:" prop="endContract"><el-date-pickerv-model="emp.endContract"size="mini"type="date"placeholder="合同截止日期"value-format="yyyy-MM-dd"style="width: 200px"></el-date-picker></el-form-item></el-col></el-row><el-row><el-col :span="6"><el-form-item label="身份证号" prop="idCard"><el-inputprefix-icon="el-icon-edit"size="mini"placeholder="身份证号码"v-model="emp.idCard"style="width: 180px"></el-input></el-form-item></el-col><el-col :span="5"><el-form-item label="入库形式" prop="engageForm"><el-radio-group v-model="emp.engageForm"><el-radio label="主动登账" style="margin-top: 10px">主动登账</el-radio><el-radio label="辅助登账" style="margin-top: 10px">辅助登账</el-radio></el-radio-group></el-form-item></el-col><el-col :span="6"><el-form-item label="婚姻状况" prop="wedlock"><el-radio-group v-model="emp.wedlock"><el-radio label="已婚" style="margin-top: 10px">已婚</el-radio><el-radio label="未婚" style="margin-top: 10px">未婚</el-radio><el-radio label="离异" style="margin-top: 10px">离异</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,posId: null,jobLevelId: null,engageForm: "",departmentId: "",beginDateScope: null,},showSearch: false,headers: {Authorization: window.sessionStorage.getItem("tokenStr"),},importDataBtnText: "导入数据",importDataBtnIcon: "el-icon-upload2",importDataDisabled: false,defaultProps: {children: "children",label: "name",},emps: [],loading: false,total: 0,currentPage: 1,size: 10,empName: "",dialogVisible: 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: "",workState: "在库",workID: "",// contractTerm: 9.31,conversionTime: "",notWorkDate: null,beginContract: "",endContract: "",workAge: null,salaryId: "",nation: {id: null,name: "",},politicsStatus: {id: null,name: "",},department: {id: null,name: "",parentId: null,depPath: null,enabled: null,isParent: null,children: null,result: null,},joblevel: {id: null,name: "",titleLevel: null,createDate: null,enabled: null,},position: {id: null,name: "",createDate: null,enabled: null,},s: null,},nations: [],joblevels: [],visible: false,visible2: false,politicsstatus: [],title: "",positions: [],allDeps: [],// tiptopDegrees: ["博士", "硕士", "本科", "大专", "高中", "初中", "小学"],inputDepName: "",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: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,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"},],wordkID: [{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"}],},};},mounted() {this.initEmps();this.initData();this.initPositions();},methods: {searchhandleNodeClick(data) {this.inputDepName = data.name;this.searchValue.departmentId = data.id;this.visible2 = !this.visible2;},showDepView2() {this.visible2 = !this.visible2;},onSuccess() {this.importDataBtnText = "导入数据";this.importDataDisabled = false;this.importDataBtnIcon = "el-icon-upload2";console.log("导入数据成功!");this.initEmps();},onError() {this.importDataBtnText = "导入数据";this.importDataDisabled = false;this.importDataBtnIcon = "el-icon-upload2";},beforeUpload() {this.importDataBtnText = "正在导入";this.importDataDisabled = true;this.importDataBtnIcon = "el-icon-loading";},exportData() {this.downloadRequest("/employee/export");},showEditView(data) {this.title = "编辑固定资产信息";this.inputDepName = data.department.name;this.initPositions();this.emp = data;this.dialogVisible = true;},deleteEmp(data) {this.$confirm("此操作将删除[" + data.name + "]登账人信息, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.deleteRequest("/employee/" + data.id).then((resp) => {if (resp) {this.initEmps();}});}).catch(() => {this.$message({type: "info",message: "已取消删除",});});},//添加数据doAddEmp() {if (this.emp.id) {this.$refs["empForm"].validate((valid) => {if (valid) {this.putRequest("/employee/", this.emp).then((resp) => {if (resp) {this.dialogVisible = false;this.initEmps();}});}});} else {this.$refs["empForm"].validate((valid) => {if (valid) {this.postRequest("/employee/", this.emp).then((resp) => {if (resp) {this.dialogVisible = false;this.initEmps();}});console.log(this.emp);}});}},//部门的节点点击事件handleNodeClick(data) {this.inputDepName = data.name;this.emp.departmentId = data.id;this.visible = !this.visible;},showDepView() {this.visible = true;},getMaxworkID() {this.getRequest("/employee/maxWorkID").then((resp) => {if (resp) {this.emp.workID = resp.obj;}});},initPositions() {this.getRequest("/employee/positions").then((resp) => {if (resp) {this.positions = resp;}});},//初始化下拉框数据initData() {if (!window.sessionStorage.getItem("nations")) {this.getRequest("/employee/nations").then((resp) => {if (resp) {this.nations = resp;window.sessionStorage.setItem("nations", JSON.stringify(resp));}});} else {this.nations = JSON.parse(window.sessionStorage.getItem("nations"));}if (!window.sessionStorage.getItem("joblevels")) {this.getRequest("/employee/joblevels").then((resp) => {if (resp) {this.joblevels = resp;window.sessionStorage.setItem("joblevels", JSON.stringify(resp));}});} else {this.joblevels = JSON.parse(window.sessionStorage.getItem("joblevels"));}if (!window.sessionStorage.getItem("politicsstatus")) {this.getRequest("/employee/politicsStatus").then((resp) => {if (resp) {this.politicsstatus = resp;window.sessionStorage.setItem("politicsstatus",JSON.stringify(resp));}});} else {this.politicsstatus = JSON.parse(window.sessionStorage.getItem("politicsstatus"));}if (!window.sessionStorage.getItem("allDeps")) {this.getRequest("/employee/deps").then((resp) => {if (resp) {this.allDeps = resp;window.sessionStorage.setItem("allDeps", JSON.stringify(resp));}});} else {this.allDeps = JSON.parse(window.sessionStorage.getItem("allDeps"));}},showAddEmpView() {this.title = "添加固定资产";this.inputDepName = "";this.emp = {name: "",gender: "",birthday: "",idCard: "",wedlock: "",nationId: null,nativePlace: "",politicId: null,email: "",phone: "",address: "",departmentId: null,jobLevelId: null,posId: null,engageForm: "",tiptopDegree: "",specialty: "",school: "",beginDate: "",workState: "在库",workID: "",contractTerm: null,conversionTime: "",notWorkDate: null,beginContract: "",endContract: "",workAge: null,salaryId: null,};this.getMaxworkID();this.dialogVisible = true;},//当前页面展示数据的数量改变sizeChange(size) {this.size = size;this.initEmps();},//当前展示页面改变currentChange(currentPage) {this.currentPage = currentPage;this.initEmps();},initEmps(type) {this.loading = true;// console.log(this.searchValue.beginDateScope);//请求路径默认传参是当前页面，展示数据量，数据名搜索。。。let url ="/employee/?currentPage=" +this.currentPage +"&size=" +this.size +"&name=" +this.empName;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.posId) {url += "&posId=" + this.searchValue.posId;}if (this.searchValue.jobLevelId) {url += "&jobLevelId=" + this.searchValue.jobLevelId;}if (this.searchValue.engageForm) {url += "&engageForm=" + this.searchValue.engageForm;}if (this.searchValue.departmentId) {url += "&departmentId=" + this.searchValue.departmentId;}if (this.searchValue.beginDateScope) {url +="&startDate=" +this.searchValue.beginDateScope[0] +"&endDate=" +this.searchValue.beginDateScope[1];}} else if (this.empName){url += "&name" + this.empName;}//请求，加载改为false，this.getRequest(url).then((resp) => {this.loading = false;if (resp) {//展示的数据//展示的数据条数this.emps = resp.data;this.total = resp.total;}});},},
};
</script><style>
.slide-fade-enter-active {transition: all 0.3s ease;
}.slide-fade-leave-active {transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}.slide-fade-enter, .slide-fade-leave-to/* .slide-fade-leave-active for below version 2.1.8 */
{transform: translateX(10px);opacity: 0;
}
</style>
云e办前端学习笔记（十一）员工基本资料管理相关推荐
- 云e办前端学习（六）职称管理
前言 本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录.云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7T ...
- Vue学习笔记(十一)
1.Vue学习笔记(十一) 文章目录 1.Vue学习笔记(十一) 1.1Vue_配置代理_方式 1.1.0演示问题 1.1.1运行node server1 1.1.2运行node server2 1. ...
- Apache Nutch 1.3 学习笔记十一（页面评分机制 OPIC）
1. Nutch 1.3 的页面评分机制 Nutch1.3目前默认还是使用OPIC作为其网页分数算法,但其之后,已经引入了PageRank-like算法,以弥补OPIC算法的不足,目前OPIC算法还是 ...
- 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...
- 吴恩达《机器学习》学习笔记十一——应用机器学习的建议
吴恩达<机器学习>学习笔记十一--应用机器学习的建议 一.训练完模型后下一步要做什么 二.评估算法与模型选择 1.训练集与测试集 2.训练/测试步骤 3.模型选择 4.数据集新的划分--验 ...
- 吴恩达《机器学习》学习笔记十一——神经网络代码
吴恩达<机器学习>学习笔记十一--神经网络代码 数据准备 神经网络结构与代价函数· 初始化设置 反向传播算法 训练网络与验证 课程链接:https://www.bilibili.com/v ...
- 前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门 一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
- 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
- ROS学习笔记十一：ROS中数据的记录与重放
ROS学习笔记十一:ROS中数据的记录与重放 本节主要介绍如何记录一个正在运行的ROS系统中的数据,然后在一个运行的系统中根据记录文件重新产生和记录时类似的运动情况.本例子还是以小海龟例程为例. 记录 ...
最新文章
- 2022-2028年中国康养旅游行业市场竞争力分析及发展策略分析报告
- 自定义窗体设计器-控件测试
- 计算机基础理论汇编,计算机基础知识：计算机中的汇编语言
- 联想杜比音效_联想小新15 2020锐龙版首销；OPPO Find X2系列也可尝鲜安卓11
- 科学家：冬天，就应该睡饱了再起床上班！
- 一个表单同时向两个页面传值
- ANSYS——查看某一截面的云图分布（也叫做切片图）
- CompletableFuture详解~runAfterBoth
- Understanding node.js
- EntityFramework 4.1 如何加入项目
- 【英语学习】【Level 07】U02 Live Work L2 A place to call my home
- 《MySQL必知必会》.pdf
- SAP License：统计型实际结算型内部订单
- git简单使用(下篇)
- 高德地图android离线包下载,高德地图（车机版）离线包下载与安装
- 移动硬盘需要格式化才能打开如何解决?
- 定积分定义求极限新花样
- 坑人的青旅乐山峨眉两日游
- H3C_利用设置缺省静态路由优先级实现出口双线路的主备功能
- QTextEdit添加输入提示语