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

<template>
  <div class="course-target-manage">
    <div class="part-box part-box-pad box-justify">
      <p>请根据《课程教学大纲》中的课程对“毕业要求”进行填写</p>
      <div>
        <el-button type="success">导入课程知识点</el-button>
        <el-button type="primary" @click="toAdd">新增目标</el-button>
      </div>
    </div>
    <div class="part-box part-box-pad">
      <el-table :data="dataList">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="targetName" label="课程目标"></el-table-column>
        <el-table-column prop="targetValue" label="毕业要求指标">
          <template slot-scope="scope">
            <p v-for="item in scope.row.targetValue" :key="item.dimensionId">
              {{ item.dimensionName }}（{{ item.dimensionCode }}）
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="degreeRequirement"
          label="毕业要求"
        ></el-table-column>
        <el-table-column class-name="action-column" label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              class="btn-danger"
              type="text"
              @click="toDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ModifyCourseTarget -->
    <modify-course-target
      ref="ModifyCourseTarget"
      :instance="curRow"
      @modified="getList"
    ></modify-course-target>
  </div>
</template>

<script>
import { courseTargetList, deleteCourseTarget } from "../../api";
import ModifyCourseTarget from "./ModifyCourseTarget.vue";

export default {
  name: "CourseTargetManage",
  components: { ModifyCourseTarget },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      curRow: {},
    };
  },
  mounted() {
    // this.getList();
  },
  methods: {
    async getList() {
      const res = await courseTargetList(this.instance.courseCode);
      this.dataList = res || [];
    },
    toAdd() {
      this.curRow = { courseCode: this.instance.courseCode };
      this.$refs.ModifyCourseTarget.open();
    },
    toEdit(row) {
      this.curRow = { ...row, courseCode: this.instance.courseCode };
      this.$refs.ModifyCourseTarget.open();
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `确定要删除课程目标【${row.targetName}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await deleteCourseTarget(row.id);
      this.$message.success("删除成功！");
      this.dataList = this.dataList.filter((item) => item.id !== row.id);
    },
  },
};
</script>