566 lines
16 KiB
Vue
566 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
|
|
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"
|
|
>
|
|
<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">
|
|
<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>
|
|
<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: "",
|
|
score: "",
|
|
activeName: "first",
|
|
manageUserName: "",
|
|
};
|
|
},
|
|
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) => {
|
|
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);
|
|
this.judgeContent = res.data.examineUser.judgeContent;
|
|
|
|
this.manageUserName = res.data.examineUser.manageUserName;
|
|
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>
|