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

<template>
  <el-dialog
    class="file-upload-view"
    :visible.sync="modalIsShow"
    :title="`上传${curConfig.title}`"
    top="10vh"
    width="710px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @opened="visibleChange"
  >
    <div class="file-upload-body">
      <el-form label-position="left">
        <el-form-item :label="`${curConfig.title}：`">
          <upload-file-view
            input-width="270px"
            :format="curConfig.format"
            :upload-url="uploadUrl"
            @upload-error="uplaodError"
            @upload-success="uploadSuccess"
            ref="UploadFileView"
          ></upload-file-view>
          <el-button @click="toPreview" style="margin-left: 10px;"
            >预览</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" style="text-align: right">
      <el-button type="primary" @click="confirm">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
  </el-dialog>
</template>

<script>
import UploadFileView from "../components/UploadFileView";
import { attachmentPreview } from "../../login/api";

export default {
  name: "file-upload-view",
  components: { UploadFileView },
  props: {
    paperAttachment: {
      type: Object,
      default() {
        return {};
      }
    },
    uploadType: {
      type: String,
      default: "paper",
      validator(val) {
        return ["paper", "paperConfirm"].includes(val);
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      attachment: {},
      config: {
        paper: { title: "试卷文件", format: ["pdf"] },
        paperConfirm: {
          title: "试卷审核确认书文件",
          format: ["jpg", "png"]
        }
      },
      curConfig: {},
      // import
      uploadUrl: "/api/print/basic/sys/saveAttachment"
    };
  },
  methods: {
    visibleChange() {
      this.$refs.UploadFileView.setAttachmentName(
        `${this.paperAttachment.filename || ""}`
      );
      this.attachment = { ...this.paperAttachment };
      this.curConfig = this.config[this.uploadType];
    },
    // upload-handler
    uplaodError(errorData) {
      this.$notify.error({
        title: "错误提示",
        message: errorData.message
      });
    },
    uploadSuccess(res) {
      this.$message.success("上传成功！");
      this.attachment = Object.assign(this.attachment, {
        attachmentId: res.data.id,
        filename: `${res.data.name}${res.data.type}`
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    confirm() {
      this.$emit("confirm", this.attachment, this.uploadType);
      this.cancel();
    },
    async toPreview() {
      if (!this.attachment.attachmentId) {
        this.$message.error("请先上传附件!");
        return;
      }
      const data = await attachmentPreview(this.attachment.attachmentId);
      window.open(data.path);
    }
  }
};
</script>

<style lang="css" scoped>
.file-upload-body {
  min-height: 150px;
}
</style>