009-云E办_员工资料

一、展示所有员工

EmpBasic.vue

 
   <div>
       <div style="display: flex;justify-content: space-between">
           <div>
<!-- 
input 用来输入的框 
prefix-ico 是图标
sytle: 输入框宽度是300
 -->
           <el-input style="width: 300px;margin-right: 10px"
      prefix-icon="el-icon-search"
              v-model="empName"
              @keydown.enter.native="initEmps"
              clearable
              @clear="initEmps"
              :disabled="showAdvanceSearchVisible"
              placeholder="请输入员工名进行搜索..."></el-input>
 <!-- 搜索按钮，Ioc 是图标 -->
            <el-button type="primary" icon="el-icon-search" @click="initEmps"
                       :disabled="showAdvanceSearchVisible">搜索
            </el-button>
<!-- 高级搜索 两个下换线的的图标 -->
            <el-button type="primary" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">
                <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'"
                   aria-hidden="true"></i>
                高级搜索
            </el-button>
        </div>
        <div>

            <el-upload
                    style="display: inline-flex;margin-right: 8px"
                    :headers="headers"
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-success="onSuccess"
                    :on-error="onError"
                    :disbaled="importDataDisabled"
                    action="/employee/basic/import">
                <el-button type="success" :icon="importDataBtnIcon" :disabled="importDataDisabled">
                    {{importDataBtnText}}
                </el-button>
            </el-upload>
		<!-- 导入导出的数据 -->
            <el-button @click="exportData" type="success" icon="el-icon-download">
                导出数据
            </el-button>
            <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
        </div>
    </div>
</div>

===========

this.getRequest(url).then(resp => {
    this.loading = false;
    if (resp) {
        this.emps = resp.date;
    }
})

二、分页展示

<!-- 分页 样式： -->
<div style="display: flex;justify-content: flex-end">
    <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout="sizes,prev, pager, next, jumper, ->, total"
            :total="total">
    </el-pagination>
</div>
-----
sizeChange(size) {
/* 触发事件，每页的条数 */
     this.size = size;
     this.initEmps();
 },
currentChange(currentPage) {
/* 触发事件，页数改变时会触发 */
  this.currentPage = currentPage;
  this.initEmps();
--------
initEmps(type) {
 this.loading = true;
 let url = '/employee/basic/list/?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.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 += '&beginDateScope=' + this.searchValue.beginDateScope;
     }
 } else {
     url += '&name=' + this.empName;
 }d
 this.getRequest(url).then(resp => {
     this.loading = false;
     if (resp) {
         this.emps = resp.date;
         this.total = resp.total
     }
 })
}

三、员工搜索

initEmps(type) {
this.loading = true;
let url = '/employee/basic/list/?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.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 += '&beginDateScope=' + this.searchValue.beginDateScope;
   }
} else {
   url += '&name=' + this.empName;
}

================
 <el-button type="primary" icon="el-icon-search" @click="initEmps"
           :disabled="showAdvanceSearchVisible">搜索
</el-button>
<!-- 高级搜索 两个下换线的的图标 -->
<el-button type="primary" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">
    <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'"
       aria-hidden="true"></i>
    高级搜索
</el-button>

四、员工添加

 <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
exportData() {
 this.downloadRequest('/employee/basic/export');
},
showEditEmpView(data) {
 this.title = '编辑员工信息';
 this.emp = data;
 this.inputDepName = data.department.name;
 this.initPositions();
 this.dialogVisible = true;
},searchHandleNodeClick(data) {
   this.inputDepName = data.name;
   this.searchValue.departmentId = data.id;
   this.visible2 = !this.visible2;
},
handleNodeClick(data) {
   this.inputDepName = data.name
   this.emp.departmentId = data.id;
   this.visible = !this.visible;
},
showDepView2() {
   this.visible2 = !this.visible2;
},
showDepView() {
   this.visible = !this.visible;
},
getMaxWorkID() {
   this.getRequest('/employee/basic/get-max-WorkID').then(resp => {
       if (resp) {
           this.emp.workID = resp.obj;
       }
   })
},


===
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'
   }],
  edlock: [{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'}],
}
}

五、更新和删除

  <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除</el-button>
deleteEmp(data) {
this.$confirm('此操作将永久删除 ' + data.name + ', 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteRequest('/employee/basic/delete/' + data.id).then(resp => {
    if (resp) {
        this.initEmps();
    }
})
}).catch(() => {
this.$message({
    type: 'info',
    message: '已取消删除'
});
});
},

更新员工：

  <el-button @click="showEditEmpView(scope.row)" style="padding: 3px" size="mini">编辑</el-button>
showEditEmpView(data) {
      this.title = '编辑员工信息';
      this.emp = data;
      this.inputDepName = data.department.name;
      this.initPositions();
      this.dialogVisible = true;
  },

六、导入导出数据

安装npm install js-file-download

在download.js

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);
})


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');
        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);
})


function unitToString(unitArray) {
    let encodedString = String.fromCharCode.apply(null, new Uint8Array(unitArray));
    let decodedString = decodeURIComponent(escape(encodedString));
    return JSON.parse(decodedString);
}


let base = '';
export const downloadRequest = (url, params) => {
    return service({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
}


export default service;

onSuccess() {
   this.importDataBtnIcon = 'el-icon-upload2';
   this.importDataBtnText = '导入数据';
   this.importDataDisabled = false;
   this.initEmps();
},
onError() {
   this.importDataBtnIcon = 'el-icon-upload2';
   this.importDataBtnText = '导入数据';
   this.importDataDisabled = false;
},
beforeUpload() {
   this.importDataBtnIcon = 'el-icon-loading';
   this.importDataBtnText = '正在导入';
   this.importDataDisabled = true;
},
exportData() {
/* 导出 */
   this.downloadRequest('/employee/basic/export');
},