基本完成班级管理前端页面，但还剩一些错误

src/api/educational/class/index.js

@@ -0,0 +1,46 @@
+import service from "@/utils/http";
+export function queryInfo(params) {
+  return service.request({
+    url: "api/v1/educational/classInfo/queryInfo",
+    method: "get",
+    params,
+  });
+}
+export function add(data) {
+  return service.request({
+    url: "api/v1/educational/classInfo/add",
+    method: "post",
+    data,
+    headers: { "Content-Type": "application/json;charset=UTF-8" },
+  });
+}
+export function edit(data) {
+  return service.request({
+    url: "api/v1/educational/classInfo/edit",
+    method: "put",
+    data,
+    headers: { "Content-Type": "application/json;charset=UTF-8" },
+  });
+}
+export function del(params) {
+  return service.request({
+    url: "api/v1/educational/classInfo/delete/" + params,
+    method: "delete",
+    params: {},
+  });
+}
+export function batchDelete(params) {
+  return service.request({
+    url: "api/v1/educational/classInfo/batchDelete",
+    method: "delete",
+    data: params,
+    headers: { "Content-Type": "application/json;charset=UTF-8" },
+  });
+}
+export function getInfo(val) {
+  return service.request({
+    url: "api/v1/educational/classInfo/detail?classInfoId=" + val,
+    method: "get",
+    params: {},
+  });
+}

src/stores/educational/class/index.js

@@ -0,0 +1,97 @@
+import { defineStore } from "pinia";
+import {
+  queryInfo,
+  add,
+  edit,
+  del,
+  batchDelete,
+} from "@/api/educational/class/index";
+import { ElMessage } from "element-plus";
+export const useClassStore = defineStore("class", {
+  state: () => ({
+    tableData: [],
+    total: 0,
+    pageNum: 1,
+    pageSize: 10,
+    loading: false,
+    dialogFormVisible: false,
+  }),
+  actions: {
+    async queryData(params) {
+      this.loading = true;
+      try {
+        const { data } = await queryInfo(params);
+        this.tableData = data.list;
+        this.total = data.total;
+      } finally {
+        this.loading = false;
+      }
+    },
+    addClass(data) {
+      return new Promise((resolve, reject) => {
+        add(data)
+          .then(({ code }) => {
+            if (code === 200) {
+              ElMessage.success("班级添加成功");
+              this.queryData({
+                pageNum: this.pageNum,
+                pageSize: this.pageSize,
+              });
+              resolve();
+            }
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    editClass(data) {
+      return new Promise((resolve, reject) => {
+        edit(data)
+          .then(() => {
+            this.queryData({ pageNum: this.pageNum, pageSize: this.pageSize });
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    deleteClass(params) {
+      return new Promise((resolve, reject) => {
+        del(params)
+          .then(({ code }) => {
+            if (code == 200) {
+              ElMessage.success("批量删除成功");
+              this.queryData({
+                pageNum: this.pageNum,
+                pageSize: this.pageSize,
+              });
+            }
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+    batchDeleteClass(params) {
+      return new Promise((resolve, reject) => {
+        batchDelete(params)
+          .then(({ code }) => {
+            if (code == 200) {
+              ElMessage.success("批量删除成功");
+              this.queryData({
+                pageNum: this.pageNum,
+                pageSize: this.pageSize,
+              });
+            }
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
+    },
+  },
+});

src/views/educational/class/index.vue

@@ -18,7 +18,7 @@
           border
           fit
           stripe
-          :data="classList"
+          :data="tableData"
           style="width: 100%"
           max-height="600"
           v-loading="loading"
@@ -62,7 +62,7 @@
   </div>
 
   <!-- 新增班级对话框 -->
-  <el-dialog v-model="dialogFormVisible" title="新增班级" width="600" center>
+  <el-dialog v-model="classStore.dialogFormVisible" title="新增班级" width="600" center>
     <el-form ref="addFormRef" :model="newClass" :rules="classRules">
       <el-form-item label="班级号" prop="classNo">
         <el-input v-model="newClass.classNo" placeholder="请输入班级号" />
@@ -85,14 +85,14 @@
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button @click="classStore.dialogFormVisible = false">取消</el-button>
         <el-button type="primary" @click="saveClass">确定</el-button>
       </div>
     </template>
   </el-dialog>
 
   <!-- 编辑班级对话框 -->
-  <el-dialog v-model="editDialogVisible" title="编辑班级" width="600" center>
+  <el-dialog v-model="classStore.dialogEditFormVisible" title="编辑班级" width="600" center>
     <el-form ref="editFormRef" :model="editClass" :rules="classRules">
       <el-form-item label="班级号" prop="classNo">
         <el-input v-model="editClass.classNo" placeholder="请输入班级号" />
@@ -115,7 +115,7 @@
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button @click="classStore.dialogEditFormVisible = false">取消</el-button>
         <el-button type="primary" @click="updateClass">保存</el-button>
       </div>
     </template>
@@ -123,35 +123,23 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus';
+import { useClassStore } from '@/stores/educational/class';
+import { storeToRefs } from 'pinia';
 
-const loading = ref(false);
-const pageNum = ref(1);
-const pageSize = ref(10);
-const total = ref(100);
-
-const classList = ref([
-  {
-    id: 1,
-    classNo: 'C1001',
-    teacherFullName: '张老师',
-    majorName: '计算机科学',
-    collegeId: 101,
-    enrollmentYear: '2023',
-    description: '三年制班'
-  }
-]);
-
-const selectedIds = ref([]);
-
-const handleSelectionChange = (rows) => {
-  selectedIds.value = rows.map(row => row.id);
-};
-
-const dialogFormVisible = ref(false);
-const editDialogVisible = ref(false);
+const classStore = useClassStore();
+const {
+  tableData,
+  total,
+  pageNum,
+  pageSize,
+  loading,
+  dialogFormVisible,
+  dialogEditFormVisible
+} = storeToRefs(classStore);
 
+// 新增类变量管理
 const newClass = ref({
   classNo: '',
   teacherFullName: '',
@@ -161,59 +149,119 @@ const newClass = ref({
   description: ''
 });
 
+// 编辑类变量管理
 const editClass = ref({});
 
-const classRules = {
-  classNo: [{ required: true, message: '请输入班级号', trigger: 'blur' }],
-  teacherFullName: [{ required: true, message: '请输入班主任姓名', trigger: 'blur' }],
-  majorName: [{ required: true, message: '请输入所属专业', trigger: 'blur' }]
+const selectedIds = ref([]);
+
+// 查询方法
+const queryFunction = () => {
+  classStore.queryData({
+    pageNum: pageNum.value,
+    pageSize: pageSize.value
+  });
+};
+
+onMounted(() => {
+  queryFunction();
+});
+
+// 分页
+const handleSizeChange = (val) => {
+  classStore.pageSize = val;
+  queryFunction();
 };
 
-const saveClass = () => {
-  console.log('新增班级:', newClass.value);
-  dialogFormVisible.value = false;
+const handleCurrentChange = (val) => {
+  classStore.pageNum = val;
+  queryFunction();
 };
 
-const updateClass = () => {
-  console.log('更新班级:', editClass.value);
-  editDialogVisible.value = false;
+// 表格选中改变
+const handleSelectionChange = (rows) => {
+  selectedIds.value = rows.map(row => row.id);
 };
 
+// 编辑点击事件
 const handleEdit = (row) => {
   editClass.value = { ...row };
-  editDialogVisible.value = true;
+  classStore.dialogEditFormVisible = true;
 };
 
-const handleDelete = (id) => {
-  ElMessageBox.confirm('确定要删除这个班级吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    console.log('删除班级ID:', id);
-  });
+// 保存新增班级
+const addFormRef = ref();
+
+const saveClass = async () => {
+  try {
+    const valid = await addFormRef.value.validate();
+    if (valid) {
+      await classStore.saveClass(newClass.value);
+      classStore.dialogFormVisible = false;
+      newClass.value = {
+        classNo: '',
+        teacherFullName: '',
+        majorName: '',
+        collegeId: null,
+        enrollmentYear: '',
+        description: ''
+      };
+    }
+  } catch (error) {
+    ElMessage.error('保存班级失败，请重试');
+  }
 };
 
-const handleBatchDelete = () => {
-  if (selectedIds.value.length === 0) {
-    ElMessage.warning('请至少选择一条记录进行删除');
-    return;
+// 更新班级
+const editFormRef = ref();
+
+const updateClass = async () => {
+  try {
+    const valid = await editFormRef.value.validate();
+    if (valid) {
+      await classStore.updateClass(editClass.value);
+      classStore.dialogEditFormVisible = false;
+      editClass.value = {};
+    }
+  } catch (error) {
+    ElMessage.error('更新班级失败，请重试');
   }
-  ElMessageBox.confirm('确定要批量删除选中的班级吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    console.log('批量删除班级ID:', selectedIds.value);
-  });
 };
 
-const handleSizeChange = (val) => {
-  pageSize.value = val;
+// 删除班级
+const handleDelete = async (id) => {
+  try {
+    await ElMessageBox.confirm('确定要删除这条记录吗？', '警告', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+    await classStore.deleteClass(id);
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('删除失败，请重试');
+    }
+  }
 };
 
-const handleCurrentChange = (val) => {
-  pageNum.value = val;
+// 批量删除
+const handleBatchDelete = async () => {
+  if (selectedIds.value.length === 0) {
+    ElMessage.warning('请至少选择一条记录进行删除');
+    return;
+  }
+
+  try {
+    await ElMessageBox.confirm('确定要批量删除选中的记录吗？', '警告', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning'
+    });
+    await classStore.batchDelete(selectedIds.value);
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('批量删除失败，请重试');
+    }
+  }
 };
 </script>