✨ feat:学生页面
This commit is contained in:
吕才卓
parent
050e0bc6d3
commit
10a46e041c
7
src/api/password.js
Normal file
7
src/api/password.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import request from "@/utils/request";
|
||||
// 统一管理接口
|
||||
const API = {
|
||||
PASSWORD_URL: "/api/password",
|
||||
};
|
||||
|
||||
export const reqPassword = () => request.post(API.PASSWORD_URL);
|
||||
7
src/api/students.js
Normal file
7
src/api/students.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import request from "@/utils/request";
|
||||
// 统一管理接口
|
||||
const API = {
|
||||
STUDENT_URL: "/api/student",
|
||||
};
|
||||
|
||||
export const reqStudent = () => request.post(API.STUDENT_URL);
|
||||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,47 +1,146 @@
|
|||
<template>
|
||||
<div>
|
||||
students
|
||||
<t-space direction="vertical">
|
||||
<!-- 按钮操作区域 -->
|
||||
<div>
|
||||
<t-radio-group v-model="size" variant="default-filled">
|
||||
<t-radio-button value="small">小尺寸</t-radio-button>
|
||||
<t-radio-button value="medium">中尺寸</t-radio-button>
|
||||
<t-radio-button value="large">大尺寸</t-radio-button>
|
||||
</t-radio-group>
|
||||
</div>
|
||||
|
||||
<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 direction="vertical">
|
||||
<t-form ref="searchForm" @reset="onReset">
|
||||
<t-form-item label="姓名" name="name">
|
||||
<t-input v-model="searchCriteria.name" placeholder="请输入姓名"></t-input>
|
||||
</t-form-item>
|
||||
<t-form-item label="学号" name="studentId">
|
||||
<t-input v-model="searchCriteria.studentId" placeholder="请输入学号"></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-form>
|
||||
|
||||
<!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
|
||||
<t-table
|
||||
rowKey="index"
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:stripe="stripe"
|
||||
:bordered="bordered"
|
||||
:hover="hover"
|
||||
:size="size"
|
||||
:table-layout="tableLayout ? 'auto' : 'fixed'"
|
||||
:pagination="pagination"
|
||||
:showHeader="showHeader"
|
||||
cellEmptyContent="-"
|
||||
resizable
|
||||
></t-table>
|
||||
<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>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user