<template>
<div class="app-container">
<div class="title">面试记录管理</div>
<div class="filter_container filter_containertop">
<el-input
class="filter_item"
v-model="listQuery.params.realName"
@change="getInterviewLists"
placeholder="请输入姓名"
></el-input>
<el-select
class="filter_item"
v-model="listQuery.params.status"
placeholder="请选择时间范围"
@change="changeStatus"
>
<el-option label="当年
春招" value="1"></el-option>
<el-option label="当年秋招" value="2"></el-option>
<el-option label="自定义时间" value="3"></el-option>
</el-select>
<el-date-picker
:disabled="listQuery.params.status != '3'"
class="filter_item2"
@change="changeDate"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-model="listQuery.params.interviewTime"
placeholder=""
/>
</div>
<el-table
:data="displayData"
border
:row-key="'id'"
:expand-row-keys="expandedRowKeys"
@expand-change="handleExpandChange"
class="aligned-table"
>
<!-- 展开列 -->
<el-table-column class="expand_column" type="expand">
<template #default="{ row }" >
<!-- 子表 -->
<el-table
:data="row.otherRecords"
:show-header="false"
class="sub-table"
>
<!-- 占位列 -->
<el-table-column width="50"></el-table-column>
<el-table-column
prop="studentName"
label="学生名称"
></el-table-column>
<el-table-column prop="remark" label="面试备注"></el-table-column>
<el-table-column prop="company" label="面试公司"></el-table-column>
</el-table>
</template>
</el-table-column>
<!-- 主表列 -->
<el-table-column prop="studentName" label="学生名称"></el-table-column>
<el-table-column prop="remark" label="面试备注"></el-table-column>
<el-table-column prop="company" label="面试公司"></el-table-column>
</el-table>
<pagination
v-show="dataList.total > 0"
:total="dataList.total"
:page.sync="listQuery.current"
:limit.sync="listQuery.size"
@pagination="getInterviewLists"
/>
</div>
</template>
<script>
import Pagination from "@/components/Pagination";
import {
getInterviewList,
saveInterview,
updateInterview,
deleteInterview,
} from "@/api/student/student";
export default {
name: "QuList",
components: {
Pagination,
},
data() {
return {
dataList: {
total: 0,
records: [
{ studentName: "张三", remark: "通过", company: "腾讯" },
{ studentName: "张三", remark: "待定", company: "阿里" },
{ studentName: "李四", remark: "未通过", company: "百度" },
{ studentName: "李四", remark: "通过", company: "字节跳动" },
{ studentName: "李四", remark: "通过", company: "美团" },
{ studentName: "王五", remark: "通过", company: "京东" },
],
},
// 显示数据：只显示每个学生的第一条记录
displayData: [],
// 存储所有学生的完整记录
groupedData: {},
// 控制展开的行
expandedRowKeys: [],
msdialogVisible: false,
msbjdialogVisible: false,
jilu: "",
listQuery: {
current: 1,
size: 10,
params: {
realName: "",
interviewTime: "",
},
},
form: {
companyName: "",
jobTitle: "",
interviewTime: "",
interviewRound: "",
feedback: "",
},
rules: {
companyName: [
{ required: true, message: "请输入公司名称", trigger: "blur" },
],
jobTitle: [
{ required: true, message: "请输入岗位名称", trigger: "blur" },
],
interviewTime: [
{ required: true, message: "请输入面试时间", trigger: "blur" },
],
interviewRound: [
{ required: true, message: "请输入面试轮次", trigger: "blur" },
],
status: [
{ required: true, message: "请选择面试状态", trigger: "change" },
],
// feedback: [
// { required: true, message: "请输入面试反馈", trigger: "blur" },
// ],
},
// 数据加载标识
listLoading: false,
};
},
mounted() {
this.getInterviewLists();
this.processData();
},
computed: {},
methods: {
changeStatus() {
// 如果选择的是
春招
if (this.listQuery.params.status == 1) {
// 获取当前年
let year = new Date().getFullYear();
this.listQuery.params.interviewTime = [
`${year}-03-01`,
`${year}-05-31`,
];
let start = this.listQuery.params.interviewTime[0];
let end = this.listQuery.params.interviewTime[1];
}
//如果选择秋招赋值为当年的7月1日到8月31日
else if (this.listQuery.params.status == 2) {
// 获取当前年
let year = new Date().getFullYear();
this.listQuery.params.interviewTime = [
`${year}-07-01`,
`${year}-08-31`,
];
let start = this.listQuery.params.interviewTime[0];
let end = this.listQuery.params.interviewTime[1];
} else {
this.listQuery.params.interviewTime = [];
}
console.log(this.listQuery.params.interviewTime);
},
changeDate() {
let start = this.listQuery.params.interviewTime[0];
let end = this.listQuery.params.interviewTime[1];
console.log(start, end);
},
getInterviewLists() {
// this.listLoading = true;
// getInterviewList(this.listQuery).then((res) => {
// this.listLoading = false;
// this.dataList = res.data;
// });
},
// 预处理数据
processData() {
const map = {};
const display = [];
// 按学生姓名分组
this.dataList.records.forEach((record) => {
if (!map[record.studentName]) {
map[record.studentName] = [];
}
map[record.studentName].push(record);
});
// 每个学生只显示第一条记录
for (const name in map) {
const records = map[name];
display.push({
id: name, // 用作 row-key
studentName: name,
remark: records[0].remark,
company: records[0].company,
otherRecords: records.slice(1), // 从第二条开始为其他记录
});
}
this.displayData = display;
console.log(this.displayData);
},
// 展开/折叠行时触发
handleExpandChange(row, expandedRows) {
const index = this.expandedRowKeys.indexOf(row.id);
if (index > -1) {
this.expandedRowKeys.splice(index, 1);
} else {
this.expandedRowKeys.push(row.id);
}
},
},
};
</script>
<style lang="scss" scoped>
.cggreen {
color: blue;
cursor: pointer;
}
.interview_container {
width: 100%;
height: 100%;
}
.bottom {
width: 100%;
height: 130px;
border: 1px solid black;
}
.bottoms {
width: 100%;
display: flex;
justify-content: right;
}
.title {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.filter_container {
margin-bottom: 10px;
}
.filter_item {
width: 180px;
margin-right: 10px;
}
.filter_item2 {
width: 380px;
}
::v-deep .el-table__expand-column {
width: 50px !important;
}
.sub-table ::v-deep .el-table__row .el-table__cell:nth-child(1) {
width: 50px !important;
border-right: none !important;
}
</style>
el-table中 如果row.otherRecords没有数据 对应的父级不显示expand按钮
关于算法的相关探讨
由于未提供博客具体内容，暂无法给出包含关键信息的摘要。
扫一扫
678
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
