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

<template>
  <div class="select-class-student">
    <el-form ref="FilterForm" label-position="left" inline label-width="0px">
      <el-form-item>
        <org-select
          v-model="filter.belongOrgId"
          placeholder="开课部门"
        ></org-select>
      </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"
        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="teachingRoomName"
        label="开课部门"
        min-width="120"
      ></el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  name: "select-simple-course",
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      filter: {
        belongOrgId: "",
        enable: true,
        pageNumber: 1,
        pageSize: 1000
      },
      dataList: [],
      multipleSelection: []
    };
  },
  computed: {
    canSearch() {
      return this.filter.belongOrgId;
    }
  },
  methods: {
    async getList() {
      const datas = {
        ...this.filter
      };
      const data = await courseListPage(datas);
      this.dataList = data.records || [];
    },
    toPage(page) {
      if (!this.canSearch) return;

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