teachcloud-print-web/src/modules/course/components/profession/ProfessionalMatrix.vue

<template>
  <div class="professional-matrix">
    <div class="box-justify part-box part-box-pad">
      <div>
        <p class="tips-info">{{ rowData.name }}毕业要求支撑矩阵管理</p>
      </div>
      <div>
        <el-button type="success" :loading="loading" @click="toDownload"
          >下载</el-button
        >
      </div>
    </div>

    <div class="part-box part-box-pad">
      <el-table :data="dataList" border>
        <el-table-column label="课程名称" min-width="200" fixed="left">
          <template slot-scope="scope">
            {{ scope.row.courseName }}
          </template>
        </el-table-column>
        <el-table-column label="毕业要求" align="center">
          <el-table-column
            v-for="(column, cindex) in columns"
            :key="cindex"
            :label="column.name"
            align="center"
          >
            <template v-if="hasSubRequirements">
              <el-table-column
                v-for="subr in column.subRequirements"
                :key="subr"
                :label="subr === 'null' ? '' : subr"
                align="center"
              >
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row[`${column.name}_${subr}`].value"
                    class="width-50"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    step-strictly
                    :controls="false"
                    @change="
                      (val) =>
                        unitChange(scope.row[`${column.name}_${subr}`].id, val)
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
            </template>
            <template v-else>
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row[`${column.name}_null`].value"
                  class="width-50"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  step-strictly
                  :controls="false"
                  @change="
                    (val) =>
                      unitChange(scope.row[`${column.name}_null`].id, val)
                  "
                ></el-input-number>
              </template>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  professionalMatrixDetail,
  professionalMatrixSave,
  professionalMatrixDownload,
} from "../../api";
import { downloadByApi } from "@/plugins/download";

export default {
  name: "professional-matrix",
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      columns: [],
      hasSubRequirements: false,
      loading: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await professionalMatrixDetail({
        professionalId: this.rowData.id,
      });
      const tableData = res || [];
      this.dataList = tableData.map((item, index) => {
        if (!index) this.parseColumns(item.requirements);

        const nitem = {
          courseCode: item.courseCode,
          courseName: item.courseName,
        };
        item.requirements.forEach((requirement) => {
          requirement.subRequirements.forEach((subr) => {
            nitem[`${requirement.name}_${subr.name + ""}`] = {
              id: subr.id,
              value: subr.content || undefined,
            };
          });
        });

        return nitem;
      });
    },
    parseColumns(requirements) {
      this.hasSubRequirements = requirements.some(
        (item) => item.subRequirements[0].name !== null
      );
      if (!this.hasSubRequirements) {
        this.columns = requirements.map((item) => {
          return { name: item.name };
        });
        return;
      }

      this.columns = requirements.map((item) => {
        return {
          name: item.name,
          subRequirements: item.subRequirements.map((subr) => subr.name + ""),
        };
      });
    },
    async unitChange(id, val) {
      await professionalMatrixSave({
        id,
        content: val,
      });
    },
    async toDownload(row) {
      if (this.loading) return;
      this.loading = true;

      const res = await downloadByApi(() => {
        return professionalMatrixDownload(this.rowData.id);
      }, "").catch((e) => {
        this.$message.error(e || "下载失败，请重新尝试！");
      });
      this.loading = false;

      if (!res) return;
      this.$message.success("下载成功！");
    },
  },
};
</script>