teachcloud-print-web/src/modules/target/components/course-outline/CourseOutlineTarget.vue

<template>
  <div class="course-outline-target">
    <div class="part-box part-box-pad">
      <div class="box-justify mb-2">
        <div></div>
        <div>
          <el-button type="primary" @click="toAdd">新增课程目标</el-button>
          <el-button type="success" @click="toPredict">预期值</el-button>
        </div>
      </div>
      <el-table ref="TableList" :data="dataList">
        <el-table-column
          type="index"
          label="序号"
          width="70"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column prop="targetName" label="课程目标" min-width="120">
        </el-table-column>
        <el-table-column prop="expectValue" label="预期值" width="120">
        </el-table-column>
        <el-table-column prop="degreeRequirement" label="内容" min-width="300">
        </el-table-column>
        <el-table-column
          prop="obeCultureProgramRequirementName"
          label="指标点"
          width="140"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.obeCultureProgramRequirementName }}</span>
            <el-tooltip
              v-if="scope.row.obeCultureProgramRequirementContent"
              :content="scope.row.obeCultureProgramRequirementContent"
              effect="dark"
              placement="top"
            >
              <i class="el-icon-info ml-1"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          class-name="action-column"
          label="操作"
          width="120"
          fixed="right"
        >
          <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>

    <!-- ModifyCourseOutlineTarget -->
    <modify-course-outline-target
      ref="ModifyCourseOutlineTarget"
      :instance="curRow"
      @modified="getList"
    ></modify-course-outline-target>
    <!-- ModifyCourseOutlineTargetPredict -->
    <modify-course-outline-target-predict
      ref="ModifyCourseOutlineTargetPredict"
      :rowData="rowData"
      @modified="getList"
    ></modify-course-outline-target-predict>
  </div>
</template>

<script>
import {
  courseOutlineTargetListPage,
  deleteCourseOutlineTarget,
} from "../../api";
import ModifyCourseOutlineTarget from "./ModifyCourseOutlineTarget.vue";
import ModifyCourseOutlineTargetPredict from "./ModifyCourseOutlineTargetPredict.vue";

export default {
  name: "course-outline-target",
  components: { ModifyCourseOutlineTarget, ModifyCourseOutlineTargetPredict },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalForm: {
        description: "",
      },
      dataList: [],
      curRow: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        obeCourseOutlineId: this.rowData.id,
      };
      const data = await courseOutlineTargetListPage(datas);
      this.dataList = data || [];
    },
    toAdd() {
      this.curRow = {
        obeCourseOutlineId: this.rowData.id,
        cultureProgramId: this.rowData.cultureProgramId,
      };
      this.$refs.ModifyCourseOutlineTarget.open();
    },
    toPredict() {
      this.$refs.ModifyCourseOutlineTargetPredict.open();
    },
    toEdit(row) {
      this.curRow = {
        ...row,
        obeCourseOutlineId: this.rowData.id,
        cultureProgramId: this.rowData.cultureProgramId,
      };
      this.$refs.ModifyCourseOutlineTarget.open();
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `确定要删除课程目标【${row.targetName}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await deleteCourseOutlineTarget(row.id);
      this.$message.success("删除成功！");
      this.getList();
    },
  },
};
</script>