teachcloud-print-web/src/modules/mark/components/markDetail/MarkDetail.vue

<template>
  <el-dialog
    class="mark-detail"
    :visible.sync="modalIsShow"
    top="0"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
    fullscreen
    @open="initData"
  >
    <div slot="title">
      <h2 class="el-dialog__title">评卷管理</h2>
      <span
        >课程名称：{{ instance.courseName }}（{{ instance.courseCode }}）</span
      >
      <span>试卷编号：{{ instance.paperNumber }}</span>
      <button class="el-dialog__headerbtn" @click="cancel"></button>
    </div>

    <div class="mb-4 tab-btns">
      <el-button
        v-for="tab in tabs"
        :key="tab.val"
        size="medium"
        :type="curTab == tab.val ? 'primary' : 'default'"
        @click="selectMenu(tab.val)"
        >{{ tab.name }}
      </el-button>
    </div>

    <component
      v-if="modalIsShow"
      :is="currentComponent"
      :base-info="instance"
      @to-menu="selectMenu"
    ></component>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import MarkDetailProgress from "./MarkDetailProgress.vue";
import MarkDetailMarker from "./MarkDetailMarker.vue";
import MarkDetailQuality from "./MarkDetailQuality.vue";
import MarkDetailIssue from "./MarkDetailIssue.vue";
import MarkDetailArbitration from "./MarkDetailArbitration.vue";
import MarkDetailTask from "./MarkDetailTask.vue";
import MarkDetailReject from "./MarkDetailReject.vue";

export default {
  name: "mark-detail",
  components: {
    MarkDetailProgress,
    MarkDetailMarker,
    MarkDetailQuality,
    MarkDetailIssue,
    MarkDetailArbitration,
    MarkDetailTask,
    MarkDetailReject,
  },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      // step
      curTab: "progress",
      tabs: [
        {
          name: "评卷进度",
          val: "progress",
        },
        {
          name: "评卷员管理",
          val: "marker",
        },
        {
          name: "任务管理",
          val: "task",
        },
        {
          name: "评卷质量",
          val: "quality",
        },
        {
          name: "问题试卷",
          val: "issue",
        },
        {
          name: "仲裁管理",
          val: "arbitration",
        },
        {
          name: "打回记录",
          val: "reject",
        },
      ],
      current: 0,
    };
  },
  computed: {
    currentComponent() {
      return `mark-detail-${this.curTab}`;
    },
  },
  methods: {
    initData() {
      this.selectMenu("progress");
    },
    selectMenu(val) {
      this.curTab = val;
      this.current = this.tabs.findIndex((item) => item.val === val);
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
  },
};
</script>