<template>
|
<div>
|
<div class="content-bg">
|
<div class="main-content">
|
<ReturnBtn></ReturnBtn>
|
|
<el-row class="mt-6">
|
<el-text class="text-title">成绩查询</el-text>
|
</el-row>
|
</div>
|
</div>
|
<div class="main-content py-4" style="margin-top: -130px;">
|
<el-card shadow="never" class="p-4" style="min-height: 500px;">
|
<el-form-item>
|
<el-input v-model="keyword" placeholder="搜索关键字">
|
<template #prefix>
|
<el-icon class="el-input__icon"><search /></el-icon>
|
</template>
|
</el-input>
|
</el-form-item>
|
<div v-for="(score,index) in scoreList"
|
class="mt-3"
|
:key="`scoreCard${index}`"
|
style="border-radius: 5px;"
|
:style="{ border: `1px solid ${score.foldFlag?'#dcdcdc':'#007aff'}` }"
|
>
|
<el-card shadow="never" class="p-3 cursor-p" style="background: #F7F7F7;border: none;" @click="score.foldFlag=!score.foldFlag">
|
<el-row justify="space-between" align="middle">
|
<div>
|
<el-row><el-text class="text-lg text-black font-medium">{{ score.occupationJob }}</el-text></el-row>
|
<el-row class="mt-1">
|
<el-text>{{ score.batch }}</el-text>
|
</el-row>
|
</div>
|
<Icon v-if="score.foldFlag" icon="mingcute:down-line" width="22" height="22" style="color: #333333" />
|
<Icon v-else icon="mingcute:up-line" width="22" height="22" style="color: #007AFF" />
|
</el-row>
|
</el-card>
|
<div v-if="!score.foldFlag" class="px-4">
|
<el-row v-for="(field,index) in fieldList"
|
style="border-bottom: 1px solid #DCDCDC;"
|
class="py-4"
|
:key="`field${index}`"
|
>
|
<el-text style="width: 170px;color: #666666;" class="font-medium">{{ field.label }}</el-text>
|
<el-text v-if="field.value == 'statusText'" class="font-medium">
|
<div style="display: flex;flex-direction: column;">
|
<el-text :style="getStyle(score.status)" style="align-self: start;">{{ score.statusText }}</el-text>
|
<el-text v-if="score.status=='cancellation'">作废原因：{{ score.failReason }}</el-text>
|
</div>
|
</el-text>
|
<el-text v-else class=" text-black font-medium">{{score[field.value]}}</el-text>
|
</el-row>
|
</div>
|
</div>
|
<el-row justify="center" v-if="scoreList.length==0">
|
<el-text>暂无数据~</el-text>
|
</el-row>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { useLoginStore } from '@/stores/login.js'
|
import { useSessionStore } from '@/stores/session.js'
|
import { storeToRefs } from 'pinia';
|
export default {
|
components: {
|
|
},
|
setup() {
|
const { userInfo } = storeToRefs(useSessionStore())
|
const { loginDialogVisible } = storeToRefs(useLoginStore())
|
return { userInfo, loginDialogVisible }
|
},
|
data() {
|
return {
|
scoreList: [],
|
keyword: '',
|
fieldList: [
|
{ label: '姓名', value: 'name' },
|
{ label: '身份证号', value: 'idCard' },
|
{ label: '准考证号', value: 'examCard' },
|
{ label: '理论知识成绩', value: 'theoryScore' },
|
{ label: '操作技能成绩', value: 'operationScore' },
|
{ label: '成绩状态', value: 'statusText' },
|
]
|
}
|
},
|
computed: {
|
|
},
|
watch: {
|
},
|
created() {
|
this.getScoreList()
|
},
|
methods: {
|
getScoreList() {
|
this.scoreList = [
|
{
|
id: 1,
|
occupationJob: '电工（维修电工）-四级',
|
batch: '2025年12月公共营养师第1批',
|
name: '黄婷婷',
|
idCard: '440203198906302518',
|
examCard: '250610110746092',
|
theoryScore: '--',
|
operationScore: '--',
|
status: 'auditing',
|
statusText: '成绩审核中',
|
foldFlag: false
|
},
|
{
|
id: 2,
|
occupationJob: '电工（维修电工）-四级',
|
batch: '2025年12月公共营养师第1批',
|
name: '黄婷婷',
|
idCard: '440203198906302518',
|
examCard: '250610110746092',
|
theoryScore: '78分（合格）',
|
operationScore: '85分（合格）',
|
status: 'public',
|
statusText: '成绩公示中',
|
foldFlag: true
|
},
|
{
|
id: 3,
|
occupationJob: '电工（维修电工）-四级',
|
batch: '2025年12月公共营养师第1批',
|
name: '黄婷婷',
|
idCard: '440203198906302518',
|
examCard: '250610110746092',
|
theoryScore: '78分（合格）',
|
operationScore: '85分（合格）',
|
status: 'effectiveness',
|
statusText: '成绩已生效',
|
foldFlag: true
|
},
|
{
|
id: 4,
|
occupationJob: '电工（维修电工）-四级',
|
batch: '2025年12月公共营养师第1批',
|
name: '黄婷婷',
|
idCard: '440203198906302518',
|
examCard: '250610110746092',
|
theoryScore: '85分（合格）',
|
operationScore: '78分（合格）',
|
status: 'cancellation',
|
statusText: '成绩已作废',
|
failReason: '违规作弊',
|
foldFlag: true
|
},
|
]
|
},
|
getStyle(status) {
|
let obj = {
|
auditing: '#007AFF',
|
public: '#FF9009',
|
effectiveness: '#1BA53A',
|
cancellation: '#FF4040',
|
}
|
return { color: obj[status] }
|
}
|
}
|
}
|
|
</script>
|
<style scoped>
|
.content-bg {
|
height: 240px;
|
background-image: url('@/assets/images/contentBg.png');
|
background-repeat: no-repeat, no-repeat, repeat; /* 分别设置 */
|
background-size: cover;
|
}
|
.active-tab {
|
background-color: #EEF5FF;
|
border: 1px solid #0069FF !important;
|
color: #0069FF !important;
|
}
|
</style>
|
