teachcloud-print-web/src/modules/exam/components/taskApply/TaskInfo.vue

<template>
  <div>
    <el-form class="form-info mb-4" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="课程（代码）：">
            <span>{{ examTask.courseName }}（{{ examTask.courseCode }}）</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构：">
            <span>{{ examTask.teachingRoomName | defaultFieldFilter }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="使用学期：">
            <span>{{ examTask.semesterName || "--" }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考试：">
            <span>{{ examTask.examName || "--" }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="拟卷教师：">
            <span>{{ examTask.teacherName | defaultFieldFilter }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="命题老师：">
            <span>{{ examTask.propositionName || examTask.userName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="考试时间：">
            <span v-if="examRoomInfo.examDate && examRoomInfo.examTime">
              {{ examRoomInfo.examDate }} <i class="mr-1"></i>
              {{ examRoomInfo.examTime }}
            </span>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审核状态：">
            <span>{{ examTask.auditStatus | auditStatusFilter }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div v-if="examRoomClassList.length && !IS_MODEL2" class="task-exam-room">
      <el-table
        :data="examRoomClassList"
        border
        style="width: 100%"
        max-height="300px"
      >
        <el-table-column
          v-if="hasClassInfo"
          prop="clazzNames"
          label="使用班级"
          min-width="400"
        ></el-table-column>
        <el-table-column
          prop="studentCount"
          label="人数"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="printCount"
          label="总印份数"
          min-width="100"
        ></el-table-column>
      </el-table>
    </div>

    <div class="part-box part-box-pad task-exam-room" v-if="IS_MODEL2">
      <p>
        正式考生{{ examRoomClassInfo.studentCount }}个，总印份数{{
          examRoomClassInfo.printCount
        }}份（正式考生{{ examRoomClassInfo.studentCount }}份，备用卷{{
          examRoomClassInfo.backupCount
        }}份）
      </p>
      <p>考试对象：{{ examRoomClassInfo.clazzNames }}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { taskApplyExamObject } from "../../api";
import { parseTimeRangeDateAndTime } from "@/plugins/utils";

export default {
  name: "task-info",
  data() {
    return {
      hasClassInfo: false,
      examRoomClassList: [],
      examRoomClassInfo: {},
      examRoomInfo: {},
    };
  },
  computed: {
    ...mapState("exam", ["editType", "examTask"]),
    IS_MODEL2() {
      return this.examTask.examModel === "MODEL2";
    },
  },
  mounted() {
    this.getExamRoomInfo();
  },
  methods: {
    async getExamRoomInfo() {
      const data = await taskApplyExamObject({
        paperNumber: this.examTask.paperNumber,
        examId: this.examTask.examId,
      });

      if (this.IS_MODEL2) {
        const { printCount, clazzNames } = data.examRoomClassList[0];
        const nums = printCount.split("+").map((item) => item * 1);
        this.examRoomClassInfo = {
          backupCount: nums[1],
          studentCount: nums[0],
          printCount: nums[0] + nums[1],
          clazzNames,
        };
      } else {
        this.examRoomClassList = data.examRoomClassList || [];
        this.hasClassInfo = this.examRoomClassList.some(
          (item) => item.clazzNames
        );
      }
      const { date, time } = parseTimeRangeDateAndTime(
        data.examStartTime,
        data.examEndTime
      );
      this.examRoomInfo = {
        examDate: date,
        examTime: time,
      };
    },
  },
};
</script>