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">{{ examDetailData.examName }}</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.type | formateExamTypeFun
              }}</span>
            </div>
          </div>
          <div class="flex-between exam-detail-item">
            <div>
              <span class="exam-detail-title">考试工种：</span>
              <span class="exam-detail-txt">{{
                examDetailData.engineeringWork | formateEngineeringWorkTypeFun
              }}</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">{{ examQuestionList.length }}</span>
            </div>
            <div>
              <span class="exam-detail-title">状态：</span>
              <span
                class="exam-detail-txt"
                :class="
                  examDetailData.status === '未开始'
                    ? 'exam-status-green'
                    : examDetailData.status === '正在考试'
                    ? 'exam-status-yellow'
                    : examDetailData.status === '已结束'
                    ? 'exam-status-red'
                    : ''
                "
                >{{ examDetailData.status }}</span
              >
            </div>
          </div>
          <div class="exam-detail-totalGrades exam-detail-item">总分：100</div>
          <div class="border-line"></div>
        </div>
        <!-- 考试题目列表：表单[自带分页功能] -->
        <a-table
          :columns="columns"
          :data-source="examQuestionList"
          :row-key="(record) => record.id"
          :scroll="{ y: tableHeight }"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template slot="status" slot-scope="text">
            <span
              :class="
                text === '未开始'
                  ? 'exam-status-green'
                  : text === '正在考试'
                  ? 'exam-status-yellow'
                  : text === '已结束'
                  ? 'exam-status-red'
                  : ''
              "
              >{{ text }}</span
            >
          </template>
          <template slot="questionType" slot-scope="text, record">
            <span>{{ record.questionTypeTxt }}</span>
          </template>
          <template slot="engineeringWork" slot-scope="text, record">
            <span>{{ record.engineeringWorkTxt }}</span>
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="toQuestionDetailFun(record)">详情</a>
          </template>
        </a-table>
      </a-spin>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { formatTimeHoursMinuteSecondsFun } from '@/filters';
import { ENGINEERING_WORK_LIST, EXAM_QUESTION_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: {}, // 单场考试的详情信息
      examQuestionList: [], // 单场考试的试题列表
    };
  },
  created() {},
  mounted() {
    this.initDataFun(); //初始化数据
  },
  beforeDestroy() {},
  watch: {
    screenHeight() {
      this.initTableHeightFun(); // 初始化表单的高度
    },
  },
  computed: {
    // 是否选择了数据
    ...mapGetters(['screenHeight']),
  },
  methods: {
    // 初始化表单的高度
    initTableHeightFun() {
      this.tableHeight =
        this.$refs.tableBody.offsetHeight -
        (this.$refs.filterCard.offsetHeight + 48 * 3);
    },
    //初始化数据
    initDataFun() {
      if (!this.$route.query.id) {
        this.$message.error('页面异常，请重新进入');
        return;
      }
      this.loading = true;
      // 表单的列的配置参数
      this.columns = [
        {
          title: '题目编号',
          dataIndex: 'questionCode',
          key: 'questionCode',
          scopedSlots: { customRender: 'questionCode' },
          width: 150,
        },
        {
          title: '题目',
          dataIndex: 'questionDescription',
          key: 'questionDescription',
        },
        {
          title: '题目类别',
          dataIndex: 'questionType',
          key: 'questionType',
          scopedSlots: { customRender: 'questionType' },
          width: 150,
        },
        {
          title: '工种',
          dataIndex: 'engineeringWork',
          key: 'engineeringWork',
          scopedSlots: { customRender: 'engineeringWork' },
          width: 150,
        },
        {
          title: '分值',
          dataIndex: 'grade',
          key: 'grade',
          width: 100,
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: 100,
        },
      ];

      this.getExamDetailFun(); // 查询：考试详情
    },
    // 查询：考试详情
    getExamDetailFun() {
      let params = {
        id: this.$route.query.id,
      };
      console.log(params);
      // this.$_http
      //   .get(this.$_API.INTERFACE_GET_EXAM_DETAIL, { params })
      //   .then((res) => {
      //     console.log(res);
      //     this.tableData = res.data;
      //     this.pagination.total = res.pagination.total;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   })
      //   .finally(() => {
      //     this.loading = false;
      //   });
      let resData = {
        id: 5,
        examCode: 'TradeCode 5',
        examName: '期末考试',
        startTime: '2021-06-20 12:00:00',
        examTimeMins: '201606',
        status: '未开始',
        description: '这里是考试描述',
        type: 'PuTongKaoShi',
        engineeringWork: 'QiaoSuiGong',
      };
      let tarTime = formatTimeHoursMinuteSecondsFun(resData.examTimeMins);
      resData.examLongTime =
        tarTime.hours + '时' + tarTime.minutes + '分' + tarTime.seconds + '秒';
      this.examDetailData = resData;

      this.getQusetionsListFun(resData.id); // 查询：题目列表数据
    },
    // 查询：题目列表数据
    getQusetionsListFun() {
      // 列表数据
      const resData = [
        {
          id: 1,
          questionCode: 'TradeCode 0',
          questionDescription:
            '这是一段描述，关于这个应用的描述文字内容,这是一段描述，关于这个应用的描述文字内容,这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 1,
        },
        {
          id: 2,
          questionCode: 'TradeCode 1',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'XianLuGong',
          grade: 2,
        },
        {
          id: 3,
          questionCode: 'TradeCode 2',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'DuoXuan',
          engineeringWork: 'XianLuGong',
          grade: 3,
        },
        {
          id: 4,
          questionCode: 'TradeCode 3',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'PanDuan',
          engineeringWork: 'QiaoSuiGong',
          grade: 4,
        },
        {
          id: 5,
          questionCode: 'TradeCode 4',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'DanXuan',
          engineeringWork: 'QiaoSuiGong',
          grade: 5,
        },
        {
          id: 6,
          questionCode: 'TradeCode 5',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 6,
        },
        {
          id: 7,
          questionCode: 'TradeCode 6',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 7,
        },
        {
          id: 8,
          questionCode: 'TradeCode 7',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 8,
        },
        {
          id: 9,
          questionCode: 'TradeCode 8',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 9,
        },
        {
          id: 10,
          questionCode: 'TradeCode 9',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 10,
        },
        {
          id: 11,
          questionCode: 'TradeCode 10',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 11,
        },
        {
          id: 12,
          questionCode: 'TradeCode 11',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 12,
        },
        {
          id: 13,
          questionCode: 'TradeCode 12',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 13,
        },
        {
          id: 14,
          questionCode: 'TradeCode 13',
          questionDescription: '这是一段描述，关于这个应用的描述文字内容',
          questionType: 'TianKong',
          engineeringWork: 'QiaoSuiGong',
          grade: 14,
        },
      ];
      setTimeout(() => {
        resData.forEach((item) => {
          EXAM_QUESTION_TYPE.forEach((it) => {
            if (item.questionType === it.code) {
              item.questionTypeTxt = it.title;
            }
          });
          ENGINEERING_WORK_LIST.forEach((it) => {
            if (item.engineeringWork === it.code) {
              item.engineeringWorkTxt = it.title;
            }
          });
        });
        this.pagination.total = resData.length;
        this.examQuestionList = [...resData];
        this.loading = false;
      }, 1500);
    },
    // 查询：表格某页的数据
    handleTableChange(pagination) {
      this.loading = true;
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.loading = false;
      // let params = {
      //   pagination: pagination,
      //   questionType: this.checkedExamType,
      //   engineeringWork: this.engineeringWorkChooseValue
      // };
      // this.$_http
      //   .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS, { params })
      //   .then((res) => {
      //     console.log(res);
      //     this.tableData = res.data;
      //     this.pagination.total = res.pagination.total;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   })
      //   .finally(() => {
      //     this.loading = false;
      //   });
    },
    // 操作：详情
    toQuestionDetailFun(record) {
      console.log('查看某个试题的详情', record);
    },
  },
};
</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 {
      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>