teachcloud-print-web/src/modules/analysis/components/baseConfig/CommentAbility.vue

<template>
  <div class="comment-ability">
    <el-table ref="TableList" :data="dataList">
      <el-table-column
        prop="levelCode"
        label="等级"
        width="60"
      ></el-table-column>
      <el-table-column label="划分规划" width="300">
        <div
          slot-scope="scope"
          :class="[
            'rate-input',
            { 'rate-input-offset-left': scope.$index === 0 }
          ]"
        >
          <el-input-number
            v-if="scope.$index !== 0"
            v-model="scope.row.startRate"
            placeholder="请输入"
            :min="0"
            :max="100"
            :step="1"
            step-strictly
            size="small"
            :controls="false"
            @change="rateChange"
          ></el-input-number>
          <span v-if="scope.$index !== 0">≤</span>
          <span>百分位等级TOP</span>
          <span>≤</span>
          <el-input-number
            v-model="scope.row.endRate"
            placeholder="请输入"
            :min="0"
            :max="100"
            :step="1"
            step-strictly
            size="small"
            :controls="false"
            @change="rateChange"
          ></el-input-number>
        </div>
      </el-table-column>
      <el-table-column
        prop="levelName"
        label="水平层次"
        width="140"
      ></el-table-column>
      <el-table-column prop="result" label="诊断结果"></el-table-column>
      <el-table-column prop="advice" label="学习建议"></el-table-column>
      <el-table-column
        class-name="action-column"
        label="操作"
        width="80px"
        align="center"
      >
        <template slot-scope="scope">
          <el-button class="btn-primary" type="text" @click="toEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- ModifyAbilityComment -->
    <modify-ability-comment
      ref="ModifyAbilityComment"
      :instance="curRow"
      :modified="modified"
    ></modify-ability-comment>
  </div>
</template>

<script>
import ModifyAbilityComment from "./ModifyAbilityComment.vue";

export default {
  name: "comment-ability",
  components: { ModifyAbilityComment },
  props: {
    rates: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      dataList: [],
      curRow: {},
      errorMsg: ""
    };
  },
  mounted() {
    this.dataList = this.rates.map(item => {
      return { ...item };
    });
  },
  methods: {
    toEdit(row) {
      this.curRow = row;
      this.$refs.ModifyAbilityComment.open();
    },
    modified(data) {
      const ind = this.dataList.findIndex(item => item.level === data.level);
      this.dataList[ind] = this.$objAssign(this.dataList[ind], data);
    },
    rateChange() {
      this.$emit("data-change", this.dataList);
    }
  }
};
</script>