|
<template>
<div class="card">
<div class="r-main" v-show="showMain">
<div class="r-top">
<div>
<p>身份证号：{{ studentData.card_num }}</p>
<p>考生姓名：{{ studentData.name }}</p>
</div>
</div>
<el-table
ref="multipleTable"
border
:header-cell-style="headStyle"
:data="tableData"
>
<el-table-column prop="place_name" label="序号" width="150">
</el-table-column>
<el-table-column prop="place_code" label="考试名称" width="120">
</el-table-column>
<el-table-column prop="place_name" label="考试系列" width="150">
</el-table-column>
<el-table-column prop="place_code" label="考试级别" width="120">
</el-table-column>
<el-table-column prop="place_name" label="考试科目" width="150">
</el-table-column>
<el-table-column prop="place_code" label="考试时间" width="120">
</el-table-column>
<el-table-column label="操作" width="120">
<template>
<el-button size="mini" type="primary" @click="showMain = false">
报名
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="print-card" v-show="!showMain">
<p>准考证内容</p>
<el-button type="default" @click="showMain = true">返回</el-button>
<el-button type="primary">打印准考证</el-button>
</div>
</div>
</template>
<script>
import {
getStudentInfo, //个人资料
} from "@/api/home";
export default {
data() {
return {
tableData: [
{"kaoshi":1}
],
studentData: [],
form: {},
showMain: true,
}
},
props:["printValue"],
watch: {
},
mounted() {
this.showMain = this.printValue;
console.log('show',this.showMain)
},
created() {
this.getStudent();
},
methods: {
// 获取考生个人资料
async getStudent() {
let res = await getStudentInfo({
student_id: 2,
});
// 解构数据
let { code, data } = res;
// 赋值渲染
if (code === 200) {
this.studentData = data.res.student;
}
},
// 表格头部样式回调
headStyle() {
return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
},
}
}
</script>
<style lang="less" scoped>
.r-main {
.r-top {
background-color: #F6F7F9;
margin: 10px auto;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
p {
margin: 20px 0 20px 0;
}
}
.el-table::before {
height: 0;
}
.el-table--border::after, .el-table--group::after {
height: 0;
}
.el-table--border, .el-table--group {
border: 0;
}
}
</style>
|