完善考試詳情頁

src/filters/index.js

@@ -1,5 +1,10 @@
 import moment from 'moment';
 import { isDataType } from '@/utils/tools';
+import {
+  ENGINEERING_WORK_LIST,
+  EXAM_QUESTION_TYPE,
+  EXAM_TYPE,
+} from '@/common/Constant';
 
 const SEX_LIST = ['', '男', '女'];
 
@@ -170,3 +175,47 @@ export function formatTimeHoursMinuteSecondsFun(secondsNumber) {
   }
   return { hours: zero(hours), minutes: zero(minutes), seconds: zero(seconds) };
 }
+
+/** 
+ * 过滤：考试类型
+ * code：编码
+*/
+export function formateExamTypeFun(code) {
+  let txt = '';
+  EXAM_TYPE.forEach((item) => {
+    if ((item.code = code)) {
+      txt = item.title;
+    }
+  });
+  return txt;
+}
+
+/** 
+ * 过滤：题目类型
+ * code：编码
+*/
+export function formateExamQuestionTypeFun(code) {
+  console.log(code)
+  let txt = '';
+  EXAM_QUESTION_TYPE.forEach((item) => {
+    if ((item.code = code)) {
+      txt = item.title;
+    }
+  });
+  return txt;
+}
+
+
+/** 
+ * 过滤：工种类型
+ * code：编码
+*/
+export function formateEngineeringWorkTypeFun(code) {
+  let txt = '';
+  ENGINEERING_WORK_LIST.forEach((item) => {
+    if (item.code === code) {
+      txt = item.title;
+    }
+  });
+  return txt;
+}

src/styles/common/index.less

@@ -31,4 +31,4 @@
 .flex-between {
   display: flex;
   justify-content: space-between;
-}
+}

src/views/examManagement/examManagementDetail.vue

@@ -3,7 +3,7 @@
     <div class="common-card exam-detail-body">
       <a-spin :spinning="loading">
         <!-- 考试详情 -->
-        <div class="exam-detail-info">
+        <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">
@@ -56,9 +56,41 @@
             </div>
           </div>
           <div class="exam-detail-totalGrades exam-detail-item">总分：100</div>
+          <div class="border-line"></div>
         </div>
-        <!-- 考试题目列表 -->
-        <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>
@@ -66,42 +98,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import {
-  ENGINEERING_WORK_LIST,
-  EXAM_QUESTION_TYPE,
-  EXAM_TYPE,
-} from '@/common/Constant';
 import { formatTimeHoursMinuteSecondsFun } from '@/filters';
+import { ENGINEERING_WORK_LIST, EXAM_QUESTION_TYPE } from '@/common/Constant';
 export default {
   name: 'examManagementDetail',
   props: {},
   components: {},
-  filters: {
-    // 过滤：考试类型
-    formateExamTypeFun(code) {
-      let txt = '';
-      EXAM_TYPE.forEach((item) => {
-        if ((item.code = code)) {
-          txt = item.title;
-        }
-      });
-      return txt;
-    },
-    // 过滤：工种类型
-    formateEngineeringWorkTypeFun(code) {
-      let txt = '';
-      ENGINEERING_WORK_LIST.forEach((item) => {
-        if (item.code === code) {
-          txt = item.title;
-        }
-      });
-      return txt;
-    },
-  },
   data() {
     return {
-      examQuestionType: [], // 所属题目类型列表
-      engineeringWorkList: [], // 工种数据列表
       tableHeight: 400, // 表格高度
       columns: [], // form表单的列参数
       pagination: {
@@ -119,12 +123,22 @@ export default {
     this.initDataFun(); //初始化数据
   },
   beforeDestroy() {},
-  watch: {},
+  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) {
@@ -132,10 +146,6 @@ export default {
         return;
       }
       this.loading = true;
-      // 题目分类
-      this.examQuestionType = EXAM_QUESTION_TYPE;
-      // 工种类别
-      this.engineeringWorkList = ENGINEERING_WORK_LIST;
       // 表单的列的配置参数
       this.columns = [
         {
@@ -143,6 +153,7 @@ export default {
           dataIndex: 'questionCode',
           key: 'questionCode',
           scopedSlots: { customRender: 'questionCode' },
+          width: 150,
         },
         {
           title: '题目',
@@ -151,22 +162,30 @@ export default {
         },
         {
           title: '题目类别',
-          dataIndex: 'questionTypeTxt',
-          key: 'questionTypeTxt',
+          dataIndex: 'questionType',
+          key: 'questionType',
+          scopedSlots: { customRender: 'questionType' },
           width: 150,
         },
         {
           title: '工种',
-          dataIndex: 'engineeringWorkTxt',
-          key: 'engineeringWorkTxt',
+          dataIndex: 'engineeringWork',
+          key: 'engineeringWork',
+          scopedSlots: { customRender: 'engineeringWork' },
           width: 150,
         },
+        {
+          title: '分值',
+          dataIndex: 'grade',
+          key: 'grade',
+          width: 100,
+        },
         {
           title: '操作',
           dataIndex: 'action',
           key: 'action',
           scopedSlots: { customRender: 'action' },
-          with: 200,
+          width: 100,
         },
       ];
 
@@ -220,20 +239,23 @@ export default {
             '这是一段描述，关于这个应用的描述文字内容,这是一段描述，关于这个应用的描述文字内容,这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 1,
         },
         {
           id: 2,
           questionCode: 'TradeCode 1',
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
-          questionType: 'DanXuan',
-          engineeringWork: 'QiaoSuiGong',
+          questionType: 'TianKong',
+          engineeringWork: 'XianLuGong',
+          grade: 2,
         },
         {
           id: 3,
           questionCode: 'TradeCode 2',
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'DuoXuan',
-          engineeringWork: 'QiaoSuiGong',
+          engineeringWork: 'XianLuGong',
+          grade: 3,
         },
         {
           id: 4,
@@ -241,13 +263,15 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'PanDuan',
           engineeringWork: 'QiaoSuiGong',
+          grade: 4,
         },
         {
           id: 5,
           questionCode: 'TradeCode 4',
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
-          questionType: 'TianKong',
+          questionType: 'DanXuan',
           engineeringWork: 'QiaoSuiGong',
+          grade: 5,
         },
         {
           id: 6,
@@ -255,6 +279,7 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 6,
         },
         {
           id: 7,
@@ -262,6 +287,7 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 7,
         },
         {
           id: 8,
@@ -269,6 +295,7 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 8,
         },
         {
           id: 9,
@@ -276,6 +303,7 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 9,
         },
         {
           id: 10,
@@ -283,6 +311,7 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 10,
         },
         {
           id: 11,
@@ -290,6 +319,7 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 11,
         },
         {
           id: 12,
@@ -297,6 +327,7 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 12,
         },
         {
           id: 13,
@@ -304,6 +335,7 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 13,
         },
         {
           id: 14,
@@ -311,25 +343,56 @@ export default {
           questionDescription: '这是一段描述，关于这个应用的描述文字内容',
           questionType: 'TianKong',
           engineeringWork: 'QiaoSuiGong',
+          grade: 14,
         },
       ];
-      this.pagination.total = resData.length;
-      resData.forEach((item) => {
-        this.engineeringWorkList.forEach((it) => {
-          if (item.engineeringWork === it.value) {
-            item.engineeringWorkTxt = it.title;
-          }
-        });
-        EXAM_QUESTION_TYPE.forEach((it) => {
-          if (item.questionType === it.code) {
-            item.questionTypeTxt = it.title;
-          }
-        });
-      });
-      this.examQuestionList = [...resData];
       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;
-      }, 2000);
+      }, 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);
     },
   },
 };

src/views/examManagement/examManagementList.vue

@@ -6,7 +6,11 @@
         <span>考试类别：</span>
         <ul>
           <li
-            :class="{ checkedExamType: checkedExamType === item.code }"
+            :class="{
+              checkedExamType: checkedExamType === item.code,
+              disableChoose: loading,
+              hoverColor: !loading,
+            }"
             v-for="(item, index) in examType"
             :key="index"
             @click="handleExamQuestionTypeFun(item)"
@@ -21,6 +25,7 @@
         <span class="filter-other-item-title">工种：</span>
         <a-select
           v-model="engineeringWorkChooseValue"
+          :disabled="loading"
           @change="handleChangeEngineeringWorkValue"
         >
           <a-select-option
@@ -40,7 +45,6 @@
         <a-button
           type="primary"
           :disabled="!hasSelected"
-          :loading="loading"
           @click="handleClearSelectDataFun"
         >
           清空
@@ -52,7 +56,6 @@
           class="exam-edit-delete"
           type="primary"
           :disabled="!hasSelected"
-          :loading="loading"
           @click="handleDeleteSelectDataFun"
         >
           批量删除
@@ -112,6 +115,7 @@ export default {
   components: {},
   data() {
     return {
+      loading: false, // 是否展示加载动画
       examType: [], // 所属题目类型列表
       checkedExamType: '', // 所选题目类型
       engineeringWorkList: [], // 工种数据列表
@@ -124,7 +128,6 @@ export default {
         current: 1,
         total: 0,
       }, // 分页参数
-      loading: false, // 是否展示加载动画
       selectedRowKeys: [], // 多选的结果
     };
   },
@@ -157,6 +160,7 @@ export default {
     },
     //初始化数据
     initDataFun() {
+      this.loading = true;
       // 题目分类
       this.examType = [{ title: '全部', code: '' }, ...EXAM_TYPE];
       this.checkedExamType = this.examType[0].code;
@@ -171,6 +175,7 @@ export default {
           title: '考试编号',
           dataIndex: 'examCode',
           key: 'examCode',
+          width: 150,
         },
         {
           title: '考试名称',
@@ -273,8 +278,11 @@ export default {
           status: '未开始',
         },
       ];
-      this.pagination.total = resData.length;
-      this.tableData = [...resData];
+      setTimeout(() => {
+        this.pagination.total = resData.length;
+        this.tableData = [...resData];
+        this.loading = false;
+      }, 1500);
     }, //#region
     // 查询：表格某页的数据
     handleTableChange(pagination) {
@@ -398,14 +406,19 @@ export default {
         margin-left: @paddingMarginVal;
         color: @mainColorBlack65;
         cursor: pointer;
-        &:hover {
-          color: @mainColorBlueNormal;
-        }
       }
       .checkedExamType {
         color: @mainColorBlueNormal;
         font-weight: bold;
       }
+      .disableChoose {
+        cursor: no-drop;
+      }
+      .hoverColor {
+        &:hover {
+          color: @mainColorBlueNormal;
+        }
+      }
     }
   }
   .filter-other-box {

src/views/examQuestionManagement/examQuestionList.vue

@@ -8,6 +8,8 @@
           <li
             :class="{
               checkedExamQuestionType: checkedExamQuestionType === item.code,
+              disableChoose: loading,
+              hoverColor: !loading,
             }"
             v-for="(item, index) in examQuestionType"
             :key="index"
@@ -23,6 +25,7 @@
         <span class="filter-other-item-title">工种：</span>
         <a-select
           v-model="engineeringWorkChooseValue"
+          :disabled="loading"
           @change="handleChangeEngineeringWorkValue"
         >
           <a-select-option
@@ -41,8 +44,7 @@
       <div class="exam-question-edit-row">
         <a-button
           type="primary"
-          :disabled="!hasSelected"
-          :loading="loading"
+          :disabled="!hasSelected || loading"
           @click="handleClearSelectDataFun"
         >
           清空
@@ -53,8 +55,7 @@
         <a-button
           class="exam-question-edit-delete"
           type="primary"
-          :disabled="!hasSelected"
-          :loading="loading"
+          :disabled="!hasSelected || loading"
           @click="handleDeleteSelectDataFun"
         >
           批量删除
@@ -74,6 +75,12 @@
         :pagination="pagination"
         @change="handleTableChange"
       >
+        <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>
           <a-divider type="vertical" />
@@ -138,6 +145,7 @@ export default {
     },
     //初始化数据
     initDataFun() {
+      this.loading = true;
       // 题目分类
       this.examQuestionType = [
         { title: '全部', code: '' },
@@ -155,7 +163,7 @@ export default {
           title: '题目编号',
           dataIndex: 'questionCode',
           key: 'questionCode',
-          scopedSlots: { customRender: 'questionCode' },
+          width: 150,
         },
         {
           title: '题目',
@@ -164,14 +172,16 @@ export default {
         },
         {
           title: '题目类别',
-          dataIndex: 'questionTypeTxt',
-          key: 'questionTypeTxt',
+          dataIndex: 'questionType',
+          key: 'questionType',
+          scopedSlots: { customRender: 'questionType' },
           width: 150,
         },
         {
           title: '工种',
-          dataIndex: 'engineeringWorkTxt',
-          key: 'engineeringWorkTxt',
+          dataIndex: 'engineeringWork',
+          key: 'engineeringWork',
+          scopedSlots: { customRender: 'engineeringWork' },
           width: 150,
         },
         {
@@ -179,7 +189,7 @@ export default {
           dataIndex: 'action',
           key: 'action',
           scopedSlots: { customRender: 'action' },
-          with: 200,
+          with: 220,
         },
       ];
 
@@ -301,29 +311,34 @@ export default {
           engineeringWork: 'QiaoSuiGong',
         },
       ];
-      this.pagination.total = resData.length;
-      resData.forEach((item) => {
-        this.engineeringWorkList.forEach((it) => {
-          if (item.engineeringWork === it.code) {
-            item.engineeringWorkTxt = it.title;
-          }
+      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;
+            }
+          });
         });
-        EXAM_QUESTION_TYPE.forEach((it) => {
-          if (item.questionType === it.code) {
-            item.questionTypeTxt = it.title;
-          }
-        });
-      });
-      this.tableData = [...resData];
+        this.pagination.total = resData.length;
+        this.tableData = [...resData];
+        this.loading = false;
+      }, 1500);
     },
     //#region
     // 查询：表格某页的数据
     handleTableChange(pagination) {
       this.loading = true;
-      const pager = { ...this.pagination };
-      pager.current = pagination.current;
-      this.pagination = pager;
-      this.loading = false;
+      setTimeout(() => {
+        const pager = { ...this.pagination };
+        pager.current = pagination.current;
+        this.pagination = pager;
+        this.loading = false;
+      }, 1500);
       // let params = {
       //   pagination: pagination,
       //   questionType: this.checkedExamQuestionType,
@@ -432,14 +447,19 @@ export default {
         margin-left: @paddingMarginVal;
         color: @mainColorBlack65;
         cursor: pointer;
-        &:hover {
-          color: @mainColorBlueNormal;
-        }
       }
       .checkedExamQuestionType {
         color: @mainColorBlueNormal;
         font-weight: bold;
       }
+      .disableChoose {
+        cursor: no-drop;
+      }
+      .hoverColor {
+        &:hover {
+          color: @mainColorBlueNormal;
+        }
+      }
     }
   }
   .filter-other-box {