新增考试手动组件页面内容

src/common/Constant.js

@@ -43,13 +43,13 @@ export const ENGINEERING_WORK_LIST = [
   { title: '线路工', code: 'XianLuGong' },
 ]
 export const EXAM_QUESTION_TYPE = [
-  { title: '填空题', code: 'TianKong' },
   { title: '单选题', code: 'DanXuan' },
   { title: '多选题', code: 'DuoXuan' },
   { title: '判断题', code: 'PanDuan' },
+  { title: '填空题', code: 'TianKong' },
 ]
 
 export const EXAM_TYPE = [
-  { title: '专项考试', code: 'ZhuanXiangKaoShi' },
   { title: '普通考试', code: 'PuTongKaoShi' },
+  { title: '专项考试', code: 'ZhuanXiangKaoShi' },
 ]

src/common/resData.js

@@ -0,0 +1,182 @@
+export const QUESTIONLISTRES = {
+  data: [
+    {
+      id: 1,
+      questionCode: 'TradeCode 1',
+      questionDescription:
+        '这是一段描述，关于这个应用的描述文字内容,这是一段描述，关于这个应用的描述文字内容,这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 1,
+    },
+    {
+      id: 2,
+      questionCode: 'TradeCode 2',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'XianLuGong',
+      grade: 2,
+    },
+    {
+      id: 3,
+      questionCode: 'TradeCode 3',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'DuoXuan',
+      engineeringWork: 'XianLuGong',
+      grade: 3,
+    },
+    {
+      id: 4,
+      questionCode: 'TradeCode 4',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'PanDuan',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 4,
+    },
+    {
+      id: 5,
+      questionCode: 'TradeCode 5',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'DanXuan',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 5,
+    },
+    {
+      id: 6,
+      questionCode: 'TradeCode 6',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 6,
+    },
+    {
+      id: 7,
+      questionCode: 'TradeCode 7',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 7,
+    },
+    {
+      id: 8,
+      questionCode: 'TradeCode 8',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 8,
+    },
+    {
+      id: 9,
+      questionCode: 'TradeCode 9',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 9,
+    },
+    {
+      id: 10,
+      questionCode: 'TradeCode 10',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 10,
+    },
+    {
+      id: 11,
+      questionCode: 'TradeCode 11',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 11,
+    },
+    {
+      id: 12,
+      questionCode: 'TradeCode 12',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 12,
+    },
+    {
+      id: 13,
+      questionCode: 'TradeCode 13',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 13,
+    },
+    {
+      id: 14,
+      questionCode: 'TradeCode 14',
+      questionDescription: '这是一段描述，关于这个应用的描述文字内容',
+      questionType: 'TianKong',
+      engineeringWork: 'QiaoSuiGong',
+      grade: 14,
+    },
+  ],
+  code: 200,
+  message: '成功'
+};
+
+export const EXAMLISTRES = {
+  data: [
+    {
+      id: 1,
+      examCode: 'TradeCode 1',
+      examName: '期末考试',
+      startTime: '2021-06-14 12:00:00',
+      status: '未开始',
+    },
+    {
+      id: 2,
+      examCode: 'TradeCode 2',
+      examName: '期末考试',
+      startTime: '2021-06-14 12:00:00',
+      status: '正在考试',
+    },
+    {
+      id: 3,
+      examCode: 'TradeCode 3',
+      examName: '期末考试',
+      startTime: '2021-06-14 12:00:00',
+      status: '已结束',
+    },
+    {
+      id: 4,
+      examCode: 'TradeCode 4',
+      examName: '期末考试',
+      startTime: '2021-06-14 12:00:00',
+      status: '未开始',
+    },
+    {
+      id: 5,
+      examCode: 'TradeCode 5',
+      examName: '期末考试',
+      startTime: '2021-06-14 12:00:00',
+      status: '未开始',
+    },
+    {
+      id: 6,
+      examCode: 'TradeCode 6',
+      examName: '期末考试',
+      startTime: '2021-06-14 12:00:00',
+      status: '未开始',
+    },
+    {
+      id: 7,
+      examCode: 'TradeCode 7',
+      examName: '期末考试',
+      startTime: '2021-06-14 12:00:00',
+      status: '未开始',
+    },
+    {
+      id: 8,
+      examCode: 'TradeCode 8',
+      examName: '期末考试',
+      startTime: '2021-06-14 12:00:00',
+      status: '未开始',
+    },
+  ],
+  code: 200,
+  message: '成功'
+};

src/filters/index.js

@@ -138,6 +138,7 @@ export function dateChange() {
 /**
  * 路径参数替换
  * @pathParams {Object} 路径参数
+ * @return 新path
  */
 export function pathParams(path, pathParams) {
   if (path.includes('{') && pathParams) {
@@ -152,6 +153,7 @@ export function pathParams(path, pathParams) {
 /**
  * 过滤选项的编号
  * @index {Number} 下标
+ * @return 字母
  */
 export function formatQuestionIndex(index) {
   return String.fromCharCode(index + 65);
@@ -160,6 +162,7 @@ export function formatQuestionIndex(index) {
 /**
  * 过滤秒数为 时 分 秒
  * @index {Number} 下标
+ * @return {hours, minutes, seconds}
  */
 export function formatTimeHoursMinuteSecondsFun(secondsNumber) {
   if (isNaN(secondsNumber)) {
@@ -176,10 +179,54 @@ export function formatTimeHoursMinuteSecondsFun(secondsNumber) {
   return { hours: zero(hours), minutes: zero(minutes), seconds: zero(seconds) };
 }
 
-/** 
+/**
+ * 将单独的时分秒拼接为 hh:mm:ss
+ * @hours 时
+ * @minutes 分
+ * @seconds 秒
+ * @return hh:mm:ss
+ */
+
+export function formateHoursMinutesSeconds(hours, minutes, seconds) {
+  let timeDiff = zero(hours) + ':' + zero(minutes) + ':' + zero(seconds);
+  // 数字补零
+  function zero(num) {
+    if (num && !isNaN(num)) {
+      return num < 10 ? '0' + num : num;
+    } else {
+      return '00';
+    }
+  }
+  return timeDiff;
+}
+
+/**
+ * 格式化 时, 分, 秒 为 毫秒
+ * @hours 时
+ * @minutes 分
+ * @seconds 秒
+ * @returns millisecond
+ */
+ export function formateSeconds(hours, minutes, seconds) {
+   let millisecond  = 0
+  if (hours && !isNaN(hours)) {
+    millisecond  = millisecond  + hours * (1000 * 60 * 60)
+  }
+  if (minutes && !isNaN(minutes)) {
+    millisecond  = millisecond  + minutes * (1000 * 60)
+  }
+  if (seconds && !isNaN(seconds)) {
+    millisecond  = millisecond  + seconds * (1000)
+  }
+  return millisecond ;
+}
+
+
+/**
  * 过滤：考试类型
- * code：编码
-*/
+ * @code：编码
+ * @return 文本
+ */
 export function formateExamTypeFun(code) {
   let txt = '';
   EXAM_TYPE.forEach((item) => {
@@ -190,12 +237,13 @@ export function formateExamTypeFun(code) {
   return txt;
 }
 
-/** 
+/**
  * 过滤：题目类型
- * code：编码
-*/
+ * @code：编码
+ * @return 文本
+ */
 export function formateExamQuestionTypeFun(code) {
-  console.log(code)
+  console.log(code);
   let txt = '';
   EXAM_QUESTION_TYPE.forEach((item) => {
     if ((item.code = code)) {
@@ -205,11 +253,11 @@ export function formateExamQuestionTypeFun(code) {
   return txt;
 }
 
-
-/** 
+/**
  * 过滤：工种类型
- * code：编码
-*/
+ * @code：编码
+ * @return 文本
+ */
 export function formateEngineeringWorkTypeFun(code) {
   let txt = '';
   ENGINEERING_WORK_LIST.forEach((item) => {

src/styles/components/index.less

@@ -1,5 +1,5 @@
-
-@import '~@/styles/common/variable.less';.iconFont {
+@import '~@/styles/common/variable.less';
+.iconFont {
   font-size: 16px;
   font-weight: bold;
 }
@@ -10,7 +10,6 @@
   height: 100%;
 }
 
-
 // 卡片
 .common-card {
   width: 100%;
@@ -18,8 +17,8 @@
   background-color: @mainColorWhite;
 }
 
-// 卡片顶部距离
-.a-card-margin-top {
+// 顶部距离
+.margin-top-all {
   margin-top: @paddingMarginVal !important;
 }
 
@@ -29,14 +28,8 @@
   border-top: 2px solid @mainColorBorder;
   margin: @paddingMarginVal 0;
 }
-// 用于form表单中的必填红色星号：*，实际非必填，但视觉显示为必填项
-// .form-required > .el-form-item__label:before {
-//   content: "*";
-//   margin-right: 4px;
-//   color: #f56c6c;
-// }
 
-// 新建题目的统一样式
+// 新建题目的统一样式--------start
 .exam-question-create-body {
   width: 100%;
   height: 100%;
@@ -82,3 +75,48 @@
     margin: 20px 0 20px calc(20% + 56px);
   }
 }
+// 新建题目的统一样式--------end
+
+// 题目列表中的筛选条件样式--------start
+.filter-condition-box {
+  display: flex;
+  align-items: center;
+  ul {
+    margin: 0;
+    display: flex;
+    li {
+      margin-left: @paddingMarginVal;
+      color: @mainColorBlack65;
+      cursor: pointer;
+      &:hover {
+        color: @mainColorBlueNormal;
+      }
+    }
+    .checkedExamQuestionType {
+      color: @mainColorBlueNormal;
+      font-weight: bold;
+    }
+  }
+}
+.filter-other-box {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  .filter-other-title {
+    color: @mainColorBlack85;
+  }
+  .filter-other-item-title {
+    margin-left: @paddingMarginVal;
+    color: @mainColorBlack65;
+  }
+}
+.exam-question-edit-row {
+  margin-bottom: @paddingMarginVal;
+  .exam-question-edit-checkedtxt {
+    margin-left: @paddingMarginVal;
+  }
+  .exam-question-edit-delete {
+    margin-left: @paddingMarginVal;
+  }
+}
+// 题目列表中的筛选条件样式--------end

src/views/articleManagement/articleCreate.vue

@@ -3,7 +3,7 @@
     <div class="common-card">
       <div>这里是新建文章</div>
     </div>
-    <div class="common-card a-card-margin-top">
+    <div class="common-card margin-top-all">
       <div>这里是内容</div>
     </div>
   </div>

src/views/articleManagement/articleList.vue

@@ -3,7 +3,7 @@
     <div class="common-card">
       <div>这里是文章列表</div>
     </div>
-    <div class="common-card a-card-margin-top">
+    <div class="common-card margin-top-all">
       <div>这里是内容</div>
     </div>
   </div>

src/views/examManagement/examAutomaticVolumeFormation.vue

@@ -3,7 +3,7 @@
     <div class="common-card">
       <div>这里是自动组卷</div>
     </div>
-    <div class="common-card a-card-margin-top">
+    <div class="common-card margin-top-all">
       <div>这里是内容</div>
     </div>
   </div>

src/views/examManagement/examManagementDetail.vue

@@ -100,6 +100,7 @@
 import { mapGetters } from 'vuex';
 import { formatTimeHoursMinuteSecondsFun } from '@/filters';
 import { ENGINEERING_WORK_LIST, EXAM_QUESTION_TYPE } from '@/common/Constant';
+import { QUESTIONLISTRES } from '@/common/resData';
 export default {
   name: 'examManagementDetail',
   props: {},
@@ -118,10 +119,12 @@ export default {
       examQuestionList: [], // 单场考试的试题列表
     };
   },
-  created() {},
-  mounted() {
+  created() {
     this.initDataFun(); //初始化数据
   },
+  mounted() {
+    this.initTableHeightFun(); // 初始化表单的高度
+  },
   beforeDestroy() {},
   watch: {
     screenHeight() {
@@ -153,7 +156,7 @@ export default {
           dataIndex: 'questionCode',
           key: 'questionCode',
           scopedSlots: { customRender: 'questionCode' },
-          width: 150,
+          width: 200,
         },
         {
           title: '题目',
@@ -178,14 +181,14 @@ export default {
           title: '分值',
           dataIndex: 'grade',
           key: 'grade',
-          width: 100,
+          width: 150,
         },
         {
           title: '操作',
           dataIndex: 'action',
           key: 'action',
           scopedSlots: { customRender: 'action' },
-          width: 100,
+          width: 150,
         },
       ];
 
@@ -231,121 +234,7 @@ export default {
     // 查询：题目列表数据
     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,
-        },
-      ];
+      const resData = QUESTIONLISTRES.data;
       setTimeout(() => {
         resData.forEach((item) => {
           EXAM_QUESTION_TYPE.forEach((it) => {

src/views/examManagement/examManagementList.vue

@@ -37,7 +37,7 @@
         </div>
       </div>
       <!-- 表单 -->
-      <div class="common-card a-card-margin-top">
+      <div class="common-card margin-top-all">
         <!-- 清空、批量删除 -->
         <div class="exam-edit-row">
           <a-button
@@ -107,6 +107,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { ENGINEERING_WORK_LIST, EXAM_TYPE } from '@/common/Constant';
+import { EXAMLISTRES } from '@/common/resData';
 export default {
   name: 'examManagementList',
   props: {},
@@ -173,7 +174,7 @@ export default {
           title: '考试编号',
           dataIndex: 'examCode',
           key: 'examCode',
-          width: 150,
+          // width: 150,
         },
         {
           title: '考试名称',
@@ -189,7 +190,7 @@ export default {
           title: '状态',
           dataIndex: 'status',
           key: 'status',
-          width: 150,
+          // width: 150,
           scopedSlots: { customRender: 'status' },
         },
         {
@@ -197,7 +198,7 @@ export default {
           dataIndex: 'action',
           key: 'action',
           scopedSlots: { customRender: 'action' },
-          with: 200,
+          // with: 200,
         },
       ];
 
@@ -218,64 +219,7 @@ export default {
     // 查询：题目列表数据
     getQusetionsListFun() {
       // 列表数据
-      const resData = [
-        {
-          id: 1,
-          examCode: 'TradeCode 1',
-          examName: '期末考试',
-          startTime: '2021-06-14 12:00:00',
-          status: '未开始',
-        },
-        {
-          id: 2,
-          examCode: 'TradeCode 2',
-          examName: '期末考试',
-          startTime: '2021-06-14 12:00:00',
-          status: '正在考试',
-        },
-        {
-          id: 3,
-          examCode: 'TradeCode 3',
-          examName: '期末考试',
-          startTime: '2021-06-14 12:00:00',
-          status: '已结束',
-        },
-        {
-          id: 4,
-          examCode: 'TradeCode 4',
-          examName: '期末考试',
-          startTime: '2021-06-14 12:00:00',
-          status: '未开始',
-        },
-        {
-          id: 5,
-          examCode: 'TradeCode 5',
-          examName: '期末考试',
-          startTime: '2021-06-14 12:00:00',
-          status: '未开始',
-        },
-        {
-          id: 6,
-          examCode: 'TradeCode 6',
-          examName: '期末考试',
-          startTime: '2021-06-14 12:00:00',
-          status: '未开始',
-        },
-        {
-          id: 7,
-          examCode: 'TradeCode 7',
-          examName: '期末考试',
-          startTime: '2021-06-14 12:00:00',
-          status: '未开始',
-        },
-        {
-          id: 8,
-          examCode: 'TradeCode 8',
-          examName: '期末考试',
-          startTime: '2021-06-14 12:00:00',
-          status: '未开始',
-        },
-      ];
+      const resData = EXAMLISTRES.data;
       setTimeout(() => {
         this.pagination.total = resData.length;
         this.tableData = [...resData];

src/views/examManagement/examManualVolumeFormation.vue

@@ -1,25 +1,475 @@
 <template>
   <div class="app-container">
-    <div class="common-card">
-      <div>这里是手动组卷</div>
-    </div>
-    <div class="common-card a-card-margin-top">
-      <div>这里是内容</div>
-    </div>
+    <a-spin :spinning="loading">
+      <!-- 基础信息 -->
+      <div class="common-card basic-information-box">
+        <div class="basic-information-title">基本信息</div>
+        <a-form
+          :form="loginForm"
+          @submit="handleSubmitFun"
+          style="width: 500px;"
+          :loading="loading"
+        >
+          <a-form-item
+            label="考试标题"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-input
+              placeholder="请输入考试标题"
+              :maxLength="100"
+              v-decorator="[
+                'name',
+                {
+                  rules: [
+                    { required: true, message: 'Please input exam name!' },
+                  ],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="考试时间"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <!-- <ExamDateTime
+              v-decorator="[
+                'examDateTime',
+                {
+                  initialValue: { dateTime: examDateTime },
+                  rules: [
+                    {
+                      required: true,
+                      validator: checkExamDateTime,
+                    },
+                  ],
+                },
+              ]"
+            />-->
+            <a-date-picker
+              showTime
+              placeholder="请选择日期 + 时间"
+              @change="onDateChange"
+              v-decorator="[
+                'examDateTime',
+                {
+                  rules: [
+                    { required: true, message: 'Please select datetime!' },
+                  ],
+                },
+              ]"
+              style="width:100%;"
+            />
+          </a-form-item>
+          <a-form-item
+            label="考试时长"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <ExamTimeLong
+              v-decorator="[
+                'examTimeLong',
+                {
+                  initialValue: {
+                    hours: examLongTimeHours,
+                    minutes: examLongTimeMinutes,
+                  },
+                  rules: [
+                    {
+                      required: true,
+                      validator: checkExamTimeLong,
+                    },
+                  ],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="考试描述"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-textarea
+              placeholder="请输入考试描述"
+              :auto-size="{ minRows: 3, maxRows: 5 }"
+              :maxLength="200"
+              v-decorator="[
+                'content',
+                {
+                  rules: [
+                    {
+                      required: true,
+                      message: 'Please input exam description!',
+                    },
+                  ],
+                },
+              ]"
+            />
+          </a-form-item>
+          <a-form-item
+            label="考试分类"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-select
+              v-decorator="[
+                'examTypeChooseValue',
+                {
+                  rules: [
+                    { required: true, message: 'Please selete exam type!' },
+                  ],
+                  initialValue: examTypeChooseValue,
+                },
+              ]"
+            >
+              <a-select-option
+                :value="item.code"
+                v-for="(item, index) in examTypeList"
+                :key="index"
+                >{{ item.title }}</a-select-option
+              >
+            </a-select>
+          </a-form-item>
+          <a-form-item
+            label="工种类别"
+            :label-col="labelCol"
+            :wrapper-col="wrapperCol"
+          >
+            <a-select
+              v-decorator="[
+                'engineeringWorkChooseValue',
+                {
+                  rules: [
+                    {
+                      required: true,
+                      message: 'Please selete engineering work!',
+                    },
+                  ],
+                  initialValue: engineeringWorkChooseValue,
+                },
+              ]"
+            >
+              <a-select-option
+                :value="item.code"
+                v-for="(item, index) in engineeringWorkList"
+                :key="index"
+                >{{ item.title }}</a-select-option
+              >
+            </a-select>
+          </a-form-item>
+          <a-form-item v-show="false">
+            <a-button
+              id="examManualVolumeFormationSubmit"
+              type="primary"
+              html-type="submit"
+              ref="submitBtn"
+              >提交</a-button
+            >
+          </a-form-item>
+        </a-form>
+        <div></div>
+      </div>
+      <!-- 当前题目列表 -->
+      <div class="common-card margin-top-all">
+        <div class="flex-between">
+          <div class="current-table-title">当前题目</div>
+          <div class="current-table-title">
+            总分：{{ current_tableGradesCount }}
+          </div>
+        </div>
+        <!-- 清空、批量删除 -->
+        <div class="exam-question-edit-row">
+          <a-button
+            type="primary"
+            :disabled="!currentHasSelected"
+            @click="clearCurrentTableSelectDataFun"
+            >清空</a-button
+          >
+          <span
+            v-if="currentHasSelected"
+            class="exam-question-edit-checkedtxt"
+            >{{ `已选择 ${current_selectedRowKeys.length} 项` }}</span
+          >
+          <a-button
+            class="exam-question-edit-delete"
+            type="primary"
+            :disabled="!currentHasSelected"
+            @click="deleteCurrentTableSelectDataFun"
+            >批量删除</a-button
+          >
+        </div>
+        <!-- 表单[自带分页功能] -->
+        <a-table
+          :columns="current_columns"
+          :data-source="current_tableData"
+          :row-key="(record) => record.id"
+          :row-selection="{
+            selectedRowKeys: current_selectedRowKeys,
+            onChange: onCurrentTableSelectChange,
+          }"
+          :pagination="current_pagination"
+          @change="handleCurrentTableChangePage"
+        >
+          <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" />
+            <a @click="deleteCurrentTableQuestionFun(record)">删除</a>
+          </template>
+        </a-table>
+      </div>
+      <!-- 题库题目列表 -->
+      <div class="common-card margin-top-all">
+        <!-- 过滤条件栏目 -->
+        <div>
+          <div class="filter-condition-box">
+            <span>所属类目：</span>
+            <ul>
+              <li
+                :class="{
+                  checkedExamQuestionType:
+                    bank_checkedExamQuestionType === item.code,
+                }"
+                v-for="(item, index) in bank_examQuestionType"
+                :key="index"
+                @click="handleExamQuestionTypeFun(item)"
+              >
+                {{ item.title }}
+              </li>
+            </ul>
+          </div>
+          <div class="border-line"></div>
+          <div class="filter-other-box">
+            <span class="filter-other-title">其它选项：</span>
+            <span class="filter-other-item-title">工种：</span>
+            <a-select
+              v-model="bank_engineeringWorkChooseValue"
+              @change="handleChangeEngineeringWorkValue"
+            >
+              <a-select-option
+                v-for="(item, index) in bank_engineeringWorkList"
+                :key="index"
+                :value="item.code"
+                >{{ item.title }}</a-select-option
+              >
+            </a-select>
+          </div>
+        </div>
+        <!-- 表单 -->
+        <div class="margin-top-all">
+          <!-- 清空、批量添加 -->
+          <div class="exam-question-edit-row">
+            <a-button
+              type="primary"
+              :disabled="!bankHasSelected"
+              @click="clearBankTableSelect"
+              >清空</a-button
+            >
+            <span
+              v-if="bankHasSelected"
+              class="exam-question-edit-checkedtxt"
+              >{{ `已选择 ${bank_selectedRowKeys.length} 项` }}</span
+            >
+            <a-button
+              class="exam-question-edit-delete"
+              type="primary"
+              :disabled="!bankHasSelected"
+              @click="bankTableAddSelectData"
+              >批量添加</a-button
+            >
+          </div>
+          <!-- 表单[自带分页功能] -->
+          <a-table
+            :columns="bank_columns"
+            :data-source="bank_tableData"
+            :row-key="(record) => record.id"
+            :row-selection="{
+              selectedRowKeys: bank_selectedRowKeys,
+              onChange: onBankTableSelectChange,
+              getCheckboxProps: (record) => ({
+                props: {
+                  disabled: record.disabled,
+                },
+              }),
+            }"
+            :pagination="bank_pagination"
+            @change="handleBankTableChangePage"
+          >
+            <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" />
+              <a
+                :class="{ disabledBtn: record.disabled }"
+                @click="bankTableAddQuestion(record)"
+                >添加</a
+              >
+            </template>
+          </a-table>
+        </div>
+        <div class="submit-row">
+          <a-button type="primary" @click="handleSubmitBtnFun">组卷</a-button>
+        </div>
+      </div>
+    </a-spin>
   </div>
 </template>
 
 <script>
+import {
+  ENGINEERING_WORK_LIST,
+  EXAM_TYPE,
+  EXAM_QUESTION_TYPE,
+} from '@/common/Constant';
+import { formateSeconds } from '@/filters';
+import { QUESTIONLISTRES } from '@/common/resData';
+// const ExamDateTime = {
+//   props: ['value'],
+//   template: `
+//     <span>
+//       <a-date-picker
+//               placeholder="请选择日期"
+//               showTime
+//         @change="handleDateChange"
+//         style="width:100%;"
+//             />
+//     </span>
+//   `,
+//   data() {
+//     const value = this.value || {};
+//     return {
+//       dateTime: value.dateTime || null,
+//     };
+//   },
+//   methods: {
+//     handleDateChange(dates, datesString) {
+//       if (dates) {
+//         this.dateTime = datesString;
+//       } else {
+//         this.dateTime = null;
+//       }
+//       this.triggerChange({ dateTime: this.dateTime });
+//     },
+//     triggerChange(changedValue) {
+//       // Should provide an event to pass value to Form.
+//       this.$emit('change', Object.assign({}, this.$data, changedValue));
+//     },
+//   },
+// };
+const ExamTimeLong = {
+  props: ['value'],
+  template: `
+    <span>
+      <a-input
+        type='number'
+        :value="hours"
+        @change="handleNumberChange"
+        style="width: 35%; margin-right: 2%;"
+      />
+      <span style="margin-right: 2%;">小时</span>
+      <a-input
+        type='number'
+        :value="minutes"
+        @change="handleCurrencyChange"
+        style="width: 35%; margin-right: 2%;"
+      />
+      <span>分钟</span>
+    </span>
+  `,
+  data() {
+    const value = this.value || {};
+    return {
+      hours: value.hours || '',
+      minutes: value.minutes || '',
+    };
+  },
+  watch: {
+    value(val = {}) {
+      this.hours = val.hours || '';
+      this.minutes = val.minutes || '';
+    },
+  },
+  methods: {
+    handleNumberChange(e) {
+      const hours = parseInt(e.target.value);
+      if (isNaN(hours)) {
+        return;
+      }
+      this.triggerChange({ hours });
+    },
+    handleCurrencyChange(e) {
+      const minutes = parseInt(e.target.value);
+      if (isNaN(minutes)) {
+        return;
+      }
+      this.triggerChange({ minutes });
+    },
+    triggerChange(changedValue) {
+      // Should provide an event to pass value to Form.
+      this.$emit('change', Object.assign({}, this.$data, changedValue));
+    },
+  },
+};
 export default {
   name: 'examManualVolumeFormation',
   props: {},
   components: {
-    // components: (reslove) => {
-    // require(['', reslove]);
-    // }
+    ExamTimeLong,
+    // ExamDateTime,
   },
   data() {
-    return {};
+    return {
+      loading: false, // 是否展示加载动画
+      // 基础信息的表单
+      labelCol: { span: 6 }, // 表单行中label的占位
+      wrapperCol: { span: 18 }, // 表单行中内容的占位
+      loginForm: this.$form.createForm(this, {
+        name: 'examManualVolumeFormation',
+      }),
+      engineeringWorkList: [], // 工种数据列表
+      engineeringWorkChooseValue: '', // 所选工种
+      examTypeList: [], // 考试类型列表
+      examTypeChooseValue: '', // 所选考试类型
+      examDateTime: '', // 考试时间
+      examLongTimeHours: '', // 考试时长：小时
+      examLongTimeMinutes: '', // 考试时长：分钟
+      // 当前题目列表
+      current_columns: [], // form表单的列参数
+      current_tableData: [], // 表单数据
+      current_pagination: {
+        pageSize: 7,
+        current: 1,
+        total: 0,
+      }, // 分页参数
+      current_selectedRowKeys: [], // 多选的结果
+      current_tableGradesCount: 0, // 总分
+      // 题库列表
+      bank_examQuestionType: [], // 题目类型列表
+      bank_checkedExamQuestionType: '', // 所选题目类型
+      bank_engineeringWorkList: [], // 工种数据列表
+      bank_engineeringWorkChooseValue: '', // 所选工种
+      bank_columns: [], // form表单的列参数
+      bank_tableData: [], // 表单数据
+      bank_pagination: {
+        pageSize: 7,
+        current: 1,
+        total: 0,
+      }, // 分页参数
+      bank_selectedRowKeys: [], // 多选的结果
+      bank_tableGradesCount: 0, // 总分
+      disabledIdArr: [], // 不可选取的行数据Id
+    };
   },
   created() {
     this.initDataFun(); //初始化数据
@@ -27,14 +477,488 @@ export default {
   mounted() {},
   beforeDestroy() {},
   watch: {},
-  computed: {},
+  computed: {
+    // 判断 当前题目 列表中是否有行被选择
+    currentHasSelected() {
+      return this.current_selectedRowKeys.length > 0;
+    },
+    // 判断 题库题目 列表中是否有行被选择
+    bankHasSelected() {
+      return this.bank_selectedRowKeys.length > 0;
+    },
+  },
   methods: {
     //初始化数据
-    initDataFun() {},
+    initDataFun() {
+      this.loading = true;
+      // 工种类别
+      this.engineeringWorkList = [...ENGINEERING_WORK_LIST];
+      this.engineeringWorkChooseValue = this.engineeringWorkList[0].code;
+      // 考试类型
+      this.examTypeList = [...EXAM_TYPE];
+      this.examTypeChooseValue = this.examTypeList[0].code;
+      this.initCurrentTableFun(); // 初始化当前题目列表相关数据
+      this.initBankTableFun(); // 初始化题库题目列表相关数据
+    },
+    // #region 当前题目列表
+    // 初始化当前题目列表
+    initCurrentTableFun() {
+      // 表单的列的配置参数
+      this.current_columns = [
+        {
+          title: '题目编号',
+          dataIndex: 'questionCode',
+          key: 'questionCode',
+          width: 200,
+        },
+        {
+          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: 150,
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          key: 'action',
+          scopedSlots: { customRender: 'action' },
+          width: 150,
+        },
+      ];
+      this.getCurrentQusetionsListFun(); // 查询：当前题目列表数据
+    },
+    // 查询：题目列表数据
+    getCurrentQusetionsListFun() {
+      // 列表数据
+      const 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.current_pagination.total = resData.length;
+        this.current_tableData = [...resData];
+        this.loading = false;
+      }, 1500);
+    },
+    // 查询：表格某页的数据
+    handleCurrentTableChangePage(pagination) {
+      const pager = { ...this.current_pagination };
+      pager.current = pagination.current;
+      this.current_pagination = pager;
+      // let params = {
+      //   pagination: current_pagination,
+      //   questionType: this.checkedExamQuestionType,
+      //   engineeringWork: this.engineeringWorkChooseValue
+      // };
+      // this.$_http
+      //   .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS, { params })
+      //   .then((res) => {
+      //     console.log(res);
+      //     this.current_tableData = res.data;
+      //     this.current_pagination.total = res.pagination.total;
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   })
+      //   .finally(() => {
+      //     this.loading = false;
+      //   });
+    },
+    // 操作：删除
+    deleteCurrentTableQuestionFun(record) {
+      let that = this;
+      this.$confirm({
+        title: '删除',
+        content: `确认删除编号为 ${record.questionCode} 的题目吗？`,
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+          that.loading = true;
+          that.removeDataFromCurrentTable([record.id], that);
+          that.current_selectedRowKeys = that.current_selectedRowKeys.filter(
+            (id) => {
+              if (id !== record.id) {
+                return id;
+              }
+            }
+          );
+          that.loading = false;
+        },
+        onCancel() {},
+      });
+    },
+    // 操作：清空选择
+    clearCurrentTableSelectDataFun() {
+      this.current_selectedRowKeys = [];
+    },
+    // 操作：多选变化时
+    onCurrentTableSelectChange(selectedRowKeys) {
+      this.current_selectedRowKeys = selectedRowKeys;
+    },
+    // 操作：批量删除
+    deleteCurrentTableSelectDataFun() {
+      let that = this;
+      this.$confirm({
+        title: '批量删除',
+        content: `确认批量删除吗？`,
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+          that.loading = true;
+          that.removeDataFromCurrentTable(that.current_selectedRowKeys, that);
+          // 置空选择结果
+          that.current_selectedRowKeys = [];
+          that.loading = false;
+        },
+        onCancel() {},
+      });
+    },
+    // 移除当前题目列表中要删除的数据
+    removeDataFromCurrentTable(ids = [], that) {
+      // 移出当前题目
+      that.current_tableData = that.current_tableData.filter((currentItem) => {
+        if (!ids.includes(currentItem.id)) {
+          return currentItem;
+        }
+      });
+      // 禁用状态去除
+      that.bank_tableData.forEach((banItem) => {
+        if (ids.includes(banItem.id)) {
+          banItem.disabled = false;
+        }
+      });
+      that.bank_tableData = [...that.bank_tableData];
+    },
+    // #endregion
+
+    //#region 题库题目列表
+    initBankTableFun() {
+      // 题目分类
+      this.bank_examQuestionType = [
+        { title: '全部', code: '' },
+        ...EXAM_QUESTION_TYPE,
+      ];
+      this.bank_checkedExamQuestionType = this.bank_examQuestionType[0].code;
+      // 工种类别
+      this.bank_engineeringWorkList = [
+        { title: '全部', code: '' },
+        ...ENGINEERING_WORK_LIST,
+      ];
+      this.bank_engineeringWorkChooseValue = this.bank_engineeringWorkList[0].code;
+      // 表单的列的配置参数
+      this.bank_columns = [
+        {
+          title: '题目编号',
+          dataIndex: 'questionCode',
+          key: 'questionCode',
+          width: 200,
+        },
+        {
+          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: 'action',
+          key: 'action',
+          scopedSlots: { customRender: 'action' },
+          width: 150,
+        },
+      ];
+      this.getBankQusetionsListFun(); // 查询：题目列表数据
+    },
+    // 查询：题目列表数据
+    getBankQusetionsListFun() {
+      // 列表数据
+      const resData = QUESTIONLISTRES.data;
+      setTimeout(() => {
+        resData.forEach((item) => {
+          item.disabled = false;
+          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.bank_pagination.total = resData.length;
+        this.bank_tableData = [...resData];
+        this.loading = false;
+      }, 1500);
+    },
+    // 操作：选择某个题目类型
+    handleExamQuestionTypeFun(item) {
+      console.log('选择某个题目类型', item);
+      if (this.bank_checkedExamQuestionType === item.code) {
+        return;
+      }
+      this.bank_checkedExamQuestionType = item.code;
+    },
+    // 操作：选择了某个工种
+    handleChangeEngineeringWorkValue() {
+      console.log('选择了某个工种', this.bank_engineeringWorkChooseValue);
+    },
+    // 查询：表格某页的数据
+    handleBankTableChangePage(pagination) {
+      this.loading = true;
+      setTimeout(() => {
+        const pager = { ...this.bank_pagination };
+        pager.current = pagination.current;
+        this.bank_pagination = pager;
+        this.loading = false;
+      }, 1500);
+      // let params = {
+      //   pagination: bank_pagination,
+      //   questionType: this.checkedExamQuestionType,
+      //   engineeringWork: this.engineeringWorkChooseValue
+      // };
+      // this.$_http
+      //   .get(this.$_API.INTERFACE_GET_USER_ADMIN_USERS, { params })
+      //   .then((res) => {
+      //     console.log(res);
+      //     this.bank_pagination = res.data;
+      //     this.bank_pagination.total = res.pagination.total;
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   })
+      //   .finally(() => {
+      //     this.loading = false;
+      //   });
+    },
+    // 操作：添加
+    bankTableAddQuestion(record) {
+      // 加入当前题目列表
+      for (let i = 0; i < this.bank_tableData.length; i++) {
+        let bankItem = this.bank_tableData[i];
+        if (bankItem.id === record.id) {
+          this.current_tableData.push(bankItem);
+          break;
+        }
+      }
+      this.current_pagination.total = this.current_tableData.length;
+      this.current_pagination.current = 1;
+      this.formateBankTableDisabledRowFun(); // 禁用
+      this.bank_selectedRowKeys = this.bank_selectedRowKeys.filter((id) => {
+        if (id !== record.id) {
+          return id;
+        }
+      });
+    },
+    // 操作：批量添加
+    bankTableAddSelectData() {
+      let that = this;
+      this.$confirm({
+        title: '批量添加',
+        content: `确认批量添加吗？`,
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+          // 加入当前题目列表
+          let arr = [];
+          that.bank_tableData.forEach((bankItem) => {
+            that.bank_selectedRowKeys.forEach((id) => {
+              if (bankItem.id === id) {
+                arr.push(bankItem);
+              }
+            });
+          });
+          that.current_tableData = [
+            ...new Set([...that.current_tableData, ...arr]),
+          ];
+          that.current_pagination.total = that.current_tableData.length;
+          that.current_pagination.current = 1;
+          that.formateBankTableDisabledRowFun(); // 禁用
+          // 清空选项
+          that.bank_selectedRowKeys = [];
+        },
+        onCancel() {},
+      });
+    },
+    // 操作：多选变化时
+    onBankTableSelectChange(selectedRowKeys) {
+      this.bank_selectedRowKeys = selectedRowKeys;
+    },
+    // 操作：清空选择
+    clearBankTableSelect() {
+      // 清空选项
+      this.bank_selectedRowKeys = [];
+    },
+    // 过滤：是否禁止选择
+    formateBankTableDisabledRowFun() {
+      this.disabledIdArr = this.current_tableData.map((currentItem) => {
+        return currentItem.id;
+      });
+      this.bank_tableData.forEach((bankItem) => {
+        if (this.disabledIdArr.includes(bankItem.id)) {
+          bankItem.disabled = true;
+        } else {
+          bankItem.disabled = false;
+        }
+        return bankItem;
+      });
+      this.bank_tableData = [...this.bank_tableData];
+    },
+    // #endregion
+    // 操作：详情
+    toQuestionDetailFun(record) {
+      console.log('查看某个试题的详情', record);
+    },
+    // #region 基础信息变更
+    // 操作：选择日期、时间
+    onDateChange(date, dateString) {
+      if (date) {
+        this.examDateTime = dateString;
+      } else {
+        this.examDateTime = '';
+      }
+    },
+    // // 校验：考试时间
+    // checkExamDateTime(rule, value, callback) {
+    //   if (value.dateTime) {
+    //     callback();
+    //     return;
+    //   }
+    //   callback('Please select datetime!');
+    // },
+    // 校验：考试时长
+    checkExamTimeLong(rule, value, callback) {
+      if (
+        value.hours !== '' &&
+        value.hours >= 0 &&
+        value.minutes !== '' &&
+        value.minutes >= 0
+      ) {
+        callback();
+        return;
+      }
+      callback('Please input hours and minutes & one than zero!');
+    },
+    // #endregion
+
+    // 操作：点击提交按钮
+    handleSubmitBtnFun() {
+      document.getElementById('examManualVolumeFormationSubmit').click();
+    },
+    // 操作：表单提交
+    handleSubmitFun(e) {
+      e.preventDefault();
+      this.loginForm.validateFields((err, values) => {
+        if (!err) {
+          let params = {
+            name: values.name,
+            type: this.examTypeChooseValue,
+            content: values.content,
+            engineeringWorkChooseValue: values.engineeringWorkChooseValue,
+            // startTime: values.examDateTime.dateTime,
+            startTime: this.examDateTime,
+            duration: formateSeconds(
+              values.examTimeLong.hours,
+              values.examTimeLong.minutes
+            ),
+          };
+          this.httpQuestFun(params);
+        }
+      });
+    },
+    // 表单提交请求
+    httpQuestFun(params) {
+      this.loading = true;
+      console.log(params);
+      setTimeout(() => {
+        this.loading = false;
+      }, 2000);
+      // this.$_http
+      //   .post(this.$_API.INTERFACE_POST_EXAM_ADD, params)
+      //   .then((res) => {
+      //     console.log(res);
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   })
+      //   .finally(() => {
+      //     this.loading = false;
+      //   });
+    },
   },
 };
 </script>
 
 <style lang="less"></style>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+@import '~@/styles/common/variable.less';
+.app-container {
+  overflow-y: auto;
+  .basic-information-box {
+    display: flex;
+    justify-content: space-between;
+    .basic-information-title {
+      font-size: 18px;
+      font-weight: bold;
+      color: @mainColorBlack65;
+    }
+  }
+  .current-table-title {
+    font-size: 18px;
+    color: @mainColorBlack65;
+  }
+  .disabledBtn {
+    color: #a6a6a6;
+    cursor: no-drop !important;
+  }
+  .submit-row {
+    width: 100%;
+    padding: @paddingMarginVal 0 @navTopHight;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>

src/views/examQuestionManagement/examQuestionList.vue

@@ -37,7 +37,7 @@
         </div>
       </div>
       <!-- 表单 -->
-      <div class="common-card a-card-margin-top">
+      <div class="common-card margin-top-all">
         <!-- 清空、批量删除 -->
         <div class="exam-question-edit-row">
           <a-button
@@ -92,6 +92,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { ENGINEERING_WORK_LIST, EXAM_QUESTION_TYPE } from '@/common/Constant';
+import { QUESTIONLISTRES } from '@/common/resData';
 export default {
   name: 'examQuestionList',
   props: {},
@@ -150,47 +151,45 @@ export default {
         ...EXAM_QUESTION_TYPE,
       ];
       this.checkedExamQuestionType = this.examQuestionType[0].code;
-
       // 工种类别
       this.engineeringWorkList = ENGINEERING_WORK_LIST;
       this.engineeringWorkChooseValue = this.engineeringWorkList[0].code;
-
       // 表单的列的配置参数
       this.columns = [
         {
           title: '题目编号',
           dataIndex: 'questionCode',
           key: 'questionCode',
-          width: 150,
+          // width: 200,
         },
         {
           title: '题目',
           dataIndex: 'questionDescription',
           key: 'questionDescription',
+          // width: 700,
         },
         {
           title: '题目类别',
           dataIndex: 'questionType',
           key: 'questionType',
           scopedSlots: { customRender: 'questionType' },
-          width: 150,
+          // width: 200,
         },
         {
           title: '工种',
           dataIndex: 'engineeringWork',
           key: 'engineeringWork',
           scopedSlots: { customRender: 'engineeringWork' },
-          width: 150,
+          // width: 200,
         },
         {
           title: '操作',
           dataIndex: 'action',
           key: 'action',
           scopedSlots: { customRender: 'action' },
-          with: 220,
+          // with: 200,
         },
       ];
-
       this.getQusetionsListFun(); // 查询：题目列表数据
     },
     // 操作：选择某个题目类型
@@ -208,107 +207,7 @@ export default {
     // 查询：题目列表数据
     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',
-        },
-      ];
+      const resData = QUESTIONLISTRES.data;
       setTimeout(() => {
         resData.forEach((item) => {
           EXAM_QUESTION_TYPE.forEach((it) => {
@@ -327,7 +226,6 @@ export default {
         this.loading = false;
       }, 1500);
     },
-    //#region
     // 查询：表格某页的数据
     handleTableChange(pagination) {
       this.loading = true;
@@ -356,7 +254,6 @@ export default {
       //     this.loading = false;
       //   });
     },
-    //#endregion
     // 操作：详情
     toQuestionDetailFun(record) {
       console.log('查看某个试题的详情', record);
@@ -409,8 +306,10 @@ export default {
         onOk() {
           console.log('批量删除', that.selectedRowKeys);
           that.loading = true;
-          that.selectedRowKeys = [];
-          that.loading = false;
+          setTimeout(() => {
+            that.selectedRowKeys = [];
+            that.loading = false;
+          }, 1500);
           // that.$_http
           //   .post(that.$_API.INTERFACE_POST_EXAMS_QUESTION_DELETE_LIST, params)
           //   .then((res) => {
@@ -434,47 +333,4 @@ export default {
 
 <style lang="less" scoped>
 @import '~@/styles/common/variable.less';
-.app-container {
-  .filter-condition-box {
-    display: flex;
-    align-items: center;
-    ul {
-      margin: 0;
-      display: flex;
-      li {
-        margin-left: @paddingMarginVal;
-        color: @mainColorBlack65;
-        cursor: pointer;
-        &:hover {
-          color: @mainColorBlueNormal;
-        }
-      }
-      .checkedExamQuestionType {
-        color: @mainColorBlueNormal;
-        font-weight: bold;
-      }
-    }
-  }
-  .filter-other-box {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    .filter-other-title {
-      color: @mainColorBlack85;
-    }
-    .filter-other-item-title {
-      margin-left: @paddingMarginVal;
-      color: @mainColorBlack65;
-    }
-  }
-  .exam-question-edit-row {
-    margin-bottom: @paddingMarginVal;
-    .exam-question-edit-checkedtxt {
-      margin-left: @paddingMarginVal;
-    }
-    .exam-question-edit-delete {
-      margin-left: @paddingMarginVal;
-    }
-  }
-}
 </style>

src/views/examQuestionManagement/examQusetionCreateGapFilling.vue

@@ -86,7 +86,12 @@
               v-decorator="[
                 'engineeringWorkChooseValue',
                 {
-                  rules: [{ required: false, message: 'Please selete date!' }],
+                  rules: [
+                    {
+                      required: false,
+                      message: 'Please selete engineering work!',
+                    },
+                  ],
                   initialValue: engineeringWorkChooseValue,
                 },
               ]"

src/views/examQuestionManagement/examQusetionCreateMultiple.vue

@@ -119,7 +119,12 @@
               v-decorator="[
                 'engineeringWorkChooseValue',
                 {
-                  rules: [{ required: false, message: 'Please selete date!' }],
+                  rules: [
+                    {
+                      required: false,
+                      message: 'Please selete engineering work!',
+                    },
+                  ],
                   initialValue: engineeringWorkChooseValue,
                 },
               ]"

src/views/examQuestionManagement/examQusetionCreateSingle.vue

@@ -9,7 +9,7 @@
           :loading="loading"
         >
           <a-form-item
-            label="题目内容："
+            label="题目内容"
             :label-col="labelCol"
             :wrapper-col="wrapperCol"
           >
@@ -62,7 +62,7 @@
             </a-form-item>
           </div>
           <a-form-item
-            label="正确答案："
+            label="正确答案"
             :label-col="labelCol"
             :wrapper-col="wrapperCol"
           >
@@ -88,7 +88,7 @@
             </a-select>
           </a-form-item>
           <a-form-item
-            label="必学日期："
+            label="必学日期"
             :label-col="labelCol"
             :wrapper-col="wrapperCol"
           >
@@ -104,7 +104,7 @@
             />
           </a-form-item>
           <a-form-item
-            label="工种类别："
+            label="工种类别"
             :label-col="labelCol"
             :wrapper-col="wrapperCol"
           >
@@ -112,7 +112,12 @@
               v-decorator="[
                 'engineeringWorkChooseValue',
                 {
-                  rules: [{ required: false, message: 'Please selete date!' }],
+                  rules: [
+                    {
+                      required: false,
+                      message: 'Please selete engineering work!',
+                    },
+                  ],
                   initialValue: engineeringWorkChooseValue,
                 },
               ]"

src/views/examQuestionManagement/examQusetionCreateTrueOrFalse.vue

@@ -111,7 +111,12 @@
               v-decorator="[
                 'engineeringWorkChooseValue',
                 {
-                  rules: [{ required: false, message: 'Please selete date!' }],
+                  rules: [
+                    {
+                      required: false,
+                      message: 'Please selete engineering work!',
+                    },
+                  ],
                   initialValue: engineeringWorkChooseValue,
                 },
               ]"