再一次完善了学生管理界面

src/stores/educational/student/index.js

@@ -3,10 +3,10 @@ import {
   queryInfo,
   add,
   del,
+  edit,
   batchDelete,
 } from "@/api/educational/student/index";
 import { ElMessage } from "element-plus";
-import { edit } from "@/api/educational/class";
 
 export const useStudentStore = defineStore("student", {
   state: () => ({
@@ -46,7 +46,7 @@ export const useStudentStore = defineStore("student", {
           });
       });
     },
-    editClass(data) {
+    editStudent(data) {
       return new Promise((resolve, reject) => {
         edit(data)
           .then(() => {
@@ -58,7 +58,7 @@ export const useStudentStore = defineStore("student", {
           });
       });
     },
-    deleteClass(params) {
+    deleteStudent(params) {
       return new Promise((resolve, reject) => {
         del(params)
           .then(({ code }) => {
@@ -76,7 +76,7 @@ export const useStudentStore = defineStore("student", {
           });
       });
     },
-    batchDeleteClass(params) {
+    batchDeleteStudent(params) {
       return new Promise((resolve, reject) => {
         batchDelete(params)
           .then(({ code }) => {

src/views/educational/student/index.vue

@@ -1,45 +1,45 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { useStudentStore } from '@/stores/educational/student/index';
+import { ref, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useStudentStore } from "@/stores/educational/student";
+import { storeToRefs } from "pinia";
 
 const studentStore = useStudentStore();
+const {
+  tableData: studentList,
+  total,
+  pageNum,
+  pageSize,
+  loading,
+  dialogFormVisible
+} = storeToRefs(studentStore);
 
 // 数据绑定
-const studentList = computed(() => studentStore.tableData);
-const loading = computed(() => studentStore.loading);
-const pageNum = computed(() => studentStore.pageNum);
-const pageSize = computed(() => studentStore.pageSize);
-const total = computed(() => studentStore.total);
-
 const selectedIds = ref([]);
-const handleSelectionChange = (rows) => {
-  selectedIds.value = rows.map((row) => row.id);
-};
 
 // 表单控制
-const dialogFormVisible = ref(false);
-const editDialogVisible = ref(false);
+const addFormRef = ref();
+const editFormRef = ref();
 
 const newStudent = ref({
-  studentNo: '',
-  fullName: '',
+  studentNo: "",
+  fullName: "",
   sex: 1,
-  classInfoId: null,
-  phoneNumber: '',
-  description: ''
+  classInfoId: "", 
+  phoneNumber: ""
 });
 
 const editStudent = ref({});
+const editDialogVisible = ref(false);
 
 const studentRules = {
-  studentNo: [{ required: true, message: '请输入学号', trigger: 'blur' }],
-  fullName: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
+  studentNo: [{ required: true, message: "请输入学号", trigger: "blur" }],
+  fullName: [{ required: true, message: "请输入姓名", trigger: "blur" }]
 };
 
-// 初始化加载数据
-const fetchData = async () => {
-  await studentStore.queryData({ pageNum: pageNum.value, pageSize: pageSize.value });
+// 查询方法
+const fetchData = () => {
+  studentStore.queryData({ pageNum: pageNum.value, pageSize: pageSize.value });
 };
 
 onMounted(() => {
@@ -57,18 +57,52 @@ const handleCurrentChange = (val) => {
   fetchData();
 };
 
+// 表格选中改变
+const handleSelectionChange = (rows) => {
+  selectedIds.value = rows.map(row => row.id);
+};
+
 // 新增学生
 const saveStudent = async () => {
-  await studentStore.addStudent(newStudent.value);
-  dialogFormVisible.value = false;
+  try {
+    const valid = await addFormRef.value.validate();
+    if (valid) {
+      await studentStore.addStudent(newStudent.value);
+      dialogFormVisible.value = false;
+      resetNewStudent();
+    }
+  } catch (error) {
+    ElMessage.error("保存失败，请重试");
+    console.error(error);
+  }
+};
+
+const resetNewStudent = () => {
+  newStudent.value = {
+    studentNo: "",
+    fullName: "",
+    sex: 1,
+    classInfoId: "",
+    phoneNumber: ""
+  };
 };
 
 // 编辑学生
 const updateStudent = async () => {
-  await studentStore.editStudent(editStudent.value);
-  editDialogVisible.value = false;
+  try {
+    const valid = await editFormRef.value.validate();
+    if (valid) {
+      await studentStore.editStudent(editStudent.value);
+      editDialogVisible.value = false;
+      editStudent.value = {};
+    }
+  } catch (error) {
+    ElMessage.error("更新失败，请重试");
+    console.error(error);
+  }
 };
 
+// 点击“修改”按钮时触发
 const handleEdit = (row) => {
   editStudent.value = { ...row };
   editDialogVisible.value = true;
@@ -76,31 +110,45 @@ const handleEdit = (row) => {
 
 // 删除学生
 const handleDelete = async (id) => {
-  await ElMessageBox.confirm('确定要删除这个学生吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  });
+  try {
+    await ElMessageBox.confirm("确定要删除这个学生吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    });
 
-  await studentStore.deleteStudent(id);
+    await studentStore.deleteStudent(id);
+  } catch (error) {
+    if (error !== "cancel") {
+      ElMessage.error("删除失败，请重试");
+    }
+  }
 };
 
 // 批量删除
 const handleBatchDelete = async () => {
   if (selectedIds.value.length === 0) {
-    ElMessage.warning('请至少选择一条记录进行删除');
+    ElMessage.warning("请至少选择一条记录进行删除");
     return;
   }
 
-  await ElMessageBox.confirm('确定要批量删除选中的学生吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  });
+  try {
+    await ElMessageBox.confirm("确定要批量删除选中的学生吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning"
+    });
 
-  await studentStore.batchDeleteStudent(selectedIds.value);
+    await studentStore.batchDeleteStudent(selectedIds.value);
+    selectedIds.value = [];
+  } catch (error) {
+    if (error !== "cancel") {
+      ElMessage.error("批量删除失败，请重试");
+    }
+  }
 };
 </script>
+
 <template>
   <div class="data-table-container">
     <div class="search-from">
@@ -139,9 +187,8 @@ const handleBatchDelete = async () => {
               {{ row.sex === 1 ? '男' : '女' }}
             </template>
           </el-table-column>
-          <el-table-column prop="className" label="班级名称" />
+          <el-table-column prop="classInfoId" label="班级号" />
           <el-table-column prop="phoneNumber" label="手机号" />
-          <el-table-column prop="description" label="描述" show-overflow-tooltip />
           <el-table-column fixed="right" label="操作" min-width="80">
             <template #default="{ row }">
               <el-button link type="primary" size="small" @click="handleDelete(row.id)">
@@ -184,14 +231,11 @@ const handleBatchDelete = async () => {
         </el-select>
       </el-form-item>
       <el-form-item label="所属班级" prop="classInfoId">
-          <el-input v-model="newStudent.className" placeholder="请输入班级名称，例如：1001" />
+        <el-input v-model="newStudent.classInfoId" placeholder="请输入班级号，例如：1001" />
       </el-form-item>
       <el-form-item label="手机号" prop="phoneNumber">
         <el-input v-model="newStudent.phoneNumber" placeholder="请输入手机号" />
       </el-form-item>
-      <el-form-item label="描述" prop="description">
-        <el-input v-model="newStudent.description" type="textarea" :rows="3" />
-      </el-form-item>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -217,21 +261,11 @@ const handleBatchDelete = async () => {
         </el-select>
       </el-form-item>
       <el-form-item label="所属班级" prop="classInfoId">
-        <el-select v-model="editStudent.classInfoId" placeholder="请选择班级">
-          <el-option
-            v-for="cls in classOptions"
-            :key="cls.id"
-            :label="cls.classNo + ' - ' + cls.teacherFullName"
-            :value="cls.id"
-          />
-        </el-select>
+        <el-input v-model="editStudent.classInfoId" placeholder="请输入班级号，例如：1001" />
       </el-form-item>
       <el-form-item label="手机号" prop="phoneNumber">
         <el-input v-model="editStudent.phoneNumber" placeholder="请输入手机号" />
       </el-form-item>
-      <el-form-item label="描述" prop="description">
-        <el-input v-model="editStudent.description" type="textarea" :rows="3" />
-      </el-form-item>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -242,6 +276,8 @@ const handleBatchDelete = async () => {
   </el-dialog>
 </template>
 
+
+
 <style scoped lang="less">
 .data-table-container {
   display: flex;