175 lines
9.4 KiB
HTML
Executable File
175 lines
9.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>学生信息管理系统</title>
|
|
<!-- 引入外部样式 -->
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
<!-- 使用CDN引入 Vue 模块 -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> -->
|
|
<script src="./cdn/vue.min.js"></script>
|
|
<!-- 使用CDN引入 Element UI 样式 -->
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<!-- 使用CDN引入 Element UI 组件库 -->
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
<!-- 引入 Axios 组件库 -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
|
|
<script src="./cdn/axios.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<el-container>
|
|
<el-header style="height: 80px;">学生信息管理系统</el-header>
|
|
<el-container>
|
|
<el-aside width="200px">
|
|
<el-menu default-active="2" class="el-menu-vertical-demo">
|
|
<el-menu-item index="1">
|
|
<i class="el-icon-menu"></i>
|
|
<span slot="title">班级管理</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="2">
|
|
<i class="el-icon-user"></i>
|
|
<span slot="title">学生信息</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="3">
|
|
<i class="el-icon-s-custom"></i>
|
|
<span slot="title">讲师信息</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="4">
|
|
<i class="el-icon-date"></i>
|
|
<span slot="title">课程管理</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-container>
|
|
<el-main>
|
|
<!-- 面包屑导航 -->
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>学生管理</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
<!-- 表单 -->
|
|
<el-form :inline="true" style="margin-top: 20px;">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="请输入查询的关键字：">
|
|
<el-input v-model="inputStr" placeholder="输入查询的关键字" style="width: 360px;"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8" style="text-align: right; padding-right: 40px;">
|
|
<el-button type="primary" icon="el-icon-search" @click="queryStudents()">查询</el-button>
|
|
<el-button type="primary" icon="el-icon-tickets" @click="getAllStudents()">全部</el-button>
|
|
<el-button type="primary" icon="el-icon-plus" @click="addStudent()">添加</el-button>
|
|
</el-col>
|
|
<el-col :span="2" style="text-align: right; padding-right: 10px;">
|
|
<el-upload :show-file-list="false" :http-request="uploadExcelPost">
|
|
<el-button type="primary" >导入Excel</el-button>
|
|
</el-upload>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<el-button type="primary" @click="exportToExcel()">导出Excel</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<!-- 表格 -->
|
|
<el-table :data="pageStudents" border style="width: 100%" @selection-change="handleSelectionChange">
|
|
<el-table-column :resizable="false" type="selection">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" type="index" label="序号" align="center" width="60">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" prop="sno" label="学号" align="center" width="120">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" prop="name" label="姓名" align="center" align="center" width="120">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" prop="gender" label="性别" align="center" width="60">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" prop="birthday" label="出生日期" align="center" width="120">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" prop="mobile" label="电话号码" align="center" width="160">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" prop="email" label="邮箱" align="center" width="300">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" prop="address" label="地址" align="center">
|
|
</el-table-column>
|
|
<el-table-column :resizable="false" label="操作" align="center" width="180">
|
|
<template slot-scope="scope">
|
|
<el-button type="success" icon="el-icon-more" size="mini" @click="viewStudent(scope.row)" circle>
|
|
</el-button>
|
|
<el-button type="primary" icon="el-icon-edit" size="mini" @click="updateStudent(scope.row)" circle>
|
|
</el-button>
|
|
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteStudent(scope.row)" circle>
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-row style="margin-top: 20px;">
|
|
<el-col :span="8" style="text-align: left;">
|
|
<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteStudents">批量删除</el-button>
|
|
</el-col>
|
|
<el-col :span="16" style="text-align:right;">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
:current-page="currentpage" :page-sizes="[5, 10, 50, 100]" :page-size="pagesize"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
</el-pagination>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 弹出框学生明细 -->
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" :close-on-click-modal="false"
|
|
@close="closeDialogForm('studentForm')">
|
|
<el-form :model="studentForm" ref="studentForm" :rules="rules" :inline="true" style="margin-left: 24px;"
|
|
label-width="110px" label-position="right" size="mini">
|
|
<el-upload class="avatar-uploader"
|
|
:show-file-list="false" :http-request="uploadPicturePost" style=" text-align: center; margin: 20px;">
|
|
<img v-if="studentForm.image" :src="studentForm.imageUrl" class="avatar">
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
<el-form-item label="学号：" prop="sno">
|
|
<el-input v-model="studentForm.sno" :disabled="isView || isEdit" suffix-icon="el-icon-edit">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item label="姓名：" prop="name">
|
|
<el-input v-model="studentForm.name" :disabled="isView" suffix-icon="el-icon-edit"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="性别：" prop="gender">
|
|
<el-select v-model="studentForm.gender" :disabled="isView" placeholder="请选择性别">
|
|
<el-option label="男" value="男"></el-option>
|
|
<el-option label="女" value="女"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="出生日期：" prop="birthday">
|
|
<el-date-picker v-model="studentForm.birthday" type="date" value-format="yyyy-MM-dd"
|
|
placeholder="选择日期" :disabled="isView" style="width: 93%;">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="手机号码：" prop="mobile">
|
|
<el-input v-model="studentForm.mobile" :disabled="isView" suffix-icon="el-icon-edit"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱地址：" prop="email">
|
|
<el-input v-model="studentForm.email" :disabled="isView" suffix-icon="el-icon-edit"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="家庭住址：" prop="address">
|
|
<el-input v-model="studentForm.address" :disabled="isView" suffix-icon="el-icon-edit"
|
|
style="width: 264%;"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitStudentForm('studentForm')" v-show="!isView">确定</el-button>
|
|
<el-button type="info" @click="closeDialogForm('studentForm')">取消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</el-main>
|
|
<el-footer style="height: 30px;">学生信息管理系统 版权所有: Hzbb | 2024-12-20 </el-footer>
|
|
</el-container>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|
|
<!-- 引入Vue代码 -->
|
|
<script src="js/index.js"></script> |