| | |
| | | <!-- 班级人员管理 --> |
| | | <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" |
| | |
| | | </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: [ |
| | |
| | | { required: true, message: '请填写学员登录账号', trigger: 'blur' }, |
| | | ] |
| | | }, |
| | | studentTitle: "新增学员", |
| | | studentTitle: '新增学员', |
| | | addOpen: false, |
| | | total: 0, |
| | | studentList: [], |
| | | searchForm: { |
| | | examName: "", |
| | | studentName: '', |
| | | pageSize: 10, |
| | | pageNum: 1, |
| | | classesId: null |
| | |
| | | }, |
| | | 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 |
| | |
| | | } |
| | | }) |
| | | }, |
| | | 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 |
| | | } |
| | |
| | | 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> |
| | | |
| | | |