Merge branch 'dev' of https://gitea.dykj.co/sundongyu/dykj-college-back-office-management-system into dev

mock/modules/lcz.js

@@ -26,6 +26,47 @@ const student =  Mock.mock({
       }
     }
   },
+  {
+    url: '/api-updateStudent',
+    method: 'post',
+    response: (req) => {
+      if (req.body.name !== '') {
+        return student.list.filter(item => item.name.includes(req.body.name))
+      }
+      else if (req.body.studentId !== '') {
+        const studentId = Number(req.body.studentId)
+        if (!isNaN(studentId)) {
+          return student.list.filter(item => item.studentId === studentId)
+        } else {
+          return {
+            code: 400,
+            message: 'Invalid student number format'
+          }
+        }
+      }
+      else if (req.body.name !== '') {
+        return student.list.filter(item => item.name.includes(req.body.name))
+      }
+      else if (req.body.gender !== '') {
+        return student.list.filter(item => item.gender.includes(req.body.gender))
+      }
+      else if (req.body.department !== '') {
+        return student.list.filter(item => item.grade.includes(req.body.department))
+      }
+      else if (req.body.major !== '') {
+        return student.list.filter(item => item.major.includes(req.body.major))
+      }
+      else if (req.body.classes !== '') {
+        return student.list.filter(item => item.classes.includes(req.body.classes))
+      }
+      else if (req.body.status !== '') {
+        return student.list.filter(item => item.major.includes(req.body.status))
+      }
+      return {
+        code: 200,
+      }
+    }
+  },
   {
     url: '/api-student',
     method: 'post',

src/api/students.js

@@ -6,3 +6,7 @@ export function getList() {
 export function getStudents(studentData) {
   return request.post('/api-student', studentData)
 }
+
+export function updateStudent(updateStudent) {
+  return request.post('/api-updateStudent', updateStudent)
+}

src/pages/students/student.vue

@@ -22,17 +22,30 @@
               </t-form-item>
             </t-col>
             <t-col :push="2" :span="4">
-           <t-button theme="primary" type="submit"
+              <t-button theme="primary" type="submit">查询</t-button>
-                >查询</t-button
+              <t-button
-                >
+                theme="default"
-                <t-button theme="default" variant="base" type="reset"
+                variant="base"
-                  style="margin-left: 1rem;">重置</t-button
+                type="reset"
+                style="margin-left: 1rem"
+                >重置</t-button
               >
             </t-col>
           </t-row>
         </t-form>
       </t-header>
       <t-content class="table-box">
+        <div class="table-header">
+          <div>
+            <h4 style="font-size: 110%">学生列表</h4>
+          </div>
+          <div>
+            <t-button theme="primary" size="small" style="margin-right:2.5rem" @click="onAddSubmit">
+              <template #icon><add-icon /></template>
+              增加学员信息
+            </t-button>
+          </div>
+        </div>
         <t-table
           rowKey="Id"
           :data="studentList"
@@ -59,10 +72,7 @@
               @click="Modify(row)"
               >修改</t-button
             >
-            <t-popconfirm
+            <t-popconfirm content="确认删除吗" @confirm="Delete(row)">
-              content="确认删除吗"
-              @confirm="Delete(row)"
-            >
               <t-button theme="default" variant="text" size="small"
                 >删除</t-button
               >
@@ -71,46 +81,66 @@
         </t-table>
       </t-content>
     </t-layout>
+
     <t-space>
       <t-dialog
-        ref="postForm"
         v-model="visible"
         header="学生变动处理"
         width="40%"
+        :confirm-on-enter="true"
         :on-cancel="onCancel"
+        :on-esc-keydown="onEscKeydown"
         :on-close-btn-click="onCloseBtnClick"
+        :on-overlay-click="onOverlayClick"
+        :on-close="close"
         :on-confirm="onConfirmAnother"
-        :close-on-overlay-click="false"
+        ref="postForm"
       >
         <t-space direction="vertical" style="width: 100%">
           <div>
             <t-form
               ref="form"
-                :data="formData"
+              :data="dialogData"
               reset-type="initial"
               colon
               @reset="onReset"
             >
               <t-form-item label="姓名" name="name">
-                  <t-input v-model="formData.name"></t-input>
+                <t-input v-model="dialogData.name"></t-input>
               </t-form-item>
               <t-form-item label="性别" name="gender">
-                  <t-input v-model="formData.gender"></t-input>
+                <t-input v-model="dialogData.gender"></t-input>
               </t-form-item>
               <t-form-item label="学号" name="studentId">
-                  <t-input v-model="formData.studentId"></t-input>
+                <t-input v-model="dialogData.studentId"></t-input>
               </t-form-item>
               <t-form-item label="系院" name="department">
-                  <t-input v-model="formData.department"></t-input>
+                <t-input v-model="dialogData.department"></t-input>
               </t-form-item>
               <t-form-item label="专业" name="major">
-                  <t-input v-model="formData.major"></t-input>
+                <t-input v-model="dialogData.major"></t-input>
               </t-form-item>
               <t-form-item label="班级" name="classes">
-                  <t-input v-model="formData.classes"></t-input>
+                <t-input v-model="dialogData.classes"></t-input>
               </t-form-item>
-                <t-form-item label="状态" name="status">
+              <t-form-item
-                  <t-input v-model="formData.status"></t-input>
+                label="状态"
+                name="status"
+                :span="12"
+                style="width: 16rem; margin-bottom: 0.5rem"
+              >
+                <t-select
+                  v-model="dialogData.status"
+                  clearable
+                  placeholder="请选择状态"
+                >
+                  <t-option
+                    v-for="item in status"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </t-select>
               </t-form-item>
             </t-form>
           </div>
@@ -118,12 +148,77 @@
       </t-dialog>
     </t-space>
 
+    <!-- <t-space>
+      <t-dialog
+        v-model:visible="visible"
+        header="新增学生信息"
+        width="40%"
+        :confirm-on-enter="true"
+        :on-cancel="onCancel"
+        :on-esc-keydown="onEscKeydown"
+        :on-close-btn-click="onCloseBtnClick"
+        :on-overlay-click="onOverlayClick"
+        :on-close="close"
+        :on-confirm="onConfirmAnother"
+        ref="postForm"
+      >
+        <t-space direction="vertical" style="width: 100%">
+          <div>
+            <t-form
+              ref="form"
+              :data="AddDialogData"
+              reset-type="initial"
+              colon
+              @reset="onReset"
+            >
+              <t-form-item label="姓名" name="name">
+                <t-input v-model="AddDialogData.name"></t-input>
+              </t-form-item>
+              <t-form-item label="性别" name="gender">
+                <t-input v-model="AddDialogData.gender"></t-input>
+              </t-form-item>
+              <t-form-item label="学号" name="studentId">
+                <t-input v-model="AddDialogData.studentId"></t-input>
+              </t-form-item>
+              <t-form-item label="系院" name="department">
+                <t-input v-model="AddDialogData.department"></t-input>
+              </t-form-item>
+              <t-form-item label="专业" name="major">
+                <t-input v-model="AddDialogData.major"></t-input>
+              </t-form-item>
+              <t-form-item label="班级" name="classes">
+                <t-input v-model="AddDialogData.classes"></t-input>
+              </t-form-item>
+              <t-form-item
+                label="状态"
+                name="status"
+                :span="12"
+                style="width: 16rem; margin-bottom: 0.5rem"
+              >
+                <t-select
+                  v-model="AddDialogData.status"
+                  clearable
+                  placeholder="请选择状态"
+                >
+                  <t-option
+                    v-for="item in status"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </t-select>
+              </t-form-item>
+            </t-form>
+          </div>
+        </t-space>
+      </t-dialog>
+    </t-space> -->
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, computed, onMounted } from "vue";
-import {getList, getStudents } from "@/api/students";
+import { getList, getStudents, updateStudent } from "@/api/students";
 import { MessagePlugin } from "tdesign-vue-next";
 import { useRouter } from "vue-router";
 // import { reqStudent } from "@/api/students";
@@ -142,7 +237,7 @@ const studentData = reactive({
 });
 
 // 弹出框表单
-const formData = ref({
+const dialogData = ref({
   name: "",
   gender: "",
   studentId: "",
@@ -150,8 +245,19 @@ const formData = ref({
   major: "",
   classes: "",
   status: "",
-})
+});
-const visible = ref(true)
+
+// const AddDialogData = ref({
+//   name: "",
+//   gender: "",
+//   studentId: "",
+//   department: "",
+//   major: "",
+//   classes: "",
+//   status: "",
+// });
+
+const visible = ref(false);
 const studentList = ref([]);
 
 const studentColumns = ref([
@@ -190,7 +296,7 @@ const studentColumns = ref([
   {
     colKey: "operation",
     title: "操作",
-    align: "center"
+    align: "center",
   },
 ]);
 
@@ -223,27 +329,32 @@ const onSubmit = async () => {
 
 //表单重置
 const onReset = () => {
-  TableData()
+  TableData();
-}
+};
+
+const status = ref([
+  { label: "休学", value: 0 },
+  { label: "退学", value: 1 },
+  { label: "复学", value: 2 },
+]);
 
 //获取表格数据
 const TableData = async () => {
-  const res = await getList()
+  const res = await getList();
   // console.log(res);
-  studentList.value = res.data.list
+  studentList.value = res.data.list;
-  pagination.total = res.data.list.length
+  pagination.total = res.data.list.length;
-}
+};
-console.log(TableData.name);
 
 onMounted(() => {
-  TableData()
+  TableData();
-})
+});
 
 // 修改学生状态
-const Modify = row => {
+const Modify = (row) => {
-  conlose.log(1)
+  console.log("点击了确认按钮，弹出弹窗", row);
   visible.value = true;
-  formData.value = {
+  dialogData.value = {
     name: row.name,
     gender: row.gender,
     studentId: row.studentId,
@@ -254,16 +365,85 @@ const Modify = row => {
   };
 };
 
+// const onConfirmAnother = async () => {
+//   console.log("点击了确认按钮", );
+//   visible.value = false;
+//   await updateStudent(dialogData.value)
+
+// };
 const onConfirmAnother = async () => {
+  console.log("点击了确认按钮");
+  // 准备要更新的数据
+  const studentId = dialogData.value.studentId;
+  // 调用更新学生信息的接口
   try {
-    // 这里假设存在一个更新学生信息的API方法，例如updateStudent
+    const response = await updateStudent({ ...dialogData.value, studentId });
-    await updateStudent(formData.value);
+    // 检查接口返回结果是否成功
-    // 更新成功后，关闭弹窗并重新加载表格数据
+    if (response.success) {
-    visible.value = false;
+      // 同步更新表格数据（这部分逻辑已在之前的解答中给出）
-    TableData();
+      const index = studentList.value.findIndex(
-  } catch (error) {
+        (stu) => stu.studentId === studentId
-    console.error('更新学生信息失败:', error);
+      );
+      if (index !== -1) {
+        studentList.value.splice(index, 1, dialogData.value);
       }
+
+      MessagePlugin.success("学生信息更新成功");
+    } else {
+      MessagePlugin.error(response.message || "学生信息更新失败");
+    }
+  } catch (error) {
+    console.error("更新学生信息时发生错误", error);
+    MessagePlugin.error("学生信息更新失败");
+  }
+  // 关闭对话框
+  visible.value = false;
+};
+
+const Delete = async (row) => {
+  try {
+    // 调用删除学生的API，这里假设后端接口名为deleteStudent，且需要学生ID作为参数
+    const response = await deleteStudent(row.studentId);
+
+    if (response.success) {
+      // 删除表格数据中对应的学生记录
+      const index = studentList.value.findIndex((stu) => stu.studentId === row.studentId);
+      if (index !== -1) {
+        studentList.value.splice(index, 1);
+      }
+
+      pagination.total -= 1;
+
+      // 提示删除成功
+      MessagePlugin.success('学生信息删除成功');
+    } else {
+      // 提示删除失败
+      MessagePlugin.error(response.message || '学生信息删除失败');
+    }
+  } catch (error) {
+    console.error('删除学生信息时发生错误', error);
+    MessagePlugin.error('学生信息删除失败');
+  }
+};
+
+const onAddSubmit = () =>{
+  console.log("点击新增");
+  visible.value = true;
+}
+const close = (context) => {
+  console.log("关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发", context);
+};
+const onCancel = (context) => {
+  console.log("点击了取消按钮", context);
+};
+const onEscKeydown = (context) => {
+  console.log("按下了ESC", context);
+};
+const onCloseBtnClick = (context) => {
+  console.log("点击了关闭按钮", context);
+};
+const onOverlayClick = (context) => {
+  console.log("点击了蒙层", context);
 };
 </script>