对接部分接口

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
-    <router-view />
+    <template v-if="!isInited"></template>
+    <router-view v-else />
   </div>
 </template>
 
@@ -8,18 +9,51 @@
 export default {
   name: 'App',
   components: {},
-  mounted() {
-    this.$store.commit('common/SET_SCREENHEIGHT', document.body.clientHeight); // 赋值网页内容区域可视化高度值
-    // 监听屏幕高度变化，同步表单高度
-    window.onresize = () => {
-      return (() => {
-        this.$store.commit(
-          'common/SET_SCREENHEIGHT',
-          document.body.clientHeight
-        ); // 赋值网页内容区域可视化高度值
-      })();
+  data() {
+    return {
+      isInited: false,
     };
   },
+  created() {
+    this.initDataFun(); // 初始化数据
+  },
+  mounted() {},
+  methods: {
+    // 初始化数据
+    initDataFun() {
+      this.$store.commit('common/SET_SCREENHEIGHT', document.body.clientHeight); // 赋值网页内容区域可视化高度值
+      // 监听屏幕高度变化，同步表单高度
+      window.onresize = () => {
+        return (() => {
+          this.$store.commit(
+            'common/SET_SCREENHEIGHT',
+            document.body.clientHeight
+          ); // 赋值网页内容区域可视化高度值
+        })();
+      };
+      // 获取工种、题目分类数据，并存到vuex
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
+        .then((res) => {
+          this.$store.commit('common/SET_ENGINEERING_WORK_LIST', res.data);
+          this.$_http
+            .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE)
+            .then((res) => {
+              this.$store.commit(
+                'common/SET_EXAM_QUESTION_TYPE_CONDITION',
+                res.data
+              );
+              this.isInited = true;
+            })
+            .catch(() => {
+              this.isInited = true;
+            });
+        })
+        .catch(() => {
+          this.isInited = true;
+        });
+    },
+  },
 };
 </script>
 

src/api/modules/examQuestion.js

@@ -9,9 +9,9 @@ export default {
     INTERFACE_POST_EXAMS_QUESTION_TYPE_DELETE: "admin/q-categories/{categoryId}",
 
     // 查询所有试题
-    INTERFACE_GET_EXAMS_QUESTION_LIST: "",
+    INTERFACE_GET_EXAMS_QUESTION_LIST: "admin/questions",
     // 新建试题
-    INTERFACE_POST_EXAMS_QUESTION_ADD: "",
+    INTERFACE_POST_EXAMS_QUESTION_ADD: "questions",
     // 删除某一个试题
     INTERFACE_DELETE_EXAMS_QUESTION_DELETE: "/questions/{questionId}",
     // 批量删除试题

src/common/Constant.js

@@ -36,12 +36,6 @@ export const UPLOAD_IMAGE_MAX_SIZE = 10;
 export const REGULAR_EXPRESSION_IDNUMBER = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
 // 项目的标题文字
 export const PROGRAM_Title = '京铁学堂';
-// 工种类型
-export const ENGINEERING_WORK_LIST = [
-  { id: 1, name: '桥隧工', code: 'QiaoSuiGong' },
-  // { id: 2, name: "测量工", code: "CeLiangGong" },
-  { id: 3, name: '线路工', code: 'XianLuGong' },
-];
 // 试题类型
 export const EXAM_QUESTION_TYPE = [
   { id: 1, name: '单选题', code: 'DanXuan' },
@@ -49,6 +43,19 @@ export const EXAM_QUESTION_TYPE = [
   { id: 3, name: '判断题', code: 'PanDuan' },
   { id: 4, name: '填空题', code: 'TianKong' },
 ];
+// 考试分类
+export const EXAM_TYPE = [
+  { id: 1, name: '普通考试', code: 'PuTongKaoShi' },
+  { id: 2, name: '专项考试', code: 'ZhuanXiangKaoShi' },
+];
+
+// 接口请求的了---------------------------------------
+// 工种类型
+export const ENGINEERING_WORK_LIST = [
+  { id: 1, name: '桥隧工', code: 'QiaoSuiGong' },
+  // { id: 2, name: "测量工", code: "CeLiangGong" },
+  { id: 3, name: '线路工', code: 'XianLuGong' },
+];
 // 试题类别
 export const EXAM_QUESTION_TYPE_CONDITION = [
   { id: 1, name: '类别1', code: 'LeiBie1' },
@@ -56,8 +63,4 @@ export const EXAM_QUESTION_TYPE_CONDITION = [
   { id: 3, name: '类别3', code: 'LeiBie3' },
   { id: 4, name: '类别4', code: 'LeiBie4' },
 ];
-// 考试分类
-export const EXAM_TYPE = [
-  { id: 1, name: '普通考试', code: 'PuTongKaoShi' },
-  { id: 2, name: '专项考试', code: 'ZhuanXiangKaoShi' },
-];
+// 接口请求的了---------------------------------------

src/common/generalData.js

@@ -19,7 +19,7 @@ let EXAM_QUESTION_TYPE_CONDITION = null
 export function getExamQuestionTypeConditionList() {
   if (!EXAM_QUESTION_TYPE_CONDITION) {
     this.$_http
-        .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
+        .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_TYPE)
         .then((res) => {
           EXAM_QUESTION_TYPE_CONDITION = res.data;
         })

src/store/getters.js

@@ -1,6 +1,8 @@
 const getters = {
   userInfo: state => state.user.userInfo,
   routes: state => state.user.menus,
-  screenHeight: state => state.common.screenHeight
+  screenHeight: state => state.common.screenHeight,
+  GET_ENGINEERING_WORK_LIST: state => state.common.engineeringWorkList,
+  GET_EXAM_QUESTION_TYPE_CONDITION: state => state.common.examQuestionTypeConditionList,
 };
 export default getters;

src/store/modules/common.js

@@ -1,13 +1,24 @@
 
 const state = {
-  screenHeight: 0 // 网页内容区域可视化高度值
+  screenHeight: 0, // 网页内容区域可视化高度值
+  engineeringWorkList: [], // 工种类别列表
+  examQuestionTypeConditionList: [], // 题目类别列表
+
 };
 
 const mutations = {
-  // 登录状态保存
+  // 设置浏览器高度
   SET_SCREENHEIGHT: (state, heightVal) => {
     state.screenHeight = heightVal;
   },
+  // 存储工种类别列表数据
+  SET_ENGINEERING_WORK_LIST: (state, list) => {
+    state.engineeringWorkList = list || []
+  },
+  // 存储题目类别列表数据
+  SET_EXAM_QUESTION_TYPE_CONDITION: (state, list) => {
+    state.examQuestionTypeConditionList = list || []
+  },
 };
 
 const actions = {};

src/styles/components/index.less

@@ -22,6 +22,14 @@
   margin-top: @paddingMarginVal !important;
 }
 
+// 分页布局
+.a-pagination-display {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: @paddingMarginVal !important;
+}
+
 // 分割线
 .border-line {
   width: 100%;

src/views/articleManagement/articleList.vue

@@ -107,15 +107,16 @@
           </div>
         </div>
         <!-- 分页 -->
-        <a-pagination
-          class="article-pagination"
-          v-model="pagination.current"
-          :pageSize="pagination.pageSize"
-          :total.sync="pagination.total"
-          show-less-items
-          show-quick-jumper
-          @change="onChangePagesize"
-        />
+        <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="onChangePagesize"
+          />
+        </div>
       </div>
     </a-spin>
   </div>
@@ -321,8 +322,5 @@ export default {
   .article-list-item-paddingTop {
     padding-top: @paddingMarginVal;
   }
-  .article-pagination {
-    margin-top: @paddingMarginVal;
-  }
 }
 </style>

src/views/examQuestionManagement/examQuestionList.vue

@@ -8,7 +8,7 @@
           <ul>
             <li
               :class="{
-                checkedExamQuestionType: checkedExamQuestionType === item.code,
+                checkedExamQuestionType: checkedExamQuestionType === item.id,
               }"
               v-for="(item, index) in examQuestionType"
               :key="index"
@@ -18,6 +18,22 @@
             </li>
           </ul>
         </div>
+        <div class="filter-condition-box a-card-margin-top">
+          <span>所属类别：</span>
+          <ul>
+            <li
+              :class="{
+                checkedExamQuestionType:
+                  checkedExamQuestionConditionType === item.id,
+              }"
+              v-for="(item, index) in examQuestionConditionType"
+              :key="index"
+              @click="handleExamQuestionConditionTypeFun(item)"
+            >
+              {{ item.name }}
+            </li>
+          </ul>
+        </div>
         <div class="border-line"></div>
         <div class="filter-other-box">
           <span class="filter-other-title">其它选项：</span>
@@ -29,7 +45,7 @@
             <a-select-option
               v-for="(item, index) in engineeringWorkList"
               :key="index"
-              :value="item.code"
+              :value="item.id"
             >
               {{ item.name }}
             </a-select-option>
@@ -69,14 +85,16 @@
             selectedRowKeys: selectedRowKeys,
             onChange: onSelectChange,
           }"
-          :pagination="pagination"
-          @change="handleTableChange"
+          :pagination="false"
         >
-          <template slot="questionType" slot-scope="text, record">
-            <span>{{ record.questionTypeTxt }}</span>
+          <template slot="type" slot-scope="text, record">
+            <span>{{ record.typeTxt }}</span>
           </template>
-          <template slot="engineeringWork" slot-scope="text, record">
-            <span>{{ record.engineeringWorkTxt }}</span>
+          <template slot="engineerTypes" slot-scope="text, record">
+            <span>{{ record.engineerTypesTxt }}</span>
+          </template>
+          <template slot="typeCondition" slot-scope="text, record">
+            <span>{{ record.typeConditionTxt }}</span>
           </template>
           <template slot="action" slot-scope="text, record">
             <a @click="toQuestionDetailFun(record)">详情</a>
@@ -84,23 +102,36 @@
             <a @click="deleteQuestionFun(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>
       </div>
     </a-spin>
   </div>
 </template>
 
 <script>
+import { EXAM_QUESTION_TYPE } from '@/common/Constant';
 import { mapGetters } from 'vuex';
-import { ENGINEERING_WORK_LIST, EXAM_QUESTION_TYPE } from '@/common/Constant';
-import { QUESTIONLISTRES } from '@/common/resData';
+import { pathParams } from '@/filters';
 export default {
   name: 'examQuestionList',
   props: {},
   components: {},
   data() {
     return {
-      examQuestionType: [], // 所属题目类型列表
-      checkedExamQuestionType: '', // 所选题目类型
+      examQuestionType: [], // 题目类目列表
+      checkedExamQuestionType: '', // 所选题目类目类型
+      examQuestionConditionType: [], // 题目类别列表
+      checkedExamQuestionConditionType: '', // 所选题目类别类型
       engineeringWorkList: [], // 工种数据列表
       engineeringWorkChooseValue: '', // 所选工种
       tableHeight: 400, // 表格高度
@@ -129,7 +160,11 @@ export default {
   },
   computed: {
     // 是否选择了数据
-    ...mapGetters(['screenHeight']),
+    ...mapGetters([
+      'screenHeight',
+      'GET_ENGINEERING_WORK_LIST',
+      'GET_EXAM_QUESTION_TYPE_CONDITION',
+    ]),
     // 判断是否有行被选择
     hasSelected() {
       return this.selectedRowKeys.length > 0;
@@ -140,131 +175,126 @@ export default {
     initTableHeightFun() {
       this.tableHeight =
         this.$refs.tableBody.offsetHeight -
-        (this.$refs.filterCard.offsetHeight + 48 * 4);
+        (this.$refs.filterCard.offsetHeight + 48 * 4 - 5);
     },
     //初始化数据
     initDataFun() {
-      this.loading = true;
-      // 题目分类
-      this.examQuestionType = [
-        { name: '全部', code: '' },
-        ...EXAM_QUESTION_TYPE,
+      // 题目类目
+      this.examQuestionType = [{ name: '全部', id: '' }, ...EXAM_QUESTION_TYPE];
+      // 题目类别
+      this.examQuestionConditionType = [
+        { name: '全部', id: '' },
+        ...this.GET_EXAM_QUESTION_TYPE_CONDITION,
       ];
-      this.checkedExamQuestionType = this.examQuestionType[0].code;
       // 工种类别
-      this.engineeringWorkList = ENGINEERING_WORK_LIST;
-      this.engineeringWorkChooseValue = this.engineeringWorkList[0].code;
+      this.engineeringWorkList = [
+        { name: '不限', id: '' },
+        ...this.GET_ENGINEERING_WORK_LIST,
+      ];
       // 表单的列的配置参数
       this.columns = [
         {
           title: '题目编号',
-          dataIndex: 'questionCode',
-          key: 'questionCode',
-          // width: 200,
+          dataIndex: 'id',
+          key: 'id',
         },
         {
           title: '题目',
-          dataIndex: 'questionDescription',
-          key: 'questionDescription',
-          // width: 700,
+          dataIndex: 'content',
+          key: 'content',
         },
         {
           title: '题目类别',
-          dataIndex: 'questionType',
-          key: 'questionType',
-          scopedSlots: { customRender: 'questionType' },
-          // width: 200,
+          dataIndex: 'type',
+          key: 'type',
+          scopedSlots: { customRender: 'type' },
+        },
+        {
+          title: '题目分类',
+          dataIndex: 'typeCondition',
+          key: 'typeCondition',
+          scopedSlots: { customRender: 'typeCondition' },
         },
         {
           title: '工种',
-          dataIndex: 'engineeringWork',
-          key: 'engineeringWork',
-          scopedSlots: { customRender: 'engineeringWork' },
-          // width: 200,
+          dataIndex: 'engineerTypes',
+          key: 'engineerTypes',
+          scopedSlots: { customRender: 'engineerTypes' },
         },
         {
           title: '操作',
           dataIndex: 'action',
           key: 'action',
           scopedSlots: { customRender: 'action' },
-          // with: 200,
         },
       ];
       this.getQusetionsListFun(); // 查询：题目列表数据
     },
-    // 查询：工种列表
-    getTableListFun() {
+    // 初始化分页参数
+    initPagination() {
+      this.pagination.current = 1;
+      this.pagination.pageSize = 7;
+      this.pagination.total = 0;
+    },
+    // 查询：题目列表数据
+    getQusetionsListFun() {
       this.loading = true;
+      let params = {
+        page: this.pagination.current,
+        size: this.pagination.pageSize,
+        type: this.checkedExamQuestionType,
+        typeCondition: this.checkedExamQuestionConditionType,
+        engineerTypes: this.engineeringWorkChooseValue,
+      };
       this.$_http
-        .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
+        .get(this.$_API.INTERFACE_GET_EXAMS_QUESTION_LIST, { params })
         .then((res) => {
-          this.tableData = res.data;
+          let resData = res.data.content;
+          resData.forEach((item) => {
+            this.examQuestionType.forEach((it) => {
+              if (item.type === it.code) {
+                item.typeTxt = it.name;
+              }
+            }); // 题目类目
+            this.examQuestionConditionType.forEach((it) => {
+              if (item.typeCondition === it.id) {
+                item.typeConditionTxt = it.name;
+              }
+            }); // 题目类别
+            item.engineerTypesTxt = this.engineeringWorkList[0].name;
+            this.engineeringWorkList.forEach((it) => {
+              if (item.engineerTypes === it.id) {
+                item.engineerTypesTxt = it.name;
+              }
+            }); // 工种
+          });
+          this.pagination.total = res.data.totalElements; // 总条数
+          this.tableData = resData;
+          this.loading = false;
         })
         .catch(() => {
           this.loading = false;
         });
     },
-    // 操作：选择某个题目类型
+    // 操作：选择某个题目类目
     handleExamQuestionTypeFun(item) {
-      console.log('选择某个题目类型', item);
-      if (this.checkedExamQuestionType === item.code) {
+      if (this.checkedExamQuestionType === item.id) {
+        return;
+      }
+      this.checkedExamQuestionType = item.id;
+      this.getQusetionsListFun(); // 查询：题目列表数据
+    },
+    // 操作：选择某个题目类别
+    handleExamQuestionConditionTypeFun(item) {
+      if (this.checkedExamQuestionConditionType === item.id) {
         return;
       }
-      this.checkedExamQuestionType = item.code;
+      this.checkedExamQuestionConditionType = item.id;
+      this.getQusetionsListFun(); // 查询：题目列表数据
     },
     // 操作：选择了某个工种
     handleChangeEngineeringWorkValue() {
-      console.log('选择了某个工种', this.engineeringWorkChooseValue);
-    },
-    // 查询：题目列表数据
-    getQusetionsListFun() {
-      // 列表数据
-      const resData = QUESTIONLISTRES.data;
-      setTimeout(() => {
-        resData.forEach((item) => {
-          EXAM_QUESTION_TYPE.forEach((it) => {
-            if (item.questionType === it.code) {
-              item.questionTypeTxt = it.name;
-            }
-          });
-          ENGINEERING_WORK_LIST.forEach((it) => {
-            if (item.engineeringWork === it.code) {
-              item.engineeringWorkTxt = it.name;
-            }
-          });
-        });
-        this.pagination.total = resData.length;
-        this.tableData = [...resData];
-        this.loading = false;
-      }, 1500);
-    },
-    // 查询：表格某页的数据
-    handleTableChange(pagination) {
-      this.loading = true;
-      setTimeout(() => {
-        const pager = { ...this.pagination };
-        pager.current = pagination.current;
-        this.pagination = pager;
-        this.loading = false;
-      }, 1500);
-      // let params = {
-      //   pagination: pagination,
-      //   questionType: this.checkedExamQuestionType,
-      //   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;
-      //   });
+      this.getQusetionsListFun(); // 查询：题目列表数据
     },
     // 操作：详情
     toQuestionDetailFun(record) {
@@ -272,36 +302,40 @@ export default {
     },
     // 操作：删除
     deleteQuestionFun(record) {
-      // let that = this
+      let that = this;
       this.$confirm({
         title: '删除',
-        content: `确认删除编号为 ${record.questionCode} 的题目吗？`,
+        content: `确认删除编号为 ${record.id} 的题目吗？`,
         okText: '确认',
         cancelText: '取消',
         onOk() {
-          // let params = {
-          //   id: record.id,
-          // };
-          // that.$_http
-          //   .delete(that.$_API.INTERFACE_DELETE_EXAMS_QUESTION_DELETE, params)
-          //   .then((res) => {
-          //     console.log(res);
-          //   })
-          //   .catch((err) => {
-          //     console.log(err);
-          //   })
-          //   .finally(() => {
-          //     that.loading = false;
-          //   });
+          that.loading = true;
+          let params = {
+            questionId: record.id,
+          };
+          that.$_http
+            .delete(
+              pathParams(
+                that.$_API.INTERFACE_DELETE_EXAMS_QUESTION_DELETE,
+                params
+              )
+            )
+            .then(() => {
+              that.loading = false;
+              that.$message.success('删除题目成功');
+              that.initPagination(); // 初始化分页参数
+              that.getQusetionsListFun(); // 查询：题目列表数据
+            })
+            .catch(() => {
+              that.loading = false;
+            });
         },
         onCancel() {},
       });
     },
     // 操作：清空选择
     handleClearSelectDataFun() {
-      this.loading = true;
       this.selectedRowKeys = [];
-      this.loading = false;
     },
     // 操作：多选变化时
     onSelectChange(selectedRowKeys) {
@@ -316,23 +350,21 @@ export default {
         okText: '确认',
         cancelText: '取消',
         onOk() {
-          console.log('批量删除', that.selectedRowKeys);
           that.loading = true;
-          setTimeout(() => {
-            that.selectedRowKeys = [];
-            that.loading = false;
-          }, 1500);
-          // that.$_http
-          //   .delete(that.$_API.INTERFACE_DELETE_EXAMS_QUESTION_DELETE_LIST, params)
-          //   .then((res) => {
-          //     console.log(res);
-          //   })
-          //   .catch((err) => {
-          //     console.log(err);
-          //   })
-          //   .finally(() => {
-          //     that.loading = false;
-          //   });
+          that.$_http
+            .delete(that.$_API.INTERFACE_DELETE_EXAMS_QUESTION_DELETE_LIST, {
+              data: that.selectedRowKeys,
+            })
+            .then(() => {
+              that.selectedRowKeys = [];
+              that.loading = false;
+              that.$message.success('批量删除题目成功');
+              that.initPagination(); // 初始化分页参数
+              that.getQusetionsListFun(); // 查询：题目列表数据
+            })
+            .catch(() => {
+              that.loading = false;
+            });
         },
         onCancel() {},
       });

src/views/examQuestionManagement/examQusetionCreateSingle.vue

@@ -206,14 +206,17 @@ export default {
       this.loginForm.validateFields((err, values) => {
         if (!err) {
           let params = {
-            type: this.questionType,
-            content: values.content,
-            engineeringWorkChooseValue: values.engineeringWorkChooseValue,
-            studyDate: this.studyDate,
-            finalAnswer: this.formatQuestionFinalAnswerArr(
+            // 貌似需要拼接到请求地址后面的参数
+            categoryid: this.questionType, // 题目类目ID
+            engineertypeid: values.engineeringWorkChooseValue, // 工种ID
+
+            engineertypes: values.engineeringWorkChooseValue, // 工种ID
+            content: values.content, // 内容
+            tages: [this.studyDate], // 日期
+            finalanswer: this.formatQuestionFinalAnswerArr(
               values.finalAnswerIndexs
-            ),
-            answers: this.formatQuestionAnswersArr(values),
+            ), // 正确答案
+            answers: this.formatQuestionAnswersArr(values), // 选项
           };
           this.httpQuestFun(params);
         }
@@ -236,22 +239,20 @@ export default {
     },
     // 表单提交请求
     httpQuestFun(params) {
-      this.loading = true;
       console.log(params);
-      setTimeout(() => {
-        this.loading = false;
-      }, 2000);
-      // this.$_http
-      //   .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_ADD, params)
-      //   .then((res) => {
-      //     console.log(res);
-      //   })
-      //   .catch((err) => {
-      //     console.log(err);
-      //   })
-      //   .finally(() => {
-      //     this.loading = false;
-      //   });
+      this.loading = true;
+      this.$_http
+        .post(this.$_API.INTERFACE_POST_EXAMS_QUESTION_ADD, params)
+        .then((res) => {
+          console.log(res);
+          this.$message.success('添加单选题成功');
+        })
+        .catch((err) => {
+          console.log(err);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
   },
 };