班级学员管理

xiangpei

2024-06-04 c87c4fe5aa3987d61b10d57208232a94eec83d7c

班级学员管理

 src/api/classes.js

@@ -33,6 +33,14 @@
    })
}

// 解散班级
export const dissolution = (params) => {
  return axios({
    url: "/api/classes/dissolution/" + params,
    method: "PUT"
  })
}

// 批量删除班级
export const deleteClassesByIds = (params) => {
    return axios({

 src/api/classesUser.js

New file
@@ -0,0 +1,19 @@
import axios from "./request";

// 获取班级与用户关联表分页
export const getClassesUsers = (params) => {
    return axios({
        url: "/api/classes-user/page",
        method: "GET",
        params: params
    })
}

// 保存班级学员数据
export const updateClassesUser = (data) => {
  return axios({
    url: "/api/classes-user/",
    method: "PUT",
    data: data
  })
}

 src/api/user.js

@@ -1,4 +1,4 @@
import { post } from '@/utils/request'
import { post,get } from '@/utils/request'

export default {
  getUserPageList: query => post('/api/admin/user/page/list', query),
@@ -9,5 +9,7 @@
  updateUser: query => post('/api/admin/user/update', query),
  changeStatus: id => post('/api/admin/user/changeStatus/' + id),
  deleteUser: id => post('/api/admin/user/delete/' + id),
  selectByUserName: query => post('/api/admin/user/selectByUserName', query)
  selectByUserName: query => post('/api/admin/user/selectByUserName', query),
  studentList: () => get('/api/admin/user/student/list'),
  getClassesCurrentUserList: (param) => get('/api/admin/user/classes/students', param),
}

 src/views/Manage/ClassManagement/Class.vue

@@ -40,10 +40,10 @@
                  width="180px"
                ></el-table-column>
                <el-table-column
                  label="年级"
                  label="状态"
                  align="center"
                  width="80px"
                  prop="grade"
                  prop="status"
                ></el-table-column>
                <el-table-column
                  width="100px"
@@ -84,8 +84,8 @@
                    <el-button size="small" @click="handlerEdit(scope.row)" type="primary">修改</el-button>
                    <el-button size="small" type="warning">班级验证</el-button>
                    <el-button size="small" type="info">通知</el-button>
                    <el-button @click="routersTo()" size="small" type="success">成员管理</el-button>
                    <el-button @click="remove(scope.row.id)" type="danger" size="small">删除</el-button>
                    <el-button @click="studentManager(scope.row.id)" size="small" type="success">成员管理</el-button>
                    <el-button @click="remove(scope.row.id)" type="danger" size="small">解散</el-button>
                  </template>
                </el-table-column>
              </el-table>
@@ -233,7 +233,7 @@
    },
    remove(id) {
      deleteClassesById(id).then(res => {
        this.$message.success("删除成功")
        this.$message.success(res.data.message)
        this.page()
      })
    },
@@ -250,10 +250,8 @@
      this.title = "新增班级"
    },
    // 跳转(查看班级人员情况)
    routersTo() {
      this.$router.push({
        name: "ClassStaff",
      });
    studentManager(classesId) {
      this.$router.push({ path: "class-management/Class-staff", query: { classesId: classesId } });
    },
    // 返回上一个页面
    goBack() {

 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();