JingTieXueTang.Web/src/views/examManagement/examManagementDetail.vue

<template>
  <div class="app-container" ref="tableBody">
    <div class="common-card exam-detail-body">
      <a-spin :spinning="loading">
        <!-- 考试详情 -->
        <div class="exam-detail-info" ref="filterCard">
          <div class="exam-detail-name-row">
            <div class="exam-detail-name">{{ examDetailData.name }}</div>
            <!-- <a-button
              type="primary"
              :disabled="examDetailData.disabled"
              @click="handleEditExam"
              >编辑</a-button
            > -->
          </div>
          <div class="flex-between exam-detail-item">
            <div class="exam-detail-description">
              考试描述：<span>{{ examDetailData.description }}</span>
            </div>
            <div class="exam-detail-type">
              考试分类：<span>{{
                examDetailData.examCategory | formateExamTypeFun
              }}</span>
            </div>
          </div>
          <div class="flex-between exam-detail-item">
            <div>
              <span class="exam-detail-title">考试工种：</span>
              <span class="exam-detail-txt">{{
                examDetailData.engineerTypeTxt
              }}</span>
            </div>
            <div>
              <span class="exam-detail-title">考试时间：</span>
              <span class="exam-detail-txt">{{
                examDetailData.startTime | formatDate
              }}</span>
            </div>
            <div>
              <span class="exam-detail-title">考试时长：</span>
              <span class="exam-detail-txt">{{
                examDetailData.examLongTime
              }}</span>
            </div>
            <div>
              <span class="exam-detail-title">试题数量：</span>
              <span class="exam-detail-txt">{{ pagination.total }}</span>
            </div>
            <div>
              <span class="exam-detail-title">状态：</span>
              <span
                class="exam-detail-txt"
                :class="
                  examDetailData.examStatusTxt === examStatusTypeTxt[0]
                    ? 'exam-status-green'
                    : examDetailData.examStatusTxt === examStatusTypeTxt[1]
                    ? 'exam-status-yellow'
                    : examDetailData.examStatusTxt === examStatusTypeTxt[2]
                    ? 'exam-status-red'
                    : ''
                "
                >{{ examDetailData.examStatusTxt }}</span
              >
            </div>
          </div>
          <div class="exam-detail-totalGrades exam-detail-item">
            总分：{{ examDetailData.totalPoints }}
          </div>
          <div class="border-line"></div>
        </div>
        <!-- 表单 :scroll="{ y: tableHeight }"-->
        <a-table
          :columns="columns"
          :data-source="tableData"
          :row-key="(record) => record.id"
          :pagination="false"
        >
          <template slot="questionCategory" slot-scope="text, record">
            <span>{{
              record.questionCategory ? record.questionCategory.name : '不限'
            }}</span>
          </template>
          <template slot="rootQuestionCategory" slot-scope="text, record">
            <span>{{
              record.rootQuestionCategory
                ? record.rootQuestionCategory.name
                : '不限'
            }}</span>
          </template>
          <template slot="status" slot-scope="text">
            <span
              :class="
                text === examStatusTypeTxt[0]
                  ? 'exam-status-green'
                  : text === examStatusTypeTxt[1]
                  ? 'exam-status-yellow'
                  : text === examStatusTypeTxt[2]
                  ? 'exam-status-red'
                  : ''
              "
              >{{ text }}</span
            >
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="toQuestionDetailFun(record)">详情</a>
          </template>
        </a-table>
        <!-- 分页 -->
        <div class="a-pagination-display">
          <a-pagination
            v-model="pagination.current"
            :pageSize="pagination.pageSize"
            :total.sync="pagination.total"
            show-less-items
            show-quick-jumper
            @change="getQusetionsListFun"
          />
        </div>
      </a-spin>
    </div>
    <div class="company-info">
      <span>
        copyright © 浮游科技有限公司出品
      </span>
    </div>
    <QuestionDetailDialog
      :questionDetail.sync="questionDetail"
      :isVisible.sync="isVisible"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import {
  formatTimeHoursMinuteSecondsFun,
  formatePathParams,
  formateExamStatesFun,
  formateEngineeringWork,
} from '@/filters';
import {
  EXAM_QUESTION_TYPE,
  EXAM_STATUS_TYPE_TXT,
  EXAM_STATUS_TYPE,
} from '@/common/Constant';
export default {
  name: 'examManagementDetail',
  props: {},
  components: {},
  data() {
    return {
      // tableHeight: 400, // 表格高度
      columns: [], // form表单的列参数
      pagination: {
        pageSize: 7,
        current: 1,
        total: 0,
      }, // 分页参数
      loading: false, // 是否展示加载动画
      examDetailData: {}, // 单场考试的详情信息
      tableData: [], // 单场考试的试题列表
      engineeringWorkList: [], // 工种数据列表
      examStatusTypeTxt: EXAM_STATUS_TYPE_TXT, // 考试状态属性文字
      isVisible: false, // 是否显示详情浮窗
      questionDetail: {}, // 需要展示的试题详情
    };
  },
  created() {
    this.initDataFun(); //初始化数据
  },
  mounted() {
    // this.initTableHeightFun(); // 初始化表单的高度
  },
  beforeDestroy() {},
  watch: {
    // screenHeight() {
    //   this.initTableHeightFun(); // 初始化表单的高度
    // },
  },
  computed: {
    ...mapGetters(['screenHeight', 'GET_ENGINEERING_WORK_LIST']),
  },
  methods: {
    // // 初始化表单的高度
    // initTableHeightFun() {
    //   this.tableHeight =
    //     this.$refs.tableBody.offsetHeight -
    //     (this.$refs.filterCard.offsetHeight + 48 * 3 + 16);
    // },
    //初始化数据
    initDataFun() {
      if (!this.$route.query.id) {
        this.$message.error('页面异常，请重新进入当前页面');
        return;
      }
      // 工种类别
      this.engineeringWorkList = [
        { name: '不限', id: '' },
        ...this.GET_ENGINEERING_WORK_LIST,
      ];
      // 表单的列的配置参数
      this.columns = [
        // {
        //   title: '试题编号',
        //   dataIndex: 'id',
        //   key: 'id',
        //   scopedSlots: { customRender: 'id' },
        //   width: 240,
        // },
        {
          title: '试题',
          dataIndex: 'content',
          key: 'content',
        },
        {
          title: '试题类别',
          dataIndex: 'questionTypeTxt',
          key: 'questionTypeTxt',
          scopedSlots: { customRender: 'questionTypeTxt' },
          width: 150,
        },
        {
          title: '试题父类',
          dataIndex: 'rootQuestionCategory',
          key: 'rootQuestionCategory',
          scopedSlots: { customRender: 'rootQuestionCategory' },
          width: 150,
        },
        {
          title: '试题子类',
          dataIndex: 'questionCategory',
          key: 'questionCategory',
          scopedSlots: { customRender: 'questionCategory' },
          width: 150,
        },
        {
          title: '工种',
          dataIndex: 'engineerTypeTxt',
          key: 'engineerTypeTxt',
          scopedSlots: { customRender: 'engineerTypeTxt' },
          width: 200,
        },
        {
          title: '分值',
          dataIndex: 'points',
          key: 'points',
          width: 100,
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 100,
        },
      ];

      this.getExamDetailFun(); // 查询：考试详情
    },
    // 查询：考试详情
    getExamDetailFun() {
      let params = {
        examId: this.$route.query.id,
      };
      this.$_http
        .get(formatePathParams(this.$_API.INTERFACE_GET_EXAM_DETAIL, params))
        .then((res) => {
          let resData = res.data;
          // 考试时长
          let tarTime = formatTimeHoursMinuteSecondsFun(resData.duration);
          resData.examLongTime =
            tarTime.hours +
            '时' +
            tarTime.minutes +
            '分' +
            tarTime.seconds +
            '秒';
          // 工种
          if (resData.engineerTypes) {
            let findItem = formateEngineeringWork(
              this.engineeringWorkList,
              resData.engineerTypes[0]
            );
            resData.engineerTypeTxt = findItem.name;
          } else {
            resData.engineerTypeTxt = '不限';
          }
          let obj = formateExamStatesFun(resData.startTime, resData.deadline);
          resData.examStatus = obj.examStatus;
          resData.examStatusTxt = obj.examStatusTxt;
          resData.disabled =
            resData.examStatus !== EXAM_STATUS_TYPE.NOT_START ? true : false; // 未开始的才能编辑
          this.examDetailData = resData;
          this.loading = false;
          this.getQusetionsListFun(); // 查询：试题列表数据
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 查询：试题列表数据
    getQusetionsListFun() {
      if (!this.$route.query.id) {
        return;
      }
      this.loading = true;
      let paramsPath = {
        examId: this.$route.query.id,
      };
      let params = {
        page: this.pagination.current - 1,
        size: this.pagination.pageSize,
      };
      this.$_http
        .get(
          formatePathParams(
            this.$_API.INTERFACE_GET_EXAM_QUESTIONS_LIST,
            paramsPath
          ),
          { params }
        )
        .then((res) => {
          let resData = res.data.content;
          resData.forEach((item) => {
            // 试题类别
            EXAM_QUESTION_TYPE.forEach((it) => {
              if (item.type === it.code) {
                item.questionTypeTxt = it.name;
              }
            });
            // 工种
            if (item.engineerTypes) {
              let findItem = formateEngineeringWork(
                this.engineeringWorkList,
                item.engineerTypes[0]
              );
              item.engineerTypeTxt = findItem.name;
            } else {
              item.engineerTypeTxt = '不限';
            }
          });
          this.tableData = [...resData];
          this.pagination.total = res.data.totalElements; // 总条数
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 操作：编辑
    handleEditExam() {
      if (!this.examDetailData || !this.examDetailData.id) {
        this.$message.error('数据异常，请重新进入当前页面');
        return;
      }
      this.$router.push({
        path: '/examManagement/manualVolumeFormation',
        query: {
          id: this.examDetailData.id,
          questionNum: this.pagination.total,
        },
      });
    },
    // 操作：详情
    toQuestionDetailFun(record) {
      console.log('查看某个试题的详情', record);
      this.questionDetail = record;
      this.isVisible = true;
      // if (!record || !record.id) {
      //   this.$message.error('数据异常，请重新进入当前页面');
      //   return;
      // }
      // switch (record.type) {
      //   case EXAM_QUESTION_TYPE[0].code:
      //     this.$router.push({
      //       path: '/examQuestionManagement/create/singleChoice',
      //       query: { id: record.id },
      //     });
      //     break;
      //   case EXAM_QUESTION_TYPE[1].code:
      //     this.$router.push({
      //       path: '/examQuestionManagement/create/multipleChoice',
      //       query: { id: record.id },
      //     });
      //     break;
      //   case EXAM_QUESTION_TYPE[2].code:
      //     this.$router.push({
      //       path: '/examQuestionManagement/create/trueOrFalse',
      //       query: { id: record.id },
      //     });
      //     break;
      //   case EXAM_QUESTION_TYPE[3].code:
      //     this.$router.push({
      //       path: '/examQuestionManagement/create/gapFilling',
      //       query: { id: record.id },
      //     });
      //     break;
      //   default:
      //     this.$message.error('试题数据异常，无法查看详');
      //     break;
      // }
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
@import '~@/styles/common/variable.less';
.exam-detail-body {
  .exam-detail-info {
    width: 100%;
    .exam-detail-name-row {
      display: flex;
      justify-content: space-between;
      .exam-detail-name {
        font-size: 20px;
        font-weight: bold;
        color: @mainColorBlack85;
      }
    }
    .exam-detail-description,
    .exam-detail-type {
      font-size: 14px;
      color: @mainColorBlack;
    }
    .exam-detail-totalGrades {
      font-size: 16px;
      font-weight: bold;
      color: @mainColorBlack65;
    }
    .exam-detail-item {
      margin-top: @paddingMarginVal;
    }
    .exam-detail-title {
      font-size: 14px;
      color: @mainColorBlack85;
    }
    .exam-detail-txt {
      font-size: 14px;
      color: @mainColorBlack65;
    }
    .exam-status-green {
      color: #58e206;
    }
    .exam-status-yellow {
      color: #ff8d1a;
    }
    .exam-status-red {
      color: #d43030;
    }
  }
}
</style>