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

<template>
  <div class="professional-requirement">
    <div class="box-justify part-box part-box-pad">
      <div>
        <p class="tips-info">
          如果采用线下阅卷，请先导入试卷结构后再按模版导入期末成绩
        </p>
      </div>
      <div>
        <el-button v-if="canEdit" type="primary" @click="toAdd"
          >新增毕业要求</el-button
        >
      </div>
    </div>

    <div class="part-box part-box-pad">
      <drag-table
        :data="dataList"
        :columns="columns"
        :drag-enable="canEdit"
        @sort-change="sortChange"
      >
        <template #action="{ row }">
          <el-button class="btn-primary" type="text" @click="toEditNode(row)"
            >子节点</el-button
          >
          <el-button class="btn-primary" type="text" @click="toEdit(row)"
            >编辑</el-button
          >
          <el-button
            :disabled="!!row.code"
            class="btn-danger"
            type="text"
            @click="toDelete(row)"
            >删除</el-button
          >
        </template>
      </drag-table>
    </div>

    <!-- ModifyRequirement -->
    <modify-requirement
      v-if="canEdit"
      ref="ModifyRequirement"
      :instance="curRow"
      @modified="getList"
    ></modify-requirement>
    <!-- ModifyRequirementNode -->
    <modify-requirement-node
      v-if="canEdit"
      ref="ModifyRequirementNode"
      :instance="curRow"
      @modified="getList"
    ></modify-requirement-node>
  </div>
</template>

<script>
import {
  professionalRequirementListPage,
  professionalRequirementRemove,
  professionalRequirementSort,
} from "../../api";

import ModifyRequirement from "./ModifyRequirement.vue";
import ModifyRequirementNode from "./ModifyRequirementNode.vue";
import DragTable from "@/components/DragTable.vue";

export default {
  name: "professional-requirement",
  components: {
    ModifyRequirement,
    ModifyRequirementNode,
    DragTable,
  },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      curRow: {},
      columns: [],
      canEdit: false,
    };
  },
  created() {
    this.canEdit = this.checkPrivilege("link", "canEditRequirement");
    this.columns = [
      {
        label: "序号",
        prop: "$index",
        width: 60,
      },
      {
        label: "毕业要求",
        prop: "name",
      },
      {
        label: "子节点",
        prop: "nodeCount",
      },
    ];
    if (this.canEdit) {
      this.columns.push({
        label: "操作",
        prop: "action",
        className: "action-column",
        width: 160,
      });
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await professionalRequirementListPage({
        professionalId: this.rowData.id,
      });
      this.dataList = data || [];
    },
    async sortChange(data) {
      const res = await professionalRequirementSort(
        data.map((item) => {
          return { id: item.id, sortNum: item.sortNum };
        })
      ).catch(() => {});
      if (!res) {
        await this.getList();
      }
    },
    toAdd() {
      this.curRow = { professionalId: this.rowData.id };
      this.$refs.ModifyRequirement.open();
    },
    toEdit(row) {
      this.curRow = { ...row, professionalId: this.rowData.id };
      this.$refs.ModifyRequirement.open();
    },
    toEditNode(row) {
      this.curRow = { ...row, professionalId: this.rowData.id };
      this.$refs.ModifyRequirementNode.open();
    },
    toDelete(row) {
      if (row.code) return;
      this.$confirm(`确定要删除毕业要求【${row.name}】吗?`, "提示", {
        type: "warning",
      })
        .then(async () => {
          await professionalRequirementRemove(row.id);
          this.$message.success("删除成功！");
          this.getList();
        })
        .catch(() => {});
    },
  },
};
</script>