....

src/modules/examwork/view/practiceExam.vue

@@ -1,14 +1,369 @@
 <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="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>
+                  <el-form-item label="考前说明" label-width="110px">
+                    <el-input
+                      v-model="form.properties.BEFORE_EXAM_REMARK"
+                      auto-complete="off"
+                    ></el-input>
+                  </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-row>
+                  <el-form-item label="练习模式" label-width="110px">
+                    <el-radio-group v-model="form.properties.PRACTICE_TYPE">
+                      <el-radio label="IN_PRACTICE">边答边显示答案</el-radio>
+                      <el-radio label="AFTER_PRACTICE"
+                        >结束统一显示答案</el-radio
+                      >
+                      <el-radio label="NO_ANSWER">不显示答案</el-radio>
+                    </el-radio-group>
+                  </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";
+
+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();
+  }
+};
+
 export default {
   data() {
-    return {};
+    return {
+      activeName: "tab1",
+      examDatetimeRange: [],
+      show_ckeditor: false,
+      form: {
+        started: false,
+        name: "",
+        examType: "PRACTICE",
+        examTimes: 1,
+        beginTime: null,
+        endTime: null,
+        duration: 120,
+        enable: "true",
+        properties: {
+          FREEZE_TIME: 0,
+          EXAM_RECONNECT_TIME: 30,
+          BEFORE_EXAM_REMARK: "",
+          AFTER_EXAM_REMARK: "",
+          IS_OBJ_SCORE_VIEW: "true",
+          PRACTICE_TYPE: "IN_PRACTICE"
+        }
+      },
+      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"
+          }
+        ]
+      }
+    };
+  },
+
+  methods: {
+    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.IS_OBJ_SCORE_VIEW =
+              this.form.properties.IS_OBJ_SCORE_VIEW == "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" });
+    }
   },
-  methods: {},
-  created() {}
+  created() {
+    _this = this;
+    this.examId = this.$route.params.id;
+    this.init();
+  }
 };
 </script>
 <style scoped></style>