examcloud-admin-web/src/modules/examwork/view/onlineExam.vue

<template>
  <div>
    <section class="content" style="margin-top: -10px;">
      <div class="box box-info">
        <!-- 正文信息 -->
        <div class="box-body">
          <el-form
            :inline="true"
            :rules="rules"
            ref="form"
            :model="form"
            label-position="right"
          >
            <div style="margin-bottom: 10px">
              <el-button-group>
                <el-button type="primary" @click="saveExam">保 存</el-button>
                <el-button @click="back">返 回</el-button>
              </el-button-group>
            </div>
            <el-tabs type="border-card" v-model="activeName">
              <!-- 基础信息 -->
              <el-tab-pane label="基础信息" name="tab1">
                <el-row>
                  <el-form-item
                    label="考试名称"
                    label-width="80px"
                    placeholder="请输入考试名称"
                    prop="name"
                  >
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="考试类型" label-width="80px">
                    <el-select
                      style="width:205px"
                      :disabled="true"
                      v-model="form.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="是否开启" label-width="80px">
                    <el-radio-group
                      v-model="form.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"
                    label-width="70px"
                  >
                    <el-date-picker
                      style="margin-left: 10px"
                      v-model="examDatetimeRange"
                      type="datetimerange"
                      range-separator="至"
                      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="控制设置" name="tab2">
                <el-row>
                  <el-form-item
                    label="考试时长"
                    prop="duration"
                    label-width="110px"
                  >
                    <el-input
                      v-model.trim.number="form.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"
                    label-width="110px"
                  >
                    <el-input
                      v-model.trim.number="form.examTimes"
                      auto-complete="off"
                    ></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item
                    label="交卷冻结时间"
                    prop="FREEZE_TIME"
                    label-width="110px"
                  >
                    <el-input
                      v-model.trim.number="form.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"
                    label-width="110px"
                  >
                    <el-input
                      v-model.trim.number="form.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="显示设置" name="tab3">
                <el-row v-if="show_ckeditor">
                  <el-form-item label="考前说明" label-width="110px">
                    <ckeditor
                      v-model="form.properties.BEFORE_EXAM_REMARK"
                    ></ckeditor>
                  </el-form-item>
                </el-row>
                <el-row v-if="show_ckeditor">
                  <el-form-item label="考后说明" label-width="110px">
                    <ckeditor
                      v-model="form.properties.AFTER_EXAM_REMARK"
                    ></ckeditor>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="展示作弊说明" label-width="110px">
                    <el-radio-group
                      v-model="form.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 v-if="show_ckeditor">
                  <el-form-item label="作弊说明" label-width="110px">
                    <ckeditor
                      v-model="form.properties.CHEATING_REMARK"
                    ></ckeditor>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="单选题补充说明" label-width="110px">
                    <el-input
                      :disabled="!form.properties.SINGLE_EDIT"
                      v-model="form.properties.SINGLE_ANSWER_REMARK"
                      auto-complete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="">
                    <el-switch
                      v-model="form.properties.SINGLE_EDIT"
                      on-text="启用"
                      off-text="禁用"
                    ></el-switch>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="多选题补充说明" label-width="110px">
                    <el-input
                      :disabled="!form.properties.MUTIPLE_EDIT"
                      v-model="form.properties.MUTIPLE_ANSWER_REMARK"
                      auto-complete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="">
                    <el-switch
                      v-model="form.properties.MUTIPLE_EDIT"
                      on-text="启用"
                      off-text="禁用"
                    ></el-switch>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="判断题补充说明" label-width="110px">
                    <el-input
                      :disabled="!form.properties.BOOL_EDIT"
                      v-model="form.properties.BOOL_ANSWER_REMARK"
                      auto-complete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="">
                    <el-switch
                      v-model="form.properties.BOOL_EDIT"
                      on-text="启用"
                      off-text="禁用"
                    ></el-switch>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="填空题补充说明" label-width="110px">
                    <el-input
                      :disabled="!form.properties.FILL_BLANK_EDIT"
                      v-model="form.properties.FILL_BLANK_REMARK"
                      auto-complete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="">
                    <el-switch
                      v-model="form.properties.FILL_BLANK_EDIT"
                      on-text="启用"
                      off-text="禁用"
                    ></el-switch>
                  </el-form-item>
                </el-row>
                <el-row>
                  <el-form-item label="客观题成绩显示" label-width="110px">
                    <el-radio-group v-model="form.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="人脸识别设置" name="tab4">
                <el-row>
                  <el-form-item label="是否开启" label-width="120px">
                    <el-radio-group
                      v-model="form.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="form.properties.IS_FACE_ENABLE == 'true'">
                  <el-form-item label="考试强制使用" label-width="120px">
                    <el-radio-group v-model="form.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="form.properties.IS_FACE_ENABLE == 'true'">
                  <el-form-item
                    label="抓拍间隔"
                    prop="SNAPSHOT_INTERVAL"
                    label-width="120px"
                  >
                    <el-input
                      v-model.trim.number="form.properties.SNAPSHOT_INTERVAL"
                      auto-complete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="分钟"></el-form-item>
                </el-row>
                <el-row v-show="form.properties.IS_FACE_ENABLE == 'true'">
                  <el-form-item
                    label="预警阀值"
                    prop="WARN_THRESHOLD"
                    label-width="120px"
                  >
                    <el-input
                      v-model.trim.number="form.properties.WARN_THRESHOLD"
                      auto-complete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="%"></el-form-item>
                </el-row>
                <el-row v-show="form.properties.IS_FACE_ENABLE == 'true'">
                  <el-form-item
                    label="真实性预警阀值"
                    prop="LIVING_WARN_THRESHOLD"
                    label-width="120px"
                  >
                    <el-input
                      v-model.number="form.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="阅卷设置" name="tab5">
                <el-row>
                  <el-form-item label="阅卷方式">
                    <el-radio-group
                      :disabled="form.started"
                      v-model="form.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="网络设置" name="tab6">
                <el-row>
                  <el-form-item label="IP限制" label-width="120px">
                    <el-radio-group v-model="form.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段( *表示任意 )" label-width="120px">
                    <el-input v-model="form.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_TYPE, EXAM_WORK_API } from "@/constants/constants.js";
import moment from "moment";
import ckeditor from "@/components/ckeditor.vue";

let _this = null;

let validateName = (rule, value, callback) => {
  let name = _this.form.name;
  if (name == "") {
    callback(new Error("请输入考试名称"));
    _this.activeName = "tab1";
  } else {
    callback();
  }
};

let validateDuration = (rule, value, callback) => {
  let duration = _this.form.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();
  }
};

let validateExamTimes = (rule, value, callback) => {
  let examTimes = _this.form.examTimes;
  if (examTimes == "") {
    callback(new Error("请输入考试次数"));
    _this.activeName = "tab2";
  } else if (!examTimes.toString().match(/^[1-9]\d*$/)) {
    callback(new Error("只能是正整数"));
    _this.activeName = "tab2";
  } else {
    callback();
  }
};

let validateFreezeTime = (rule, value, callback) => {
  let freezeTime = _this.form.properties.FREEZE_TIME;
  let duration = _this.form.duration;
  if (freezeTime == "") {
    callback(new Error("请输入交卷冻结时长"));
    _this.activeName = "tab2";
  } else if (!freezeTime.toString().match(/^[1-9]\d*|0$/)) {
    callback(new Error("只能是非负整数"));
    _this.activeName = "tab2";
  } else if (duration != "" && freezeTime > duration) {
    callback(new Error("交卷冻结时长不能大于考试时长"));
    _this.activeName = "tab2";
  } else {
    callback();
  }
};

let validateExamReconnectTime = (rule, value, callback) => {
  let examReconnectTime = _this.form.properties.EXAM_RECONNECT_TIME;
  if (examReconnectTime == "") {
    callback(new Error("请输入断点续考时间"));
    _this.activeName = "tab2";
  } else if (!examReconnectTime.toString().match(/^[1-9]\d*$/)) {
    callback(new Error("只能是正整数"));
    _this.activeName = "tab2";
  } else {
    callback();
  }
};

let validateSnapshotInterval = (rule, value, callback) => {
  let isFaceEnable = _this.form.properties.IS_FACE_ENABLE;
  let snapshotnterval = _this.form.properties.SNAPSHOT_INTERVAL;
  let duration = _this.form.duration;
  if (isFaceEnable == "true") {
    if (snapshotnterval == "") {
      callback(new Error("请输入抓拍间隔"));
      _this.activeName = "tab4";
    } else if (!snapshotnterval.toString().match(/^[1-9]\d*$/)) {
      callback(new Error("只能是正整数"));
      _this.activeName = "tab4";
    } else if (duration != "" && snapshotnterval > duration) {
      callback(new Error("抓拍间隔不能大于考试时长"));
      _this.activeName = "tab4";
    } else {
      callback();
    }
  } else {
    callback();
  }
};
let validateWarnThreshold = (rule, value, callback) => {
  let isFaceEnable = _this.form.properties.IS_FACE_ENABLE;
  let warnThreshold = _this.form.properties.WARN_THRESHOLD;
  if (isFaceEnable == "true") {
    if (warnThreshold == "") {
      callback(new Error("请输入预警阀值"));
      _this.activeName = "tab4";
    } else if (!warnThreshold.toString().match(/^[1-9]\d*$/)) {
      callback(new Error("只能是正整数"));
      _this.activeName = "tab4";
    } else {
      callback();
    }
  } else {
    callback();
  }
};
let validateLivingWarnThreshold = (rule, value, callback) => {
  let isFaceEnable = _this.form.properties.IS_FACE_ENABLE;
  let livingWarnThreshold = _this.form.properties.LIVING_WARN_THRESHOLD;
  if (isFaceEnable == "true") {
    if (livingWarnThreshold == "") {
      callback(new Error("请输入真实性预警阀值"));
      _this.activeName = "tab4";
    } else if (!livingWarnThreshold.toString().match(/^[1-9]\d*$/)) {
      callback(new Error("只能是正整数"));
      _this.activeName = "tab4";
    } else {
      callback();
    }
  } else {
    callback();
  }
};

export default {
  components: {
    ckeditor
  },
  data() {
    return {
      activeName: "tab1",
      examDatetimeRange: [],
      show_ckeditor: false,
      form: {
        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,
      examId: "",
      rules: {
        name: [{ required: true, validator: validateName, trigger: "blur" }],
        duration: [
          { required: true, validator: validateDuration, trigger: "blur" }
        ],
        examTimes: [
          { required: true, validator: validateExamTimes, trigger: "blur" }
        ],
        FREEZE_TIME: [
          { required: true, validator: validateFreezeTime, trigger: "blur" }
        ],
        EXAM_RECONNECT_TIME: [
          {
            required: true,
            validator: validateExamReconnectTime,
            trigger: "blur"
          }
        ],
        SNAPSHOT_INTERVAL: [
          {
            required: true,
            validator: validateSnapshotInterval,
            trigger: "blur"
          }
        ],
        WARN_THRESHOLD: [
          { required: true, validator: validateWarnThreshold, trigger: "blur" }
        ],
        LIVING_WARN_THRESHOLD: [
          {
            required: true,
            validator: validateLivingWarnThreshold,
            trigger: "blur"
          }
        ]
      }
    };
  },

  methods: {
    faceChange() {
      if (this.form.properties.IS_FACE_ENABLE == "false") {
        this.form.properties.SNAPSHOT_INTERVAL = 30;
        this.form.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.form.properties;
          this.form = Object.assign(this.form, response.data);
          this.form.enable = this.form.enable ? "true" : "false";
          this.examDatetimeRange = [this.form.beginTime, this.form.endTime];
          console.log("getOnlineExam(); form: ", this.form);

          let url = EXAM_WORK_API + "/exam/allProperties/" + this.examId;
          this.$http.get(url).then(response => {
            this.form.properties = Object.assign(
              this.form.properties,
              response.data
            );
            this.form.properties.SINGLE_EDIT =
              this.form.properties.SINGLE_EDIT == "true" ? true : false;
            this.form.properties.MUTIPLE_EDIT =
              this.form.properties.MUTIPLE_EDIT == "true" ? true : false;
            this.form.properties.BOOL_EDIT =
              this.form.properties.BOOL_EDIT == "true" ? true : false;
            this.form.properties.FILL_BLANK_EDIT =
              this.form.properties.FILL_BLANK_EDIT == "true" ? true : false;
            this.show_ckeditor = true;
          });
        });
      } else {
        let now = moment().format("YYYY-MM-DD HH:mm:ss");
        this.examDatetimeRange = [now, now];
        this.show_ckeditor = true;
      }
    },
    saveExam: function() {
      this.form.beginTime = this.examDatetimeRange[0];
      this.form.endTime = this.examDatetimeRange[1];
      console.log(this.form);
      let url = EXAM_WORK_API + "/exam";
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.examId != "add") {
            this.$http.put(url, this.form).then(response => {
              if (200 != response.status) {
                this.$notify({
                  type: "error",
                  message: response.body.desc
                });
                return;
              }
              this.$notify({
                type: "success",
                message: "保存成功"
              });
            });
          } else {
            this.$http.post(url, this.form).then(response => {
              console.log(response);
              this.$notify({
                type: "success",
                message: "新增成功"
              });
              this.back();
            });
          }
        } else {
          return false;
        }
      });
    },
    back() {
      this.$router.push({ path: "/examwork/examInfo" });
    }
  },
  created() {
    _this = this;
    this.examId = this.$route.params.id;
    this.init();
  }
};
</script>
<style scoped></style>