Jelajahi Sumber

完善了学生管理界面

Bsheng123 5 bulan lalu
induk
melakukan
b17ebe28a5

+ 46 - 0
src/api/educational/student/index.js

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

+ 98 - 0
src/stores/educational/student/index.js

@@ -0,0 +1,98 @@
+import { defineStore } from "pinia";
+import {
+  queryInfo,
+  add,
+  del,
+  batchDelete,
+} from "@/api/educational/student/index";
+import { ElMessage } from "element-plus";
+import { edit } from "@/api/educational/class";
+
+export const useStudentStore = defineStore("student", {
+  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;
+      }
+    },
+    addStudent(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);
+          });
+      });
+    },
+  },
+});

+ 104 - 106
src/views/educational/student/index.vue

@@ -1,3 +1,106 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useStudentStore } from '@/stores/educational/student/index';
+
+const studentStore = useStudentStore();
+
+// 数据绑定
+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 newStudent = ref({
+  studentNo: '',
+  fullName: '',
+  sex: 1,
+  classInfoId: null,
+  phoneNumber: '',
+  description: ''
+});
+
+const editStudent = ref({});
+
+const studentRules = {
+  studentNo: [{ required: true, message: '请输入学号', trigger: 'blur' }],
+  fullName: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
+};
+
+// 初始化加载数据
+const fetchData = async () => {
+  await studentStore.queryData({ pageNum: pageNum.value, pageSize: pageSize.value });
+};
+
+onMounted(() => {
+  fetchData();
+});
+
+// 分页事件
+const handleSizeChange = (val) => {
+  studentStore.pageSize = val;
+  fetchData();
+};
+
+const handleCurrentChange = (val) => {
+  studentStore.pageNum = val;
+  fetchData();
+};
+
+// 新增学生
+const saveStudent = async () => {
+  await studentStore.addStudent(newStudent.value);
+  dialogFormVisible.value = false;
+};
+
+// 编辑学生
+const updateStudent = async () => {
+  await studentStore.editStudent(editStudent.value);
+  editDialogVisible.value = false;
+};
+
+const handleEdit = (row) => {
+  editStudent.value = { ...row };
+  editDialogVisible.value = true;
+};
+
+// 删除学生
+const handleDelete = async (id) => {
+  await ElMessageBox.confirm('确定要删除这个学生吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  });
+
+  await studentStore.deleteStudent(id);
+};
+
+// 批量删除
+const handleBatchDelete = async () => {
+  if (selectedIds.value.length === 0) {
+    ElMessage.warning('请至少选择一条记录进行删除');
+    return;
+  }
+
+  await ElMessageBox.confirm('确定要批量删除选中的学生吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  });
+
+  await studentStore.batchDeleteStudent(selectedIds.value);
+};
+</script>
 <template>
   <div class="data-table-container">
     <div class="search-from">
@@ -81,14 +184,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="所属班级" prop="classInfoId">
-        <el-select v-model="newStudent.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="newStudent.className" placeholder="请输入班级名称,例如:1001" />
       </el-form-item>
       <el-form-item label="手机号" prop="phoneNumber">
         <el-input v-model="newStudent.phoneNumber" placeholder="请输入手机号" />
@@ -146,104 +242,6 @@
   </el-dialog>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-
-const loading = ref(false);
-const pageNum = ref(1);
-const pageSize = ref(10);
-const total = ref(100);
-
-const studentList = ref([
-  {
-    id: 1,
-    studentNo: 'S2023001',
-    fullName: '李明',
-    sex: 1,
-    className: 'C1001',
-    phoneNumber: '13812345678',
-    description: '优秀学生'
-  }
-]);
-
-const classOptions = ref([
-  { id: 1, classNo: 'C1001', teacherFullName: '张老师' }
-]);
-
-const selectedIds = ref([]);
-
-const handleSelectionChange = (rows) => {
-  selectedIds.value = rows.map(row => row.id);
-};
-
-const dialogFormVisible = ref(false);
-const editDialogVisible = ref(false);
-
-const newStudent = ref({
-  studentNo: '',
-  fullName: '',
-  sex: 1,
-  classInfoId: null,
-  phoneNumber: '',
-  description: ''
-});
-
-const editStudent = ref({});
-
-const studentRules = {
-  studentNo: [{ required: true, message: '请输入学号', trigger: 'blur' }],
-  fullName: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
-};
-
-const saveStudent = () => {
-  console.log('新增学生:', newStudent.value);
-  dialogFormVisible.value = false;
-};
-
-const updateStudent = () => {
-  console.log('更新学生:', editStudent.value);
-  editDialogVisible.value = false;
-};
-
-const handleEdit = (row) => {
-  editStudent.value = { ...row };
-  editDialogVisible.value = true;
-};
-
-const handleDelete = (id) => {
-  ElMessageBox.confirm('确定要删除这个学生吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    console.log('删除学生ID:', id);
-  });
-};
-
-const handleBatchDelete = () => {
-  if (selectedIds.value.length === 0) {
-    ElMessage.warning('请至少选择一条记录进行删除');
-    return;
-  }
-  ElMessageBox.confirm('确定要批量删除选中的学生吗?', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    console.log('批量删除学生ID:', selectedIds.value);
-  });
-};
-
-const handleSizeChange = (val) => {
-  pageSize.value = val;
-};
-
-const handleCurrentChange = (val) => {
-  pageNum.value = val;
-};
-</script>
-
 <style scoped lang="less">
 .data-table-container {
   display: flex;