144 lines
4.1 KiB
Vue
144 lines
4.1 KiB
Vue
<template>
|
|
<div class='table'>
|
|
<table
|
|
cellspacing="0"
|
|
border="1">
|
|
<!-- 顶部title -->
|
|
<tr>
|
|
<th>维度</th>
|
|
<th>名称</th>
|
|
<th>考核标准</th>
|
|
<th v-if="tableInfo.result">结果值</th>
|
|
<th>权重({{obj.weight*100}}%)</th>
|
|
<th v-if="tableInfo.score">上级评分</th>
|
|
<th v-if="tableInfo.score">评分说明</th>
|
|
</tr>
|
|
<!-- 暂无数据时显示 -->
|
|
<tr v-if="obj.recortModelDtos.length === 0">
|
|
<td :colspan="6">
|
|
暂无数据
|
|
</td>
|
|
</tr>
|
|
<!-- template不会被渲染 -->
|
|
<template v-for="(item,index) in obj.recortModelDtos" >
|
|
<!-- 左侧跨行区域 -->
|
|
<tr :key="index+1000">
|
|
<td :rowspan="item.detailDtos.length+1">{{item.name}}</td>
|
|
<td v-if="item.detailDtos.length===0"></td>
|
|
<td v-if="item.detailDtos.length===0"></td>
|
|
<td v-if="item.detailDtos.length===0 && tableInfo.score"></td>
|
|
<td v-if="item.detailDtos.length===0 && tableInfo.score"></td>
|
|
<td v-if="item.detailDtos.length===0 && tableInfo.result"></td>
|
|
<td v-if="item.detailDtos.length===0"></td>
|
|
</tr>
|
|
<!-- 右侧数据 -->
|
|
<tr v-for="(child) in item.detailDtos" :key="child.target">
|
|
<td>
|
|
{{child.target || ''}}
|
|
</td>
|
|
<td>
|
|
{{child.keyResult || ''}}
|
|
</td>
|
|
<td v-if="tableInfo.result">
|
|
<span>{{child.checkResult || '--'}}</span>
|
|
<el-input type="textarea" placeholder="请输入内容" v-model="child.checkResulted" clearable></el-input>
|
|
</td>
|
|
<td>
|
|
{{(child.checkWeight)*100}}%
|
|
</td>
|
|
<td v-if="tableInfo.score">
|
|
<span>{{child.superScore || '--'}}</span>
|
|
<el-input type="textarea" placeholder="请输入内容" v-model="child.superScoreed" clearable></el-input>
|
|
</td>
|
|
<td style="padding:10px;" v-if="tableInfo.score">
|
|
<span>{{child.scoreComment || '--'}}</span>
|
|
<el-input type="textarea" placeholder="请输入内容" v-model="child.scoreCommented" clearable></el-input>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
<div class="table-bottom">
|
|
<div class="table-bottom-content">
|
|
<el-button size='small' @click="handleSaveDetail()" plain>暂存</el-button>
|
|
<el-button size='small' type="primary" >提交</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'columnsTbale',
|
|
props: {
|
|
obj: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
recortModelDtos: []
|
|
}
|
|
}
|
|
},
|
|
tableInfo: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
result: false,
|
|
score: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
input: ''
|
|
}
|
|
},
|
|
mounted () {
|
|
console.log('list', this.obj)
|
|
},
|
|
methods: {
|
|
handleSaveDetail () {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='less' scoped>
|
|
.table{
|
|
position: relative;
|
|
}
|
|
.table-bottom {
|
|
position: fixed;
|
|
height: 60px;
|
|
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;
|
|
}
|
|
</style>
|