msyj-admin-local/src/modules/grading-set/UploadPaper.vue

<template>
  <div class="upload-paper">
    <table class="table table-width">
      <tr>
        <th>考区</th>
        <th v-for="(subject, index) in subjects" :key="index">
          {{ subject.subjectName }}
        </th>
      </tr>
      <tr v-for="(area, index) in papers" :key="index">
        <td>{{ area.questionName }}</td>
        <td v-for="(subject, index) in area.subjects" :key="index">
          <upload-button
            :btn-type="subject.url ? 'primary' : 'default'"
            btn-icon="md-cloud-upload"
            btn-content="上传试卷"
            :upload-url="subject.uploadUrl"
            :format="['pdf', 'png', 'jpg']"
            @upload-success="getData"
          ></upload-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import UploadButton from "@/components/UploadButton";
import { uploadPaperList } from "@/api";

export default {
  name: "upload-paper",
  components: { UploadButton },
  data() {
    return {
      workId: this.$route.params.workId,
      papers: [],
      subjects: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const data = await uploadPaperList(this.workId);
      this.papers = data.map(area => {
        area.subjects = area.subjects
          .filter(item => item.enable)
          .map(subject => {
            subject.uploadUrl = `${this.GLOBAL.domain}/api/papers/${this.workId}/${area.questionId}/${subject.subject}/uploadPaperFile`;
            return subject;
          });
        return area;
      });
      this.subjects = this.papers[0].subjects;
    }
  }
};
</script>