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

2024-04-10 11:46:46 +08:00 · 2024-04-10 11:46:46 +08:00 · 923bebedf1
commit 923bebedf1
parent a5c42f3bc3 3730730f1e
3 changed files with 396 additions and 171 deletions
--- a/mock/modules/lcz.js
+++ b/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',
--- a/src/api/students.js
+++ b/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)
+}
--- a/src/pages/students/student.vue
+++ b/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
-                >
-                <t-button theme="default" variant="base" type="reset"
-                  style="margin-left: 1rem;">重置</t-button
+              <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"
@ -59,10 +72,7 @@
              @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
              >
@ -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-input v-model="formData.status"></t-input>
+              <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>
@ -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
-  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();
-  } catch (error) {
-    console.error('更新学生信息失败:', error);
+    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);
+    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>