teachcloud-print-web/src/modules/exam/components/BatchAddExamTask.vue

<template>
  <el-dialog
    class="batch-add-exam-task"
    :visible.sync="modalIsShow"
    title="批量新建命题任务"
    top="10vh"
    width="900px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="visibleChange"
  >
    <div class=" part-box part-box-border part-box-pad">
      <el-form
        ref="modalFormComp"
        :model="modalForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item prop="batchNo" label="命题任务表：">
          <upload-file-view
            :upload-url="uploadExamTaskUrl"
            @upload-success="uploadExamTaskSuccess"
            ref="ExamTaskUploadFileView"
            v-if="modalIsShow"
          ></upload-file-view>
          <el-button
            type="warning"
            icon="el-icon-download"
            style="margin-left:10px;"
          >
            <a :href="downloadUrl" download="命题任务导入模板.xlsx">模板下载</a>
          </el-button>
        </el-form-item>
        <el-form-item prop="startTime" label="命题时间：">
          <el-date-picker
            v-model="createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            align="right"
            unlink-panels
            @change="dateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="cardRuleId" label="题卡规则：">
          <card-rule-select
            ref="CardRuleSelect"
            v-model.trim="modalForm.cardRuleId"
            placeholder="请选择"
            clearable
          ></card-rule-select>
          <p class="tips-info">
            说明：若选择全部通卡，则命题老师只能选择通卡，若选择题卡规则，则专卡和通卡均可选择
          </p>
        </el-form-item>
        <el-form-item label="指派命题老师：">
          <el-table class="el-table--noback" :data="tasks" border>
            <el-table-column prop="courseName" label="课程（代码）">
              <span slot-scope="scope">
                {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
              </span>
            </el-table-column>
            <el-table-column prop="paperNumber" label="试卷编号">
              <template slot-scope="scope">
                {{ scope.row.paperNumber | defaultFieldFilter }}
              </template>
            </el-table-column>
            <el-table-column prop="specialty" label="适用专业（方向）">
              <template slot-scope="scope">
                <el-input
                  v-model.trim="scope.row.specialty"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="命题老师" width="180px">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.userId"
                  size="small"
                  style="width: 150px;"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="user in scope.row.users"
                    :key="user.id"
                    :value="user.id"
                    :label="user.name"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer">
      <el-button type="primary" :disabled="isSubmit" @click="toSave"
        >确认</el-button
      >
      <el-button type="danger" @click="cancel" plain>取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { batchAddExamTask } from "../api";
import UploadFileView from "@/components/UploadFileView";

const initModalForm = {
  cardRuleId: "",
  startTime: "",
  endTime: "",
  batchNo: "",
  userIds: []
};

export default {
  name: "batch-add-exam-task",
  components: { UploadFileView },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      modalForm: { ...initModalForm },
      createTime: [],
      tasks: [],
      batchConfirmMessage: "",
      rules: {
        batchNo: [
          {
            required: true,
            message: "请上传命题任务表",
            trigger: "change"
          }
        ],
        startTime: [
          {
            required: true,
            message: "请设置命题时间",
            trigger: "change"
          }
        ],
        cardRuleId: [
          {
            required: true,
            message: "请选择题卡规则",
            trigger: "change"
          }
        ]
      },
      downloadUrl: this.GLOBAL.domain + "/temps/命题任务导入模板.xlsx",
      // import
      uploadExamTaskUrl: "/api/admin/exam/task/import"
    };
  },
  methods: {
    visibleChange() {
      this.modalForm = { ...initModalForm };
      this.tasks = [];
      this.createTime = [];
      this.batchConfirmMessage = "";

      this.$nextTick(() => {
        this.$refs.modalFormComp.clearValidate();
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    dateChange() {
      if (this.createTime) {
        this.modalForm.startTime = this.createTime[0];
        this.modalForm.endTime = this.createTime[1];
      } else {
        this.modalForm.startTime = "";
        this.modalForm.endTime = "";
      }
    },
    toSave() {
      if (!this.batchConfirmMessage) {
        this.save();
        return;
      }

      this.$confirm(`${this.batchConfirmMessage}, 是否继续提交?`, "提示", {
        cancelButtonClass: "el-button--danger is-plain",
        confirmButtonClass: "el-button--primary",
        type: "warning"
      })
        .then(() => {
          this.save();
        })
        .catch(() => {});
    },
    async save() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      let datas = {
        ...this.modalForm
      };
      datas.users = this.tasks.map(task => {
        return {
          courseCode: task.courseCode,
          courseName: task.courseName,
          paperNumber: task.paperNumber,
          specialty: task.specialty,
          userId: task.userId
        };
      });

      const data = await batchAddExamTask(datas).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

      this.$message.success("保存成功！");
      this.$emit("modified");
      this.cancel();
    },
    // upload-handler
    // uplaodError(errorData) {
    // let message = errorData.message;
    // try {
    //   message = JSON.parse(errorData.error);
    //   message = message.map(item => item.excelErrorType).join("，");
    // } catch (msg) {
    //   console.error(msg);
    // }
    // if (message) this.$notify.error({ title: "错误提示", message });
    // },
    uploadExamTaskSuccess(data) {
      this.$message.success("上传成功！");
      this.modalForm.batchNo = data.batchNo;
      this.batchConfirmMessage = data.errorMsg;
      this.tasks = data.tasks.map(item => {
        item.userId = item.users.length === 1 ? item.users[0].id : "";
        return item;
      });
      this.$refs.modalFormComp.validateField("batchNo");
    }
  }
};
</script>