....

src/modules/examwork/view/onlineExam.vue

@@ -1,14 +1,640 @@
 <template>
-  <div><section class="content"></section></div>
+  <div>
+    <section class="content" style="margin-top: -10px;">
+      <div class="box box-info">
+        <!-- 正文信息 -->
+        <div class="box-body">
+          <el-form
+            :inline="true"
+            :rules="rules"
+            ref="mainForm"
+            :model="mainForm"
+            label-position="right"
+          >
+            <div style="margin-bottom: 10px">
+              <el-button-group>
+                <el-button type="primary" @click="saveOnlineExam"
+                  >保 存</el-button
+                >
+                <el-button @click="back">返 回</el-button>
+              </el-button-group>
+            </div>
+            <el-tabs type="border-card">
+              <!-- 基础信息 -->
+              <el-tab-pane label="基础信息">
+                <el-row>
+                  <el-form-item
+                    label="考试名称"
+                    placeholder="请输入考试名称"
+                    prop="name"
+                  >
+                    <el-input v-model="mainForm.name"></el-input>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="考试类型">
+                    <el-select
+                      style="width:205px"
+                      :disabled="true"
+                      v-model="mainForm.examType"
+                      placeholder="请选择"
+                    >
+                      <el-option
+                        v-for="item in examTypeList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="是否开启">
+                    <el-radio-group
+                      v-model="mainForm.enable"
+                      style="margin-left: 15px"
+                    >
+                      <el-radio label="true">开启</el-radio>
+                      <el-radio label="false">关闭</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="考试时间" prop="examDatetimeRange">
+                    <el-date-picker
+                      style="margin-left: 10px"
+                      v-model="examDatetimeRange"
+                      type="datetimerange"
+                      range-separator="至"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-row>
+              </el-tab-pane>
+              <!-- 控制设置 -->
+              <el-tab-pane label="控制设置">
+                <el-row>
+                  <el-form-item label="考试时长" prop="duration">
+                    <el-input
+                      v-model.number="mainForm.duration"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="分钟"></el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="考试次数" prop="examTimes">
+                    <el-input
+                      v-model.number="mainForm.examTimes"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="交卷冻结时间" prop="FREEZE_TIME">
+                    <el-input
+                      v-model.number="mainForm.properties.FREEZE_TIME"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="分钟"></el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="断点续考时间" prop="EXAM_RECONNECT_TIME">
+                    <el-input
+                      v-model.number="mainForm.properties.EXAM_RECONNECT_TIME"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="分钟"></el-form-item>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="显示设置">
+                <el-row>
+                  <el-form-item label="考前说明">
+                    <el-input
+                      v-model="mainForm.properties.BEFORE_EXAM_REMARK"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="考后说明">
+                    <el-input
+                      v-model="mainForm.properties.AFTER_EXAM_REMARK"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="展示作弊说明">
+                    <el-radio-group
+                      v-model="mainForm.properties.SHOW_CHEATING_REMARK"
+                    >
+                      <el-radio label="true">开启</el-radio>
+                      <el-radio label="false">关闭</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="作弊说明">
+                    <el-input
+                      v-model="mainForm.properties.CHEATING_REMARK"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="单选题补充说明">
+                    <el-input
+                      :disabled="!mainForm.properties.SINGLE_EDIT"
+                      v-model="mainForm.properties.SINGLE_ANSWER_REMARK"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="">
+                    <el-switch
+                      v-model="mainForm.properties.SINGLE_EDIT"
+                      on-text="启用"
+                      off-text="禁用"
+                    ></el-switch>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="多选题补充说明">
+                    <el-input
+                      :disabled="!mainForm.properties.MUTIPLE_EDIT"
+                      v-model="mainForm.properties.MUTIPLE_ANSWER_REMARK"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="">
+                    <el-switch
+                      v-model="mainForm.properties.MUTIPLE_EDIT"
+                      on-text="启用"
+                      off-text="禁用"
+                    ></el-switch>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="判断题补充说明">
+                    <el-input
+                      :disabled="!mainForm.properties.BOOL_EDIT"
+                      v-model="mainForm.properties.BOOL_ANSWER_REMARK"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="">
+                    <el-switch
+                      v-model="mainForm.properties.BOOL_EDIT"
+                      on-text="启用"
+                      off-text="禁用"
+                    ></el-switch>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="填空题补充说明">
+                    <el-input
+                      :disabled="!mainForm.properties.FILL_BLANK_EDIT"
+                      v-model="mainForm.properties.FILL_BLANK_REMARK"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="">
+                    <el-switch
+                      v-model="mainForm.properties.FILL_BLANK_EDIT"
+                      on-text="启用"
+                      off-text="禁用"
+                    ></el-switch>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="客观题成绩显示">
+                    <el-radio-group
+                      v-model="mainForm.properties.IS_OBJ_SCORE_VIEW"
+                    >
+                      <el-radio label="true">开启</el-radio>
+                      <el-radio label="false">关闭</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="人脸识别设置">
+                <el-row>
+                  <el-form-item label="是否开启">
+                    <el-radio-group
+                      v-model="mainForm.properties.IS_FACE_ENABLE"
+                      @change="faceChange"
+                    >
+                      <el-radio label="true">开启</el-radio>
+                      <el-radio label="false">关闭</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-row>
+                <el-row v-show="mainForm.properties.IS_FACE_ENABLE == 'true'">
+                  <el-form-item label="考试强制使用">
+                    <el-radio-group v-model="mainForm.properties.IS_FACE_CHECK">
+                      <el-radio label="true">强制</el-radio>
+                      <el-radio label="false">非强制</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-row>
+                <el-row v-show="mainForm.properties.IS_FACE_ENABLE == 'true'">
+                  <el-form-item label="抓拍间隔">
+                    <el-input
+                      v-model.number="mainForm.properties.SNAPSHOT_INTERVAL"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="分钟"></el-form-item>
+                </el-row>
+                <el-row v-show="mainForm.properties.IS_FACE_ENABLE == 'true'">
+                  <el-form-item label="预警阀值">
+                    <el-input
+                      v-model.number="mainForm.properties.WARN_THRESHOLD"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="%"></el-form-item>
+                </el-row>
+                <el-row v-show="mainForm.properties.IS_FACE_ENABLE == 'true'">
+                  <el-form-item label="真实性预警阀值">
+                    <el-input
+                      v-model.number="mainForm.properties.LIVING_WARN_THRESHOLD"
+                      auto-complete="off"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="%"></el-form-item>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="阅卷设置">
+                <el-row>
+                  <el-form-item label="阅卷方式">
+                    <el-radio-group
+                      :disabled="mainForm.started"
+                      v-model="mainForm.properties.MARKING_TYPE"
+                    >
+                      <el-radio label="ALL">全部评阅</el-radio>
+                      <el-radio label="OBJECT_SCORE_MAX">客观分最高</el-radio>
+                      <el-radio label="LAST_SUBMIT">最后一次提交</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-row>
+              </el-tab-pane>
+              <el-tab-pane label="网络设置">
+                <el-row>
+                  <el-form-item label="IP限制">
+                    <el-radio-group v-model="mainForm.properties.IP_LIMIT">
+                      <el-radio label="true">开启</el-radio>
+                      <el-radio label="false">关闭</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="IP段( *表示任意 )">
+                    <el-input
+                      v-model="mainForm.properties.IP_ADDRESSES"
+                    ></el-input>
+                  </el-form-item>
+                </el-row>
+              </el-tab-pane>
+            </el-tabs>
+          </el-form>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
+import { EXAM_WORK_API, EXAM_TYPE } from "@/constants/constants.js";
+
+let _this = null;
+
 export default {
   data() {
-    return {};
+    var validateBeginTime = (rule, value, callback) => {
+      if (!_this.mainForm.beginTime) {
+        callback(new Error("请选择考试开始日期"));
+      } else {
+        callback();
+      }
+    };
+    var validateEndTime = (rule, value, callback) => {
+      if (!_this.mainForm.endTime) {
+        callback(new Error("请选择考试结束日期"));
+      } else if (_this.mainForm.beginTime > _this.mainForm.endTime) {
+        callback(new Error("开始日期不能大于结束日期"));
+      } else {
+        callback();
+      }
+    };
+    var validateName = (rule, value, callback) => {
+      if (_this.mainForm.name == "") {
+        callback(new Error("请输入考试名称"));
+      } else if (!_this.mainForm.name.match(/^[\u4E00-\u9FA5A-Za-z0-9_]+$/)) {
+        callback(new Error("只能为英文、汉字、数字"));
+      } else if (_this.mainForm.name.length > 50) {
+        callback(new Error("最大长度为50"));
+      } else {
+        callback();
+      }
+    };
+    var validateDuration = (rule, value, callback) => {
+      var duration = _this.mainForm.duration;
+      if (duration == "") {
+        callback(new Error("请输入考试时长"));
+      } else if (!duration.match(/^[1-9]\d*|0$/)) {
+        callback(new Error("只能是非负整数"));
+      } else {
+        callback();
+      }
+    };
+    var validateFreezeTime = (rule, value, callback) => {
+      var freezeTime = _this.mainForm.properties.FREEZE_TIME;
+      var duration = _this.mainForm.duration;
+      if (freezeTime == "") {
+        callback(new Error("请输入交卷冻结时长"));
+      } else if (!freezeTime.match(/^[1-9]\d*|0$/)) {
+        callback(new Error("只能是非负整数"));
+      } else if (parseInt(freezeTime) > parseInt(duration)) {
+        callback(new Error("交卷冻结时长不能大于考试时长"));
+      } else {
+        callback();
+      }
+    };
+    var validateSnapshot = (rule, value, callback) => {
+      var isFaceEnable = _this.mainForm.properties.IS_FACE_ENABLE;
+      var snapshotnterval = _this.mainForm.properties.SNAPSHOT_INTERVAL;
+      var duration = _this.mainForm.duration;
+      if (isFaceEnable == "true") {
+        if (snapshotnterval == "") {
+          callback(new Error("请输入抓拍间隔"));
+        } else if (!snapshotnterval.match(/^[1-9]\d*$/)) {
+          callback(new Error("只能是正整数"));
+        } else if (parseInt(snapshotnterval) > parseInt(duration)) {
+          callback(new Error("抓拍间隔不能大于考试时长"));
+        } else {
+          callback();
+        }
+      } else {
+        callback();
+      }
+    };
+    var validateWarnThreshold = (rule, value, callback) => {
+      var isFaceEnable = _this.mainForm.properties.IS_FACE_ENABLE;
+      var warnThreshold = _this.mainForm.properties.WARN_THRESHOLD;
+      if (isFaceEnable == "true") {
+        if (warnThreshold == "") {
+          callback(new Error("请输入预警阀值"));
+        } else if (!warnThreshold.match(/^[1-9]\d*$/)) {
+          callback(new Error("只能是正整数"));
+        } else {
+          callback();
+        }
+      } else {
+        callback();
+      }
+    };
+    var validateLivingWarnThreshold = (rule, value, callback) => {
+      var isFaceEnable = _this.mainForm.properties.IS_FACE_ENABLE;
+      var livingWarnThreshold = _this.mainForm.properties.LIVING_WARN_THRESHOLD;
+      if (isFaceEnable == "true") {
+        if (livingWarnThreshold == "") {
+          callback(new Error("请输入真实性预警阀值"));
+        } else if (!livingWarnThreshold.match(/^[1-9]\d*$/)) {
+          callback(new Error("只能是正整数"));
+        } else {
+          callback();
+        }
+      } else {
+        callback();
+      }
+    };
+    var validateExamTimes = (rule, value, callback) => {
+      var examTimes = _this.mainForm.examTimes;
+      if (examTimes == "") {
+        callback(new Error("请输入考试次数"));
+      } else if (!examTimes.match(/^[1-9]\d*$/)) {
+        callback(new Error("只能是正整数"));
+      } else {
+        callback();
+      }
+    };
+    var validateExamReconnectTime = (rule, value, callback) => {
+      var examReconnectTime = _this.mainForm.properties.EXAM_RECONNECT_TIME;
+      if (examReconnectTime == "") {
+        callback(new Error("请输入断点续考时间"));
+      } else if (!examReconnectTime.match(/^[1-9]\d*$/)) {
+        callback(new Error("只能是正整数"));
+      } else {
+        callback();
+      }
+    };
+
+    return {
+      examDatetimeRange: [],
+      show_ckeditor: false,
+      mainForm: {
+        started: false,
+        name: "",
+        examType: "ONLINE",
+        examTimes: 1,
+        beginTime: null,
+        endTime: null,
+        duration: 120,
+        enable: "true",
+        properties: {
+          IS_OBJ_SCORE_VIEW: "true",
+          EXAM_RECONNECT_TIME: 30,
+          FREEZE_TIME: 0,
+          BEFORE_EXAM_REMARK: "",
+          AFTER_EXAM_REMARK: "",
+          SHOW_CHEATING_REMARK: "true",
+          CHEATING_REMARK: "",
+          SINGLE_EDIT: "false",
+          MUTIPLE_EDIT: "false",
+          BOOL_EDIT: "false",
+          FILL_BLANK_EDIT: "false",
+          SINGLE_ANSWER_REMARK: "",
+          MUTIPLE_ANSWER_REMARK: "",
+          FILL_BLANK_REMARK: "",
+          BOOL_ANSWER_REMARK: "",
+          IS_FACE_ENABLE: "false",
+          IS_FACE_CHECK: "false",
+          SNAPSHOT_INTERVAL: 30,
+          WARN_THRESHOLD: 50,
+          MARKING_TYPE: "ALL",
+          IP_LIMIT: "false",
+          IP_ADDRESSES: null,
+          LIVING_WARN_THRESHOLD: 50
+        }
+      },
+      examTypeList: EXAM_TYPE,
+      formLabelWidth: "120px",
+      examId: "",
+      rules: {
+        name: [{ required: true, validator: validateName, trigger: "blur" }],
+        examType: [
+          { required: true, message: "请选择考试类型", trigger: "change" }
+        ],
+        beginTime: [
+          { required: true, validator: validateBeginTime, trigger: "change" }
+        ],
+        endTime: [
+          { required: true, validator: validateEndTime, trigger: "change" }
+        ],
+        duration: [
+          { required: true, validator: validateDuration, trigger: "blur" }
+        ],
+        freezeTime: [
+          { required: true, validator: validateFreezeTime, trigger: "blur" }
+        ],
+        examTimes: [
+          { required: true, validator: validateExamTimes, trigger: "blur" }
+        ],
+        examReconnectTime: [
+          {
+            required: true,
+            validator: validateExamReconnectTime,
+            trigger: "blur"
+          }
+        ],
+        snapshotInterval: [
+          { required: true, validator: validateSnapshot, trigger: "blur" }
+        ],
+        warnThreshold: [
+          { required: true, validator: validateWarnThreshold, trigger: "blur" }
+        ],
+        livingWarnThreshold: [
+          {
+            required: true,
+            validator: validateLivingWarnThreshold,
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+
+  methods: {
+    getBeginTime(val) {
+      this.mainForm.beginTime = val;
+    },
+    getEndTime(val) {
+      this.mainForm.endTime = val;
+    },
+    faceChange() {
+      if (this.mainForm.properties.IS_FACE_ENABLE == "false") {
+        this.mainForm.properties.SNAPSHOT_INTERVAL = 30;
+        this.mainForm.properties.WARN_THRESHOLD = 50;
+      }
+    },
+    init() {
+      if (this.examId != "add") {
+        let url = EXAM_WORK_API + "/exam/" + this.examId;
+        this.$http.get(url).then(response => {
+          let body = response.data;
+          body.properties = this.mainForm.properties;
+          this.mainForm = Object.assign(this.mainForm, response.data);
+          this.mainForm.enable = this.mainForm.enable ? "true" : "false";
+          this.examDatetimeRange = [
+            this.mainForm.beginTime,
+            this.mainForm.endTime
+          ];
+          console.log("getOnlineExam(); mainForm: ", this.mainForm);
+
+          let url = EXAM_WORK_API + "/exam/allProperties/" + this.examId;
+          this.$http.get(url).then(response => {
+            this.mainForm.properties = Object.assign(
+              this.mainForm.properties,
+              response.data
+            );
+            this.mainForm.properties.SINGLE_EDIT =
+              this.mainForm.properties.SINGLE_EDIT == "true" ? true : false;
+            this.mainForm.properties.MUTIPLE_EDIT =
+              this.mainForm.properties.MUTIPLE_EDIT == "true" ? true : false;
+            this.mainForm.properties.BOOL_EDIT =
+              this.mainForm.properties.BOOL_EDIT == "true" ? true : false;
+            this.mainForm.properties.FILL_BLANK_EDIT =
+              this.mainForm.properties.FILL_BLANK_EDIT == "true" ? true : false;
+            this.show_ckeditor = true;
+          });
+        });
+      } else {
+        this.show_ckeditor = true;
+      }
+    },
+    saveOnlineExam: function() {
+      this.mainForm.beginTime = this.examDatetimeRange[0];
+      this.mainForm.endTime = this.examDatetimeRange[1];
+      console.log(this.mainForm);
+      let url = EXAM_WORK_API + "/exam";
+      this.$refs.mainForm.validate(valid => {
+        if (valid) {
+          if (this.examId != "add") {
+            this.$http.put(url, this.mainForm).then(
+              response => {
+                if (200 != response.status) {
+                  this.$notify({
+                    type: "error",
+                    message: response.body.desc
+                  });
+                  return;
+                }
+                this.$notify({
+                  type: "success",
+                  message: "保存成功"
+                });
+              },
+              response => {
+                this.$notify({
+                  type: "error",
+                  message: response.body.desc
+                });
+              }
+            );
+          } else {
+            this.$http.post(url, this.mainForm).then(
+              response => {
+                if (200 != response.status) {
+                  this.$notify({
+                    type: "error",
+                    message: response.body.desc
+                  });
+                  return;
+                }
+                this.$notify({
+                  type: "success",
+                  message: "新增成功"
+                });
+                this.back();
+              },
+              response => {
+                this.$notify({
+                  type: "error",
+                  message: response.body.desc
+                });
+              }
+            );
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    back() {
+      this.$router.push({ path: "/examwork/examInfo" });
+    }
   },
-  methods: {},
-  created() {}
+  created() {
+    _this = this;
+    this.examId = this.$route.params.id;
+    this.init();
+  }
 };
 </script>
 <style scoped></style>