512 lines
16 KiB
Vue
512 lines
16 KiB
Vue
<template>
|
|
<div class="conetentBox">
|
|
<div class="titleBox flex-row aic jcsb">
|
|
<div class="flex-row aic">
|
|
<div class="block"></div>
|
|
评分详情
|
|
</div>
|
|
</div>
|
|
<div class="flex-row jcsb aic userBox">
|
|
<div>
|
|
<el-form :inline="true" class="demo-form-inline" size="small">
|
|
<el-form-item label="人员姓名" class="form-item">
|
|
<el-select v-model="examineId" placeholder="请选择" @change="userChange" style="width: 300px">
|
|
<el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="任务名称" class="form-item">
|
|
<el-select v-model="examineTaskId" placeholder="请选择" @change="getUserList" style="width: 300px">
|
|
<el-option v-for="item in taskList" :key="item.id" :label="item.taskName" :value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<div class="flex-row jcsb aic userBox headerBox">
|
|
<div class="flex-row aic" style="width: 200px">
|
|
<i class="el-icon-user-solid" style="color: #4096ff; font-size: 24px; margin-right: 5px"></i>{{
|
|
(userList.find((ele) => ele.id == examineId) || {}).userName}}
|
|
</div>
|
|
<div class="totalBox aic">
|
|
<div>考核评分：</div>
|
|
<div class="scoreTotal">{{ score }}</div>
|
|
</div>
|
|
</div>
|
|
<el-tabs v-model="activeName">
|
|
<el-tab-pane label="组长评估" name="first">
|
|
<div class="tableBox">
|
|
<div class="tableRow" v-for="(table, index) in tableData1" :key="index" style="margin-bottom: 20px">
|
|
<div class="userBox">{{ table[0].reviewCategory }}</div>
|
|
<el-table :data="table" style="width: 100%">
|
|
<el-table-column v-for="(header, hIndex) in headers" :key="hIndex" :label="header.label"
|
|
:prop="header.prop" :width="header.width" :minWidth="header.minWidth">
|
|
</el-table-column>
|
|
<el-table-column class-name="editCell" label="员工自评" prop="score"
|
|
v-if="examineTask.templateId && table[0].reviewCategory == '发展与协作' && examineTask.templateType != 0"
|
|
min-width="220">
|
|
<template slot-scope="scope">
|
|
<div>
|
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="0/300" v-model="scope.row.remark"
|
|
readonly maxlength="300" show-word-limit>
|
|
</el-input>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="评分" prop="score" :minWidth="420" class-name="sorceTableCell">
|
|
<template slot-scope="scope">
|
|
<div style="width: 88%; position: relative">
|
|
<div>
|
|
<div class="flex-row jcsb" style="
|
|
margin-left: 10px;
|
|
width: 90%;
|
|
color: #999;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
">
|
|
<div>0</div>
|
|
<div v-show="scope.row.score != 10">10</div>
|
|
</div>
|
|
<div class="scoreText aic" v-show="scope.row.score != 0" :style="{
|
|
left: scope.row.score * 9 - 5 + '%',
|
|
}">
|
|
<img src="@/assets/task/score.png" :style="{
|
|
height: '28px',
|
|
width: '34px',
|
|
zIndex: 0,
|
|
position: 'absolute',
|
|
top: '0',
|
|
}" alt="" />
|
|
<div :style="{
|
|
zIndex: 10,
|
|
paddingLeft: scope.row.score != 10 ? '13px' : '9px',
|
|
}">
|
|
{{ scope.row.score }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-for="item in scope.row.score == 0
|
|
? 0
|
|
: scope.row.score - 1" :key="item" class="stepBox" :style="{
|
|
left: item * 9 + 1.5 + '%',
|
|
}"></div>
|
|
<el-slider v-model="scope.row.score" :min="0" :max="10" :disabled="true" style="width: 90%"
|
|
show-stops show-tooltip></el-slider>
|
|
</div>
|
|
<div class="statusText" v-show="scope.row.score == 0">
|
|
暂未打分
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<div class="userBox">总体评价</div>
|
|
<div>
|
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="0/300" v-model="judgeContent"
|
|
:readonly="true" maxlength="300" show-word-limit>
|
|
</el-input>
|
|
</div>
|
|
<div style="margin-top: 20px;font-weight: bold;">组长：{{ manageUserName }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="个人自评" name="second">
|
|
<div class="tableBox">
|
|
<div class="tableRow" v-for="(table, index) in tableData2" :key="index" style="margin-bottom: 20px">
|
|
<div class="userBox">{{ table[0].reviewCategory }}</div>
|
|
<el-table :data="table" style="width: 100%">
|
|
<el-table-column v-for="(header, hIndex) in headers" :key="hIndex" :label="header.label"
|
|
:prop="header.prop" :width="header.width" :minWidth="header.minWidth">
|
|
</el-table-column>
|
|
|
|
<el-table-column label="评分" prop="score" :minWidth="320" class-name="sorceTableCell"
|
|
v-if="table[0].reviewCategory != '发展与协作'">
|
|
<template slot-scope="scope">
|
|
<div style="width: 88%; position: relative">
|
|
<div>
|
|
<div class="flex-row jcsb" style="
|
|
margin-left: 10px;
|
|
width: 90%;
|
|
color: #999;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
">
|
|
<div>0</div>
|
|
<div v-show="scope.row.score != 10">10</div>
|
|
</div>
|
|
<div class="scoreText aic" v-show="scope.row.score != 0" :style="{
|
|
left: scope.row.score * 9 - 5 + '%',
|
|
}">
|
|
<img src="@/assets/task/score.png" :style="{
|
|
height: '28px',
|
|
width: '34px',
|
|
zIndex: 0,
|
|
position: 'absolute',
|
|
top: '0',
|
|
}" alt="" />
|
|
<div :style="{
|
|
zIndex: 10,
|
|
paddingLeft: scope.row.score != 10 ? '13px' : '9px',
|
|
}">
|
|
{{ scope.row.score }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-for="item in scope.row.score == 0
|
|
? 0
|
|
: scope.row.score - 1" :key="item" class="stepBox" :style="{
|
|
left: item * 9 + 1.5 + '%',
|
|
}"></div>
|
|
<el-slider v-model="scope.row.score" :min="0" :max="10" @change="updateScore(scope.row)"
|
|
:disabled="true" style="width: 90%" show-stops show-tooltip></el-slider>
|
|
</div>
|
|
<div class="statusText" v-show="scope.row.score == 0">
|
|
暂未打分
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="自评总结" prop="score" width="150"
|
|
v-if="(examineTask.templateId && table[0].reviewCategory == '发展与协作') || !examineTask.templateId">
|
|
<template slot-scope="scope">
|
|
<div>
|
|
<el-button @click="handleEdit(scope.row)" type="text" size="mini"
|
|
:class="{ hasEdit: !scope.row.remark }" style="font-weight: 600">{{ scope.row.remark ? "查看" :
|
|
"暂未评价" }}</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div v-if="examineTask.templateType != 0 && table[0].reviewCategory != '发展与协作'" style="margin-top: 10px;">
|
|
<div class="userBox">评价</div>
|
|
<div>
|
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="0/300" v-model="table[0].remarkCate"
|
|
readonly maxlength="300" show-word-limit>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<div class="userBox">总体评价</div>
|
|
<div>
|
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="0/300" v-model="selfJudgeContent"
|
|
:readonly="true" maxlength="300" show-word-limit>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<el-dialog title="自评总结" :visible.sync="dialogVisible" width="30%">
|
|
<div>
|
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="0/200" v-model="remark" readonly>
|
|
</el-input>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">关闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { taskApi } from "@/utils/api";
|
|
export default {
|
|
data() {
|
|
return {
|
|
examineTaskId: "",
|
|
examineId: "",
|
|
userList: [],
|
|
dialogVisible: false,
|
|
remark: "",
|
|
headers: [
|
|
{ label: "考核项", prop: "reviewItem", minWidth: 200 },
|
|
{
|
|
label: "评分标准",
|
|
prop: "remarks",
|
|
minWidth: 300,
|
|
},
|
|
],
|
|
// 二维数组，每个子数组代表一个表格的数据
|
|
tableData1: [],
|
|
tableData2: [],
|
|
taskList: [],
|
|
judgeContent: "",
|
|
selfJudgeContent: "",
|
|
score: "",
|
|
activeName: "first",
|
|
manageUserName: "",
|
|
examineTask: {},
|
|
examineRemark: {}
|
|
};
|
|
},
|
|
methods: {
|
|
handleEdit(row) {
|
|
this.dialogVisible = true;
|
|
this.remark = row.remark;
|
|
},
|
|
|
|
getTaskList(first) {
|
|
taskApi
|
|
.getTaskList({
|
|
pageNum: 1,
|
|
pageSize: 100000,
|
|
})
|
|
.then((res) => {
|
|
this.taskList = res.rows;
|
|
this.$nextTick(() => {
|
|
this.examineTaskId = Number(this.$route.query.taskId);
|
|
this.getUserList(first);
|
|
});
|
|
});
|
|
},
|
|
getUserList(first) {
|
|
if (!this.examineTaskId) return;
|
|
taskApi
|
|
.getTaskUserList({
|
|
taskId: this.examineTaskId,
|
|
pageNum: 1,
|
|
pageSize: 100000,
|
|
})
|
|
.then((res) => {
|
|
this.userList = res.rows;
|
|
this.$nextTick(() => {
|
|
if (first !== 1) this.examineId = this.userList[0].id;
|
|
else this.examineId = Number(this.$route.query.examineId);
|
|
|
|
this.getSocreDetail(0);
|
|
this.getSocreDetail(1);
|
|
});
|
|
});
|
|
},
|
|
userChange() {
|
|
this.getSocreDetail(0);
|
|
this.getSocreDetail(1);
|
|
},
|
|
// 获取评分详情
|
|
getSocreDetail(type) {
|
|
let param = {
|
|
examineTaskId: this.examineTaskId,
|
|
reviewType: type,
|
|
examineId: this.examineId,
|
|
};
|
|
taskApi.getTaskScoreDetail(param).then((res) => {
|
|
this.examineRemark = res.data.remark
|
|
|
|
let objData = {};
|
|
res.data.examineConfigDetailVoList.forEach((ele) => {
|
|
if (!objData[ele.reviewCategory]) objData[ele.reviewCategory] = [];
|
|
objData[ele.reviewCategory].push(ele);
|
|
});
|
|
if (type == 0) this.tableData1 = Object.values(objData);
|
|
else this.tableData2 = Object.values(objData).map((ele, index) => {
|
|
ele[0].remarkCate = this.examineRemark[index]?.remark
|
|
return ele
|
|
});;
|
|
this.judgeContent = res.data.examineUser.judgeContent;
|
|
this.selfJudgeContent = res.data.examineUser.judgeContent;
|
|
|
|
|
|
this.manageUserName = res.data.examineUser.manageUserName;
|
|
this.examineTask = res.data.examineTask
|
|
if (res.data.examineUser.score) {
|
|
this.score = res.data.examineUser.score;
|
|
} else if (res.data.examineUser.manageScore) {
|
|
this.score = res.data.examineUser.manageScore;
|
|
} else {
|
|
this.score = res.data.examineUser.selfScore;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
this.getTaskList(1);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.conetentBox {
|
|
padding: 40px 30px 30px;
|
|
background-color: #fff;
|
|
height: 90vh;
|
|
/* 设置整体高度 */
|
|
overflow: auto;
|
|
}
|
|
|
|
.el-table {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.userBox {
|
|
margin: 0 0 20px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
::v-deep .el-slider__runway {
|
|
height: 14px;
|
|
border-radius: 10px;
|
|
margin: 10px !important;
|
|
/* width: 95%; */
|
|
}
|
|
|
|
::v-deep .el-slider__runway.disabled .el-slider__bar {
|
|
height: 14px;
|
|
border-radius: 10px;
|
|
|
|
background-color: #ff5722;
|
|
}
|
|
|
|
::v-deep .el-slider__stop {
|
|
height: 14px;
|
|
border-radius: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
::v-deep .el-slider__bar {
|
|
height: 14px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(to right, #ffb144, #ff7d00);
|
|
}
|
|
|
|
::v-deep .el-slider__button {
|
|
display: none;
|
|
}
|
|
|
|
.scoreText {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 2px;
|
|
font-weight: 500;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
::v-deep .el-table th {
|
|
text-align: left;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
::v-deep .el-table .cell {
|
|
text-align: left;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.statusText {
|
|
color: #ff7d00;
|
|
position: absolute;
|
|
right: -50px;
|
|
top: 26px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hasEdit {
|
|
color: #999999;
|
|
}
|
|
|
|
::v-deep .el-dialog {
|
|
margin-top: 15% !important;
|
|
}
|
|
|
|
.tableBox {
|
|
height: 75%;
|
|
overflow: auto;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.tableBox ::v-deep .el-table {
|
|
border-left: 1px solid #eeeeee;
|
|
border-right: 1px solid #eeeeee;
|
|
}
|
|
|
|
.tableRow {
|
|
padding: 20px;
|
|
box-shadow: 0 0 20px #0000000f;
|
|
}
|
|
|
|
.titleBox {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.headerBox {
|
|
padding: 20px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 2px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.block {
|
|
width: 4px;
|
|
height: 24px;
|
|
background-color: #4096ff;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.stepBox {
|
|
position: absolute;
|
|
top: 33px;
|
|
height: 14px;
|
|
width: 3px;
|
|
background-color: #fff;
|
|
z-index: 100;
|
|
}
|
|
|
|
.totalBox {
|
|
width: 180px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
}
|
|
|
|
.scoreTotal {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #ff7d00;
|
|
}
|
|
|
|
::v-deep .sorceTableCell .cell {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
::v-deep .el-table__body .el-table__cell {
|
|
padding: 20px 40px;
|
|
}
|
|
|
|
::v-deep .el-table__header .el-table__cell {
|
|
padding: 14px 30px;
|
|
}
|
|
|
|
::v-deep .el-tabs__item.is-active {
|
|
color: #4096ff;
|
|
}
|
|
|
|
::v-deep .el-tabs__item {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #999999;
|
|
}
|
|
|
|
::v-deep .el-tabs__active-bar {
|
|
height: 3px;
|
|
width: 32px !important;
|
|
left: 20px;
|
|
}
|
|
</style>
|