✨ feat:学生页面

src/api/password.js

@@ -0,0 +1,7 @@
+import request from "@/utils/request";
+// 统一管理接口
+const API = {
+ PASSWORD_URL: "/api/password",
+};
+
+export const reqPassword = () => request.post(API.PASSWORD_URL);

src/api/students.js

@@ -0,0 +1,7 @@
+import request from "@/utils/request";
+// 统一管理接口
+const API = {
+ STUDENT_URL: "/api/student",
+};
+
+export const reqStudent = () => request.post(API.STUDENT_URL);

src/pages/login/index.vue

@@ -54,7 +54,6 @@
 import { MessagePlugin } from "tdesign-vue-next";
 import { reactive, ref, onMounted } from "vue";
 import { reqUser } from "@/api/login";
-// import router from "@/router";
 import { useRouter } from "vue-router";
 import axios from 'axios';
 // import { TForm, TFormItem, TInput, TButton } from "tdesign-vue-next";

src/pages/password/index.vue

@@ -46,6 +46,7 @@
 import { MessagePlugin } from "tdesign-vue-next";
 import { reactive } from "vue";
 import router from "@/router";
+import {reqPassword} from "@/api/password"
 
 const INITIAL_DATA = {
   account: "",
@@ -122,7 +123,7 @@ const onSubmit = async () => {
   try {
     const validateResult = await from.value?.validate();
     if (validateResult?.result) {
-      await reqUser(formData.account, formData.password,formData.rePassword);
+      await reqPassword(formData.account, formData.password, formData.rePassword);
       MessagePlugin.success("提交成功");
       await router.push("/");
     } else {

src/pages/students/student.vue

@@ -1,47 +1,146 @@
 <template>
-  <div>
+  <t-space direction="vertical">
-    students
+    <t-form ref="searchForm" @reset="onReset">
-    <t-space direction="vertical">
+      <t-form-item label="姓名" name="name">
-      <!-- 按钮操作区域 -->
+        <t-input v-model="searchCriteria.name" placeholder="请输入姓名"></t-input>
-      <div>
+      </t-form-item>
-        <t-radio-group v-model="size" variant="default-filled">
+      <t-form-item label="学号" name="studentId">
-          <t-radio-button value="small">小尺寸</t-radio-button>
+        <t-input v-model="searchCriteria.studentId" placeholder="请输入学号"></t-input>
-          <t-radio-button value="medium">中尺寸</t-radio-button>
+      </t-form-item>
-          <t-radio-button value="large">大尺寸</t-radio-button>
+      <t-form-item>
-        </t-radio-group>
+      <t-space size="10px">
-      </div>
+        <t-button theme="primary" type="submit" @click="onSearch">查询</t-button>
-
+        <t-button theme="default" variant="base" type="reset">重置</t-button>
-      <t-space>
-        <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-form-item>
+    </t-form>
 
-      <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
+    <t-space>
-      <t-table
+      <t-checkbox v-model="stripe">显示斑马纹</t-checkbox>
-        rowKey="index"
+      <t-checkbox v-model="bordered">显示表格边框</t-checkbox>
-        :data="data"
+      <t-checkbox v-model="hover">显示悬浮效果</t-checkbox>
-        :columns="columns"
+      <t-checkbox v-model="tableLayout">宽度自适应</t-checkbox>
-        :stripe="stripe"
+      <t-checkbox v-model="showHeader">显示表头</t-checkbox>
-        :bordered="bordered"
-        :hover="hover"
-        :size="size"
-        :table-layout="tableLayout ? 'auto' : 'fixed'"
-        :pagination="pagination"
-        :showHeader="showHeader"
-        cellEmptyContent="-"
-        resizable
-      ></t-table>
     </t-space>
-  </div>
+
+    <t-table
+      rowKey="studentId"
+      :data="studentList"
+      :columns="studentColumns"
+      :stripe="stripe"
+      :bordered="bordered"
+      :hover="hover"
+      :size="size"
+      :table-layout="tableLayout ? 'auto' : 'fixed'"
+      :pagination="pagination"
+      :showHeader="showHeader"
+      cellEmptyContent="-"
+      resizable
+    ></t-table>
+  </t-space>
+    <!-- 动态操作列 -->
+    <!-- <t-table-column label="操作">
+        <template #default="{ row }">
+          <t-button-group>
+            <t-button @click="handleLeave(row)">休学</t-button>
+            <t-button @click="handleWithdraw(row)">退学</t-button>
+            <t-button @click="handleReturn(row)">复学</t-button>
+          </t-button-group>
+        </template>
+      </t-table-column> -->
 </template>
 
 <script setup>
+import { ref, reactive, computed } from 'vue';
 import { MessagePlugin } from "tdesign-vue-next";
-import { ref } from "vue";
+import { useRouter } from "vue-router";
+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 searchCriteria = reactive({ name: '', studentId: '' });
+
+// 学生列表数据
+const studentList = computed(() => {
+  return initialStudentData.filter(student =>
+    (!searchCriteria.name || student.name.includes(searchCriteria.name)) &&
+    (!searchCriteria.studentId || student.studentId === searchCriteria.studentId)
+  );
+});
+
+// 表格列定义
+const studentColumns = ref([
+  {
+    colKey: 'studentId',
+    title: '学号',
+  },
+  {
+    colKey: 'name',
+    title: '姓名',
+  },
+  {
+    colKey: 'gender',
+    title: '性别',
+  },
+  {
+    colKey: 'department',
+    title: '系院',
+  },
+  {
+    colKey: 'major',
+    title: '专业',
+  },
+  {
+    colKey: 'classes',
+    title: '班级',
+  },
+]);
+
+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,
+  total: initialStudentData.length,
+});
+
+// 查询功能
+const onSearch = () => {
+  pagination.defaultCurrent = 1;
+};
+
+const onReset = () => {
+  searchCriteria.name = '';
+  searchCriteria.studentId = '';
+  pagination.defaultCurrent = 1;
+  MessagePlugin.success("重置成功");
+};
+
 </script>
 
 <style lang="less" scoped>
+
 </style>