teachcloud-print-web/src/modules/base/components/ModifyClazzSimpleStudent.vue

<template>
  <div>
    <el-dialog
      class="modify-clazz-simple-student page-dialog"
      :visible.sync="modalIsShow"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      destroy-on-close
      @open="visibleChange"
      @close="closed"
    >
      <div class="part-box part-box-filter part-box-flex">
        <el-form
          ref="FilterForm"
          label-position="left"
          label-width="85px"
          inline
        >
          <el-form-item label="学生：">
            <el-input
              v-model="filter.studentInfo"
              placeholder="请输入姓名或者学号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toPage(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="part-box-action">
          <el-button type="success" icon="el-icon-download"
            ><a :href="downloadUrl" :download="dfilename"
              >模板下载</a
            ></el-button
          >
          <upload-button
            btn-icon="el-icon-circle-plus-outline"
            btn-content="批量导入"
            btn-type="success"
            :upload-url="uploadUrl"
            :upload-data="uploadData"
            :format="['xls', 'xlsx']"
            @upload-error="uplaodError"
            @upload-success="uploadSuccess"
          >
          </upload-button>
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="toAdd"
            >新增学生</el-button
          >
        </div>
      </div>

      <div class="part-box part-box-pad">
        <el-table ref="TableList" :data="studentList">
          <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="belongOrgName" label="院系"> </el-table-column>
          <el-table-column prop="majorName" label="专业"> </el-table-column>
          <el-table-column prop="clazzName" label="班级"> </el-table-column>
          <el-table-column class-name="action-column" label="操作" width="80">
            <template slot-scope="scope">
              <el-button
                class="btn-danger"
                type="text"
                @click="toDelete(scope.row)"
                >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="part-page">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :current-page="current"
            :total="total"
            :page-size="size"
            @current-change="toPage"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- ModifyStudentSimple -->
    <modify-student-simple
      ref="ModifyStudentSimple"
      :instance="curStudent"
      @modified="getList"
    ></modify-student-simple>
  </div>
</template>

<script>
import { studentSimpleListQuery, deleteStudentSimple } from "../api";
import ModifyStudentSimple from "./ModifyStudentSimple";
import UploadButton from "../../../components/UploadButton";

export default {
  name: "modify-clazz-simple-student",
  components: { UploadButton, ModifyStudentSimple },
  props: {
    clazz: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        teachClazzId: "",
        studentInfo: ""
      },
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      studentList: [],
      curStudent: {},
      // import
      uploadData: {},
      uploadUrl: "/api/admin/teach/student/import",
      downloadUrl: "/temps/clazzSimpleStudentTemplate.xlsx",
      dfilename: "教学班级学生导入模板.xlsx"
    };
  },
  computed: {
    title() {
      return `学生管理-${this.clazz.teachClazzName}`;
    }
  },
  methods: {
    visibleChange() {
      this.filter.teachClazzId = this.clazz.id;
      this.uploadData = {
        teachClazzId: this.clazz.id
      };
      this.toPage(1);
    },
    closed() {
      this.$emit("modified");
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size
      };
      const data = await studentSimpleListQuery(datas);
      this.studentList = data.records;
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toAdd() {
      this.curStudent = { teachClazzId: this.clazz.id };
      this.$refs.ModifyStudentSimple.open();
    },
    toDelete(row) {
      this.$confirm(`确定要移除学生【${row.studentName}】吗?`, "提示", {
        type: "warning"
      })
        .then(async () => {
          await deleteStudentSimple([row.id]);
          this.$message.success("操作成功！");
          this.deletePageLastItem();
        })
        .catch(() => {});
    },
    // import
    uplaodError(errorData) {
      this.$notify.error({ title: "错误提示", message: errorData.message });
    },
    uploadSuccess() {
      this.$message.success("文件上传成功，后台正在导入！");
      this.getList();
    }
  }
};
</script>