<!-- 培训记录 -->
|
<template>
|
<div>
|
<div class="flex_table">
|
<div v-if="isDepartment" style="width: 50%">
|
<TableCard :showTitle="false">
|
<template v-slot:form>
|
<div class="items_center">
|
<span>姓名</span>
|
<el-input v-model="trainingPagination.userName" class="search" clearable placeholder="请输入" size="small"></el-input>
|
<el-button size="small" type="primary" @click="getPersonnelTraining(departId)">查询</el-button>
|
</div>
|
<div>
|
<!-- <el-button :loading="outLoading" size="small" type="primary" @click="exportExcel">导出</el-button>-->
|
</div>
|
</template>
|
<template v-slot:table>
|
<ZTTable
|
:column="trainingColumn"
|
:currentChange="currentChange"
|
:height="'calc(100vh - 18em)'"
|
:highlightCurrentRow="true"
|
:table-data="trainingTableData"
|
:table-loading="trainingLoading"
|
style="padding: 0 15px;">
|
</ZTTable>
|
<div class="pagination">
|
<div></div>
|
<el-pagination
|
:page-size="trainingPagination.size"
|
:page-sizes="[10, 20, 30, 40]"
|
:total="trainingPagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@current-change="handleYearCurrentTraining"
|
@size-change="handleYearSizeChangeTraining">
|
</el-pagination>
|
</div>
|
</template>
|
</TableCard>
|
</div>
|
<div :style="`width: ${isDepartment ? '50%' : '100%'};`">
|
<TableCard :showTitle="false">
|
<template v-slot:form>
|
<div class="items_center">
|
<span>年份</span>
|
<el-date-picker
|
v-model="searchForm.trainingDate"
|
clearable
|
format="yyyy"
|
placeholder="选择年"
|
size="small"
|
style="margin: 0 10px"
|
type="year"
|
value-format="yyyy">
|
</el-date-picker>
|
<el-button size="small" type="primary" @click="queryPersonnelDetailsPage(currentChangeRow.userId)">查询</el-button>
|
<el-button size="small" type="primary" @click="openDownloadDia(currentChangeRow)">导出</el-button>
|
</div>
|
</template>
|
<template v-slot:table>
|
<ZTTable
|
:column="trainingPersonColumn"
|
:height="'calc(100vh - 18em)'"
|
:table-data="trainingPersonTableData"
|
:table-loading="trainingPersonLoading"
|
style="padding: 0 15px;">
|
</ZTTable>
|
<div class="pagination">
|
<div></div>
|
<el-pagination
|
:page-size="trainingPersonPagination.size"
|
:page-sizes="[10, 20, 30, 40]"
|
:total="trainingPersonPagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@current-change="handleYearCurrentPagination"
|
@size-change="handleYearSizeChangePagination">
|
</el-pagination>
|
</div>
|
</template>
|
</TableCard>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ZTTable from '../../caorui/ZTTable/index.vue';
|
import TableCard from '../../caorui/TableCard/index.vue';
|
import {exportPersonSupervisionRecord} from "../../../assets/api/api";
|
|
export default {
|
components: { TableCard, ZTTable },
|
props: {
|
departId: {
|
type: Number,
|
default: () => {
|
return null;
|
}
|
},
|
isDepartment: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
outLoading: false,
|
trainingForm: {},
|
trainingColumn: [
|
{
|
label: '员工编号',
|
prop: 'account',
|
width: '100'
|
}, {
|
label: '姓名',
|
prop: 'name'
|
}, {
|
label: '所在部门',
|
prop: 'departLimsName',
|
width: '150'
|
}, {
|
label: '职称',
|
prop: 'professionalTitle'
|
}, {
|
label: '最高学历',
|
prop: 'officialAcademicRedentials',
|
width: '100'
|
}, {
|
label: '入单位时间',
|
prop: 'unitTime',
|
width: '150'
|
},
|
// {
|
// fixed: 'right',
|
// dataType: 'action',
|
// width: 80,
|
// label: '操作',
|
// operation: [
|
// {
|
// name: '导出',
|
// type: 'text',
|
// clickFun: (row) => {
|
// this.openDownloadDia(row)
|
// }
|
// }
|
// ]
|
// }
|
],
|
trainingTableData: [],
|
trainingLoading: false,
|
trainingPagination: {
|
size: 20,
|
total: 0,
|
current: 1,
|
userName: null
|
},
|
searchForm: {
|
trainingDate: ''
|
},
|
trainingPersonColumn: [
|
{
|
label: '培训日期',
|
prop: 'trainingDate'
|
}, {
|
label: '培训内容',
|
prop: 'trainingContent'
|
}, {
|
label: '培训课时',
|
prop: 'educationBackground'
|
}, {
|
label: '课时',
|
prop: 'classHour'
|
}, {
|
label: '培训结果',
|
prop: 'examinationResults',
|
}, {
|
label: '备注',
|
prop: 'remarks'
|
}
|
],
|
trainingPersonTableData: [],
|
trainingPersonLoading: false,
|
trainingPersonPagination: {
|
size: 20,
|
current: 1,
|
total: 0
|
},
|
currentChangeRow: '',
|
};
|
},
|
mounted() {
|
this.getPersonnelTraining(this.departId);
|
},
|
methods: {
|
exportExcel() {
|
this.outLoading = true;
|
const name = this.isDepartment ? 'departmentId' : 'userId';
|
this.$axios.get(this.$api.personnel.personTrackRecordExport + `&${name}=` + this.departId, { responseType: 'blob' }).then(res => {
|
this.outLoading = false;
|
this.$message.success('导出成功');
|
const blob = new Blob([res], { type: 'application/octet-stream' });
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '培训记录.xlsx';
|
link.click();
|
}).catch(err => {
|
this.outLoading = false;
|
})
|
},
|
// 查询
|
refreshTable() {
|
this.getPersonnelTraining(this.departId);
|
},
|
// 培训记录导出
|
openDownloadDia (row) {
|
let date = this.searchForm.trainingDate
|
if (!date) {
|
date = this.$moment().format('YYYY')
|
}
|
console.log('date----', date);
|
this.$axios.get( this.$api.personnel.exportTrainingRecord+ '?userId=' + row.userId + '&trainingDate=' + date,{responseType: "blob"}).then(res => {
|
this.outLoading = false
|
this.$message.success('导出成功')
|
const blob = new Blob([res],{ type: 'application/msword' });
|
const url = URL.createObjectURL(blob);
|
const link = document.createElement('a');
|
link.href = url;
|
link.download = '培训记录导出' + '.docx';
|
link.click();
|
})
|
},
|
// 获取实验室-培训计划列表信息
|
getPersonnelTraining(departId) {
|
// const name = this.isDepartment ? 'departmentId' : 'userId';
|
this.$axios.get(`${this.$api.personnel.trainingSelectTrainingRecord}?departmentId=${departId}&size=${this.trainingPagination.size}¤t=${this.trainingPagination.current}&userName=${this.trainingPagination.userName}`).then(res => {
|
this.trainingTableData = res.data.records;
|
this.trainingPagination.total = res.data.total;
|
if (this.trainingTableData.length > 0) {
|
this.currentChange(this.trainingTableData[0]);
|
}
|
});
|
},
|
// 获取个人-培训计划列表信息
|
currentChange(row) {
|
this.currentChangeRow = row
|
if (row === null) {
|
row = this.trainingTableData[0]
|
}
|
this.queryPersonnelDetailsPage(row.userId)
|
},
|
queryPersonnelDetailsPage(userId) {
|
if (this.searchForm.trainingDate === null) {
|
this.searchForm.trainingDate = ''
|
}
|
this.$axios.get(`${this.$api.personnel.queryPersonnelDetails}?userId=${userId}&size=${this.trainingPersonPagination.size}¤t=${this.trainingPersonPagination.current}&trainingDate=${this.searchForm.trainingDate}`).then(res => {
|
this.trainingPersonTableData = res.data.records;
|
this.trainingPersonPagination.total = res.data.total;
|
});
|
},
|
// 分页
|
handleYearCurrentTraining(page) {
|
this.trainingPagination.curent = page;
|
this.getPersonnelTraining(this.departId);
|
},
|
handleYearSizeChangeTraining(size) {
|
this.trainingPagination.size = size;
|
this.getPersonnelTraining(this.departId);
|
},
|
// 分页
|
handleYearCurrentPagination(page) {
|
this.trainingPersonPagination.curent = page;
|
this.queryPersonnelDetailsPage(this.currentChangeRow.userId);
|
},
|
handleYearSizeChangePagination(size) {
|
this.trainingPersonPagination.size = size;
|
this.queryPersonnelDetailsPage(this.currentChangeRow.userId);
|
}
|
},
|
watch: {
|
departId: {
|
handler(newId, oldId) {
|
if (this.isDepartment) {
|
this.getPersonnelTraining(newId);
|
} else {
|
this.queryPersonnelDetailsPage(newId)
|
}
|
}
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
>>> .el-form-item {
|
margin-bottom: 13px;
|
}
|
|
.flex_table {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 10px;
|
}
|
|
.items_center {
|
display: flex;
|
align-items: center;
|
}
|
|
.search {
|
width: 150px;
|
padding: 0 6px;
|
}
|
</style>
|
