wulin/management_UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
xiongchengqiang 2020-12-01 17:47:44 +08:00
parent 6c0aab6d87
commit 8ba490fb4d
2 changed files with 608 additions and 501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

550
src/views/kpi/assessment/performance/components/table copy.vue
View File

@ -1,118 +1,182 @@
<template> <template>
<div class='table'> <div class='table'>
<div v-if="obj.recortModelDtos.length !== 0" class="table-list"> <div v-if="obj.recortModelDtos.length !== 0"
<div class="table-header"> class="table-list">
<div class="table-left name">维度</div> <div class="table-header">
<div class="table-content-right-item" style="flex:1;"> <div class="table-left name">维度</div>
<div class="table-header-flex names ">名称</div> <div class="table-content-right-item"
<div class="table-header-flex pre kaohe">考核标准</div> style="flex:1;">
<div class="table-header-flex jieguo" v-if="tableInfo.result || tableAuth.showResult">结果值</div> <div class="table-header-flex names ">名称</div>
<div class="table-header-flex quanzhomng" style="flex:none;">权重({{Math.round((obj.weight * 100)*1000)/1000}}%)</div> <div class="table-header-flex pre kaohe">考核标准</div>
<div class="table-header-flex pingfen" v-if="tableInfo.score || tableAuth.showScore">上级评分</div> <div class="table-header-flex jieguo"
<div class="table-header-flex defen" style="flex:none;" v-if="tableInfo.score || tableAuth.showScore">得分</div> v-if="tableInfo.result || tableAuth.showResult">结果值</div>
<div class="table-header-flex pingfen" v-if="tableInfo.score || tableAuth.showScore">评分说明</div> <div class="table-header-flex quanzhomng"
</div> style="flex:none;">权重({{Math.round((obj.weight * 100)*1000)/1000}}%)</div>
</div> <div class="table-header-flex pingfen"
v-if="tableInfo.score || tableAuth.showScore">上级评分</div>
<div class="table-header-flex defen"
style="flex:none;"
v-if="tableInfo.score || tableAuth.showScore">得分</div>
<div class="table-header-flex pingfen"
v-if="tableInfo.score || tableAuth.showScore">评分说明</div>
</div>
</div>
<div v-for="(item,index) in ((tableInfo.score || tableAuth.showScore)?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1))" :key="index" class="table-content"> <div v-for="(item,index) in ((tableInfo.score || tableAuth.showScore)?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1))"
<div class="table-content-left table-left name"> :key="index"
<div v-for="(i,indexs) in item.name" :key="indexs"> class="table-content">
{{i}} <div class="table-content-left table-left name">
</div> <div v-for="(i,indexs) in item.name"
:key="indexs">
{{i}}
</div>
</div>
<div class="table-content-right">
<div v-for="(child) in item.detailDtos"
:key="child.id"
class="table-content-right-item">
<div class="names">
<span> {{child.target || ''}}</span>
</div> </div>
<div class="table-content-right"> <div class="kaohe pre">
<div v-for="(child) in item.detailDtos" :key="child.id" class="table-content-right-item"> <pre>
<div class="names">
<span> {{child.target || ''}}</span>
</div>
<div class="kaohe pre">
<pre >
{{child.keyResult || ''}} {{child.keyResult || ''}}
</pre> </pre>
</div> </div>
<div class='pre jieguo' v-if="tableInfo.result || tableAuth.showResult"> <div class='pre jieguo'
<el-input v-if="tableInfo.result" type="textarea" :rows="12" size="mini" placeholder="请输入内容" v-model="child.checkResult" clearable></el-input> v-if="tableInfo.result || tableAuth.showResult">
<pre v-else>{{child.checkResult || '--'}}</pre> <el-input v-if="tableInfo.result"
</div> type="textarea"
<div class="quanzhomng" style="flex:none;"> :rows="12"
{{( Math.round((child.checkWeight * 100) * 1000) / 1000 )}}% size="mini"
</div> placeholder="请输入内容"
<div v-if="tableInfo.score || tableAuth.showScore" class="pingfen" > v-model="child.checkResult"
<!-- gradeGroupId=== 1 下拉 --> clearable></el-input>
<el-select v-if="tableInfo.score && obj.gradeGroupId===1" style="width:115px;" size="mini" v-model="child.scoreDtos[child.scoreDtos.length-1].acquireScore"> <pre v-else>{{child.checkResult || '--'}}</pre>
<el-option </div>
v-for="item in scoreList" <div class="quanzhomng"
:key="item.id" style="flex:none;">
:label="item.name" {{( Math.round((child.checkWeight * 100) * 1000) / 1000 )}}%
:value="item.score"> </div>
</el-option> <div v-if="tableInfo.score || tableAuth.showScore"
</el-select> class="pingfen">
<el-input v-if="tableInfo.score && obj.gradeGroupId===2" style="width:115px;" size="mini" placeholder="请输入评分值" v-model="child.scoreDtos[child.scoreDtos.length-1].acquireScore" clearable></el-input> <!-- gradeGroupId=== 1 下拉 -->
<span v-if="!tableInfo.score">{{handleScore(child.scoreDtos[child.scoreDtos.length-1].acquireScore)}}</span> <el-select v-if="tableInfo.score && obj.gradeGroupId===1"
</div> style="width:115px;"
<div class="defen" style="flex:none;" v-if="tableInfo.score || tableAuth.showScore"> size="mini"
<span>{{child.scoreDtos[child.scoreDtos.length-1].acquireScore || '--'}}</span> v-model="child.scoreDtos[child.scoreDtos.length-1].acquireScore">
</div> <el-option v-for="item in scoreList"
<div class='pre pingfen' v-if="tableInfo.score || tableAuth.showScore"> :key="item.id"
<el-input v-if="tableInfo.score" style="width:200px;" :rows="12" size="mini" type="textarea" placeholder="请输入内容" v-model="child.scoreComment" clearable></el-input> :label="item.name"
<span v-else>{{child.scoreComment || '--'}}</span> :value="item.score">
</div> </el-option>
</el-select>
<el-input v-if="tableInfo.score && obj.gradeGroupId===2"
style="width:115px;"
size="mini"
placeholder="请输入评分值"
v-model="child.scoreDtos[child.scoreDtos.length-1].acquireScore"
clearable></el-input>
<span v-if="!tableInfo.score">{{handleScore(child.scoreDtos[child.scoreDtos.length-1].acquireScore)}}</span>
</div>
<div class="defen"
style="flex:none;"
v-if="tableInfo.score || tableAuth.showScore">
<span>{{child.scoreDtos[child.scoreDtos.length-1].acquireScore || '--'}}</span>
</div>
<div class='pre pingfen'
v-if="tableInfo.score || tableAuth.showScore">
<el-input v-if="tableInfo.score"
style="width:200px;"
:rows="12"
size="mini"
type="textarea"
placeholder="请输入内容"
v-model="child.scoreComment"
clearable></el-input>
<span v-else>{{child.scoreComment || '--'}}</span>
</div>
</div> </div>
<div v-if="item.detailDtos.length ===0 && item.name !=='总分'" class="table-content-right-item"> <div v-if="item.detailDtos.length ===0 && item.name !=='总分'"
<div class="names"> class="table-content-right-item">
</div> <div class="names">
<div class="kaohe pre"> </div>
</div> <div class="kaohe pre">
<div class='jieguo' v-if="tableInfo.result || tableAuth.showResult"> </div>
</div> <div class='jieguo'
<div class="quanzhomng " style="flex:none;"> v-if="tableInfo.result || tableAuth.showResult">
</div> </div>
<div class='pingfen' v-if="tableInfo.score || tableAuth.showScore"> <div class="quanzhomng "
style="flex:none;">
</div>
<div class='pingfen'
v-if="tableInfo.score || tableAuth.showScore">
</div> </div>
<div class="defen" style="flex:none;" v-if="tableInfo.score || tableAuth.showScore"> <div class="defen"
style="flex:none;"
v-if="tableInfo.score || tableAuth.showScore">
</div> </div>
<div class='pingfen' v-if="tableInfo.score || tableAuth.showScore"> <div class='pingfen'
</div> v-if="tableInfo.score || tableAuth.showScore">
</div> </div>
<div v-if="item.name==='总分'" class="table-content-right-item"> </div>
<div class="names"> <div v-if="item.name==='总分'"
</div> class="table-content-right-item">
<div class="kaohe pre"> <div class="names">
</div> </div>
<div class='jieguo' v-if="tableInfo.result || tableAuth.showResult"> <div class="kaohe pre">
</div> </div>
<div class="quanzhomng pingfen" style="flex:none;"> <div class='jieguo'
</div> v-if="tableInfo.result || tableAuth.showResult">
<div class="pingfen" v-if="tableInfo.score || tableAuth.showScore"> </div>
{{score.scoreLevel}} <div class="quanzhomng pingfen"
</div> style="flex:none;">
<div class="defen" style="flex:none;" v-if="tableInfo.score || tableAuth.showScore"> </div>
{{score.lastScore}} <div class="pingfen"
</div> v-if="tableInfo.score || tableAuth.showScore">
<div class="pingfen" v-if="tableInfo.score || tableAuth.showScore"> {{score.scoreLevel}}
</div> </div>
</div> <div class="defen"
style="flex:none;"
v-if="tableInfo.score || tableAuth.showScore">
{{score.lastScore}}
</div>
<div class="pingfen"
v-if="tableInfo.score || tableAuth.showScore">
</div> </div>
</div> </div>
</div> </div>
<div v-else class='nojixiao'> </div>
<img src="./imgs/nojixiao.png" alt="">
<div class="commonFont">
未制定绩效目标，暂无数据
</div>
</div>
<div v-if="tableInfo.result || tableInfo.score" class="table-bottom">
<div class="table-bottom-content">
<el-button size='small' @click="handleCancelResult" plain>取消</el-button>
<el-button size='small' :loading='loadingZan' @click="handleSaveDetail()" plain>暂存</el-button>
<el-button size='small' :loading='loadingTi' @click="handleGetNext" type="primary" >{{tableInfo.result?'提交结果值':'提交评分'}}</el-button>
</div>
</div>
</div> </div>
<div v-else
class='nojixiao'>
<img src="./imgs/nojixiao.png"
alt="">
<div class="commonFont">
未制定绩效目标，暂无数据
</div>
</div>
<div v-if="tableInfo.result || tableInfo.score"
class="table-bottom">
<div class="table-bottom-content">
<el-button size='small'
@click="handleCancelResult"
plain>取消</el-button>
<el-button size='small'
:loading='loadingZan'
@click="handleSaveDetail()"
plain>暂存</el-button>
<el-button size='small'
:loading='loadingTi'
@click="handleGetNext"
type="primary">{{tableInfo.result?'提交结果值':'提交评分'}}</el-button>
</div>
</div>
</div>
</template> </template>
<script> <script>
import { apiSaveDetail, apiGet375, apiSaveapproval } from '@/api/assessment' import { apiSaveDetail, apiGet375, apiSaveapproval } from '@/api/assessment'
@ -201,8 +265,8 @@ export default {
this.$message.error(res1.msg) this.$message.error(res1.msg)
return return
} }
const obj = {status: 1, menuName: this.tableInfo.result ? '提交了结果值' : '提交了评分'} const obj = { status: 1, menuName: this.tableInfo.result ? '提交了结果值' : '提交了评分' }
const params = Object.assign({}, {resultRecordId: this.$route.query.id || this.resultRecordId || ''}, obj) const params = Object.assign({}, { resultRecordId: this.$route.query.id || this.resultRecordId || '' }, obj)
let res = await apiSaveapproval(params) let res = await apiSaveapproval(params)
this.loadingTi = false this.loadingTi = false
if (res.code !== 200) { if (res.code !== 200) {
@ -215,7 +279,7 @@ export default {
history.go(0) history.go(0)
}, },
handleCancelResult () { handleCancelResult () {
this.$emit('update:tableInfo', Object.assign({}, this.tableInfo, {result: false, score: false})) this.$emit('update:tableInfo', Object.assign({}, this.tableInfo, { result: false, score: false }))
}, },
async handleGrt375 () { async handleGrt375 () {
let res = await apiGet375() let res = await apiGet375()
@ -243,27 +307,27 @@ export default {
} }
</script> </script>
<style lang='less' scoped> <style lang='less' scoped>
.pingfen{ .pingfen {
width: 120px ; width: 120px;
.center(); .center();
} }
.names{ .names {
line-height: 20px; line-height: 20px;
width: 200px !important; width: 200px !important;
flex: none !important; flex: none !important;
.center(); .center();
} }
.jieguo{ .jieguo {
width: 260px !important; width: 260px !important;
flex: none !important; flex: none !important;
.center() .center();
} }
.name{ .name {
.center(); .center();
flex: none !important; flex: none !important;
width: 60px !important; width: 60px !important;
} }
.kaohe{ .kaohe {
width: 260px !important; width: 260px !important;
display: block; display: block;
flex: 1 1 auto; flex: 1 1 auto;
@ -271,200 +335,198 @@ export default {
align-items: center; align-items: center;
// flex: none; // flex: none;
} }
.nojixiao{ .nojixiao {
text-align: center; text-align: center;
} }
.listNone{ .listNone {
height: 100px; height: 100px;
text-align: center; text-align: center;
line-height: 100px; line-height: 100px;
border-bottom: 1px solid @borderColor; border-bottom: 1px solid @borderColor;
} }
.table-list{ .table-list {
overflow: auto; overflow: auto;
color: #52575b; color: #52575b;
font-size: 12px; font-size: 12px;
border: 1px solid @borderColor; border: 1px solid @borderColor;
border-bottom: none; border-bottom: none;
} }
.table-header{ .table-header {
display: flex; display: flex;
// justify-content: space-between; // justify-content: space-between;
// border: 1px solid @borderColor; // border: 1px solid @borderColor;
>div{ > div {
background: #f5f5f5; background: #f5f5f5;
// padding: 10px; // padding: 10px;
border-bottom: 1px solid @borderColor;; border-bottom: 1px solid @borderColor;
border-right: 1px solid @borderColor;; border-right: 1px solid @borderColor;
} }
>div:last-child{ > div:last-child {
border-right: none; border-right: none;
} }
&-flex{ &-flex {
// flex: 1; // flex: 1;
.center(); .center();
} }
} }
.table-content{ .table-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
>div{ > div {
padding: 10px; padding: 10px;
border-right: 1px solid @borderColor; border-right: 1px solid @borderColor;
} }
>div:last-child{ > div:last-child {
border-right: none; border-right: none;
padding: 0px; padding: 0px;
} }
&-left{ &-left {
border-bottom: 1px solid @borderColor; border-bottom: 1px solid @borderColor;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
>div{ > div {
.center(); .center();
} }
} }
&-right{ &-right {
flex:1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// justify-content: space-between; // justify-content: space-between;
// align-items: center; // align-items: center;
>div{ > div {
flex: 1 1 auto; flex: 1 1 auto;
flex-shrink: 0; flex-shrink: 0;
// height: 100%; // height: 100%;
border-bottom: 1px solid @borderColor;; border-bottom: 1px solid @borderColor;
} }
>div:last-child{ > div:last-child {
// border-bottom: none; // border-bottom: none;
} }
&-item:hover{ &-item:hover {
background: #f5f5f5; background: #f5f5f5;
} }
&-item{ &-item {
> div {
>div{ border-right: 1px solid @borderColor;
border-right: 1px solid @borderColor; padding: 10px;
padding: 10px;
} }
>div:last-child{ > div:last-child {
border-right: none; border-right: none;
} }
// flex: 1; // flex: 1;
display: flex; display: flex;
>div{ > div {
// flex: 1; // flex: 1;
// .center(); // .center();
} }
} }
} }
} }
.table-left{ .table-left {
width: 60px; width: 60px;
text-align: center; text-align: center;
} }
.defen{ .defen {
width: 50px !important; width: 50px !important;
.center(); .center();
text-align: center; text-align: center;
} }
.quanzhomng{ .quanzhomng {
width: 86px !important; width: 86px !important;
.center(); .center();
text-align: center; text-align: center;
}
.table{
position: relative;
&-bottoms{
width: 100%;
height: 60px;
z-index: 1000000;
bottom: 0;
left: 0;
background:transparent;
position: fixed;
display: flex;
// align-items: center;
justify-content: center;
&-contenct{
height: 40px;
display: flex;
background: #fff;
justify-content: space-between;
border-radius: 40px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
&-left{
line-height: 40px;
font-size: 14px;
padding: 0 16px;
i{
margin:0 6px;
font-weight: 800;
}
cursor: pointer;
color: @fontBlue;
}
&-center{
.center();
font-size: 14px;
padding: 0 10px;
}
&-right{
line-height: 40px;
font-size: 14px;
padding: 0 16px;
i{
margin:0 6px;
font-weight: 800;
}
cursor: pointer;
color: @fontBlue;
}
}
}
} }
.table-bottom { .table {
height: 60px; position: relative;
position: fixed; &-bottoms {
padding: 0 80px;
width: 100%; width: 100%;
background: #fff; height: 60px;
border-top: 1px solid @borderColor; z-index: 1000000;
bottom: 0; bottom: 0;
left: 0; left: 0;
&-content{ background: transparent;
width: 1360px; position: fixed;
margin: 0 auto; display: flex;
height: 100%; // align-items: center;
justify-content: center;
&-contenct {
height: 40px;
display: flex; display: flex;
align-items: center; background: #fff;
justify-content: flex-end; justify-content: space-between;
border-radius: 40px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12),
0 1px 6px 0 rgba(0, 0, 0, 0.12);
&-left {
line-height: 40px;
font-size: 14px;
padding: 0 16px;
i {
margin: 0 6px;
font-weight: 800;
}
cursor: pointer;
color: @fontBlue;
}
&-center {
.center();
font-size: 14px;
padding: 0 10px;
}
&-right {
line-height: 40px;
font-size: 14px;
padding: 0 16px;
i {
margin: 0 6px;
font-weight: 800;
}
cursor: pointer;
color: @fontBlue;
}
} }
}
}
.table-bottom {
height: 60px;
position: fixed;
padding: 0 80px;
width: 100%;
background: #fff;
border-top: 1px solid @borderColor;
bottom: 0;
left: 0;
&-content {
width: 1360px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
table {
margin-top: 15px;
width: 100%;
border: 1px solid #e9eaec;
border-collapse: collapse;
}
th {
background-color: #f8f8f9;
}
th,
td {
padding: 5px;
border: 1px solid #e9eaec;
text-align: center;
vertical-align: top;
line-height: 30px;
}
td {
} }
table{
margin-top: 15px;
width: 100%;
border:1px solid #e9eaec;
border-collapse:collapse
}
th{
background-color: #f8f8f9;
}
th,td{
padding: 5px;
border: 1px solid #e9eaec;
text-align: center;
vertical-align: top;
line-height: 30px;
}
td{
}
</style> </style>

559
src/views/kpi/assessment/performance/components/table.vue
View File

@ -1,119 +1,166 @@
<template> <template>
<div class='table'> <div class='table'>
<div v-if="obj.recortModelDtos.length !== 0" class="table-list commonFont"> <div v-if="obj.recortModelDtos.length !== 0"
<div class="table-header"> class="table-list commonFont">
<div class="title table-left weidu">维度</div> <div class="table-header">
<div class="title table-header-flex name">名称</div> <div class="title table-left weidu">维度</div>
<div class="title table-header-flex kaohe">考核标准</div> <div class="title table-header-flex name">名称</div>
<div class="title table-header-flex jieguo" v-if="tableInfo.result || tableAuth.showResult">结果值</div> <div class="title table-header-flex kaohe">考核标准</div>
<div class="title table-header-flex quanzhong" >权重({{Math.round((obj.weight * 100)*1000)/1000}}%)</div> <div class="title table-header-flex jieguo"
<template v-if="obj.recortModelDtos.length>0 && obj.recortModelDtos[0].detailDtos && obj.recortModelDtos[0].detailDtos.length>0"> v-if="tableInfo.result || tableAuth.showResult">结果值</div>
<!-- v-if="tableAuth.editScore" --> <div class="title table-header-flex quanzhong">权重({{Math.round((obj.weight * 100)*1000)/1000}}%)</div>
<div class="title table-header-flex pingfen" v-for="k in handleGetScorlList(obj.recortModelDtos[0].detailDtos[0].scoreDtos)" > <template v-if="obj.recortModelDtos.length>0 && obj.recortModelDtos[0].detailDtos && obj.recortModelDtos[0].detailDtos.length>0">
<div class="pingfen-title">上级评分 - {{k.approvalName}} ( {{( Math.round((k.weight * 100) * 1000) / 1000 )}}%)</div> <!-- v-if="tableAuth.editScore" -->
<div class="pingfen-content"> <div class="title table-header-flex pingfen"
<div class="pingfen-content-ping" >评分</div> v-for="(k,index1) in handleGetScorlList(obj.recortModelDtos[0].detailDtos[0].scoreDtos)"
<div class="pingfen-content-defen" >得分</div> :key="index1">
<div class=" pingfen-content-shuoming" >评分说明</div> <div class="pingfen-title">上级评分 - {{k.approvalName}} ( {{( Math.round((k.weight * 100) * 1000) / 1000 )}}%)</div>
<div class="pingfen-content">
<div class="pingfen-content-ping">评分</div>
<div class="pingfen-content-defen">得分</div>
<div class=" pingfen-content-shuoming">评分说明</div>
</div>
</div>
</template>
</div>
<div class="table-weidu"
v-for="(item,index) in ((tableInfo.score || tableAuth.showScore)?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1))"
:key="index">
<!-- ((tableInfo.score || tableAuth.showScore) && tableAuth.editScore?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1)) -->
<div class="weidu">
<div v-for="(name,indexname) in item.name"
:key="indexname">
{{name}}
</div>
</div>
<div style="flex: 1 1 auto;"
class="table-right">
<div class="table-content"
v-for="(i,index2) in item.detailDtos"
:key="index2">
<div class="name">
{{i.target}}
</div>
<div class="kaohe pre">
<pre>
{{i.keyResult}}o7
</pre>
</div>
<div class="jieguo pre"
v-if="tableInfo.result || tableAuth.showResult">
<el-input v-if="tableInfo.result"
type="textarea"
:rows="12"
size="mini"
placeholder="请输入内容"
v-model="i.checkResult"
clearable></el-input>
<pre v-else>{{i.checkResult || '--'}}</pre>
</div>
<div class="quanzhong">
{{( Math.round((i.checkWeight * 100) * 1000) / 1000 )}}%
</div>
<template>
<div v-for="(dto,index3) in handleGetScorlList(i.scoreDtos)"
:key="index3"
class="pingfen table-content-pingfen">
<div class="pingfen-content-ping">
<el-select v-if="tableInfo.score && obj.gradeGroupId===1 && dto.approvalId ===userInfo.userId"
style="width:115px;"
size="mini"
v-model="dto.acquireScore">
<el-option v-for="item in scoreList"
:key="item.id"
:label="item.name"
:value="item.score">
</el-option>
</el-select>
<el-input v-if="tableInfo.score && obj.gradeGroupId===2 && dto.approvalId ===userInfo.userId"
style="width:115px;"
size="mini"
placeholder="请输入评分值"
v-model="dto.acquireScore"
clearable></el-input>
<span v-if="!tableInfo.score">{{handleScore(dto.acquireScore)}}</span>
</div>
<div class="pingfen-content-defen">
{{dto.acquireScore}}
</div>
<div class="pingfen-content-shuoming">
<el-input v-if="tableInfo.score && dto.approvalId ===userInfo.userId"
style="width:200px;"
:rows="4"
size="mini"
type="textarea"
placeholder="请输入内容"
v-model="dto.scoreComment"
clearable></el-input>
<span v-else>{{dto.scoreComment || '--'}}</span>
</div> </div>
</div> </div>
</template> </template>
</div> </div>
<div class="table-weidu" v-for="(item,index) in ((tableInfo.score || tableAuth.showScore)?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1))" :key="index"> <div class="table-content"
<!-- ((tableInfo.score || tableAuth.showScore) && tableAuth.editScore?obj.recortModelDtos:obj.recortModelDtos.slice(0,obj.recortModelDtos.length-1)) --> v-if="item.detailDtos.length===0">
<div class="weidu"> <div class="name">
<div v-for="(name,indexname) in item.name" :key="indexname"> --
{{name}}
</div>
</div> </div>
<div style="flex: 1 1 auto;" class="table-right"> <div class="kaohe">
<div class="table-content" v-for="i in item.detailDtos"> --
<div class="name">
{{i.target}}
</div>
<div class="kaohe pre">
<pre>
{{i.keyResult}}o7
</pre>
</div>
<div class="jieguo pre" v-if="tableInfo.result || tableAuth.showResult">
<el-input v-if="tableInfo.result" type="textarea" :rows="12" size="mini" placeholder="请输入内容" v-model="i.checkResult" clearable></el-input>
<pre v-else>{{i.checkResult || '--'}}</pre>
</div>
<div class="quanzhong">
{{( Math.round((i.checkWeight * 100) * 1000) / 1000 )}}%
</div>
<template >
<div v-for="dto in handleGetScorlList(i.scoreDtos)" class="pingfen table-content-pingfen">
<div class="pingfen-content-ping">
<el-select v-if="tableInfo.score && obj.gradeGroupId===1 && dto.approvalId ===userInfo.userId" style="width:115px;" size="mini" v-model="dto.acquireScore">
<el-option
v-for="item in scoreList"
:key="item.id"
:label="item.name"
:value="item.score">
</el-option>
</el-select>
<el-input v-if="tableInfo.score && obj.gradeGroupId===2 && dto.approvalId ===userInfo.userId" style="width:115px;" size="mini" placeholder="请输入评分值" v-model="dto.acquireScore" clearable></el-input>
<span v-if="!tableInfo.score">{{handleScore(dto.acquireScore)}}</span>
</div>
<div class="pingfen-content-defen">
{{dto.acquireScore}}
</div>
<div class="pingfen-content-shuoming">
<el-input v-if="tableInfo.score && dto.approvalId ===userInfo.userId" style="width:200px;" :rows="4" size="mini" type="textarea" placeholder="请输入内容" v-model="dto.scoreComment" clearable></el-input>
<span v-else>{{dto.scoreComment || '--'}}</span>
</div>
</div>
</template>
</div>
<div class="table-content" v-if="item.detailDtos.length===0">
<div class="name">
--
</div>
<div class="kaohe">
--
</div>
<div class="jieguo" v-if="tableInfo.result || tableAuth.showResult">
--
</div>
<div class="quanzhong">
--
</div>
<template >
<div v-for="k in (scoreListForParams)" class="pingfen table-content-pingfen">
<div class="pingfen-content-ping">
{{k.Level}}
</div>
<div class="pingfen-content-defen">
{{k.Score}}
</div>
<div class="pingfen-content-shuoming">
--
</div>
</div>
</template>
</div>
</div> </div>
</div> <div class="jieguo"
</div> v-if="tableInfo.result || tableAuth.showResult">
<div v-else class='nojixiao'> --
<img src="./imgs/nojixiao.png" alt=""> </div>
<div class="commonFont"> <div class="quanzhong">
未制定绩效目标，暂无数据 --
</div>
<template>
<div v-for="(k,index4) in (scoreListForParams)"
:key="index4"
class="pingfen table-content-pingfen">
<div class="pingfen-content-ping">
{{k.Level}}
</div>
<div class="pingfen-content-defen">
{{k.Score}}
</div>
<div class="pingfen-content-shuoming">
--
</div>
</div>
</template>
</div> </div>
</div> </div>
</div>
<div v-if="tableInfo.result || tableInfo.score" class="table-bottom">
<div class="table-bottom-content">
<el-button size='small' @click="handleCancelResult" plain>取消</el-button>
<el-button size='small' :loading='loadingZan' @click="handleSaveDetail()" plain>暂存</el-button>
<el-button size='small' :loading='loadingTi' @click="handleGetNext" type="primary" >{{tableInfo.result?'提交结果值':'提交评分'}}</el-button>
</div>
</div>
</div> </div>
<div v-else
class='nojixiao'>
<img src="./imgs/nojixiao.png"
alt="">
<div class="commonFont">
未制定绩效目标，暂无数据
</div>
</div>
<div v-if="tableInfo.result || tableInfo.score"
class="table-bottom">
<div class="table-bottom-content">
<el-button size='small'
@click="handleCancelResult"
plain>取消</el-button>
<el-button size='small'
:loading='loadingZan'
@click="handleSaveDetail()"
plain>暂存</el-button>
<el-button size='small'
:loading='loadingTi'
@click="handleGetNext"
type="primary">{{tableInfo.result?'提交结果值':'提交评分'}}</el-button>
</div>
</div>
</div>
</template> </template>
<script> <script>
import { apiSaveDetail, apiGet375, apiSaveapproval } from '@/api/assessment' import { apiSaveDetail, apiGet375, apiSaveapproval } from '@/api/assessment'
@ -231,8 +278,8 @@ export default {
this.loadingTi = false this.loadingTi = false
return return
} }
const obj = {status: 1, menuName: this.tableInfo.result ? '提交了结果值' : '提交了评分'} const obj = { status: 1, menuName: this.tableInfo.result ? '提交了结果值' : '提交了评分' }
const params = Object.assign({}, {resultRecordId: this.$route.query.id || ''}, obj) const params = Object.assign({}, { resultRecordId: this.$route.query.id || '' }, obj)
let res = await apiSaveapproval(params) let res = await apiSaveapproval(params)
this.loadingTi = false this.loadingTi = false
if (res.code !== 200) { if (res.code !== 200) {
@ -246,7 +293,7 @@ export default {
history.go(0) history.go(0)
}, },
handleCancelResult () { handleCancelResult () {
this.$emit('update:tableInfo', Object.assign({}, this.tableInfo, {result: false, score: false})) this.$emit('update:tableInfo', Object.assign({}, this.tableInfo, { result: false, score: false }))
}, },
async handleGrt375 () { async handleGrt375 () {
let res = await apiGet375() let res = await apiGet375()
@ -270,131 +317,129 @@ export default {
} }
</script> </script>
<style lang='less' scoped> <style lang='less' scoped>
.title{ .title {
background: #f5f5f5; background: #f5f5f5;
border-bottom: 1px solid @borderColor; border-bottom: 1px solid @borderColor;
} }
.jieguo{ .jieguo {
padding:10px !important; padding: 10px !important;
width: 260px !important; width: 260px !important;
.center(); .center();
} }
.name{ .name {
padding:10px !important; padding: 10px !important;
width: 200px ; width: 200px;
.center(); .center();
} }
.kaohe{ .kaohe {
width: 300px ; width: 300px;
flex: 1 1 auto; flex: 1 1 auto;
padding:10px !important; padding: 10px !important;
display: block; display: block;
.center(); .center();
pre{ pre {
white-space:pre-line; white-space: pre-line;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
} }
} }
.weidu{ .weidu {
flex: none ; flex: none;
width: 60px ; width: 60px;
.center(); .center();
flex-direction: column; flex-direction: column;
padding:10px !important; padding: 10px !important;
border-left: 1px solid @borderColor; border-left: 1px solid @borderColor;
border-right: 1px solid @borderColor; border-right: 1px solid @borderColor;
border-bottom: 1px solid @borderColor; border-bottom: 1px solid @borderColor;
>div{ > div {
text-align: center; text-align: center;
} }
// .center(); // .center();
} }
.quanzhong{ .quanzhong {
width: 86px !important; width: 86px !important;
.center(); .center();
} }
.pingfen{ .pingfen {
display: flex; display: flex;
padding: 0 !important; padding: 0 !important;
border-right: 1px solid @borderColor !important; border-right: 1px solid @borderColor !important;
flex-direction: column; flex-direction: column;
&-title{ &-title {
padding:10px 0 !important; padding: 10px 0 !important;
text-align: center; text-align: center;
border-bottom: 1px solid @borderColor; border-bottom: 1px solid @borderColor;
} }
&-content{ &-content {
flex: 1; flex: 1;
align-items: center; align-items: center;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
>div{ > div {
border-right: 1px solid @borderColor; border-right: 1px solid @borderColor;
padding:10px 0 !important; padding: 10px 0 !important;
.center(); .center();
} }
&-ping{ &-ping {
width: 120px ; width: 120px;
height: 100%; height: 100%;
} }
&-defen{ &-defen {
width: 50px !important; width: 50px !important;
height: 100%; height: 100%;
} }
&-shuoming{ &-shuoming {
width: 120px ; width: 120px;
padding: 10px; padding: 10px;
border-right: none !important; border-right: none !important;
flex: 1; flex: 1;
} }
} }
} }
.defen{ .defen {
width: 50px; width: 50px;
} }
.shuoming{ .shuoming {
width: 200px; width: 200px;
} }
.nojixiao{ .nojixiao {
text-align: center; text-align: center;
} }
.listNone{ .listNone {
height: 100px; height: 100px;
text-align: center; text-align: center;
line-height: 100px; line-height: 100px;
border-bottom: 1px solid @borderColor; border-bottom: 1px solid @borderColor;
} }
.table-list{ .table-list {
padding: 0 0 10px 0; padding: 0 0 10px 0;
// border: 1px solid @borderColor; // border: 1px solid @borderColor;
// border-bottom: none; // border-bottom: none;
overflow: auto; overflow: auto;
} }
.table-weidu{ .table-weidu {
display: flex; display: flex;
font-size: 12px; font-size: 12px;
} }
.table-header{ .table-header {
display: flex; display: flex;
font-size: 12px; font-size: 12px;
flex-shrink: 0; flex-shrink: 0;
// justify-content: space-between; // justify-content: space-between;
// border: 1px solid @borderColor; // border: 1px solid @borderColor;
>div{ > div {
padding: 10px; padding: 10px;
border-right: 1px solid @borderColor; border-right: 1px solid @borderColor;
border-top: 1px solid @borderColor; border-top: 1px solid @borderColor;
} }
>div:last-child{ > div:last-child {
border-right: none; border-right: none;
} }
&-flex{ &-flex {
flex-shrink: 0; flex-shrink: 0;
// flex: 1; // flex: 1;
// .center(); // .center();
} }
@ -454,126 +499,126 @@ width: 50px;
// } // }
// } // }
// } // }
.table-left{ .table-left {
width: 60px; width: 60px;
text-align: center; text-align: center;
} }
.quanzhomng{ .quanzhomng {
width: 100px !important; width: 100px !important;
text-align: center; text-align: center;
} }
.table-content:hover{ .table-content:hover {
background: rgb(247, 247, 247); background: rgb(247, 247, 247);
} }
.table-right{ .table-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.table-content{ .table-content {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
>div{ > div {
border-right: 1px solid @borderColor; border-right: 1px solid @borderColor;
border-bottom: 1px solid @borderColor; border-bottom: 1px solid @borderColor;
padding: 10px 0; padding: 10px 0;
} }
&-pingfen{ &-pingfen {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
>div{ > div {
text-align: center; text-align: center;
border-right: 1px solid @borderColor; border-right: 1px solid @borderColor;
.center(); .center();
} }
} }
} }
.table{ .table {
position: relative; position: relative;
&-bottoms{ &-bottoms {
width: 100%;
height: 60px;
z-index: 1000000;
bottom: 0;
left: 0;
background:transparent;
position: fixed;
display: flex;
// align-items: center;
justify-content: center;
&-contenct{
height: 40px;
display: flex;
background: #fff;
justify-content: space-between;
border-radius: 40px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
&-left{
line-height: 40px;
font-size: 14px;
padding: 0 16px;
i{
margin:0 6px;
font-weight: 800;
}
cursor: pointer;
color: @fontBlue;
}
&-center{
.center();
font-size: 14px;
padding: 0 10px;
}
&-right{
line-height: 40px;
font-size: 14px;
padding: 0 16px;
i{
margin:0 6px;
font-weight: 800;
}
cursor: pointer;
color: @fontBlue;
}
}
}
}
.table-bottom {
height: 60px;
position: fixed;
padding: 0 80px;
width: 100%; width: 100%;
background: #fff; height: 60px;
border-top: 1px solid @borderColor; z-index: 1000000;
bottom: 0; bottom: 0;
left: 0; left: 0;
&-content{ background: transparent;
width: 1360px; position: fixed;
margin: 0 auto; display: flex;
height: 100%; // align-items: center;
justify-content: center;
&-contenct {
height: 40px;
display: flex; display: flex;
align-items: center; background: #fff;
justify-content: flex-end; justify-content: space-between;
border-radius: 40px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12),
0 1px 6px 0 rgba(0, 0, 0, 0.12);
&-left {
line-height: 40px;
font-size: 14px;
padding: 0 16px;
i {
margin: 0 6px;
font-weight: 800;
}
cursor: pointer;
color: @fontBlue;
}
&-center {
.center();
font-size: 14px;
padding: 0 10px;
}
&-right {
line-height: 40px;
font-size: 14px;
padding: 0 16px;
i {
margin: 0 6px;
font-weight: 800;
}
cursor: pointer;
color: @fontBlue;
}
} }
}
}
.table-bottom {
height: 60px;
position: fixed;
padding: 0 80px;
width: 100%;
background: #fff;
border-top: 1px solid @borderColor;
bottom: 0;
left: 0;
&-content {
width: 1360px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
table {
margin-top: 15px;
width: 100%;
border: 1px solid #e9eaec;
border-collapse: collapse;
}
th {
background-color: #f8f8f9;
}
th,
td {
padding: 5px;
border: 1px solid #e9eaec;
text-align: center;
vertical-align: top;
line-height: 30px;
}
td {
} }
table{
margin-top: 15px;
width: 100%;
border:1px solid #e9eaec;
border-collapse:collapse
}
th{
background-color: #f8f8f9;
}
th,td{
padding: 5px;
border: 1px solid #e9eaec;
text-align: center;
vertical-align: top;
line-height: 30px;
}
td{
}
</style> </style>