279 lines
8.6 KiB
Vue
279 lines
8.6 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 使用el-form进行表单展示 -->
|
||
<el-form ref="detailForm" :model="detailFormData" label-width="0px">
|
||
<!-- 数据表格 -->
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="detailsList"
|
||
stripe
|
||
:header-cell-class-name="headerCellClassName"
|
||
:span-method="objectSpanMethod"
|
||
>
|
||
<el-table-column label="广西水利电力职业技术学院" align="center">
|
||
<el-table-column :label="reportName" align="center">
|
||
<el-table-column :label="'班级：'+deptName+' | 学号：' + stuNo + ' | 姓名：' + studentName" align="center">
|
||
<!-- 表格列 -->
|
||
<el-table-column label="维度名称" align="center" prop="dimensionName" />
|
||
<el-table-column label="质控点名称" align="center" prop="qualityControlPointName" />
|
||
<el-table-column label="指标名称" align="center" prop="indicatorName" />
|
||
<el-table-column label="学校合格标准" align="center" prop="schoolQualifiedStandard" />
|
||
<el-table-column label="二级学院标准" align="center" prop="secondaryCollegeStandard" />
|
||
<el-table-column label="个人目标规划" align="center" prop="personalTargetStandard" />
|
||
|
||
<!-- 完成情况改为只读展示 -->
|
||
<el-table-column label="完成情况" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="scope.row.completionStatus"
|
||
:readonly="true"
|
||
size="small"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- 未完成原因改为只读展示 -->
|
||
<el-table-column label="未完成原因" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="scope.row.reasonForIncompletion"
|
||
:readonly="true"
|
||
size="small"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<!-- 改进措施改为只读展示 -->
|
||
<el-table-column label="改进措施" align="center">
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="scope.row.improvementActions"
|
||
:readonly="true"
|
||
size="small"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { filloutreportlistinfo } from "@/api/diagnostic/DiaFillOutReport";
|
||
import { Message } from "element-ui";
|
||
|
||
export default {
|
||
name: "Details",
|
||
props: {
|
||
// 接收父组件传递的stuNo
|
||
stuNo: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
// 接收父组件传递的rowData
|
||
rowData: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
detailsList: [],
|
||
spanArr: [], // 维度名称列的合并规则
|
||
qcSpanArr: [], // 质控点名称列的合并规则
|
||
queryParams: {
|
||
reportId: null,
|
||
stuNo: null // 用于存储学号
|
||
},
|
||
// 头部信息
|
||
reportName: "未命名报表",
|
||
studentName: "-", // 姓名
|
||
deptName: "-", // 班级
|
||
// 表单数据
|
||
detailFormData: { detailsList: [] }
|
||
};
|
||
},
|
||
created() {
|
||
// 初始化时获取数据
|
||
this.queryParams.reportId = this.$route.params.reportId || "1";
|
||
this.queryParams.stuNo = this.stuNo; // 设置学号参数
|
||
this.getList();
|
||
},
|
||
watch: {
|
||
// 监听stuNo变化，重新获取数据
|
||
stuNo(newVal) {
|
||
if (newVal) {
|
||
this.queryParams.stuNo = newVal;
|
||
this.getList();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
headerCellClassName({ column }) {
|
||
if (column.label === '广西水利电力职业技术学院') {
|
||
return 'school-header';
|
||
} else if (column.label === this.reportName) {
|
||
return 'report-header';
|
||
} else if (column.label.includes('学号：')) {
|
||
return 'student-header';
|
||
}
|
||
return '';
|
||
},
|
||
|
||
// 计算合并规则的方法 - 保持原始顺序
|
||
getSpanArr(data) {
|
||
this.spanArr = [];
|
||
this.qcSpanArr = [];
|
||
|
||
// 记录上一行的维度和质控点
|
||
let prevDimension = null;
|
||
let prevQcPoint = null;
|
||
|
||
// 记录当前维度和质控点的合并行数
|
||
let currentDimensionRowspan = 0;
|
||
let currentQcRowspan = 0;
|
||
|
||
for (let i = 0; i < data.length; i++) {
|
||
const current = data[i];
|
||
|
||
// 处理维度名称列的合并
|
||
if (prevDimension === null || prevDimension !== current.dimensionName) {
|
||
// 新维度，开始新的合并组
|
||
this.spanArr.push(1);
|
||
currentDimensionRowspan = 1;
|
||
prevDimension = current.dimensionName;
|
||
} else {
|
||
// 延续当前维度的合并组
|
||
this.spanArr[i - currentDimensionRowspan] += 1;
|
||
this.spanArr.push(0);
|
||
currentDimensionRowspan += 1;
|
||
}
|
||
|
||
// 处理质控点名称列的合并
|
||
if (prevDimension !== current.dimensionName || prevQcPoint !== current.qualityControlPointName) {
|
||
// 新维度或新质控点，开始新的合并组
|
||
this.qcSpanArr.push(1);
|
||
currentQcRowspan = 1;
|
||
prevQcPoint = current.qualityControlPointName;
|
||
} else {
|
||
// 延续当前质控点的合并组
|
||
this.qcSpanArr[i - currentQcRowspan] += 1;
|
||
this.qcSpanArr.push(0);
|
||
currentQcRowspan += 1;
|
||
}
|
||
}
|
||
},
|
||
|
||
// 合并单元格的方法
|
||
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
||
if (columnIndex === 0) { // 维度名称列
|
||
const _row = this.spanArr[rowIndex];
|
||
const _col = _row > 0 ? 1 : 0;
|
||
return {
|
||
rowspan: _row,
|
||
colspan: _col
|
||
};
|
||
} else if (columnIndex === 1) { // 质控点名称列
|
||
const _row = this.qcSpanArr[rowIndex];
|
||
const _col = _row > 0 ? 1 : 0;
|
||
return {
|
||
rowspan: _row,
|
||
colspan: _col
|
||
};
|
||
}
|
||
// 其他列不合并
|
||
return { rowspan: 1, colspan: 1 };
|
||
},
|
||
|
||
async getList() {
|
||
try {
|
||
this.loading = true;
|
||
// 构建包含reportId和stuNo的查询参数
|
||
const params = {
|
||
reportId: this.queryParams.reportId,
|
||
stuNo: this.queryParams.stuNo
|
||
};
|
||
const response = await filloutreportlistinfo(params);
|
||
|
||
// 提取头部信息
|
||
if (response.rows.length > 0) {
|
||
const firstRecord = response.rows[0];
|
||
this.reportName = firstRecord.reportName || "未命名报表";
|
||
this.stuNo = firstRecord.stuNo || "-";
|
||
this.studentName = firstRecord.studentName || "-";
|
||
this.deptName = firstRecord.deptName || "-";
|
||
}
|
||
|
||
// 处理表格数据
|
||
this.detailsList = response.rows.map(item => ({
|
||
id: item.id,
|
||
dimensionName: item.dimensionName,
|
||
qualityControlPointName: item.qualityControlPointName,
|
||
indicatorName: item.indicatorName,
|
||
schoolQualifiedStandard: item.schoolQualifiedStandard,
|
||
secondaryCollegeStandard: item.secondaryCollegeStandard,
|
||
personalTargetStandard: item.personalTargetStandard,
|
||
completionStatus: item.completionStatus || "",
|
||
reasonForIncompletion: item.reasonForIncompletion || "",
|
||
improvementActions: item.improvementActions || ""
|
||
}));
|
||
|
||
this.detailFormData.detailsList = [...this.detailsList];
|
||
|
||
// 计算合并规则（保持原始顺序）
|
||
this.getSpanArr(this.detailsList);
|
||
} catch (error) {
|
||
console.error("数据获取失败:", error);
|
||
Message.error("数据获取失败: " + error.message);
|
||
this.detailsList = [];
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 表格样式 */
|
||
.el-table {
|
||
margin-top: 15px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||
}
|
||
|
||
/* 表头字体大小调整 */
|
||
::v-deep .school-header .cell {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
::v-deep .report-header .cell {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #444;
|
||
}
|
||
|
||
::v-deep .student-header .cell {
|
||
font-size: 20px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 表格内容样式 */
|
||
::v-deep .el-table__body-wrapper {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 只读输入框样式 */
|
||
::v-deep .el-input.is-disabled .el-input__inner {
|
||
background-color: #f5f7fa;
|
||
border-color: #e4e7ed;
|
||
color: #606266;
|
||
cursor: default;
|
||
}
|
||
</style> |