frontend-admin/src/features/examwork/ActivityManagement/ActivityManagementDialog.vue

<template>
  <el-dialog
    ref="dialog"
    :title="(isEdit ? '编辑' : '新增') + '场次'"
    width="450px"
    :visible.sync="visible"
    @close="closeDialog"
  >
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-row>
        <el-form-item label="考试时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="交卷时间" prop="finishTime">
          <el-date-picker
            v-model="form.finishTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="考试时长" prop="maxDurationSeconds">
          <MinuteInput v-model="form.maxDurationSeconds" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="候考时间" prop="prepareSeconds">
          <MinuteInput v-model="form.prepareSeconds" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="迟到时长" prop="openingSeconds">
          <MinuteInput v-model="form.openingSeconds" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="状态" prop="enable">
          <el-radio-group class="pull_right_sm" v-model="form.enable">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row class="d-flex justify-content-center">
        <el-button type="primary" @click="submitForm" :loading="loading"
          >保 存</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import MinuteInput from "@/components/MinuteInput";
import { saveActivity } from "@/api/examwork-activity";
import moment from "moment";
import { getExamDetail } from "@/api/examwork-exam";

export default {
  name: "ActivityManagementDialog",
  components: { MinuteInput },
  props: {
    examId: String,
    activity: Object,
  },
  computed: {
    isEdit() {
      return this.activity.id;
    },
  },
  data() {
    return {
      visible: false,
      exam: {},
      form: {
        id: "",
        startTime: null,
        finishTime: null,
        prepareSeconds: 0,
        openingSeconds: 0,
        maxDurationSeconds: 0,
        enable: 0,
      },
      rules: {
        startTime: [
          { required: true, message: "开始时间必填" },
          {
            validator: (rule, value) => {
              return new Promise((resolve, reject) => {
                if (
                  moment(value).isBetween(
                    moment(this.exam.startTime),
                    moment(this.exam.endTime),
                    undefined,
                    "[]"
                  )
                ) {
                  resolve(); // reject with error message
                } else {
                  reject("reject");
                }
              });
            },
            message: "场次的开始时间不在考试的时间范围",
          },
        ],
        finishTime: [
          { required: true, message: "交卷时间必填" },
          {
            validator: (rule, value) => {
              return new Promise((resolve, reject) => {
                if (
                  moment(this.form.finishTime) - moment(this.form.startTime) <=
                  0
                ) {
                  reject("考试结束时间要大于考试开始时间");
                  return;
                }

                if (
                  moment(value).isBetween(
                    moment(this.exam.startTime),
                    moment(this.exam.endTime),
                    undefined,
                    "[]"
                  )
                ) {
                  resolve(); // reject with error message
                } else {
                  reject("场次的交卷时间不在考试的时间范围");
                }
              });
            },
          },
        ],
        maxDurationSeconds: [
          { required: true, message: "考试时长必填" },
          {
            type: "number",
            min: 1,
            max: 10000 * 60,
            message: "必须在0到10000之间",
          },
          {
            validator: (rule, value) => {
              return new Promise((resolve, reject) => {
                if (
                  moment(this.form.finishTime) - moment(this.form.startTime) >=
                  value * 1000
                ) {
                  resolve();
                } else {
                  reject("reject");
                }
              });
            },
            message: "考试时长超出范围",
          },
        ],
        prepareSeconds: [
          { required: true, message: "候考时间必填" },
          {
            type: "number",
            min: 0,
            max: 10000 * 60,
            message: "必须在0到10000之间",
          },
        ],
        openingSeconds: [
          { required: true, message: "迟到时长必填" },
          {
            type: "number",
            min: 0,
            max: 10000 * 60,
            message: "必须在0到10000之间",
          },
          {
            validator: (rule, value) => {
              return new Promise((resolve, reject) => {
                if (value < this.form.maxDurationSeconds) {
                  resolve();
                } else {
                  reject("reject");
                }
              });
            },
            message: "迟到时长不能大于考试时长",
          },
        ],
      },
      loading: false,
    };
  },
  watch: {
    activity(val) {
      let tmp = { ...val };
      if (!tmp.id) {
        tmp = {
          id: "",
          startTime: null,
          finishTime: null,
          prepareSeconds: 0,
          openingSeconds: 0,
          maxDurationSeconds: 0,
          enable: 0,
        };
      }
      this.form = tmp;
    },
  },
  methods: {
    async openDialog() {
      this.visible = true;
      try {
        this.exam = (await getExamDetail({ id: this.examId }))?.data.data;
      } catch (error) {
        console.log(error);
        this.$notify({ type: "error", title: "获取考试详情失败" });
      }
    },
    closeDialog() {
      this.visible = false;
    },
    async submitForm() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        console.log("校验失败", error);
        return;
      }

      let data = this.form;
      data = { ...data, examId: this.examId };
      if (this.isEdit) {
        data = { ...data, id: this.activity.id };
      }
      try {
        this.loading = true;
        await saveActivity(data);
        this.$emit("reload");
        this.$notify({ title: "保存成功", type: "success" });
        this.closeDialog();
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style></style>