teachcloud-print-web/src/modules/exam-center/components/UploadSamplePaperDialog.vue

<template>
  <el-dialog
    class="upload-sample-paper-dialog"
    :visible.sync="modalIsShow"
    title="上传样卷或试卷结构文件"
    top="10vh"
    width="560px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
  >
    <div class="file-upload-body">
      <el-form
        ref="ModalForm"
        :model="modalForm"
        :rules="rules"
        label-width="85px"
        label-position="left"
      >
        <el-form-item prop="title" label="文件标题：">
          <el-input
            style="width:386px"
            v-model.trim="modalForm.title"
            placeholder="请输入文件标题"
          ></el-input>
        </el-form-item>
        <el-form-item prop="paperAttachmentId">
          <upload-button
            btn-icon="icon icon-upload"
            btn-type="default"
            btn-content="选择上传文件"
            :upload-url="uploadUrl"
            :format="format"
            :max-size="maxSize"
            :upload-data="uploadData"
            @upload-error="uplaodError"
            @upload-success="uploadSuccess"
            style="margin: 0;"
          ></upload-button>
          <span style="margin-left: 10px;"
            >上传的单个试卷文件大小不超过20M</span
          >
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" style="text-align: right;">
      <el-button type="primary" :disabled="isSubmit" @click="confirm"
        >确定</el-button
      >
      <el-button @click="cancel">返回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import UploadButton from "@/components/UploadButton";
import { createCard, saveWaitTask } from "../api";

export default {
  name: "upload-sample-paper-dialog",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: { UploadButton },
  data() {
    return {
      modalIsShow: false,
      modalForm: {
        title: "",
        cardSource: "2",
        paperAttachmentId: ""
      },
      rules: {
        title: [
          {
            required: true,
            message: "请输入文件标题",
            trigger: "change"
          }
        ],
        paperAttachmentId: [
          {
            required: true,
            message: "请上传样卷或试卷结构文件",
            trigger: "change"
          }
        ]
      },
      isSubmit: false,
      // upload
      format: [],
      uploadData: {
        schoolId: this.$ls.get("schoolId"),
        userId: this.$ls.get("user", { id: "" }).id
      },
      maxSize: 20 * 1024 * 1024,
      uploadUrl: "/api/print/basic/sys/saveAttachment"
    };
  },
  methods: {
    visibleChange() {
      this.modalForm.title = "";
      this.modalForm.cardSource = this.data.cardSource;
      this.modalForm.paperAttachmentId = "";
    },
    uplaodError(msg) {
      this.$message.error(msg);
    },
    uploadSuccess(res) {
      this.$message.success("上传成功！");
      this.modalForm.paperAttachmentId = res.data.id;
      this.$refs["ModalForm"].validateField("paperAttachmentId");
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async confirm() {
      const valid = await this.$refs["ModalForm"].validate().catch(() => {});
      if (!valid) return;

      if (this.isSubmit) return;
      this.isSubmit = true;
      const datas = {
        tcPCard: this.modalForm
      };
      const data = await createCard(datas).catch(() => {});
      this.isSubmit = false;
      if (!data) return;

      // 自助创建时暂存任务
      if (this.data.taskId && this.data.cardSource === "2") {
        await saveWaitTask({
          tcPExamTaskDetail: {
            ...this.data,
            cardId: data.cardId,
            paperAttachmentId: this.modalForm.paperAttachmentId
          }
        });
      }

      this.$message.success("申请成功！");
      this.$emit("confirm");
      this.cancel();
    }
  }
};
</script>