msyj-admin-org/src/modules/grading/components/GradeStep.vue

<template>
  <div class="grade-step">
    <div
      class="grade-step-other"
      v-if="steps.otherStep && steps.otherStep.length"
    >
      <div
        v-for="(step, sindex) in steps.otherStep"
        :key="sindex"
        :class="[
          'step-item',
          {
            'step-act': curStep.name === step.name,
            'step-other': step.type !== 'done',
          },
        ]"
        @click="selectStep(step)"
      >
        <p>{{ showCount || step.type !== "undo" ? step.count : "" }}</p>
        <p class="step-name">{{ step.name }}</p>
        <p>{{ showCount || step.type !== "undo" ? step.count : "" }}</p>
      </div>
    </div>
    <div class="grade-step-level">
      <div
        v-for="(step, sindex) in steps.levelStep"
        :key="sindex"
        :class="[
          'step-item',
          {
            'step-act': curStep.name === step.name,
            'step-other': step.type !== 'done',
          },
        ]"
        @click="selectStep(step)"
      >
        <p>
          <span>{{ showCount ? step.gcount + "/" : "" }}</span>
          <span>{{ step.gpercent }}%</span>
          <span>({{ step.pt }}%)</span>
        </p>
        <p class="step-name">{{ step.name }}</p>
        <p>
          <span>{{ showCount ? step.count + "/" : "" }}</span>
          <span>{{ step.percent }}%</span>
          <span v-if="step.kdpt !== null">({{ step.kdpt }}%)</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "grade-step",
  props: {
    steps: {
      type: Object,
      default() {
        return { levelStep: [], otherStep: [] };
      },
    },
    initStep: {
      type: Object,
      default() {
        return { type: "analysis", name: "analysis" };
      },
    },
    showCount: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      curStep: {},
    };
  },
  mounted() {
    this.curStep = { ...this.initStep };
  },
  methods: {
    selectStep(step) {
      this.curStep = { ...step };
      this.$emit("on-change", this.curStep);
    },
  },
};
</script>