From 3df06d7515db396b34ed1d088502556484df6527 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期四, 11 七月 2024 10:55:01 +0800 Subject: [PATCH] 教师管理 --- src/views/login/index.vue | 4 src/views/user/teacher/list.vue | 131 ++++++++++++++++++ src/router.js | 13 + src/views/user/admin/edit.vue | 48 +++++- src/views/user/teacher/edit.vue | 166 +++++++++++++++++++++++ src/views/user/student/edit.vue | 2 6 files changed, 352 insertions(+), 12 deletions(-) diff --git a/src/router.js b/src/router.js index 0059a0d..0391f7c 100644 --- a/src/router.js +++ b/src/router.js @@ -111,6 +111,19 @@ hidden: true }, { + path: 'teacher/list', + component: () => import('@/views/user/teacher/list'), + name: 'UserTeacherPageList', + meta: { title: '鏁欏笀鍒楄〃', noCache: true } + }, + { + path: 'teacher/edit', + component: () => import('@/views/user/teacher/edit'), + name: 'UserTeacherEdit', + meta: { title: '鏁欏笀缂栬緫', noCache: true, activeMenu: '/user/teacher/list' }, + hidden: true + }, + { path: 'admin/list', component: () => import('@/views/user/admin/list'), name: 'UserAdminPageList', diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 019ad5a..a194d26 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -115,8 +115,8 @@ remember: false }, loginRules: { - userName: [{ required: true, trigger: 'blur', validator: validateUsername }], - password: [{ required: true, trigger: 'blur', validator: validatePassword }] + userName: [{ required: true, trigger: 'blur'}], + password: [{ required: true, trigger: 'blur'}] }, passwordType: 'password', capsTooltip: false, diff --git a/src/views/user/admin/edit.vue b/src/views/user/admin/edit.vue index 40d73a9..ac6dc9f 100644 --- a/src/views/user/admin/edit.vue +++ b/src/views/user/admin/edit.vue @@ -2,14 +2,17 @@ <div class="app-container"> <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules"> - <el-form-item label="鐢ㄦ埛鍚嶏細" prop="userName" required> + <el-form-item label="鐪熷疄濮撳悕锛�" prop="realName" required> + <el-input v-model="form.realName"></el-input> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜锛�" prop="phone" required> + <el-input v-model="form.phone"></el-input> + </el-form-item> + <el-form-item label="鐧诲綍璐﹀彿锛�" prop="userName" required> <el-input v-model="form.userName"></el-input> </el-form-item> - <el-form-item label="瀵嗙爜锛�" required> - <el-input v-model="form.password"></el-input> - </el-form-item> - <el-form-item label="鐪熷疄濮撳悕锛�" prop="realName" required> - <el-input v-model="form.realName"></el-input> + <el-form-item label="鐧诲綍瀵嗙爜锛�" prop="password" required> + <el-input v-model="form.password" show-password></el-input> </el-form-item> <el-form-item label="骞撮緞锛�"> <el-input v-model="form.age"></el-input> @@ -21,9 +24,6 @@ </el-form-item> <el-form-item label="鍑虹敓鏃ユ湡锛�"> <el-date-picker v-model="form.birthDay" value-format="yyyy-MM-dd" type="date" placeholder="閫夋嫨鏃ユ湡"/> - </el-form-item> - <el-form-item label="鎵嬫満锛�"> - <el-input v-model="form.phone"></el-input> </el-form-item> <el-form-item label="鐘舵�侊細" required> <el-select v-model="form.status" placeholder="鐘舵��"> @@ -44,6 +44,30 @@ export default { 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}$/; + if (!value) { + callback(new Error('璇疯緭鍏ユ墜鏈哄彿')); + } else if (!phoneRegex.test(value)) { + callback(new Error('鎵嬫満鍙锋牸寮忎笉姝g‘')); + } else { + callback(); + } + } return { form: { id: null, @@ -64,6 +88,12 @@ ], realName: [ { required: true, message: '璇疯緭鍏ョ湡瀹炲鍚�', trigger: 'blur' } + ], + password: [ + { validator: validatePassword, trigger: 'blur' } + ], + phone: [ + { validator: validatePhone, trigger: 'blur' } ] } } diff --git a/src/views/user/student/edit.vue b/src/views/user/student/edit.vue index 6323e4d..e686016 100644 --- a/src/views/user/student/edit.vue +++ b/src/views/user/student/edit.vue @@ -5,7 +5,7 @@ <el-form-item label="鐪熷疄濮撳悕锛�" prop="realName" required> <el-input v-model="form.realName"></el-input> </el-form-item> - <el-form-item label="鎵嬫満锛�" prop="phone" required> + <el-form-item label="鎵嬫満鍙风爜锛�" prop="phone" required> <el-input v-model="form.phone"></el-input> </el-form-item> <el-form-item label="鐧诲綍璐﹀彿锛�" prop="userName" required> diff --git a/src/views/user/teacher/edit.vue b/src/views/user/teacher/edit.vue new file mode 100644 index 0000000..e9c9774 --- /dev/null +++ b/src/views/user/teacher/edit.vue @@ -0,0 +1,166 @@ +<template> + <div class="app-container"> + + <el-form :model="form" ref="form" label-width="100px" v-loading="formLoading" :rules="rules"> + <el-form-item label="鐪熷疄濮撳悕锛�" prop="realName" required> + <el-input v-model="form.realName"></el-input> + </el-form-item> + <el-form-item label="鎵嬫満鍙风爜锛�" prop="phone" required> + <el-input v-model="form.phone"></el-input> + </el-form-item> + <el-form-item label="鐧诲綍璐﹀彿锛�" prop="userName" required> + <el-input v-model="form.userName"></el-input> + </el-form-item> + <el-form-item label="鐧诲綍瀵嗙爜锛�" prop="password" required> + <el-input v-model="form.password" show-password></el-input> + </el-form-item> + <el-form-item label="骞撮緞锛�"> + <el-input v-model="form.age"></el-input> + </el-form-item> + <el-form-item label="鎬у埆锛�"> + <el-select v-model="form.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="form.birthDay" value-format="yyyy-MM-dd" type="date" placeholder="閫夋嫨鏃ユ湡"/> + </el-form-item> + <el-form-item label="鐘舵�侊細" required> + <el-select v-model="form.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-item> + <el-button type="primary" @click="submitForm">鎻愪氦</el-button> + <el-button @click="resetForm">閲嶇疆</el-button> + </el-form-item> + </el-form> + </div> +</template> + +<script> +import { mapGetters, mapState, mapActions } from 'vuex' +import userApi from '@/api/user' + +export default { + 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}$/; + if (!value) { + callback(new Error('璇疯緭鍏ユ墜鏈哄彿')); + } else if (!phoneRegex.test(value)) { + callback(new Error('鎵嬫満鍙锋牸寮忎笉姝g‘')); + } else { + callback(); + } + } + return { + form: { + id: null, + userName: '', + password: '', + realName: '', + role: 2, + status: 1, + age: '', + sex: '', + birthDay: null, + phone: null + }, + formLoading: false, + rules: { + userName: [ + { required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'blur' } + ], + realName: [ + { required: true, message: '璇疯緭鍏ョ湡瀹炲鍚�', trigger: 'blur' } + ], + password: [ + { validator: validatePassword, trigger: 'blur' } + ], + phone: [ + { validator: validatePhone, trigger: 'blur' } + ] + } + } + }, + created () { + let id = this.$route.query.id + let _this = this + if (id && parseInt(id) !== 0) { + _this.formLoading = true + userApi.selectUser(id).then(re => { + _this.form = re.data + _this.formLoading = false + }) + } + }, + methods: { + submitForm () { + let _this = this + this.$refs.form.validate((valid) => { + if (valid) { + this.formLoading = true + userApi.createUser(this.form).then(data => { + if (data.code === 1) { + _this.$message.success(data.message) + _this.delCurrentView(_this).then(() => { + _this.$router.push('/user/teacher/list') + }) + } else { + _this.$message.error(data.message) + _this.formLoading = false + } + }).catch(e => { + _this.formLoading = false + }) + } else { + return false + } + }) + }, + resetForm () { + let lastId = this.form.id + this.$refs['form'].resetFields() + this.form = { + id: null, + userName: '', + password: '', + realName: '', + role: 2, + status: 1, + age: '', + sex: '', + birthDay: null, + phone: null + } + this.form.id = lastId + }, + ...mapActions('tagsView', { delCurrentView: 'delCurrentView' }) + }, + computed: { + ...mapGetters('enumItem', [ + 'enumFormat' + ]), + ...mapState('enumItem', { + sexEnum: state => state.user.sexEnum, + roleEnum: state => state.user.roleEnum, + statusEnum: state => state.user.statusEnum + }) + } +} +</script> diff --git a/src/views/user/teacher/list.vue b/src/views/user/teacher/list.vue new file mode 100644 index 0000000..b858e87 --- /dev/null +++ b/src/views/user/teacher/list.vue @@ -0,0 +1,131 @@ +<template> + <div class="app-container"> + <el-form :model="queryParam" ref="queryForm" :inline="true"> + <el-form-item label="鐢ㄦ埛鍚嶏細"> + <el-input v-model="queryParam.userName"></el-input> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="submitForm">鏌ヨ</el-button> + <router-link :to="{path:'/user/teacher/edit'}" class="link-left"> + <el-button type="primary">娣诲姞</el-button> + </router-link> + </el-form-item> + </el-form> + + <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%"> + <el-table-column prop="id" label="Id" /> + <el-table-column prop="userName" label="鐢ㄦ埛鍚�"/> + <el-table-column prop="realName" label="鐪熷疄濮撳悕" /> + <el-table-column prop="sex" label="鎬у埆" width="60px;" :formatter="sexFormatter"/> + <el-table-column prop="phone" label="鎵嬫満鍙�"/> + <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="160px"/> + <el-table-column label="鐘舵��" prop="status" width="70px"> + <template slot-scope="{row}"> + <el-tag :type="statusTagFormatter(row.status)"> + {{ statusFormatter(row.status) }} + </el-tag> + </template> + </el-table-column> + <el-table-column width="220px" label="鎿嶄綔" align="center"> + <template slot-scope="{row}"> + <el-button size="mini" @click="changeStatus(row)" class="link-left"> + {{ statusBtnFormatter(row.status) }} + </el-button> + <router-link :to="{path:'/user/teacher/edit', query:{id:row.id}}" class="link-left"> + <el-button size="mini">缂栬緫</el-button> + </router-link> + <el-button size="mini" type="danger" @click="deleteUser(row)" class="link-left">鍒犻櫎</el-button> + </template> + </el-table-column> + </el-table> + <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize" + @pagination="search"/> + </div> +</template> + +<script> +import { mapGetters, mapState } from 'vuex' +import Pagination from '@/components/Pagination' +import userApi from '@/api/user' + +export default { + components: { Pagination }, + data () { + return { + queryParam: { + userName: '', + role: 2, + pageIndex: 1, + pageSize: 10 + }, + listLoading: true, + tableData: [], + total: 0 + } + }, + created () { + this.search() + }, + methods: { + search () { + this.listLoading = true + userApi.getUserPageList(this.queryParam).then(data => { + const re = data.data + this.tableData = re.list + this.total = re.total + this.queryParam.pageIndex = re.pageNum + this.listLoading = false + }) + }, + changeStatus (row) { + let _this = this + userApi.changeStatus(row.id).then(re => { + if (re.code === 1) { + row.status = re.data + _this.$message.success(re.message) + } else { + _this.$message.error(re.message) + } + }) + }, + deleteUser (row) { + let _this = this + userApi.deleteUser(row.id).then(re => { + if (re.code === 1) { + _this.search() + _this.$message.success(re.message) + } else { + _this.$message.error(re.message) + } + }) + }, + submitForm () { + this.queryParam.pageIndex = 1 + this.search() + }, + sexFormatter (row, column, cellValue, index) { + return this.enumFormat(this.sexEnum, cellValue) + }, + statusFormatter (status) { + return this.enumFormat(this.statusEnum, status) + }, + statusTagFormatter (status) { + return this.enumFormat(this.statusTag, status) + }, + statusBtnFormatter (status) { + return this.enumFormat(this.statusBtn, status) + } + }, + computed: { + ...mapGetters('enumItem', [ + 'enumFormat' + ]), + ...mapState('enumItem', { + sexEnum: state => state.user.sexEnum, + statusEnum: state => state.user.statusEnum, + statusTag: state => state.user.statusTag, + statusBtn: state => state.user.statusBtn + }) + } +} +</script> -- Gitblit v1.8.0