班级学员管理

xiangpei

2024-06-04 c87c4fe5aa3987d61b10d57208232a94eec83d7c

 src/views/Manage/ClassManagement/ClassStaff.vue

@@ -8,6 +8,7 @@
          <!-- 班级名称 -->
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;">
            <span>{{title}}</span>
            <el-button @click="open = true" type="primary" size="small">新增学员</el-button>
          </div>
          <!-- 表格 -->
          <el-table
@@ -62,14 +63,8 @@
            class="block"
            style="display: flex; margin-top: 40px;"
          >
            <el-pagination
              style="margin:auto"
              background
              :page-size="10"
              layout="prev, pager, next, jumper"
              :total="100"
            >
            </el-pagination>
            <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
                        @pagination="page"/>
          </div>
        </div>
      </div>
@@ -79,11 +74,38 @@
      ref="popUp"
      @children="parentGoods"
    />

    <el-dialog
      title="学员管理"
      :visible.sync="open"
      width="900px"
      :before-close="handleClose">
      <el-transfer
        filterable
        :filter-method="filterMethod"
        filter-placeholder="学员姓名"
        :titles="['学生列表', '当前学生']"
        :button-texts="['退出班级', '加入班级']"
        :props="{
          key: 'id',
          label: 'realName'
        }"
        v-model="classes.studentList"
        :data="studentList">
      </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
// 引入彈出窗口組件
import PopUp from "../../../components/PopUp/Question.vue";
import UserApi from "@/api/user";
import { updateClassesUser, getClassesUsers } from "@/api/classesUser";
export default {
  // 注册
  components: {
@@ -91,6 +113,19 @@
  },
  data() {
    return {
      total: 0,
      studentList: [],
      searchForm: {
        realName: "",
        pageSize: 10,
        pageNum: 1,
        classesId: null
      },
      classes: {
        id: null,
        studentList: []
      },
      open: false,
      // 班级名称
      title: "19级软件四班",
      formLabelAlign: {
@@ -99,78 +134,6 @@
        region: "",
      },
      tableData: [
        {
          id: 1,
          name: "张三",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "李四",
          sex: "女",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "王五",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "未上线",
        },
        {
          id: 1,
          name: "张三",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "李四",
          sex: "女",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "王五",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "未上线",
        },
        {
          id: 1,
          name: "张三",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "李四",
          sex: "女",
          phone: "12345678977",
          // 是否上线
          condition: "已上线",
        },
        {
          id: 1,
          name: "王五",
          sex: "男",
          phone: "12345678977",
          // 是否上线
          condition: "未上线",
        },
        {
          id: 1,
          name: "王五",
@@ -182,7 +145,45 @@
      ],
    };
  },
  mounted() {
    this.classes.id = this.$route.query.classesId;
    this.page()
    this.getClassesCurrentUserList(this.classes.id)
    this.getStudentList()
  },
  methods: {
    getClassesCurrentUserList(classesId) {
      let param = {
        classesId: classesId
      }
      UserApi.getClassesCurrentUserList(param).then(res => {
        this.classes.studentList = res.data
      })
    },
    getStudentList() {
      UserApi.studentList().then(res => {
        this.studentList = res.data;
      })
    },
    // 获取当前班级学员分页
    page() {
      this.searchForm.classesId = this.classes.id
      getClassesUsers(this.searchForm).then(res => {
        this.tableData = res.data.data
      })
    },
    submitForm() {
      updateClassesUser(this.classes).then(res => {
        this.$message.success(res.data.message)
        this.classesStudentPage();
      })
    },
    handleClose() {

    },
    filterMethod(query, item) {
      return item.realName.indexOf(query) > -1;
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();