290 lines
8.1 KiB
Vue
290 lines
8.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="conetentBox">
|
|||
|
|
<div class="flex-row jcsb aic userBox">
|
|||
|
|
<div>
|
|||
|
|
<el-form
|
|||
|
|
:inline="true"
|
|||
|
|
:model="searchForm"
|
|||
|
|
class="demo-form-inline"
|
|||
|
|
size="small"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="考核人员" class="form-item">
|
|||
|
|
<el-input
|
|||
|
|
v-model="searchForm.userName"
|
|||
|
|
placeholder="考核人员"
|
|||
|
|
readonly
|
|||
|
|
@click.native="openUserSelectDialog"
|
|||
|
|
><el-button slot="append" icon="el-icon-s-custom"></el-button
|
|||
|
|
></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="考核任务" class="form-item">
|
|||
|
|
<el-select v-model="searchForm.taskId" placeholder="请选择">
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in taskList"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
>
|
|||
|
|
</el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<div>考核评分：</div>
|
|||
|
|
</div>
|
|||
|
|
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|||
|
|
<el-tab-pane label="组长评估" name="first">
|
|||
|
|
<div
|
|||
|
|
v-for="(table, index) in tableData"
|
|||
|
|
:key="index"
|
|||
|
|
style="margin-bottom: 20px"
|
|||
|
|
>
|
|||
|
|
<div class="userBox">表格 {{ index + 1 }}</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"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="评分" prop="score" width="300">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div style="width: 80%; position: relative">
|
|||
|
|
<div>
|
|||
|
|
<el-slider
|
|||
|
|
v-model="scope.row.score"
|
|||
|
|
:min="0"
|
|||
|
|
:max="10"
|
|||
|
|
@change="updateScore(scope.row)"
|
|||
|
|
></el-slider>
|
|||
|
|
</div>
|
|||
|
|
<div class="statusText">未打分</div>
|
|||
|
|
|
|||
|
|
<div class="flex-row jcsb" style="margin-left: 10px">
|
|||
|
|
<div>0</div>
|
|||
|
|
<div class="scoreText">{{ scope.row.score }}分</div>
|
|||
|
|
<div>10</div>
|
|||
|
|
</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="managerText"
|
|||
|
|
readonly
|
|||
|
|
>
|
|||
|
|
</el-input>
|
|||
|
|
</div>
|
|||
|
|
</div></div
|
|||
|
|
></el-tab-pane>
|
|||
|
|
<el-tab-pane label="个人自评" name="second">
|
|||
|
|
<div
|
|||
|
|
v-for="(table, index) in tableData"
|
|||
|
|
:key="index"
|
|||
|
|
style="margin-bottom: 20px"
|
|||
|
|
>
|
|||
|
|
<div class="userBox">表格 {{ index + 1 }}</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"
|
|||
|
|
>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="评分" prop="score" width="300">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div style="width: 80%; position: relative">
|
|||
|
|
<div>
|
|||
|
|
<el-slider
|
|||
|
|
v-model="scope.row.score"
|
|||
|
|
:min="0"
|
|||
|
|
:max="10"
|
|||
|
|
@change="updateScore(scope.row)"
|
|||
|
|
></el-slider>
|
|||
|
|
</div>
|
|||
|
|
<div class="statusText">未打分</div>
|
|||
|
|
|
|||
|
|
<div class="flex-row jcsb" style="margin-left: 10px">
|
|||
|
|
<div>0</div>
|
|||
|
|
<div class="scoreText">{{ scope.row.score }}分</div>
|
|||
|
|
<div>10</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="自评总结" prop="score" width="300">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<div>
|
|||
|
|
<el-button
|
|||
|
|
@click="handleEdit(scope.row)"
|
|||
|
|
type="text"
|
|||
|
|
size="mini"
|
|||
|
|
:class="{ hasEdit: !scope.row.remark }"
|
|||
|
|
>{{ scope.row.remark ? "查看" : "未填写" }}</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</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>
|
|||
|
|
<SelectUser
|
|||
|
|
:dialogVisible="userSelectDialogVisible"
|
|||
|
|
:currentSelectedUser="currentSelectedUser"
|
|||
|
|
:showSelection="true"
|
|||
|
|
:highligt="false"
|
|||
|
|
@confirm="handleUserConfirm"
|
|||
|
|
@close="handleUserClose"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import SelectUser from "@/components/SelectUser.vue";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
SelectUser,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
taskId: "",
|
|||
|
|
isNormal: false,
|
|||
|
|
dialogVisible: false,
|
|||
|
|
saveStatus: "",
|
|||
|
|
remark: "",
|
|||
|
|
headers: [
|
|||
|
|
{ label: "考核项", prop: "name", width: 300 },
|
|||
|
|
{ label: "评分标准", prop: "description" },
|
|||
|
|
],
|
|||
|
|
// 二维数组，每个子数组代表一个表格的数据
|
|||
|
|
tableData: [
|
|||
|
|
[
|
|||
|
|
{ name: "项目1", description: "描述1", score: 0, remark: "ss" },
|
|||
|
|
{ name: "项目2", description: "描述2", score: 0, remark: "" },
|
|||
|
|
],
|
|||
|
|
[
|
|||
|
|
{ name: "项目3", description: "描述3", score: 0, remark: "" },
|
|||
|
|
{ name: "项目4", description: "描述4", score: 0, remark: "ss" },
|
|||
|
|
],
|
|||
|
|
// 可以根据需要添加更多表格数据
|
|||
|
|
],
|
|||
|
|
taskList: [{ label: "任务1", value: 1 }],
|
|||
|
|
managerText: "",
|
|||
|
|
searchForm: {
|
|||
|
|
userName: "",
|
|||
|
|
userId: "",
|
|||
|
|
taskId: "",
|
|||
|
|
},
|
|||
|
|
activeName: "first",
|
|||
|
|
userSelectDialogVisible: false,
|
|||
|
|
currentSelectedUser: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
updateScore(row) {
|
|||
|
|
// 这里可以添加更新评分后的逻辑
|
|||
|
|
console.log(`项目: ${row.name}, 评分: ${row.score}`);
|
|||
|
|
},
|
|||
|
|
handleEdit(row) {
|
|||
|
|
this.dialogVisible = true;
|
|||
|
|
this.remark = row.remark;
|
|||
|
|
},
|
|||
|
|
openUserSelectDialog() {
|
|||
|
|
this.userSelectDialogVisible = true;
|
|||
|
|
},
|
|||
|
|
handleUserConfirm(data) {
|
|||
|
|
this.searchForm.userName = data.map((ele) => ele.nickName);
|
|||
|
|
this.searchForm.userId = data.map((ele) => ele.userId);
|
|||
|
|
},
|
|||
|
|
handleUserClose() {
|
|||
|
|
this.userSelectDialogVisible = false;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.conetentBox {
|
|||
|
|
padding: 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: 20px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
margin: 10px !important;
|
|||
|
|
/* width: 95%; */
|
|||
|
|
}
|
|||
|
|
::v-deep .el-slider__bar {
|
|||
|
|
height: 20px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
background-color: #ff5722;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-slider__button {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.scoreText {
|
|||
|
|
color: #1686d8;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-table th {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-table .cell {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.statusText {
|
|||
|
|
color: #ff5722;
|
|||
|
|
position: absolute;
|
|||
|
|
right: -58px;
|
|||
|
|
top: 10px;
|
|||
|
|
}
|
|||
|
|
.hasEdit {
|
|||
|
|
color: #ff5722;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-dialog {
|
|||
|
|
margin-top: 15% !important;
|
|||
|
|
}
|
|||
|
|
</style>
|