分页

作者: asmuzi | 来源:发表于2019-01-17 20:10 被阅读0次
    <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>
    
    

    相关文章

      网友评论

          本文标题:分页

          本文链接:https://www.haomeiwen.com/subject/oprwdqtx.html