初始化
This commit is contained in:
279
src/views/diagnostic/DiaFillOutReportDetial/index.vue
Normal file
279
src/views/diagnostic/DiaFillOutReportDetial/index.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user