....

src/modules/examwork/view/onlineExam.vue

@@ -19,9 +19,9 @@
                 <el-button @click="back">返 回</el-button>
               </el-button-group>
             </div>
-            <el-tabs type="border-card">
+            <el-tabs type="border-card" v-model="activeName">
               <!-- 基础信息 -->
-              <el-tab-pane label="基础信息">
+              <el-tab-pane label="基础信息" name="tab1">
                 <el-row>
                   <el-form-item
                     label="考试名称"
@@ -70,17 +70,18 @@
                       start-placeholder="开始日期"
                       end-placeholder="结束日期"
                       value-format="yyyy-MM-dd HH:mm:ss"
+                      :clearable="false"
                     >
                     </el-date-picker>
                   </el-form-item>
                 </el-row>
               </el-tab-pane>
               <!-- 控制设置 -->
-              <el-tab-pane label="控制设置">
+              <el-tab-pane label="控制设置" name="tab2">
                 <el-row>
                   <el-form-item label="考试时长" prop="duration">
                     <el-input
-                      v-model.number="mainForm.duration"
+                      v-model.trim.number="mainForm.duration"
                       auto-complete="off"
                     ></el-input>
                   </el-form-item>
@@ -113,7 +114,7 @@
                   <el-form-item label="分钟"></el-form-item>
                 </el-row>
               </el-tab-pane>
-              <el-tab-pane label="显示设置">
+              <el-tab-pane label="显示设置" name="tab3">
                 <el-row>
                   <el-form-item label="考前说明">
                     <el-input
@@ -223,7 +224,7 @@
                   </el-form-item>
                 </el-row>
               </el-tab-pane>
-              <el-tab-pane label="人脸识别设置">
+              <el-tab-pane label="人脸识别设置" name="tab4">
                 <el-row>
                   <el-form-item label="是否开启">
                     <el-radio-group
@@ -271,7 +272,7 @@
                   <el-form-item label="%"></el-form-item>
                 </el-row>
               </el-tab-pane>
-              <el-tab-pane label="阅卷设置">
+              <el-tab-pane label="阅卷设置" name="tab5">
                 <el-row>
                   <el-form-item label="阅卷方式">
                     <el-radio-group
@@ -285,7 +286,7 @@
                   </el-form-item>
                 </el-row>
               </el-tab-pane>
-              <el-tab-pane label="网络设置">
+              <el-tab-pane label="网络设置" name="tab6">
                 <el-row>
                   <el-form-item label="IP限制">
                     <el-radio-group v-model="mainForm.properties.IP_LIMIT">
@@ -312,10 +313,37 @@
 
 <script>
 import { EXAM_TYPE, EXAM_WORK_API } from "@/constants/constants.js";
+import moment from "moment";
+
+let _this = null;
+
+let validateName = (rule, value, callback) => {
+  let name = _this.mainForm.name;
+  if (name == "") {
+    callback(new Error("请输入考试名称"));
+    _this.activeName = "tab1";
+  } else {
+    callback();
+  }
+};
+
+let validateDuration = (rule, value, callback) => {
+  let duration = _this.mainForm.duration;
+  if (duration == "") {
+    callback(new Error("请输入考试时长"));
+    _this.activeName = "tab2";
+  } else if (!duration.toString().match(/^[1-9]\d*|0$/)) {
+    callback(new Error("只能是非负整数"));
+    _this.activeName = "tab2";
+  } else {
+    callback();
+  }
+};
 
 export default {
   data() {
     return {
+      activeName: "tab1",
       examDatetimeRange: [],
       show_ckeditor: false,
       mainForm: {
@@ -356,13 +384,8 @@ export default {
       examTypeList: EXAM_TYPE,
       examId: "",
       rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入姓名",
-            trigger: "blur"
-          }
-        ]
+        name: [{ validator: validateName, trigger: "blur" }],
+        duration: [{ validator: validateDuration, trigger: "blur" }]
       }
     };
   },
@@ -406,6 +429,8 @@ export default {
           });
         });
       } else {
+        let now = moment().format("YYYY-MM-DD HH:mm:ss");
+        this.examDatetimeRange = [now, now];
         this.show_ckeditor = true;
       }
     },
@@ -450,6 +475,7 @@ export default {
     }
   },
   created() {
+    _this = this;
     this.examId = this.$route.params.id;
     this.init();
   }