stu

mock/modules/lcz.js

@@ -1,70 +1,111 @@
 import Mock from "mockjs"
 
-const student =  Mock.mock({
-    "list|100": [
-      {
-        "Id|+1": 1,
-        "name": "@cname",
-        "gender":`@pick(['男', '女'])`,
-        "studentId": "@integer(1000000000,9999999999)",
-        "department":`@pick(['机电工程系', '护理分院','建筑系','材料科学与工程系','环境科学与工程系'])`,
-        "major":`@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`,
-        "classes":`@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`,
-        "status":`@pick(['休学', '退学', '复学'])`,
-      },
-    ],
-  });
-
-  export default [
+const student = Mock.mock({
+  "list|100": [
     {
-      url:'/api-list',
-      method:'get',
-      response: () => {
-        return {
-          code: 200,
-          data: student
-        }
-      }
+      "Id|+1": 1,
+      "name": "@cname",
+      "gender": `@pick(['男', '女'])`,
+      "studentId": "@integer(1000000000,9999999999)",
+      "department": `@pick(['机电工程系', '护理分院','建筑系','材料科学与工程系','环境科学与工程系'])`,
+      "major": `@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`,
+      "classes": `@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`,
+      "status": `@pick(['休学', '退学', '复学'])`,
     },
-    {
-      url: '/api-student',
-      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,
-        }
+  ],
+});
+
+export default [
+  {
+    url: '/api-list',
+    method: 'get',
+    response: () => {
+      return {
+        code: 200,
+        data: student
       }
     }
-  ]
+  },
+  {
+    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',
+    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,
+      }
+    }
+  }
+]

src/api/students.js

@@ -5,4 +5,8 @@ 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

@@ -2,56 +2,69 @@
   <div class="back-color">
     <t-layout style="height: 90%; background-color: #f5f7fb">
       <t-header class="scarch-box">
-      <t-form
-        ref="form"
-        :data="studentData"
-        reset-type="initial"
-        colon
-        @reset="onReset"
-        @submit="onSubmit"
-      >
-        <t-row  class="scarch-from">
-          <t-col :span="3">
-            <t-form-item label="姓名" name="name">
-              <t-input v-model="studentData.name"></t-input>
-            </t-form-item>
-          </t-col>
-          <t-col :span="3">
-            <t-form-item label="学号" name="studentId">
-              <t-input v-model="studentData.studentId"></t-input>
-            </t-form-item>
-          </t-col>
-          <t-col :push="2" :span="4">
-           <t-button theme="primary" type="submit"
-                >查询</t-button
-                >
-                <t-button theme="default" variant="base" type="reset"
-                  style="margin-left: 1rem;">重置</t-button
-                >
-          </t-col>
-        </t-row>
-      </t-form>
-    </t-header>
-    <t-content class="table-box">
-      <t-table
-        rowKey="Id"
-        :data="studentList"
-        :columns="studentColumns"
-        :stripe="stripe"
-        :bordered="bordered"
-        :hover="true"
-        :size="size"
-        :table-layout="tableLayout ? 'auto' : 'fixed'"
-        :pagination="pagination"
-        :showHeader="true"
-        cellEmptyContent="-"
-        resizable
-        lazy-load
-        @row-click="handleRowClick"
-        @page-change="onPageChange"
-        :loading="loading"
-      >
-      <template #operation="{ row }">
+        <t-form
+          ref="form"
+          :data="studentData"
+          reset-type="initial"
+          colon
+          @reset="onReset"
+          @submit="onSubmit"
+        >
+          <t-row class="scarch-from">
+            <t-col :span="3">
+              <t-form-item label="姓名" name="name">
+                <t-input v-model="studentData.name"></t-input>
+              </t-form-item>
+            </t-col>
+            <t-col :span="3">
+              <t-form-item label="学号" name="studentId">
+                <t-input v-model="studentData.studentId"></t-input>
+              </t-form-item>
+            </t-col>
+            <t-col :push="2" :span="4">
+              <t-button theme="primary" type="submit">查询</t-button>
+              <t-button
+                theme="default"
+                variant="base"
+                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"
+          :columns="studentColumns"
+          :stripe="stripe"
+          :bordered="bordered"
+          :hover="true"
+          :size="size"
+          :table-layout="tableLayout ? 'auto' : 'fixed'"
+          :pagination="pagination"
+          :showHeader="true"
+          cellEmptyContent="-"
+          resizable
+          lazy-load
+          @row-click="handleRowClick"
+          @page-change="onPageChange"
+          :loading="loading"
+        >
+          <template #operation="{ row }">
             <t-button
               theme="default"
               variant="text"
@@ -59,71 +72,153 @@
               @click="Modify(row)"
               >修改</t-button
             >
-            <t-popconfirm
-              content="确认删除吗"
-              @confirm="Delete(row)"
-            >
+            <t-popconfirm content="确认删除吗" @confirm="Delete(row)">
               <t-button theme="default" variant="text" size="small"
                 >删除</t-button
               >
             </t-popconfirm>
           </template>
-      </t-table>
-    </t-content>
+        </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"
-                reset-type="initial"
-                colon
-                @reset="onReset"
+              :data="dialogData"
+              reset-type="initial"
+              colon
+              @reset="onReset"
             >
-            <t-form-item label="姓名" name="name">
-                  <t-input v-model="formData.name"></t-input>
-                </t-form-item>
-                <t-form-item label="性别" name="gender">
-                  <t-input v-model="formData.gender"></t-input>
-                </t-form-item>
-                <t-form-item label="学号" name="studentId">
-                  <t-input v-model="formData.studentId"></t-input>
-                </t-form-item>
-                <t-form-item label="系院" name="department">
-                  <t-input v-model="formData.department"></t-input>
-                </t-form-item>
-                <t-form-item label="专业" name="major">
-                  <t-input v-model="formData.major"></t-input>
-                </t-form-item>
-                <t-form-item label="班级" name="classes">
-                  <t-input v-model="formData.classes"></t-input>
-                </t-form-item>
-                <t-form-item label="状态" name="status">
-                  <t-input v-model="formData.status"></t-input>
-                </t-form-item>
+              <t-form-item label="姓名" name="name">
+                <t-input v-model="dialogData.name"></t-input>
+              </t-form-item>
+              <t-form-item label="性别" name="gender">
+                <t-input v-model="dialogData.gender"></t-input>
+              </t-form-item>
+              <t-form-item label="学号" name="studentId">
+                <t-input v-model="dialogData.studentId"></t-input>
+              </t-form-item>
+              <t-form-item label="系院" name="department">
+                <t-input v-model="dialogData.department"></t-input>
+              </t-form-item>
+              <t-form-item label="专业" name="major">
+                <t-input v-model="dialogData.major"></t-input>
+              </t-form-item>
+              <t-form-item label="班级" name="classes">
+                <t-input v-model="dialogData.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="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>
         </t-space>
       </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";
@@ -131,7 +226,7 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 const studentData = reactive({
-  Id:"",
+  Id: "",
   name: "",
   gender: "",
   studentId: "",
@@ -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
-  pagination.total = res.data.list.length
-}
-console.log(TableData.name);
+  studentList.value = res.data.list;
+  pagination.total = res.data.list.length;
+};
 
 onMounted(() => {
-  TableData()
-})
+  TableData();
+});
 
 // 修改学生状态
-const Modify = row => {
-  conlose.log(1)
+const Modify = (row) => {
+  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
-    await updateStudent(formData.value);
-    // 更新成功后，关闭弹窗并重新加载表格数据
-    visible.value = false;
-    TableData();
+    const response = await updateStudent({ ...dialogData.value, studentId });
+    // 检查接口返回结果是否成功
+    if (response.success) {
+      // 同步更新表格数据（这部分逻辑已在之前的解答中给出）
+      const index = studentList.value.findIndex(
+        (stu) => stu.studentId === studentId
+      );
+      if (index !== -1) {
+        studentList.value.splice(index, 1, dialogData.value);
+      }
+
+      MessagePlugin.success("学生信息更新成功");
+    } else {
+      MessagePlugin.error(response.message || "学生信息更新失败");
+    }
   } catch (error) {
-    console.error('更新学生信息失败:', 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>