stu

mock/modules/lcz.js

@@ -0,0 +1,70 @@
+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 [
+    {
+      url:'/api-list',
+      method:'get',
+      response: () => {
+        return {
+          code: 200,
+          data: student
+        }
+      }
+    },
+    {
+      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/login.js

@@ -5,4 +5,4 @@ const API = {
 };
 
 export const reqUser = () => request.post(API.LOGIN_URL);
-export const reqUserone = (data) => request.post(API.LOGIN_URL, data);
+// export const reqUserone = (data) => request.post(API.LOGIN_URL, data);

src/api/students.js

@@ -1,7 +1,8 @@
-import request from "@/utils/request";
+import request from '@/utils/request'
-// 统一管理接口
-const API = {
- STUDENT_URL: "/api/student",
-};
 
-export const reqStudent = () => request.post(API.STUDENT_URL);
+export function getList() {
+  return request.get('/api-list')
+}
+export function getStudents(studentData) {
+  return request.post('/api-student', studentData)
+}

src/pages/login/index.vue

@@ -55,7 +55,7 @@ import { MessagePlugin } from "tdesign-vue-next";
 import { reactive, ref, onMounted } from "vue";
 import { reqUser } from "@/api/login";
 import { useRouter } from "vue-router";
-import axios from 'axios';
+// import axios from 'axios';
 // import { TForm, TFormItem, TInput, TButton } from "tdesign-vue-next";
 // import { DesktopIcon, LockOnIcon } from "tdesign-icons-vue";
 
@@ -103,7 +103,11 @@ onMounted(() => {
 
 const onSubmit = async () => {
   try {
-    const validateResult = await from.value?.validate();
+    if (!form || !form.value) {
+      console.warn("form 或 form.value 不存在，无法进行表单验证");
+      return;
+    }
+    const validateResult = await form.value?.validate();
     if (validateResult?.result) {
       await reqUser(formData.account, formData.password);
       MessagePlugin.success("提交成功");

src/pages/students/student.vue

@@ -1,146 +1,275 @@
 <template>
-  <t-space direction="vertical">
+  <div class="back-color">
-    <t-form ref="searchForm" @reset="onReset">
+    <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="searchCriteria.name" placeholder="请输入姓名"></t-input>
+              <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="searchCriteria.studentId" placeholder="请输入学号"></t-input>
+              <t-input v-model="studentData.studentId"></t-input>
-      </t-form-item>
-      <t-form-item>
-      <t-space size="10px">
-        <t-button theme="primary" type="submit" @click="onSearch">查询</t-button>
-        <t-button theme="default" variant="base" type="reset">重置</t-button>
-      </t-space>
             </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-space>
+    <t-content class="table-box">
-      <t-checkbox v-model="stripe">显示斑马纹</t-checkbox>
-      <t-checkbox v-model="bordered">显示表格边框</t-checkbox>
-      <t-checkbox v-model="hover">显示悬浮效果</t-checkbox>
-      <t-checkbox v-model="tableLayout">宽度自适应</t-checkbox>
-      <t-checkbox v-model="showHeader">显示表头</t-checkbox>
-    </t-space>
-
       <t-table
-      rowKey="studentId"
+        rowKey="Id"
         :data="studentList"
         :columns="studentColumns"
         :stripe="stripe"
         :bordered="bordered"
-      :hover="hover"
+        :hover="true"
         :size="size"
         :table-layout="tableLayout ? 'auto' : 'fixed'"
         :pagination="pagination"
-      :showHeader="showHeader"
+        :showHeader="true"
         cellEmptyContent="-"
         resizable
-    ></t-table>
+        lazy-load
-  </t-space>
+        @row-click="handleRowClick"
-    <!-- 动态操作列 -->
+        @page-change="onPageChange"
-    <!-- <t-table-column label="操作">
+        :loading="loading"
-        <template #default="{ row }">
+      >
-          <t-button-group>
+      <template #operation="{ row }">
-            <t-button @click="handleLeave(row)">休学</t-button>
+            <t-button
-            <t-button @click="handleWithdraw(row)">退学</t-button>
+              theme="default"
-            <t-button @click="handleReturn(row)">复学</t-button>
+              variant="text"
-          </t-button-group>
+              size="small"
+              @click="Modify(row)"
+              >修改</t-button
+            >
+            <t-popconfirm
+              content="确认删除吗"
+              @confirm="Delete(row)"
+            >
+              <t-button theme="default" variant="text" size="small"
+                >删除</t-button
+              >
+            </t-popconfirm>
           </template>
-      </t-table-column> -->
+      </t-table>
+    </t-content>
+    </t-layout>
+    <t-space>
+      <t-dialog
+        ref="postForm"
+        v-model="visible"
+        header="学生变动处理"
+        width="40%"
+        :on-cancel="onCancel"
+        :on-close-btn-click="onCloseBtnClick"
+        :on-confirm="onConfirmAnother"
+        :close-on-overlay-click="false"
+      >
+        <t-space direction="vertical" style="width: 100%">
+          <div>
+            <t-form
+              ref="form"
+                :data="formData"
+                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>
+          </div>
+        </t-space>
+      </t-dialog>
+    </t-space>
+
+  </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive, computed, onMounted } from "vue";
+import {getList, getStudents } from "@/api/students";
 import { MessagePlugin } from "tdesign-vue-next";
 import { useRouter } from "vue-router";
-import { reqStudent } from "@/api/students";
+// import { reqStudent } from "@/api/students";
 
 const router = useRouter();
-const searchForm = ref(null);
-const initialStudentData = [];
-const total = 28;
-for (let i = 0; i < total; i++) {
-  initialStudentData.push({
-    studentId: `${'S'}${i + 1}`,
-    name: ['贾明', '张三', '王芳'][i % 3],
-    gender: ['男', '女'][i % 2],
-    departmentCode: 'D' + (i % 4 + 1),
-    department: ['计算机科学系', '数学系', '物理系', '化学系'][i % 4],
-    className: 'C' + (i % 5 + 1),
-    majorCode: 'M' + (i % 6 + 1),
-    major: ['计算机科学与技术', '数学', '物理学', '化学', '生物学', '经济学'][i % 6],
-    classCode: 'C' + (i % 5 + 1),
-    classes: ['一班', '二班', '三班', '四班', '五班'][i % 5],
-  });
-}
 
-// 查询条件
+const studentData = reactive({
-const searchCriteria = reactive({ name: '', studentId: '' });
+  Id:"",
-
+  name: "",
-// 学生列表数据
+  gender: "",
-const studentList = computed(() => {
+  studentId: "",
-  return initialStudentData.filter(student =>
+  department: "",
-    (!searchCriteria.name || student.name.includes(searchCriteria.name)) &&
+  major: "",
-    (!searchCriteria.studentId || student.studentId === searchCriteria.studentId)
+  classes: "",
-  );
+  status: "",
 });
 
-// 表格列定义
+// 弹出框表单
+const formData = ref({
+  name: "",
+  gender: "",
+  studentId: "",
+  department: "",
+  major: "",
+  classes: "",
+  status: "",
+})
+const visible = ref(false)
+const studentList = ref([]);
+
 const studentColumns = ref([
   {
-    colKey: 'studentId',
+    colKey: "Id",
-    title: '学号',
+    title: "序号",
   },
   {
-    colKey: 'name',
+    colKey: "name",
-    title: '姓名',
+    title: "姓名",
   },
   {
-    colKey: 'gender',
+    colKey: "gender",
-    title: '性别',
+    title: "性别",
   },
   {
-    colKey: 'department',
+    colKey: "studentId",
-    title: '系院',
+    title: "学号",
   },
   {
-    colKey: 'major',
+    colKey: "department",
-    title: '专业',
+    title: "系院",
   },
   {
-    colKey: 'classes',
+    colKey: "major",
-    title: '班级',
+    title: "专业",
+  },
+  {
+    colKey: "classes",
+    title: "班级",
+  },
+  {
+    colKey: "status",
+    title: "状态",
+  },
+  {
+    colKey: "operation",
+    title: "操作",
+    align: "center"
   },
 ]);
 
-const size = ref('medium');
-const tableLayout = ref(false);
-const stripe = ref(false);
-const bordered = ref(false);
-const hover = ref(true);
-const showHeader = ref(true);
-
 const pagination = reactive({
   defaultCurrent: 1,
-  defaultPageSize: 5,
+  defaultPageSize: 10,
-  total: initialStudentData.length,
+  total: 0,
 });
 
-// 查询功能
+//表单提交
-const onSearch = () => {
+const onSubmit = async () => {
-  pagination.defaultCurrent = 1;
+  if (
+    studentData.Id ||
+    studentData.name ||
+    studentData.gender ||
+    studentData.studentId ||
+    studentData.department ||
+    studentData.major ||
+    studentData.classes ||
+    studentData.status
+  ) {
+    const res = await getStudents(studentData);
+    console.log(res);
+    studentList.value = Array.from(res);
+    pagination.total = res.length;
+  } else {
+    alert("请填写完整信息");
+  }
 };
 
+//表单重置
 const onReset = () => {
-  searchCriteria.name = '';
+  TableData()
-  searchCriteria.studentId = '';
+}
-  pagination.defaultCurrent = 1;
-  MessagePlugin.success("重置成功");
-};
 
+//获取表格数据
+const TableData = async () => {
+  const res = await getList()
+  console.log(res);
+  studentList.value = res.data.list
+  pagination.total = res.data.list.length
+}
+
+onMounted(() => {
+  TableData()
+})
+
+// 修改学生状态
+const Modify = row => {
+  visible.value = true
+  formData.value = {
+    name: row.label,
+  }
+}
 </script>
 
 <style lang="less" scoped>
+.scarch-box {
+  width: 100%;
+  background-color: @base-white-color;
+  margin-bottom: 2rem;
+  .scarch-from {
+    height: 3.75rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
 
+.table-box {
+  height: 42rem;
+  background-color: @base-white-color;
+  padding: 1rem;
+  padding-top: 0;
+  .table-header {
+    height: 3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
 </style>