分页
2019-01-17 本文已影响0人
asmuzi
<template>
<section>
<!-- 考试列表 -->
<div class="exam_list">
<!-- 考试列表 头部-->
<div class="head_box">
<div class="head_content">
<el-form ref="form" :model="form" label-width="95px">
<el-form-item label="考试时间：">
<el-date-picker
v-model="form.examDate"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="examDateChange"
></el-date-picker>
</el-form-item>
<el-form-item label="考试年级：">
<el-select
class="subject"
@change="gradeChange"
v-model="form.grade"
placeholder="请选择年级"
>
<el-option label="高一年级" value="1"></el-option>
<el-option label="高二年级" value="2"></el-option>
<el-option label="高三年级" value="3"></el-option>
</el-select>
</el-form-item>
<el-radio-group v-model="form.category">
<el-radio label>不分文理</el-radio>
<el-radio label="10">只看文科</el-radio>
<el-radio label="11">只看理科</el-radio>
</el-radio-group>
</el-form>
</div>
</div>
<!-- 考试列表数组 -->
<div class="exam_container" v-loading="loading" v-if="dataVisible">
<div class="exam_box" :class="{kjb:item.isMarking}" v-for="(item,i) in examList" :key="i">
<div class="one_box cf">
<div class="info fl">
<div class="title cf">
<!-- <h2 class="paper_name fl">2018-2019学年高二上学期第一次月考（文科）</h2> -->
<h2 class="paper_name fl">{{item.examName}}</h2>
<!-- 校内or任教班级---状态判断 -->
<!-- <span class="golden fl">校内考试</span>
<span class="golden fl">任教班级考试</span>-->
<span class="golden fl">{{examTypeAlter(item.examType)}}</span>
<span class="blue fl" v-if="item.isMarking===1">考金榜阅卷</span>
</div>
<div class="two_line">
<span>考试日期：{{item.beginTime}} 至 {{item.endTime}}</span>
<!-- <span>考试年级：高二（文科班）</span> -->
<span>考试年级：{{gradeType(parseInt(item.examGrade))}}{{item.subjectCode?item.subjectCode==10?'(文科班)':'(理科班)':''}}</span>
<span :title="item.className">考试对象</span>
<span :title="item.examRemark">考试备注</span>
</div>
</div>
<!-- 导入后变成查看成绩 -->
<div class="user_operation fr">
<transition mode="out-in">
<button
class="see_score ok_button"
@click="publishedResults(item)"
v-if="item.isMarking&&roleId==1&&!parseInt(item.ifRelease)"
>发布成绩</button>
<router-link
class="see_score ok_button"
:to="{ name:'scoreManagement',query: {examId:item.id,schoolids:item.schoolids}}"
v-else
>查看成绩</router-link>
</transition>
<div class="see_icon" v-if="roleId==1">
<img src="../../assets/images/examinationManage/circular_point.png" alt>
<div class="hover_box">
<a class="hover_but" @click.prevent="upExam(item.id)">修改</a>
<a href="#" class="hover_but" @click="deleteExam(item,i,item.id)">删除</a>
</div>
</div>
</div>
<!-- <router-link class="fr" :to="{name:'scoreManagement'}"> -->
<!-- <button class="see_score"> -->
<!-- 导入后变成查看成绩 -->
<!-- 查看成绩 -->
<!-- <img src="../../assets/images/examinationManage/circular_point.png" alt=""> -->
<!-- </button> -->
<!-- </router-link> -->
</div>
<!-- 科目列表-管理员-->
<div class="exam_id cf" v-for="(subject,index) in item.subjects" :key="index">
<div class="subject fl">
<img :src="getImgType(subject.subjectId)" alt>
<!-- 考卷的三种状态 -->
<!-- <span>考卷：<i>KJB123df562s</i></span> -->
<!-- <span>考卷：<i>扫描考卷</i> <i>扫描解析</i></span> -->
<span>
考卷：
<i>
<a @click.prevent="getPaperDetail(item.id,subject.subjectId)" class="to_view">查看</a>
</i>
</span>
<!-- <span>考卷：
<i>
<router-link :to="{ name:'scanningImg'}">
扫描考卷
</router-link>
</i>
</span>
<span>考卷：
<i>
<router-link :to="{ name:'scanningResult'}">
扫描解析
</router-link>
</i>
</span>-->
<!-- end -->
</div>
<div class="exam_type">
<!-- 管理员部分 -->
<p v-if="item.isMarking">
<span v-if="roleId==1">答卷已入库{{subject.paperInLibrarySum}}份</span>
<span v-if="roleId==1">客观题识别计分{{subject.objQuestionSpeed}}%</span>
<span v-if="roleId==1">主观题阅卷进度{{subject.subQuestionMarkSpeed}}%</span>
<span v-if="roleId==1">问题卷{{subject.matterPaperNum}}</span>
<!-- 学科负责人 -->
<span v-if="roleId==2&&subject.roleId==1">问题卷处理进度 5/12</span>
<!-- 阅卷人 -->
<span v-if="roleId==2&&subject.roleId==2">我的阅卷进度 5/500</span>
</p>
<!-- 非考金榜阅卷的考试 -->
<p v-else>
<span>非考金榜阅卷的考试</span>
</p>
</div>
<div class="fr">
<!-- 管理员 -->
<template v-if="item.isMarking">
<template v-if="!item.subjects[index].ifEndMark">
<router-link :to="{ name:'correctSetUp'}">
<el-tag v-if="roleId==1">阅卷设置</el-tag>
</router-link>
<a @click.prevent="endExam(item,item.id,item.subjects[index])">
<el-tag v-if="roleId==1" type="info">结束阅卷</el-tag>
</a>
<!-- 阅卷人-->
<router-link :to="{ name:'markExam'}">
<el-tag v-if="roleId==2&&subject.roleId==2&&item.isMarking">去阅卷</el-tag>
</router-link>
<!-- 学科负责人 -->
<template v-if="roleId==2&&subject.roleId==1">
<router-link :to="{ name:'problemExam'}">
<el-tag type="warning">问题卷处理</el-tag>
</router-link>
<router-link :to="{ name:'schedule'}">
<el-tag>进度监控</el-tag>
</router-link>
<router-link :to="{ name:'qualityInspect'}">
<el-tag type="danger">质量抽查</el-tag>
</router-link>
</template>
</template>
<template v-else>
<span>阅卷已结束</span>
</template>
</template>
<!-- 导入后此按钮消失 -->
<a @click.prevent="importScoreData(item.id,subject.subjectId)" v-if="!item.isMarking">
<el-tag type="danger" v-if="roleId==1">导入成绩</el-tag>
</a>
<!-- end -->
</div>
</div>
<!-- 科目列表-阅卷人和检查人-->
<div class="subject_list exam_id" v-if="(item.isMarking&&roleId==2&&false)">
<div class="subject" v-for="(subject,i) in item.subjects" :key="i">
<!-- 没有该科目权限-->
<template v-if="subject.enterStatus==0">
<img :src="getImgType(subject.subjectId)" alt>
<span>
考卷：
<i v-if="subject.enterStatus==1">
<a @click.prevent="getPaperDetail(item.id,subject.subjectId)" class="to_view">查看</a>
</i>
<!-- 该科目考试未扫描录入试卷 enterStatus==0-->
<i v-else>
<a style="color:#999;" @click.prevent>查看</a>
</i>
</span>
</template>
</div>
</div>
<!-- end -->
</div>
<div class="pagination" v-if="total/pageSize>0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
layout="prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
<div class="no_data" v-else>暂无数据</div>
</div>
<!--弹窗-结束阅卷 -->
<dialog-end-exam
:msg1.sync="dialogEndExamVisible"
:obj.sync="dialogEndExamObj"
:subject.sync="dialogEndExamSubject"
@emitParent="resetDialogEnd"
></dialog-end-exam>
<!-- 弹窗-删除考试 -->
<dialog-delete-exam
:msg1.sync="dialogDeleteExamVisible"
:obj.sync="dialogDeleteExamObj"
@emitParent="resetDialogDelete"
v-if="dialogDeleteExamVisible"
></dialog-delete-exam>
<!-- 弹窗-导入成绩 -->
<import-score :scoreType="score"></import-score>
<!-- 弹窗-自动升年级 -->
<upgrade></upgrade>
</section>
</template>
<script>
import { test, up } from "service";
import "css/examinationManage/examinationList.css";
import "css/headTetleScreen.css";
import importScore from "../scoreManagementManage/unit/importScore.vue";
import dialogEndExam from "./unit/dialogEndExam.vue";
import dialogDeleteExam from "./unit/dialogDeleteExam.vue";
import upgrade from "./unit/upgrade.vue";
export default {
components: {
importScore,
dialogEndExam,
dialogDeleteExam,
upgrade
},
data() {
return {
roleId: "",
createObj: {}, //创建考试对象
examList: [], //考试列表
// 分页
currentPage: 1,
total: 0,
pageSize: 10, //每页显示条目个数
PageNow: 1,
// 分页
subjectsList: [], //科目列表
form: {
name: "",
grade: "1", //考试年级
examDate: [new Date(2019, 0, 1), new Date(2021, 0, 1)], //考试时间
category: "" //文理
},
dialogEndExamVisible: false, //结束阅卷弹窗
dialogEndExamObj: {}, //结束阅卷弹窗对象
dialogEndExamSubject: {}, //结束阅卷弹窗对象
dialogDeleteExamVisible: false, //删除考试弹窗
dialogDeleteExamObj: {}, //删除考试弹窗对象
deleteExamObj: {}, //删除考试对象
score: {
//导入成绩弹窗
isShow: false
},
loading: true, //无数据时的显示
dataVisible: true //暂无数据
};
},
mounted() {
// this.roleId = this.roleId;
this.roleId = this.$store.state.roleId;
this.createObj = this.$route.query.obj;
if (this.form.examDate && this.form.grade) {
this.getExamList();
} else {
this.$message("请选择考试时间和考试年级！");
}
},
methods: {
// 导入成绩
importScoreData(examId, subjectId) {
// console.log(examId, subjectId);
up("/exam/importScore", {
examId,
subjectId,
name: "",
photoBeas: ""
}).then(res => {});
this.score.isShow = true;
},
//api
gradeChange(e) {
console.log(e, 1111);
if (this.form.examDate && this.form.grade) {
this.getExamList();
}
},
examDateChange() {
if (this.form.examDate && this.form.grade) {
this.getExamList();
}
},
//返回考试类型
examTypeAlter(i) {
switch (i) {
case 1:
return "校内考试";
break;
case 2:
return "多校联考";
break;
case 3:
return "任教班级考试";
break;
default:
}
},
gradeType(i) {
switch (i) {
case 1:
return "高一年级";
break;
case 2:
return "高二年级";
break;
case 3:
return "高三年级";
break;
default:
}
},
// 获取科目列表图片
getImgType(subjectid) {
switch (subjectid) {
case 1:
return require("../../assets/images/subjectIcon/Chinese.png");
break;
case 2:
return require("../../assets/images/subjectIcon/Mathematics.png");
break;
case 3:
return require("../../assets/images/subjectIcon/English.png");
break;
case 4:
return require("../../assets/images/subjectIcon/Physics.png");
break;
case 5:
return require("../../assets/images/subjectIcon/Chemistry.png");
break;
case 6:
return require("../../assets/images/subjectIcon/Biology.png");
break;
case 7:
return require("../../assets/images/subjectIcon/History.png");
break;
case 8:
return require("../../assets/images/subjectIcon/Geography.png");
break;
case 9:
return require("../../assets/images/subjectIcon/Politics.png");
break;
}
},
// 获取考试列表
getExamList() {
test("/exam/getExamList", {
beginTime: this.form.examDate[0],
endTime: this.form.examDate[1],
subjectCode: this.form.category || "",
examGrade: this.form.grade,
PageNow: this.PageNow,
PageSize: this.pageSize
// roleId: this.roleId
}).then(res => {
console.log(res, "考试列表");
this.loading = false;
if (res) {
this.total = res.total;
this.examList = res.data;
this.dataVisible = true;
} else {
this.dataVisible = false;
}
});
},
// 发布成绩
publishedResults(item) {
// console.log(item);
console.log(item.subjects);
let bool = true;
item.subjects.forEach((item, i) => {
// console.log(item.ifEndMark);
if (item.ifEndMark == 0) {
this.$message("当前考试有科目未结束阅卷！");
bool = false;
return;
}
});
if (bool) {
item.ifRelease = 1;
}
console.log(item);
},
// 单科结束阅卷
endExam(obj, id, subject) {
// console.log(obj);
this.dialogEndExamObj = obj;
this.dialogEndExamSubject = subject;
this.dialogEndExamVisible = true;
},
resetDialogEnd(obj) {
this.dialogEndExamVisible = false;
if (obj) {
up("/exam/endExam", {
examId: obj.examId,
subjectId: obj.subjectId
}).then(res => {});
this.getExamList();
}
},
// 删除考试
deleteExam(item, i, id) {
// console.log(i, id);
this.dialogDeleteExamVisible = true;
this.dialogDeleteExamObj = item;
this.deleteExamObj.index = i;
this.deleteExamObj.examId = id;
},
// 删除考试
resetDialogDelete(msg) {
this.dialogDeleteExamVisible = false;
if (msg == "dialogDeleteExam") {
up("/exam/deleteExam", {
examId: this.deleteExamObj.examId
}).then(res => {});
this.examList.splice(this.deleteExamObj.index, 1);
}
},
// 编辑考试
upExam(id) {
this.$router.push({
name: "foundExam",
query: { examId: id }
});
},
// 查看考卷
getPaperDetail(examId, subjectId) {
// console.log(examId, subjectId);
let obj = {};
test("/exam/getPaperDetail", { examId, subjectId }).then(res => {
// console.log(res.data[0]);
obj.examName = res.data[0].examName;
obj.subjectName = res.data[0].subjectName;
this.$router.push({ name: "scanningResult", query: { obj } });
});
},
//改变时
handleSizeChange(val) {
this.pageSize = val;
this.getExamList();
},
//条目改变时
handleCurrentChange(val) {
this.PageNow = val;
this.getExamList();
}
},
watch: {
"form.category"() {
// console.log(1)
this.getExamList();
}
}
};
</script>
<style lang ='less' scoped>
.exam_container {
min-height: 500px;
}
.exam_list .el-tag,
.exam_list .to_view {
cursor: pointer;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(100%);
}
.v-enter-active,
.v-leave-active {
transition: all 0.3s ease;
}
</style>
