teachcloud-print-web/src/modules/base/components/course-simple/ModifyTargetEvaluation.vue

<template>
  <el-dialog
    :visible.sync="modalIsShow"
    :title="title"
    top="10vh"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @open="visibleChange"
  >
    <el-form label-width="80px">
      <el-form-item label="评价方式：">
        <el-select
          v-model="selectedEvaluationIds"
          placeholder="请选择评卷方式"
          class="width-full"
          multiple
          @change="selectChange"
        >
          <el-option
            v-for="item in sources"
            :key="item.evaluationId"
            :value="item.evaluationId"
            :label="item.evaluationName"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border>
      <el-table-column
        prop="evaluationName"
        label="评价方式"
        min-width="120"
      ></el-table-column>
      <el-table-column prop="courseCode" label="权重" width="130">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.weight"
            class="width-80"
            size="small"
            :min="0"
            :max="100"
            :step="1"
            step-strictly
            :controls="false"
          >
          </el-input-number>
          <span style="margin-left: 5px">%</span>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { calcSum } from "@/plugins/utils";

export default {
  name: "modify-target-evaluation",
  props: {
    target: {
      type: Object,
      default() {
        return {};
      },
    },
    sources: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      dataList: [],
      selectedEvaluationIds: [],
    };
  },
  computed: {
    title() {
      return `${this.target.courseTargetName}平时成绩组成详情`;
    },
  },
  methods: {
    visibleChange() {
      this.dataList = this.target.evaluationList
        .slice(0, -1)
        .filter((item) => item.enable)
        .map((item) => {
          return { ...item };
        });
      this.selectedEvaluationIds = this.dataList.map(
        (item) => item.evaluationId
      );
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    selectChange() {
      const selectData = this.sources.filter((item) =>
        this.selectedEvaluationIds.includes(item.evaluationId)
      );
      const count = selectData.length;
      const weight = Math.floor(100 / count);
      const sData = 100 % count;
      this.dataList = selectData.map((item, index) => {
        return {
          ...item,
          weight: index === count - 1 ? weight + sData : weight,
        };
      });
    },
    async submit() {
      if (!this.dataList.length) {
        this.$message.error("请选择评价方式");
        return;
      }
      if (calcSum(this.dataList.map((item) => item.weight)) !== 100) {
        this.$message.error("权重综合不等于100%");
        return;
      }

      this.$emit("modified", this.dataList);
      this.cancel();
    },
  },
};
</script>