From b0fb9cbf7eea64dd52a7c599a9504eb40ae643eb Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期一, 11 十一月 2024 15:32:44 +0800
Subject: [PATCH] 错题本分页
---
src/views/class-management/ClassStaff.vue | 411 +++++++++++++++++++++++++++++++++-------------------------
1 files changed, 233 insertions(+), 178 deletions(-)
diff --git a/src/views/class-management/ClassStaff.vue b/src/views/class-management/ClassStaff.vue
index 2811374..99739bf 100644
--- a/src/views/class-management/ClassStaff.vue
+++ b/src/views/class-management/ClassStaff.vue
@@ -1,101 +1,103 @@
<!-- 鐝骇浜哄憳绠＄悊 -->
<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">{{ this.$route.query.className }}</span>
+ <el-button class="item" @click="handlerAddStudent" type="primary" size="small">鏂板瀛﹀憳</el-button>
+ <el-button class="item" @click="openManage" 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" @input="page"
+ placeholder="瀛﹀憳濮撳悕"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="page" size="small">鏌ヨ</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>
+ <div
+ class="block"
+ style="display: flex; margin-top: 40px;"
+ >
+ <pagination v-show="total>0" :total="total" :page.sync="searchForm.currentPage"
+ :limit.sync="searchForm.pageSize"
+ @pagination="page"/>
+ </div>
<el-dialog
:title="studentTitle"
:visible.sync="addOpen"
width="700px"
- :before-close="handleAddClose">
+ :before-close="handleAddClose"
+ :close-on-click-modal="false">
<el-form :model="studentForm" :rules="studentRules" ref="studentForm" label-width="100px" class="demo-ruleForm">
- <el-form-item label="濮撳悕" prop="realName">
- <el-input v-model="studentForm.realName"></el-input>
- </el-form-item>
- <el-form-item label="鎬у埆" prop="sex">
- <el-select v-model="studentForm.sex">
- <el-option label="鐢�" value="N"></el-option>
- <el-option label="濂�" value="V"></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="鐢佃瘽" prop="phone">
- <el-input v-model="studentForm.phone"></el-input>
- </el-form-item>
- <el-form-item label="鐧诲綍璐﹀彿" prop="account">
- <el-input v-model="studentForm.account"></el-input>
- </el-form-item>
- <el-form-item label="鐧诲綍瀵嗙爜" prop="password">
- <el-input v-model="studentForm.password" show-password placeholder="涓嶅～鍐欎細浣跨敤榛樿202406"></el-input>
- </el-form-item>
+ <el-form-item label="鐪熷疄濮撳悕锛�" prop="realName">
+ <el-input v-model="studentForm.realName"></el-input>
+ </el-form-item>
+ <el-form-item label="鎵嬫満鍙风爜锛�" prop="phone">
+ <el-input v-model="studentForm.phone"></el-input>
+ </el-form-item>
+ <el-form-item label="鐧诲綍璐﹀彿锛�" prop="userName">
+ <el-input v-model="studentForm.userName" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item v-if="!studentForm.id" label="鐧诲綍瀵嗙爜锛�" prop="password">
+ <el-input v-model="studentForm.password" show-password autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="骞撮緞锛�">
+ <el-input v-model="studentForm.age"></el-input>
+ </el-form-item>
+ <el-form-item label="鎬у埆锛�">
+ <el-select v-model="studentForm.sex" placeholder="鎬у埆" clearable>
+ <el-option v-for="item in sexEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍑虹敓鏃ユ湡锛�">
+ <el-date-picker v-model="studentForm.birthDay" type="date" value-format="yyyy-MM-dd" placeholder="閫夋嫨鏃ユ湡"/>
+ </el-form-item>
+
+ <el-form-item label="鐘舵�侊細">
+ <el-select v-model="studentForm.status" placeholder="鐘舵��">
+ <el-option v-for="item in statusEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
+ </el-select>
+ </el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleAddClose">鍙� 娑�</el-button>
@@ -131,46 +133,81 @@
</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 { mapGetters, mapState } from 'vuex'
+import {
+ updateClassesUser,
+ getClassesUsers,
+ deleteClassesUserById,
+ addClassesUser,
+ editClassesUser
+} from '@/api/classesUser'
+import Pagination from '@/components/Pagination'
+
export default {
- // 娉ㄥ唽
- components: {
- PopUp,
- },
- data() {
+ components: { Pagination },
+ data () {
+ var validatePassword = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('璇疯緭鍏ョ櫥褰曞瘑鐮�'))
+ } else if (!/[A-Z]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓ぇ鍐欏瓧姣�'))
+ } else if (!/[a-z]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓皬鍐欏瓧姣�'))
+ } else if (!/[0-9]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓暟瀛�'))
+ } else {
+ callback()
+ }
+ }
+ var validatePhone = (rule, value, callback) => {
+ // 鎵嬫満鍙峰拰搴ф満鍙烽獙璇侀�昏緫
+ const phoneRegex = /^1[3-9]\d{9}$/; // 鎵嬫満鍙锋牸寮�
+ const landlineRegex = /^\d{3,4}-?\d{7,8}$/; // 搴ф満鍙锋牸寮忥紝鍙互鍖呭惈鍖哄彿鍜屽彲閫夌殑杩炲瓧绗�
+
+ if (!value) {
+ callback(new Error('璇疯緭鍏ユ墜鏈哄彿鎴栧骇鏈哄彿'));
+ } else if (!phoneRegex.test(value)) {
+ if (!landlineRegex.test(value)){
+ callback(new Error('鎵嬫満鍙锋垨搴ф満鍙锋牸寮忎笉姝ｇ‘'));
+ }
+ } else {
+ callback();
+ }
+ }
return {
studentForm: {
- realName: "",
- sex: "",
- phone: "",
+ id: null,
+ realName: '',
+ sex: 1,
+ phone: '',
+ birthDay: '',
age: null,
- account: "",
- password: ""
+ userName: '',
+ password: ''
},
studentRules: {
- realName: [
- { required: true, message: '璇峰～鍐欏鍛樺鍚�', trigger: 'blur' },
+ userName: [
+ { required: true, message: '璇疯緭鍏ョ櫥褰曡处鍙�', trigger: 'blur' }
],
- sex: [
- { required: true, message: '璇烽�夋嫨瀛﹀憳鎬у埆', trigger: 'change' },
+ realName: [
+ { required: true, message: '璇疯緭鍏ョ湡瀹炲鍚�', trigger: 'blur' }
+ ],
+ password: [
+ { validator: validatePassword, trigger: 'blur' }
],
phone: [
- { required: true, message: '璇峰～鍐欏鍛樼數璇�', trigger: 'blur' },
- ],
- account: [
- { required: true, message: '璇峰～鍐欏鍛樼櫥褰曡处鍙�', trigger: 'blur' },
+ { validator: validatePhone, trigger: 'blur' }
]
},
- studentTitle: "鏂板瀛﹀憳",
+ studentTitle: '鏂板瀛﹀憳',
addOpen: false,
total: 0,
studentList: [],
searchForm: {
- examName: "",
+ studentName: '',
pageSize: 10,
- pageNum: 1,
+ currentPage: 1,
classesId: null
},
classes: {
@@ -179,78 +216,86 @@
},
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) {
+ openManage () {
+ this.getClassesCurrentUserList(this.classes.id)
+ this.open = true
+ },
+ 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) => {
+ console.log(this.studentForm)
if (valid) {
- this.studentForm.classes = this.classes.id
- if (this.studentForm.id) {
- edit(this.studentForm).then(res => {
- this.addOpen = false
- this.$message.success(res.data.message)
- this.page()
- })
- }
+ this.studentForm.classesId = this.classes.id
addClassesUser(this.studentForm).then(res => {
this.addOpen = false
this.$message.success(res.data.message)
this.page()
+ this.resetStudentForm()
})
}
})
},
- resetStudentForm() {
+ resetStudentForm () {
this.studentForm = {
- realName: "",
- sex: "",
- phone: "",
- age: null
+ id: null,
+ realName: '',
+ sex: 1,
+ phone: '',
+ birthDay: '',
+ age: null,
+ userName: '',
+ password: ''
}
},
- handleAddClose() {
+ handleAddClose () {
this.addOpen = false
this.resetStudentForm()
},
- remove(id) {
- deleteClassesUserById(id).then(res => {
- this.$message.success(res.data.message)
- this.page()
+ remove (id) {
+ this.$confirm('纭鏄惁鍒犻櫎?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ 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 +303,85 @@
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
+ this.total = res.data.total
+ this.loading = false
})
},
- 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, '寮圭獥缁勪欢鐨勮〃鍗曞��')
+ }
},
-};
+ computed: {
+ ...mapGetters('enumItem', [
+ 'enumFormat'
+ ]),
+ ...mapState('enumItem', {
+ sexEnum: state => state.user.sexEnum,
+ roleEnum: state => state.user.roleEnum,
+ statusEnum: state => state.user.statusEnum,
+ levelEnum: state => state.user.levelEnum
+ })
+ }
+}
</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>
-
-
--
Gitblit v1.8.0