teachcloud-print-web/src/modules/target/components/target-score/DetailTargetScore.vue

<template>
  <div class="target-score-detail">
    <el-dialog
      class="page-dialog"
      :visible.sync="modalIsShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      @open="checkChange"
    >
      <div slot="title">
        成绩管理<span class="color-gray ml-2"
          >{{ course.courseName }}（{{ course.courseCode }}）</span
        >
      </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>

      <div v-if="modalIsShow">
        <component :is="curTab" :course="course"></component>
      </div>

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

<script>
import TargetScoreNormal from "./TargetScoreNormal.vue";
import TargetScoreEnd from "./TargetScoreEnd.vue";
import { targetReportChangeCheck } from "../../api";

export default {
  name: "target-score-detail",
  components: {
    TargetScoreNormal,
    TargetScoreEnd,
  },
  props: {
    course: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      curTab: "TargetScoreEnd",
      tabs: [
        {
          name: "期末成绩管理",
          val: "TargetScoreEnd",
        },
        {
          name: "平时成绩管理",
          val: "TargetScoreNormal",
        },
      ],
    };
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    selectMenu(tab) {
      this.curTab = tab;
    },
    async checkChange() {
      const res = await targetReportChangeCheck({
        cultureProgramId: this.course.cultureProgramId,
        courseId: this.course.courseId,
        report: false,
      });

      if (res.courseTargetChange) {
        this.$notify.warning("课程目标与已保存不一致，请重新设置权重！");
      }
      if (res.evaluationChange) {
        this.$notify.warning(
          "评价方式与已保存不一致，请重新设置权重及导入新的平时成绩！"
        );
      }
      if (res.targetScoreChange) {
        this.$notify.warning(res.targetScoreChangeStr);
      }
    },
  },
};
</script>