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

<template>
  <div class="select-simple-course">
    <el-form ref="FilterForm" label-position="left" inline label-width="0px">
      <el-form-item>
        <org-select
          v-model="filter.belongOrgId"
          placeholder="开课学院"
          :filter-param="{
            withoutSecondOrg: true,
          }"
        ></org-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model.trim="filter.courseName"
          placeholder="请输入课程名称"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :disabled="!canSearch" @click="toPage(1)"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="box-justify mb-2">
      <p>
        全部共<span class="mlr-1">{{ dataList.length }}</span
        >门
      </p>
      <p>
        已选<span class="mlr-1">{{ multipleSelection.length }}</span
        >门
      </p>
    </div>
    <el-table
      ref="TableList"
      :data="dataList"
      border
      max-height="440px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        fixed="left"
        width="55"
        align="center"
      ></el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="70"
        :index="indexMethod"
      ></el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名称"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="courseCode"
        label="课程编码"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="teachCollegeName"
        label="开课学院"
        min-width="120"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { courseQueryByOrg } from "../../api";

export default {
  name: "select-simple-course",
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    examId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      filter: {
        belongOrgId: "",
        courseName: "",
        examId: "",
      },
      dataList: [],
      multipleSelection: [],
    };
  },
  computed: {
    canSearch() {
      return this.filter.belongOrgId;
    },
  },
  mounted() {
    this.filter.examId = this.examId;
  },
  methods: {
    async getList() {
      const data = await courseQueryByOrg(this.filter);
      this.dataList = data || [];
    },
    toPage(page) {
      if (!this.canSearch) return;

      this.current = page;
      this.getList();
      this.multipleSelection = [];
      this.emitChange();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.basicCourseId);
      this.emitChange();
    },
    emitChange() {
      this.$emit("input", this.multipleSelection);
      this.$emit("change", this.multipleSelection);
    },
    clearSelection() {
      this.$refs.TableList.clearSelection();
    },
  },
};
</script>