|
|
@@ -1,15 +1,19 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
+ <div class="app-container" ref="tableBody">
|
|
|
<div class="common-card">
|
|
|
- <div>这里是考试详情</div>
|
|
|
- </div>
|
|
|
- <div class="common-card a-card-margin-top">
|
|
|
- <div>这里是内容</div>
|
|
|
+ <!-- 考试详情 -->
|
|
|
+ <div class="exam-detail-info">
|
|
|
+ <div class=""></div>
|
|
|
+ </div>
|
|
|
+ <!-- 考试题目列表 -->
|
|
|
+ <div></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+import { ENGINEERING_WORK_LIST, EXAM_QUESTION_TYPE } from '@/common/Constant';
|
|
|
export default {
|
|
|
name: 'examManagementDetail',
|
|
|
props: {},
|
|
|
@@ -19,22 +23,230 @@ export default {
|
|
|
// }
|
|
|
},
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ examDetailData: {}, // 单场考试的详情信息
|
|
|
+ examQuestionList: [], // 单场考试的试题列表
|
|
|
+ examQuestionType: [], // 所属题目类型列表
|
|
|
+ engineeringWorkList: [], // 工种数据列表
|
|
|
+ tableHeight: 400, // 表格高度
|
|
|
+ columns: [], // form表单的列参数
|
|
|
+ pagination: {
|
|
|
+ pageSize: 7,
|
|
|
+ current: 1,
|
|
|
+ total: 0,
|
|
|
+ }, // 分页参数
|
|
|
+ loading: false, // 是否展示加载动画
|
|
|
+ };
|
|
|
},
|
|
|
- created() {
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
this.initDataFun(); //初始化数据
|
|
|
},
|
|
|
- mounted() {},
|
|
|
beforeDestroy() {},
|
|
|
watch: {},
|
|
|
- computed: {},
|
|
|
+ computed: {
|
|
|
+ // 是否选择了数据
|
|
|
+ ...mapGetters(['screenHeight']),
|
|
|
+ },
|
|
|
methods: {
|
|
|
//初始化数据
|
|
|
- initDataFun() {},
|
|
|
+ initDataFun() {
|
|
|
+ if (!this.$route.query.id) {
|
|
|
+ this.$message.error('页面异常，请重新进入');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ // });
|
|
|
+ this.examDetailData = {
|
|
|
+ id: 5,
|
|
|
+ examCode: 'TradeCode 5',
|
|
|
+ examName: '期末考试',
|
|
|
+ startTime: '2021-06-14 12:00:00',
|
|
|
+ status: '未开始',
|
|
|
+ };
|
|
|
+ // 题目分类
|
|
|
+ this.examQuestionType = EXAM_QUESTION_TYPE;
|
|
|
+
|
|
|
+ // 工种类别
|
|
|
+ this.engineeringWorkList = ENGINEERING_WORK_LIST;
|
|
|
+ // 表单的列的配置参数
|
|
|
+ this.columns = [
|
|
|
+ {
|
|
|
+ title: '题目编号',
|
|
|
+ dataIndex: 'questionCode',
|
|
|
+ key: 'questionCode',
|
|
|
+ scopedSlots: { customRender: 'questionCode' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '题目',
|
|
|
+ dataIndex: 'questionDescription',
|
|
|
+ key: 'questionDescription',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '题目类别',
|
|
|
+ dataIndex: 'questionTypeTxt',
|
|
|
+ key: 'questionTypeTxt',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '工种',
|
|
|
+ dataIndex: 'engineeringWorkTxt',
|
|
|
+ key: 'engineeringWorkTxt',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ key: 'action',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ with: 200,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.getQusetionsListFun(); // 查询：题目列表数据
|
|
|
+ this.examQuestionList = [{}];
|
|
|
+ }, // 查询：题目列表数据
|
|
|
+ getQusetionsListFun() {
|
|
|
+ // 列表数据
|
|
|
+ const resData = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ questionCode: 'TradeCode 0',
|
|
|
+ questionDescription:
|
|
|
+ '这是一段描述，关于这个应用的描述文字内容,这是一段描述，关于这个应用的描述文字内容,这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ questionCode: 'TradeCode 1',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'DanXuan',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ questionCode: 'TradeCode 2',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'DuoXuan',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ questionCode: 'TradeCode 3',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'PanDuan',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ questionCode: 'TradeCode 4',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ questionCode: 'TradeCode 5',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ questionCode: 'TradeCode 6',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ questionCode: 'TradeCode 7',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ questionCode: 'TradeCode 8',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ questionCode: 'TradeCode 9',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 11,
|
|
|
+ questionCode: 'TradeCode 10',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 12,
|
|
|
+ questionCode: 'TradeCode 11',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 13,
|
|
|
+ questionCode: 'TradeCode 12',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 14,
|
|
|
+ questionCode: 'TradeCode 13',
|
|
|
+ questionDescription: '这是一段描述，关于这个应用的描述文字内容',
|
|
|
+ questionType: 'TianKong',
|
|
|
+ engineeringWork: 'QiaoSuiGong',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.pagination.total = resData.length;
|
|
|
+ resData.forEach((item) => {
|
|
|
+ this.engineeringWorkList.forEach((it) => {
|
|
|
+ if (item.engineeringWork === it.value) {
|
|
|
+ item.engineeringWorkTxt = it.title;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.defaultType.forEach((it) => {
|
|
|
+ if (item.questionType === it.code) {
|
|
|
+ item.questionTypeTxt = it.title;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.examQuestionList = [...resData];
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less"></style>
|
|
|
|
|
|
-<style lang="less" scoped></style>
|
|
|
+<style lang="less" scoped>
|
|
|
+@import '~@/styles/common/variable.less';
|
|
|
+.exam-detail-info {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
huangtao