<template>
|
<div class="app-container">
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
|
<el-form-item prop="keyword">
|
<el-input
|
v-model="queryParams.keyword"
|
placeholder="工号或员工名称"
|
clearable
|
@keyup.enter.native="handleQuery"
|
/>
|
</el-form-item>
|
<el-form-item prop="postName">
|
<el-select v-model="queryParams.postName" clearable placeholder="请选择岗位" @change="handleQuery">
|
<el-option
|
v-for="(post, index) in postList"
|
:key="index"
|
:label="post.postName"
|
:value="post.postName"
|
>
|
<span style="float: left">{{ post.postName }}</span>
|
<span style="float: right; color: #8492a6; font-size: 13px">{{ post.postCode }}</span>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" size="mini" @click="handleQuery"
|
>查询</el-button
|
>
|
<el-button plain size="mini" @click="resetQuery">重置</el-button>
|
<el-button
|
type="primary"
|
plain
|
icon="el-icon-setting"
|
size="mini"
|
@click="handleAdd"
|
>检验项配置</el-button
|
>
|
<el-button
|
type="success"
|
icon="el-icon-download"
|
size="mini"
|
:loading="downloadLoading"
|
@click="downloadRecords()"
|
>导出</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<el-table
|
v-if="refreshTable"
|
v-loading="loading"
|
:data="recordList"
|
:height="tableHeight"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{
|
background: '#f8f8f9',
|
color: '#515a6e',
|
textAlign: 'center',
|
}"
|
border
|
>
|
<el-table-column type="index" label="序号" width="80"></el-table-column>
|
<el-table-column
|
prop="userName"
|
label="人员名称"
|
min-width="120"
|
width="120"
|
></el-table-column>
|
<el-table-column
|
prop="postName"
|
label="岗位"
|
min-width="120"
|
width="120"
|
></el-table-column>
|
<!--动态列-->
|
<el-table-column v-for="(item, i) in tableHeaderList" :key="i" :prop="item.id + ''" :label="item.itemName">
|
<el-table-column min-width="130" v-if="item.children" v-for="(children,k) in item.children" :key="k" :prop="children.id + ''" :label="children.itemName">
|
<template slot-scope="scope">
|
<el-select size="small" v-model="scope.row[children.id].level" clearable @change="changeSkillLevel(scope.row, children.id)">
|
<el-option v-for="(dict,j) in levelDictList" :label="dict.dictLabel" :value="dict.dictValue" :key="j"></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
<el-drawer title="检验项配置" :visible.sync="open">
|
<ItemConfig @refresh="handleQuery()"></ItemConfig>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import {transformExcel} from '@/utils/file'
|
import { listConfig } from "@/api/performance/staffCompetencyInspectItemConfig";
|
import {optionSelect} from '@/api/system/post'
|
import { getPageList,changeLevel,exportRecords } from "@/api/performance/staffCompetencyLevelEvaluateRecord";
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
import {getDicts} from "@/api/system/dict/data";
|
import ItemConfig from "./components/config.vue";
|
export default {
|
name: "Competency",
|
components: {
|
ItemConfig,
|
},
|
data() {
|
return {
|
tableHeaderList: [],
|
// 遮罩层
|
loading: false,
|
// 表格树数据
|
recordList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 是否展开，默认全部展开
|
isExpandAll: true,
|
// 重新渲染表格状态
|
refreshTable: true,
|
// 查询参数
|
queryParams: {
|
keyword: undefined,
|
postName: undefined,
|
},
|
//能力等级字典
|
levelDictList:[],
|
tableHeight:0,
|
downloadLoading:false,
|
postList:[]
|
};
|
},
|
created() {
|
this.getLevelDict()
|
this.getTableHeader();
|
this.getList();
|
this.getTableHeight()
|
this.getPostList()
|
},
|
mounted() {
|
window.addEventListener("resize", this.getTableHeight);
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.getTableHeight);
|
},
|
methods: {
|
getPostList(){
|
optionSelect().then(res=>{
|
if(res.code===200){
|
this.postList = res.data
|
}
|
}).catch(error=>{
|
console.log(error)
|
})
|
},
|
downloadRecords(){
|
this.downloadLoading = true
|
exportRecords(this.queryParams).then(res=>{
|
transformExcel(res, "中天耐丝质量部检验员能力矩阵图.xlsx")
|
this.$message.success("导出成功")
|
this.$nextTick(()=>{
|
this.downloadLoading = false
|
})
|
}).catch(error=>{
|
console.log(error)
|
})
|
},
|
getTableHeight() {
|
const innerHeight = window.innerHeight;
|
const otherHeight = 50+46+40+51;
|
this.tableHeight = innerHeight - otherHeight;
|
},
|
changeSkillLevel(row, itemId){
|
const configObj = {...row[itemId]}
|
let data = {
|
id:configObj.id,
|
level: configObj.level,
|
userId : row.userId,
|
itemConfigId : itemId
|
}
|
changeLevel(data).then(res=>{
|
if(res.code===200){
|
this.$message.success("修改成功")
|
}
|
}).catch(error=>{
|
console.log(error)
|
})
|
},
|
getLevelDict() {
|
getDicts("staff_level_type").then((response) => {
|
this.levelDictList = response.data;
|
});
|
},
|
getTableHeader() {
|
listConfig({ isEnable: true }).then((response) => {
|
this.tableHeaderList = this.handleTree(response.data, "id");
|
});
|
},
|
/** 查询列表 */
|
getList() {
|
this.loading = true
|
this.getTableHeader();
|
getPageList(this.queryParams).then(res=>{
|
if(res.code===200){
|
this.recordList = res.data
|
}
|
}).catch(error=>{
|
console.log(error)
|
}).finally(() => {
|
this.loading = false;
|
});
|
},
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.getList();
|
},
|
/** 重置按钮操作 */
|
resetQuery() {
|
this.resetForm("queryForm");
|
this.handleQuery();
|
},
|
/** 新增按钮操作 */
|
handleAdd(row) {
|
this.open = true;
|
},
|
},
|
};
|
</script>
|
