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

<template>
  <div class="select-simple-student">
    <el-form ref="FilterForm" label-position="left" inline label-width="0px">
      <el-form-item>
        <college-select
          v-model="filter.collegeId"
          class="width-200"
          placeholder="学院"
          @change="collegeChange"
        ></college-select>
      </el-form-item>
      <el-form-item>
        <major-select
          v-model="filter.majorId"
          class="width-200"
          :college-id="filter.collegeId"
          cascader
          placeholder="专业"
          @change="majorChange"
        ></major-select>
      </el-form-item>
      <el-form-item>
        <class-select
          v-model="filter.clazzId"
          class="width-200"
          :major-id="filter.majorId"
          cascader
          placeholder="班级"
          @change="classChange"
        ></class-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="studentName" label="姓名"></el-table-column>
      <el-table-column prop="studentCode" label="学号"></el-table-column>
      <el-table-column prop="collegeName" label="机构"></el-table-column>
      <el-table-column prop="majorName" label="专业"></el-table-column>
      <el-table-column prop="clazzName" label="班级"></el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  name: "select-simple-student",
  props: {
    value: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      filter: {
        collegeId: "",
        majorId: "",
        clazzId: ""
      },
      filterNames: {
        collegeName: "",
        majorName: "",
        clazzName: ""
      },
      dataList: [],
      multipleSelection: []
    };
  },
  computed: {
    canSearch() {
      return (
        this.filter.collegeId && this.filter.majorId && this.filter.clazzId
      );
    }
  },
  methods: {
    async getList() {
      const datas = {
        ...this.filter
      };
      const data = await unitQueryByType(datas, "STUDENT");
      this.dataList = data || [];
      this.dataList = this.dataList.map(item => {
        return {
          id: item.id,
          studentName: item.name,
          studentCode: item.code,
          ...this.filterNames
        };
      });
    },
    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();
    },
    collegeChange(val) {
      this.filterNames.collegeName = val.name;
    },
    majorChange(val) {
      this.filterNames.majorName = val.name;
    },
    classChange(val) {
      this.filterNames.clazzName = val.name;
    },
    emitChange() {
      this.$emit("input", this.multipleSelection);
      this.$emit("change", this.multipleSelection);
    },
    clearSelection() {
      this.$refs.TableList.clearSelection();
    }
  }
};
</script>