teachcloud-print-web/src/modules/target/components/training-plan/TrainingPlanMatrix.vue

<template>
  <div class="training-plan-matrix part-box part-box-pad">
    <div class="part-box part-box-pad">
      <el-table v-if="columns.length" :data="dataList" border>
        <el-table-column
          label="毕业要求"
          prop="requirementName"
          min-width="200"
          fixed="left"
        >
        </el-table-column>
        <el-table-column label="培养目标" align="center">
          <el-table-column
            v-for="(column, cindex) in columns"
            :key="cindex"
            :label="column"
            align="center"
          >
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.targetList[cindex].enable"
                @change="matrixChange"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  trainingPlanMatrixListPage,
  updateRrainingPlanMatrix,
} from "../../api";

export default {
  name: "training-plan-matrix",
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      columns: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        cultureProgramId: this.rowData.id,
      };
      const res = await trainingPlanMatrixListPage(datas);
      if (!res || !res.length) return;

      this.columns = res[0].targetList.map((item) => item.name);
      this.dataList = res;
    },
    async matrixChange() {
      const datas = this.dataList
        .map((item) => {
          return item.targetList
            .filter((elem) => elem.enable)
            .map((elem) => {
              return {
                id: elem.id,
                enable: elem.enable,
              };
            });
        })
        .flat();

      await updateRrainingPlanMatrix(datas);
    },
  },
};
</script>