fdzcxy212206203
/
ExamSphere
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

优化界面

Browse Source
yzb
yzb 8 months ago
parent b7cc68f381
commit f8be43ef0a
2 changed files with 295 additions and 376 deletions
Show Stats Download Patch File Download Diff File

329
admin/src/view/user/student.vue
Unescape View File

@ -1,242 +1,193 @@
<template>
<el-row class="page">
<el-row class="block-view">
<el-card class="block-view">
<!-- 顶部标题 -->
<el-row class="top">
<el-col>
<el-text class="mx-1"><h2>学生账号管理</h2></el-text>
</el-col>
<el-text><h2>学生账号管理</h2></el-text>
</el-row>
<!-- 添加学生账号 -->
<el-card class="publish" shadow="hover">
<el-row gutter={20} class="form-row">
<el-col :span="12">
<el-input
placeholder="请输入学生姓名"
v-model="newStudent.name"
clearable
size="medium"
/>
</el-col>
<el-col :span="12">
<el-input
placeholder="请输入学生账号"
v-model="newStudent.username"
clearable
size="medium"
/>
</el-col>
</el-row>
<el-button
type="primary"
@click="isEditing ? updateStudent() : addStudent()"
class="submit-btn"
>
{{ isEditing ? '保存编辑' : '添加学生' }}
</el-button>
</el-card>
<!-- 搜索框 -->
<el-row class="search-row" style="margin-top: 20px;">
<!-- 搜索框和添加按钮 -->
<el-row class="toolbar" justify="space-between">
<el-col :span="8">
<el-input
v-model="searchQuery"
placeholder="搜索学生"
placeholder="请输入搜索的用户名"
clearable
size="medium"
@input="searchStudent"
>
<template #append>
<el-button
icon="el-icon-search"
@click="searchStudent"
size="mini"
class="search-btn"
/>
<el-button @click="searchStudent">搜索</el-button>
</template>
</el-input>
</el-col>
</el-row>
<!-- 学生列表 -->
<el-row class="student-list" v-if="filteredStudents.length > 0">
<el-table :data="filteredStudents" style="width: 100%" stripe>
<el-table-column prop="name" label="学生姓名" width="180" />
<el-table-column prop="username" label="学生账号" width="220" />
<el-table-column label="操作" width="180">
<template #default="scope">
<el-button
@click="editStudent(scope.row)"
type="text"
icon="el-icon-edit"
size="small"
>编辑</el-button>
<el-button
@click="deleteStudent(scope.row.id)"
type="text"
icon="el-icon-delete"
size="small"
style="color: red;"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" @click="showAddDialog = true">添加用户</el-button>
<!-- 添加用户弹窗 -->
<el-dialog title="添加新用户" v-model="showAddDialog" width="500px" center>
<el-form :model="newStudent" :rules="rules" ref="studentForm" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="newStudent.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="newStudent.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input v-model="newStudent.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="角色" prop="role">
<el-input v-model="newStudent.role" placeholder="请输入角色" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch v-model="newStudent.status" />
</el-form-item>
</el-form>
<!-- 弹窗底部按钮 -->
<template #footer>
<span>
<el-button @click="resetForm">重置</el-button>
<el-button type="primary" @click="saveStudent">保存</el-button>
</span>
</template>
</el-dialog>
</el-row>
<el-alert
v-else
title="暂无学生账号"
type="info"
show-icon
style="margin-top: 20px;"
></el-alert>
</el-row>
<!-- 表格展示 -->
<el-table :data="filteredStudents" style="width: 100%; margin-top: 20px;" stripe>
<!-- 序号列 -->
<el-table-column type="index" label="#" width="50" align="center" />
<el-table-column prop="name" label="姓名" width="150" />
<el-table-column prop="email" label="邮箱" width="200" />
<el-table-column prop="phone" label="手机" width="180" />
<el-table-column prop="role" label="角色" width="180" />
<!-- 状态列 -->
<el-table-column label="状态" width="120" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"
/>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" width="160" />
<!-- 操作列 -->
<el-table-column label="操作" width="200" align="center">
<template #default="scope">
<el-button
type="primary"
size="mini"
@click="editStudent(scope.row)"
>编辑</el-button>
<el-button
type="danger"
size="mini"
@click="deleteStudent(scope.row.id)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:total="students.length"
:page-size="10"
style="margin-top: 20px; text-align: right;"
/>
</el-card>
</el-row>
</template>
<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
const students = ref([]);
const newStudent = ref({
name: '',
username: ''
});
const isEditing = ref(false);
const editingStudentId = ref(null);
const searchQuery = ref('');
const students = ref([
// 示例数据
{ id: 1, name: '15285', email: '14755798', phone: '185825695', role: 'ice喵喵3', status: true, createdAt: '2022-01-14' },
{ id: 2, name: 'root', email: '1060368054@qq.com', phone: '18380546544', role: 'ice喵喵3', status: false, createdAt: '2022-01-14' },
]);
// 添加学生功能
const addStudent = () => {
if (newStudent.value.name && newStudent.value.username) {
students.value.push({
id: Date.now(),
name: newStudent.value.name,
username: newStudent.value.username,
});
ElMessage.success('学生添加成功！');
resetForm();
} else {
ElMessage.error('请填写完整的学生信息！');
}
const searchQuery = ref('');
const showAddDialog = ref(false); // 控制弹窗显示
const studentForm = ref(); // 表单引用
const newStudent = ref({ name: '', email: '', phone: '', role: '', status: true }); // 新用户数据
const rules = {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
role: [{ required: true, message: '请输入角色', trigger: 'blur' }],
};
// 编辑学生功能
const editStudent = (student) => {
newStudent.value.name = student.name;
newStudent.value.username = student.username;
isEditing.value = true;
editingStudentId.value = student.id;
};
// 筛选功能
const filteredStudents = computed(() => {
if (!searchQuery.value) return students.value;
return students.value.filter((student) =>
student.name.includes(searchQuery.value) || student.email.includes(searchQuery.value)
);
});
// 更新学生信息
const updateStudent = () => {
if (newStudent.value.name && newStudent.value.username && editingStudentId.value) {
const index = students.value.findIndex(student => student.id === editingStudentId.value);
if (index > -1) {
students.value[index].name = newStudent.value.name;
students.value[index].username = newStudent.value.username;
ElMessage.success('学生信息更新成功！');
// 保存新用户
const saveStudent = () => {
studentForm.value.validate((valid) => {
if (valid) {
students.value.push({
...newStudent.value,
id: Date.now(),
createdAt: new Date().toISOString().split('T')[0], // 添加创建时间
});
ElMessage.success('新用户添加成功！');
resetForm();
showAddDialog.value = false;
} else {
ElMessage.error('更新失败，学生未找到！');
ElMessage.error('请填写完整的信息！');
}
} else {
ElMessage.error('请填写完整的学生信息！');
}
};
// 删除学生功能
const deleteStudent = (id) => {
const index = students.value.findIndex(student => student.id === id);
if (index > -1) {
students.value.splice(index, 1);
ElMessage.success('学生删除成功！');
} else {
ElMessage.error('删除失败，学生未找到！');
}
});
};
// 重置表单
const resetForm = () => {
newStudent.value.name = '';
newStudent.value.username = '';
isEditing.value = false;
editingStudentId.value = null;
studentForm.value.resetFields();
newStudent.value = { name: '', email: '', phone: '', role: '', status: true };
};
// 筛选学生列表
const filteredStudents = computed(() => {
if (!searchQuery.value) return students.value;
return students.value.filter(student =>
student.name.includes(searchQuery.value) || student.username.includes(searchQuery.value)
);
});
// 搜索学生
const searchStudent = () => {
// 搜索时会自动更新 filteredStudents，保持列表同步
};
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
width: 100%;
padding: 20px;
background-color: #f4f6f9;
line-height: 20px;
}
.block-view {
display: flex;
flex-direction: column;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.top {
color: #3c3c3c;
margin-bottom: 20px;
}
.publish {
margin-bottom: 20px;
padding: 20px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-row {
margin-bottom: 20px;
}
.submit-btn {
width: 100%;
border-radius: 10px;
}
.search-row {
margin-top: 20px;
}
.search-btn {
margin-left: 5px;
}
.student-list {
margin-top: 20px;
}
.el-table {
border-radius: 8px;
overflow: hidden;
.toolbar {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.el-button {
font-size: 14px;
margin-left: 10px;
}
</style>

342
admin/src/view/user/teacher.vue
Unescape View File

@ -1,244 +1,212 @@
<template>
<el-row class="page">
<el-row class="block-view">
<el-card class="block-view">
<!-- 顶部标题 -->
<el-row class="top">
<el-col>
<el-text class="mx-1"><h2>教师账号管理</h2></el-text>
</el-col>
<el-text><h2>教师账号管理</h2></el-text>
</el-row>
<!-- 教师信息表单 -->
<el-card class="publish" shadow="hover">
<el-row gutter={20} class="form-row">
<el-col :span="12">
<el-input
placeholder="请输入教师姓名"
v-model="newTeacher.name"
clearable
size="medium"
/>
</el-col>
<el-col :span="12">
<el-input
placeholder="请输入教师账号"
v-model="newTeacher.username"
clearable
size="medium"
/>
</el-col>
</el-row>
<el-button
type="primary"
@click="isEditing ? updateTeacher() : addTeacher()"
class="submit-btn"
>
{{ isEditing ? '保存编辑' : '添加教师' }}
</el-button>
</el-card>
<!-- 搜索框 -->
<el-row class="search-row" style="margin-top: 20px;">
<!-- 搜索框和添加按钮 -->
<el-row class="toolbar" justify="space-between">
<el-col :span="8">
<el-input
v-model="searchQuery"
placeholder="搜索教师"
placeholder="请输入搜索的用户名"
clearable
size="medium"
@input="searchTeacher"
>
<template #append>
<el-button
icon="el-icon-search"
@click="searchTeacher"
size="mini"
class="search-btn"
/>
<el-button @click="searchTeacher">搜索</el-button>
</template>
</el-input>
</el-col>
</el-row>
<!-- 教师列表 -->
<el-row class="teacher-list" v-if="filteredTeachers.length > 0">
<el-table :data="filteredTeachers" style="width: 100%" stripe>
<el-table-column prop="name" label="教师姓名" width="180" />
<el-table-column prop="username" label="教师账号" width="220" />
<el-table-column label="操作" width="180">
<template #default="scope">
<el-button
@click="editTeacher(scope.row)"
type="text"
icon="el-icon-edit"
size="small"
>编辑</el-button>
<el-button
@click="deleteTeacher(scope.row.id)"
type="text"
icon="el-icon-delete"
size="small"
style="color: red;"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" @click="showAddDialog = true">添加用户</el-button>
<!-- 添加用户弹窗 -->
<el-dialog title="添加新用户" v-model="showAddDialog" width="500px" center>
<el-form :model="newTeacher" :rules="rules" ref="TeacherForm" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="newTeacher.name" placeholder="请输入姓名" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="newTeacher.email" placeholder="请输入邮箱" />
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input v-model="newTeacher.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="角色" prop="role">
<el-input v-model="newTeacher.role" placeholder="请输入角色" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch v-model="newTeacher.status" />
</el-form-item>
</el-form>
<!-- 弹窗底部按钮 -->
<template #footer>
<span>
<el-button @click="resetForm">重置</el-button>
<el-button type="primary" @click="saveTeacher">保存</el-button>
</span>
</template>
</el-dialog>
</el-row>
<el-alert
v-else
title="暂无教师账号"
type="info"
show-icon
style="margin-top: 20px;"
></el-alert>
</el-row>
<!-- 表格展示 -->
<el-table :data="filteredTeacher" style="width: 100%; margin-top: 20px;" stripe>
<!-- 序号列 -->
<el-table-column type="index" label="#" width="50" align="center" />
<el-table-column prop="name" label="姓名" width="150" />
<el-table-column prop="email" label="邮箱" width="200" />
<el-table-column prop="phone" label="手机" width="180" />
<el-table-column prop="role" label="角色" width="180" />
<!-- 状态列 -->
<el-table-column label="状态" width="120" align="center">
<template #default="scope">
<el-switch
v-model="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"
/>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" width="160" />
<!-- 操作列 -->
<el-table-column label="操作" width="200" align="center">
<template #default="scope">
<el-button
type="primary"
size="mini"
@click="editTeacher(scope.row)"
>编辑</el-button>
<el-button
type="danger"
size="mini"
@click="deleteTeacher(scope.row.id)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:total="Teacher.length"
:page-size="10"
style="margin-top: 20px; text-align: right;"
/>
</el-card>
</el-row>
</template>
<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
const Teacher = ref([
// 示例数据
{ id: 1, name: '15285', email: '14755798', phone: '185825695', role: 'ice喵喵3', status: true, createdAt: '2022-01-14' },
{ id: 2, name: 'root', email: '1060368054@qq.com', phone: '18380546544', role: 'ice喵喵3', status: false, createdAt: '2022-01-14' },
]);
const teachers = ref([]);
const newTeacher = ref({
name: '',
username: '',
});
const isEditing = ref(false);
const editingTeacherId = ref(null);
const searchQuery = ref('');
const showAddDialog = ref(false); // 控制弹窗显示
const TeacherForm = ref(); // 表单引用
const newTeacher = ref({ name: '', email: '', phone: '', role: '', status: true }); // 新用户数据
// 添加教师功能
const addTeacher = () => {
if (newTeacher.value.name && newTeacher.value.username) {
teachers.value.push({
id: Date.now(),
name: newTeacher.value.name,
username: newTeacher.value.username,
});
ElMessage.success('教师添加成功！');
resetForm();
} else {
ElMessage.error('请填写完整的教师信息！');
}
};
const currentPage = ref(1);
const pageSize = ref(10);
// 编辑教师功能
const editTeacher = (teacher) => {
newTeacher.value.name = teacher.name;
newTeacher.value.username = teacher.username;
isEditing.value = true;
editingTeacherId.value = teacher.id;
const rules = {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
role: [{ required: true, message: '请输入角色', trigger: 'blur' }],
};
// 更新教师信息
const updateTeacher = () => {
if (newTeacher.value.name && newTeacher.value.username && editingTeacherId.value) {
const index = teachers.value.findIndex(teacher => teacher.id === editingTeacherId.value);
if (index > -1) {
teachers.value[index].name = newTeacher.value.name;
teachers.value[index].username = newTeacher.value.username;
ElMessage.success('教师信息更新成功！');
// 筛选功能
const filteredTeacher = computed(() => {
if (!searchQuery.value) return Teacher.value;
return Teacher.value.filter((item) =>
item.name.includes(searchQuery.value) || item.email.includes(searchQuery.value)
);
});
// 保存新用户
const saveTeacher = () => {
TeacherForm.value.validate((valid) => {
if (valid) {
Teacher.value.push({
...newTeacher.value,
id: Date.now(),
createdAt: new Date().toISOString().split('T')[0], // 添加创建时间
});
ElMessage.success('新用户添加成功！');
resetForm();
showAddDialog.value = false;
} else {
ElMessage.error('更新失败，教师未找到！');
ElMessage.error('请填写完整的信息！');
}
} else {
ElMessage.error('请填写完整的教师信息！');
}
});
};
// 编辑用户
const editTeacher = (teacher) => {
newTeacher.value = { ...teacher }; // 复制要编辑的行数据
showAddDialog.value = true; // 打开弹窗
};
// 删除教师功能
// 删除用户
const deleteTeacher = (id) => {
const index = teachers.value.findIndex(teacher => teacher.id === id);
if (index > -1) {
teachers.value.splice(index, 1);
ElMessage.success('教师删除成功！');
} else {
ElMessage.error('删除失败，教师未找到！');
}
ElMessageBox.confirm('确认删除该用户吗？', '提示', {
type: 'warning',
}).then(() => {
Teacher.value = Teacher.value.filter((item) => item.id !== id);
ElMessage.success('用户删除成功！');
});
};
// 重置表单
const resetForm = () => {
newTeacher.value.name = '';
newTeacher.value.username = '';
isEditing.value = false;
editingTeacherId.value = null;
};
// 筛选教师列表
const filteredTeachers = computed(() => {
if (!searchQuery.value) return teachers.value;
return teachers.value.filter(teacher =>
teacher.name.includes(searchQuery.value) || teacher.username.includes(searchQuery.value)
);
});
// 搜索教师
const searchTeacher = () => {
// 搜索时会自动更新 filteredTeachers，保持列表同步
TeacherForm.value.resetFields();
newTeacher.value = { name: '', email: '', phone: '', role: '', status: true };
};
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
width: 100%;
padding: 20px;
background-color: #f4f6f9;
line-height: 20px;
}
.block-view {
display: flex;
flex-direction: column;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.top {
color: #3c3c3c;
margin-bottom: 20px;
}
.publish {
margin-bottom: 20px;
padding: 20px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-row {
margin-bottom: 20px;
}
.submit-btn {
width: 100%;
}
.search-row {
margin-top: 20px;
}
.search-btn {
margin-left: 5px;
}
.teacher-list {
margin-top: 20px;
}
.el-table {
border-radius: 8px;
overflow: hidden;
.toolbar {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.el-button {
font-size: 14px;
margin-left: 10px;
}
</style>

Write Preview
Loading…
Cancel
Save