student-client/src/features/OfflineExam/OfflineExamModal.vue

<template>
  <Modal
    ref="uploadModal"
    v-model="uploadModalVisible"
    mask
    footer-hide
    :mask-closable="false"
    :closable="true"
    width="660"
    title="上传文件"
    @close="modalClose"
  >
    <div style="font-size: 16px; line-height: 20px">
      <span style="padding-right: 10px">课程名称:</span>

      <span style="font-size: 22px; color: red">{{ course.courseName }}</span>
    </div>
    <div style="font-size: 16px; line-height: 20px; margin: 20px 0">
      <span style="padding-right: 10px">请选择上传文件类型:</span>
      <span
        v-if="serverFormat.includes('ZIP')"
        @click="selectedFileType = 'ZIP'"
      >
        <input
          type="radio"
          name="filetype"
          value="ZIP"
          :checked="selectedFileType == 'ZIP'"
          style="display: inline-block"
        />
        <span class="right-margin">ZIP</span>
      </span>
      <span
        v-if="serverFormat.includes('PDF')"
        @click="selectedFileType = 'PDF'"
      >
        <input
          type="radio"
          name="filetype"
          value="PDF"
          :checked="selectedFileType == 'PDF'"
          style="display: inline-block"
        />
        <span class="right-margin">PDF</span>
      </span>
      <span
        v-if="serverFormat.includes('IMAGE')"
        @click="selectedFileType = 'IMAGE'"
      >
        <input
          type="radio"
          name="filetype"
          value="IMAGE"
          :checked="selectedFileType == 'IMAGE'"
          style="display: inline-block"
        />
        <span class="right-margin">图片</span>
      </span>
    </div>
    <div
      style="font-size: 16px; line-height: 20px; margin: 20px 0; display: flex"
    >
      <div style="padding-right: 10px">请选择文件:</div>
      <OfflineExamUpload
        :course="course"
        :selected-file-type="selectedFileType"
        :upload-file-format="uploadFileFormat"
        :upload-file-accept="uploadFileAccept"
        @reload-list="$emit('reload-list')"
        @close-modal="closeModal"
      />
    </div>
  </Modal>
</template>

<script>
import OfflineExamUpload from "./OfflineExamUpload.vue";

export default {
  name: "OfflineExamModal",
  components: {
    OfflineExamUpload: OfflineExamUpload,
  },
  props: {
    course: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      uploadModalVisible: true,
      serverFormat: "",
      selectedFileType: "",
      // uploadFileFormat: [],
      // uploadFileAccept: "",
    };
  },
  computed: {
    uploadFileFormat() {
      let res;
      switch (this.selectedFileType) {
        case "":
          res = [];
          break;
        case "ZIP":
          res = ["zip"];
          break;
        case "PDF":
          res = ["pdf"];
          break;
        case "IMAGE":
          res = ["jpeg", "jpg", "png"];
          break;
      }
      return res;
    },
    uploadFileAccept() {
      let res;
      switch (this.selectedFileType) {
        case "":
          res = "";
          break;
        case "ZIP":
          res = ".zip,zip";
          break;
        case "PDF":
          res = ".pdf";
          break;
        case "IMAGE":
          res = ".jpeg,.jpg,.png";
          break;
      }
      return res;
    },
  },
  watch: {
    course() {
      this.updateServerFormat();
      this.selectedFileType = "";
    },
  },
  async created() {
    this.updateServerFormat();
    // this.uploadFileFormat =
    //   (res.data.OFFLINE_UPLOAD_FILE_TYPE &&
    //     JSON.parse(res.data.OFFLINE_UPLOAD_FILE_TYPE)) ||
    //   [];
    // this.uploadFileFormat = this.uploadFileFormat.map((v) => v.toLowerCase());
    // this.uploadFileAccept = this.uploadFileFormat
    //   .map((v) => "application/" + v)
    //   .join();
    // if (this.uploadFileAccept.includes("zip")) {
    //   this.uploadFileAccept = ".zip," + this.uploadFileAccept;
    // }
  },
  methods: {
    async updateServerFormat() {
      const res = await this.$http.get(
        "/api/ecs_exam_work/exam/getExamPropertyFromCacheByStudentSession/" +
          this.course.examId +
          `/OFFLINE_UPLOAD_FILE_TYPE`
      );
      this.serverFormat =
        (res.data.OFFLINE_UPLOAD_FILE_TYPE &&
          JSON.parse(res.data.OFFLINE_UPLOAD_FILE_TYPE)) ||
        [];
    },
    modalClose() {
      this.selectedFileType = "";
    },
    closeModal() {
      this.selectedFileType = "";
      this.$refs.uploadModal.visible = false;
    },
  },
};
</script>

<style scoped>
.right-margin {
  padding: 0 15px 0 5px;
}
</style>