fuliqi
2024-07-02 b17c2ddebcfaeaa48edc1eeca5ee0dc03d9fde90
src/views/class-management/ClassStaff.vue
@@ -1,77 +1,78 @@
<!-- 班级人员管理 -->
<template>
  <div class="c">
    <div class="bg">
      <div class="main">
        <div class="content">
          <!-- 班级名称 -->
          <div style="padding-bottom:20px; border-bottom: 3px solid #409EFF;margin-bottom: 20px;">
            <span>{{title}}</span>
            <el-button @click="handlerAddStudent" type="primary" size="small">新增学员</el-button>
            <el-button @click="open = true" type="primary" size="small">学员调整</el-button>
          </div>
          <!-- 表格 -->
          <el-table
            :header-cell-style="getRowClass"
            :row-style="{height:'38px'}"
            :cell-style="{padding: '0'}"
            :data="tableData"
            border
            style="width: 100%;"
          >
            <el-table-column
              align="center"
              prop="id"
              label="学号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="realName"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="sex"
              :formatter="sexFormatter"
              label="性别"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="phone"
              label="电话"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="300px"
            >
              <template slot-scope="scope">
                <el-button @click="handlerEditStudent(scope.row)" type="warning">编辑</el-button>
                <el-button @click="remove(scope.row.id)" type="danger">删除</el-button>
                <el-button type="primary">分配角色</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="block"
            style="display: flex; margin-top: 40px;"
          >
            <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
                        @pagination="page"/>
          </div>
        </div>
  <div class="app-container">
    <div style="display: flex; flex-direction: row">
      <div style="padding-bottom:20px">
        <span class="item">{{ title }}</span>
        <el-button class="item" @click="handlerAddStudent" type="primary" size="small">新增学员</el-button>
        <el-button class="item" @click="open = true" type="primary" size="small">学员调整</el-button>
      </div>
      <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="学员姓名">
            <el-input v-model="searchForm.studentName" size="small" clearable @clear="page"
                      placeholder="学员姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="page">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <PopUp
      ref="popUp"
      @children="parentGoods"
    />
    <!-- 表格 -->
    <el-table
      :header-cell-style="getRowClass"
      :row-style="{height:'38px'}"
      :cell-style="{padding: '0'}"
      :data="tableData"
      border
      style="width: 100%;"
    >
      <el-table-column
        align="center"
        prop="id"
        label="学号"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="realName"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="sex"
        :formatter="sexFormatter"
        label="性别"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="phone"
        label="电话"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="300px"
      >
        <template slot-scope="scope">
          <el-button @click="handlerEditStudent(scope.row)" type="warning">编辑</el-button>
          <el-button @click="remove(scope.row.id)" type="danger">删除</el-button>
          <el-button type="primary">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      class="block"
      style="display: flex; margin-top: 40px;"
    >
      <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum"
                  :limit.sync="searchForm.pageSize"
                  @pagination="page"/>
    </div>
    <el-dialog
      :title="studentTitle"
      :visible.sync="addOpen"
@@ -131,23 +132,21 @@
</template>
<script>
// 引入彈出窗口組件
import PopUp from "../../../components/PopUp/Question.vue";
import UserApi from "@/api/user";
import { updateClassesUser, getClassesUsers, deleteClassesUserById, addClassesUser, edit } from "@/api/classesUser";
import UserApi from '@/api/user'
import { updateClassesUser, getClassesUsers, deleteClassesUserById, addClassesUser, edit } from '@/api/classesUser'
import Pagination from '@/components/Pagination'
export default {
  // 注册
  components: {
    PopUp,
  },
  data() {
  components: { Pagination },
  data () {
    return {
      studentForm: {
        realName: "",
        sex: "",
        phone: "",
        realName: '',
        sex: '',
        phone: '',
        age: null,
        account: "",
        password: ""
        account: '',
        password: ''
      },
      studentRules: {
        realName: [
@@ -163,12 +162,12 @@
          { required: true, message: '请填写学员登录账号', trigger: 'blur' },
        ]
      },
      studentTitle: "新增学员",
      studentTitle: '新增学员',
      addOpen: false,
      total: 0,
      studentList: [],
      searchForm: {
        examName: "",
        studentName: '',
        pageSize: 10,
        pageNum: 1,
        classesId: null
@@ -179,33 +178,32 @@
      },
      open: false,
      // 班级名称
      title: "19级软件四班",
      title: '19级软件四班',
      formLabelAlign: {
        type: "",
        user: "",
        region: "",
        type: '',
        user: '',
        region: '',
      },
      tableData: [
      ],
    };
      tableData: [],
    }
  },
  mounted() {
    this.classes.id = this.$route.query.classesId;
  mounted () {
    this.classes.id = this.$route.query.classesId
    this.page()
    this.getClassesCurrentUserList(this.classes.id)
    this.getStudentList()
  },
  methods: {
    handlerEditStudent(row) {
    handlerEditStudent (row) {
      this.studentForm = row
      this.studentTitle = "编辑学员"
      this.studentTitle = '编辑学员'
      this.addOpen = true
    },
    handlerAddStudent() {
      this.studentTitle = "添加学员"
    handlerAddStudent () {
      this.studentTitle = '添加学员'
      this.addOpen = true
    },
    submitStudentForm() {
    submitStudentForm () {
      this.$refs['studentForm'].validate((valid) => {
        if (valid) {
          this.studentForm.classes = this.classes.id
@@ -224,33 +222,33 @@
        }
      })
    },
    resetStudentForm() {
    resetStudentForm () {
      this.studentForm = {
        realName: "",
        sex: "",
        phone: "",
        realName: '',
        sex: '',
        phone: '',
        age: null
      }
    },
    handleAddClose() {
    handleAddClose () {
      this.addOpen = false
      this.resetStudentForm()
    },
    remove(id) {
    remove (id) {
      deleteClassesUserById(id).then(res => {
        this.$message.success(res.data.message)
        this.page()
      })
    },
    sexFormatter(row) {
    sexFormatter (row) {
      if (row.sex === 1) {
        return "男"
        return '男'
      }
      if (row.sex === 2) {
        return "女"
        return '女'
      }
    },
    getClassesCurrentUserList(classesId) {
    getClassesCurrentUserList (classesId) {
      let param = {
        classesId: classesId
      }
@@ -258,75 +256,73 @@
        this.classes.studentList = res.data.map(item => item.id)
      })
    },
    getStudentList() {
    getStudentList () {
      UserApi.studentList().then(res => {
        this.studentList = res.data;
        this.studentList = res.data
      })
    },
    // 获取当前班级学员分页
    page() {
    page () {
      this.searchForm.classesId = this.classes.id
      getClassesUsers(this.searchForm).then(res => {
        this.tableData = res.data.data
      })
    },
    submitForm() {
    submitForm () {
      updateClassesUser(this.classes).then(res => {
        this.$message.success(res.data.message)
        this.page();
        this.page()
        this.open = false
      })
    },
    handleClose() {
    handleClose () {
      this.open = false
    },
    filterMethod(query, item) {
      if (! item.realName) {
    filterMethod (query, item) {
      if (!item.realName) {
        return null
      }
      return item.realName.indexOf(query) > -1;
      return item.realName.indexOf(query) > -1
    },
    // 返回上一个页面
    goBack() {
      this.$router.back();
    goBack () {
      this.$router.back()
    },
    // 修改表单头部的颜色
    getRowClass() {
      return "background:#d2d3d6";
    getRowClass () {
      return 'background:#d2d3d6'
    },
    // 生成试卷
    getCreate() {
    getCreate () {
      // 跳转到生成页面
      //跳转到对应的管理页面
      this.$router.push({
        path: "/manage/test-paper-generation",
      });
    },
    // 点击后调用弹窗组件的方法,开启弹窗
    getDialogFormVisible() {
      this.$refs.popUp.showDialog();
        path: '/manage/test-paper-generation',
      })
    },
    // 弹窗
    // 接收弹窗组件返回的表单值
    parentGoods(obj) {
      console.log(obj, "弹窗组件的表单值");
    parentGoods (obj) {
      console.log(obj, '弹窗组件的表单值')
    },
  },
};
}
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}
// 内容
.content {
  width: 1262px;
  margin-bottom: 80px;
  background-color: #fff;
  padding: 20px 40px;
  border-radius: 10px;
}
.item {
  margin-right: 5px;
}
</style>