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>
|