From f8be43ef0afad914ecd17d9b78981d916aea703b Mon Sep 17 00:00:00 2001
From: yzb <3294956026@qq.com>
Date: Thu, 19 Dec 2024 01:02:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/view/user/student.vue | 329 +++++++++++++-----------------
 admin/src/view/user/teacher.vue | 342 +++++++++++++++-----------------
 2 files changed, 295 insertions(+), 376 deletions(-)

diff --git a/admin/src/view/user/student.vue b/admin/src/view/user/student.vue
index b612a51..4c4a003 100644
--- a/admin/src/view/user/student.vue
+++ b/admin/src/view/user/student.vue
@@ -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>
+
diff --git a/admin/src/view/user/teacher.vue b/admin/src/view/user/teacher.vue
index e9d96c3..9706de8 100644
--- a/admin/src/view/user/teacher.vue
+++ b/admin/src/view/user/teacher.vue
@@ -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>
 
-