<template>
|
<FYPageHeader title="评估结果详情"></FYPageHeader>
|
<el-row v-for="item in evaluation" :key="item.id"> </el-row>
|
<div class="btns">
|
<el-button type="primary" @click="submit" :disabled="!isUpdated">提交</el-button>
|
</div>
|
<el-table
|
class="table-style"
|
:data="tableData"
|
ref="tableRef"
|
:span-method="objectSpanMethod"
|
table-layout="fixed"
|
:cell-style="cellClassName"
|
border
|
stripe
|
>
|
<el-table-column v-slot="scope" prop="one_title" label="一级指标" width="200">
|
<!-- <el-checkbox v-model="scope.row.one_select" @change="checked => oneSelectChange(checked, scope.row)">{{ scope.row.one_title }}</el-checkbox> -->
|
</el-table-column>
|
<el-table-column prop="one_score" label="分值" width="55" />
|
<el-table-column prop="one_maxScore" label="最大分值" width="90" />
|
<el-table-column v-slot="scope" prop="two_title" label="二级指标" width="200">
|
<!-- <el-checkbox v-model="scope.row.two_select" @change="checked => twoSelectChange(checked, scope.row)">{{ scope.row.two_title }}</el-checkbox> -->
|
</el-table-column>
|
<el-table-column prop="two_score" label="分值" width="55" />
|
<el-table-column prop="two_maxScore" label="最大分值" width="90" />
|
<el-table-column v-slot="scope" prop="three_title" label="具体问题">
|
<el-checkbox
|
v-model="scope.row.three_select"
|
@change="(checked) => threeSelectChange(checked, scope.row)"
|
>{{ scope.row.three_title }}</el-checkbox
|
>
|
</el-table-column>
|
<el-table-column prop="three_score" label="单项扣分" width="90" />
|
</el-table>
|
</template>
|
|
<script>
|
import evaluateApi from '@/api/fysp/evaluateApi';
|
import { useFetchData } from '@/composables/fetchData';
|
import { ElMessage } from 'element-plus';
|
export default {
|
setup() {
|
const { loading, fetchData } = useFetchData();
|
return { loading, fetchData };
|
},
|
data() {
|
return {
|
tableData: [],
|
evaluation: [],
|
subTaskId: '',
|
isUpdated: false
|
};
|
},
|
created() {
|
// // watch 路由的参数，以便再次获取数据
|
// this.$watch(
|
// () => this.$route.params,
|
// () => {
|
// this.getScore();
|
// },
|
// // 组件创建完后获取数据，
|
// // 此时 data 已经被 observed 了
|
// { immediate: true }
|
// );
|
},
|
computed: {
|
// 已被勾选的item
|
checkedUpdatedList() {
|
var list = [];
|
for (let index = 0; index < this.tableData.length; index++) {
|
const element = this.tableData[index];
|
if (element.three_select) {
|
list.push(element.three_id);
|
}
|
}
|
return list;
|
}
|
},
|
mounted() {
|
this.getList();
|
},
|
methods: {
|
// 每一个单元格的class
|
cellClassName({ row, column, rowIndex, columnIndex }) {
|
if (column.property === 'one_score') {
|
if (row.one_score < 0) {
|
return { color: 'red' };
|
}
|
} else if (column.property === 'two_score') {
|
if (row.two_score < 0) {
|
return { color: 'red' };
|
}
|
} else if (column.property === 'three_score') {
|
if (row.three_score < 0) {
|
return { color: 'red' };
|
}
|
}
|
return { color: 'black' };
|
},
|
/** 提价 */
|
submit() {
|
evaluateApi
|
.updateScore({
|
subTaskId: this.subTaskId,
|
itemList: this.checkedUpdatedList
|
})
|
.then((res) => {
|
if (res.success) {
|
ElMessage({
|
message: res.message,
|
type: 'success'
|
});
|
}else {
|
ElMessage({
|
message: res.message,
|
type: 'error'
|
});
|
}
|
});
|
setTimeout(() => {
|
this.getList();
|
}, 1000);
|
},
|
/** 通过第三级的id获取上级以及顶级 */
|
getSuperObjByThreeId(threeId, list, path = []) {
|
for (let index = 0; index < list.length; index++) {
|
const item = list[index];
|
// 将当前项添加到路径中
|
const currentPath = path.concat(item);
|
if (item.id === threeId) {
|
// 如果找到匹配的 id，返回路径数组
|
return currentPath;
|
}
|
const subList = item.subList;
|
if (subList) {
|
// 递归查找子列表
|
const result = this.getSuperObjByThreeId(threeId, subList, currentPath);
|
if (result) {
|
return result; // 如果找到匹配的 id，返回结果
|
}
|
}
|
}
|
return null; // 如果没有找到匹配的 id，返回 null
|
},
|
/** 问题选择框 */
|
threeSelectChange(isSelect, row) {
|
this.isUpdated = true;
|
},
|
/** 列合并 */
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
|
// 对 一级指标 列进行合并
|
let rowSpan = 1;
|
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
|
if (this.tableData[i].one_id === row.one_id) {
|
rowSpan++;
|
} else {
|
break;
|
}
|
}
|
if (rowIndex > 0) {
|
if (this.tableData[rowIndex - 1].one_id === row.one_id) {
|
return { rowspan: 0, colspan: 0 };
|
}
|
}
|
return { rowspan: rowSpan, colspan: 1 };
|
} else if (columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
|
// 对 二级指标 列进行合并，确保 一级指标 一样
|
let rowSpan = 1;
|
for (let i = rowIndex + 1; i < this.tableData.length; i++) {
|
if (this.tableData[i].one_id === row.one_id && this.tableData[i].two_id === row.two_id) {
|
rowSpan++;
|
} else {
|
break;
|
}
|
}
|
if (rowIndex > 0) {
|
if (
|
this.tableData[rowIndex - 1].one_id === row.one_id &&
|
this.tableData[rowIndex - 1].two_id === row.two_id
|
) {
|
return { rowspan: 0, colspan: 0 };
|
}
|
}
|
return { rowspan: rowSpan, colspan: 1 };
|
}
|
},
|
/** 对象属性拷贝 */
|
deepCopyWithPrefix(obj, target, prefix) {
|
// 确保 target 是一个对象
|
if (typeof target !== 'object' || target === null) {
|
target = {};
|
}
|
|
// 遍历对象的所有属性
|
for (const key in obj) {
|
if (obj.hasOwnProperty(key)) {
|
// 为属性名加上前缀
|
const newKey = prefix + key;
|
// 如果属性值是对象，则递归复制
|
if (typeof obj[key] === 'object' && obj[key] !== null) {
|
this.deepCopyWithPrefix(obj[key], (target[newKey] = {}), prefix);
|
} else {
|
// 否则直接复制属性
|
target[newKey] = obj[key];
|
}
|
}
|
}
|
|
return target;
|
},
|
/** @param data 列表数据 */
|
genTableData(data) {
|
var result = [];
|
if (data) {
|
for (let i = 0; i < data.length; i++) {
|
const firstLevelItem = data[i];
|
var secondLevel = firstLevelItem.subList;
|
if (secondLevel) {
|
for (let j = 0; j < secondLevel.length; j++) {
|
const secondLevelItem = secondLevel[j];
|
var thirdLevel = secondLevelItem.subList;
|
if (thirdLevel) {
|
for (let q = 0; q < thirdLevel.length; q++) {
|
const thirdLevelItem = thirdLevel[q];
|
var item = {};
|
this.deepCopyWithPrefix(firstLevelItem, item, 'one_');
|
this.deepCopyWithPrefix(secondLevelItem, item, 'two_');
|
this.deepCopyWithPrefix(thirdLevelItem, item, 'three_');
|
result.push(item);
|
}
|
}
|
}
|
}
|
}
|
}
|
return result;
|
},
|
getList() {
|
this.subTaskId = this.$route.params.subTaskId;
|
evaluateApi.fetchItemEvaluation(this.subTaskId).then((res) => {
|
this.isUpdated = false;
|
this.tableData = this.genTableData(res.data.details);
|
});
|
},
|
onSearch(page, func) {
|
evaluateApi.fetchItemEvaluation(this.$route.params.subTaskId).then((res) => {
|
if (typeof func === 'function') {
|
// 处理数据
|
var data = this.genTableData(res.data);
|
|
func({ data: data });
|
}
|
this.tableData = this.genTableData(res.data);
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.table-style {
|
width: 100%;
|
padding-bottom: 30px;
|
}
|
.btns {
|
padding-bottom: 10px;
|
padding-right: 30px;
|
display: flex;
|
flex-direction: row-reverse;
|
}
|
/* 改变表格内单元格边框颜色 */
|
.el-table {
|
--el-table-border-color: #000000;
|
}
|
.red-cell {
|
background-color: red;
|
}
|
</style>
|
