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

<template>
  <div class="training-plan-matrix">
    <div class="part-box part-box-pad">
      <div class="box-justify mb-2">
        <div></div>
        <el-button type="primary" icon="el-icon-add" @click="toAdd"
          >选择课程</el-button
        >
      </div>
      <el-table ref="TableList" :data="dataList">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column label="课程（代码）">
          <template slot-scope="scope">
            {{ scope.row.courseName | defaultFieldFilter }}（{{
              scope.row.courseCode | defaultFieldFilter
            }}）
          </template>
        </el-table-column>
        <el-table-column
          class-name="action-column"
          label="操作"
          width="140"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-danger"
              type="text"
              @click="toDelete(scope.row)"
              >删除</el-button
            >
            <el-button
              v-if="scope.$index !== 0"
              class="btn-primary"
              type="text"
              @click="toMove(scope.$index, 'up')"
              >上移</el-button
            >
            <el-button
              v-if="scope.$index !== total - 1"
              class="btn-primary"
              type="text"
              @click="toMove(scope.$index, 'down')"
              >下移</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- AddTrainingPlanCourse -->
    <add-training-plan-course
      v-if="canEdit"
      ref="AddTrainingPlanCourse"
      :row-data="rowData"
      @modified="getList"
    ></add-training-plan-course>
  </div>
</template>

<script>
import {
  trainingPlanCourseListPage,
  deleteRrainingPlanCourse,
  sortRrainingPlanCourse,
} from "../../api";

import AddTrainingPlanCourse from "./AddTrainingPlanCourse.vue";

export default {
  name: "professional-course",
  components: {
    AddTrainingPlanCourse,
  },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      total: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await trainingPlanCourseListPage({
        cultureProgramId: this.rowData.id,
      });
      this.dataList = data || [];
      this.total = this.dataList.length;
    },
    toAdd() {
      this.$refs.AddTrainingPlanCourse.open();
    },
    exchangeSortNumber(row1, row2) {
      const sortNum = row1.sortNum;
      row1.sortNum = row2.sortNum;
      row2.sortNum = sortNum;
    },
    async toMove(rowIndex, type) {
      const row1 = this.dataList[rowIndex];
      const row2 =
        type === "up"
          ? this.dataList[rowIndex - 1]
          : this.dataList[rowIndex + 1];

      this.exchangeSortNumber(row1, row2);

      const datas = this.dataList.map((item, index) => {
        return {
          id: item.id,
          sortNum: item.sortNum,
        };
      });

      const res = await sortRrainingPlanCourse(datas).catch(() => {
        this.exchangeSortNumber(row1, row2);
      });
      if (!res) return;

      this.dataList.sort((a, b) => a.sortNum - b.sortNum);
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `确定要删除课程【${row.courseName}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

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