完成页面视图，展示学生列表功能，添加学生功能
This commit is contained in:
parent
d0c1389e1d
commit
bf58c9dbd1
|
|
@ -9,6 +9,8 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.9.0",
|
||||
"element-ui": "^2.15.14",
|
||||
"vue": "^3.2.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
12
src/App.vue
12
src/App.vue
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<Student></Student>
|
||||
<Student></Student>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Student from './views/student/index.vue';
|
||||
|
||||
|
|
@ -9,9 +8,14 @@ export default {
|
|||
name: 'App',
|
||||
components: {
|
||||
Student
|
||||
},
|
||||
mounted() {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'https://at.alicdn.com/t/c/font_4761397_l52xfx29tj.css';
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style></style>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,187 @@
|
|||
let studentNameInput = document.getElementById("student-name");
|
||||
let studentClassIdInput = document.getElementById("class-name");
|
||||
let studentGenderInputs = document.getElementsByName("gender");
|
||||
let studentBirthdayInput = document.getElementById("birthday");
|
||||
let studentAddressInput = document.getElementById("address");
|
||||
let studentContactInput = document.getElementById("contact");
|
||||
let studentPhoneNumInput = document.getElementById("phone-num")
|
||||
let studentImInput = document.getElementById("create-im");
|
||||
|
||||
function showAddPage() {
|
||||
var overlay = document.getElementById("overlay");
|
||||
overlay.style.display = "block"
|
||||
}
|
||||
function hideAddPage() {
|
||||
|
||||
let addHead = document.getElementById("add-student-head");
|
||||
addHead.innerText = "学生";
|
||||
|
||||
let studentHiddentIdInput = document.getElementById("hiddenId");
|
||||
studentHiddentIdInput.setAttribute("value", "");
|
||||
|
||||
studentNameInput.value = "";
|
||||
studentClassIdInput.value = 0;
|
||||
studentGenderInputs[0].checked = true;
|
||||
studentBirthdayInput.value = "";
|
||||
studentAddressInput.value = "";
|
||||
studentContactInput.value = "";
|
||||
studentPhoneNumInput.value = "";
|
||||
studentImInput.checked = false;
|
||||
var overlay = document.getElementById("overlay");
|
||||
overlay.style.display = "none"
|
||||
}
|
||||
|
||||
window.onload = grade.forEach(addStudentPageGetGradeList);
|
||||
|
||||
|
||||
function addStudentPageGetGradeList(item, index) {
|
||||
let classes = item.classes;
|
||||
classes.forEach(addStudentGetClassList);
|
||||
}
|
||||
|
||||
function addStudentGetClassList(item, index) {
|
||||
let classItem = document.createElement("option");
|
||||
classItem.setAttribute("value", item.id)
|
||||
classItem.innerHTML = item.name;
|
||||
|
||||
let selectBox = document.getElementById("class-name");
|
||||
selectBox.appendChild(classItem);
|
||||
}
|
||||
|
||||
function addStudent() {
|
||||
|
||||
let verifyFlag = 0;
|
||||
// 非空验证，如果有问题提示
|
||||
let messageBox;
|
||||
messageBox = document.getElementById("name-message");
|
||||
if (studentNameInput.value == "") {
|
||||
messageBox.innerText = "学生姓名不能为空！";
|
||||
verifyFlag = 1;
|
||||
} else {
|
||||
messageBox.innerText = "";
|
||||
}
|
||||
|
||||
messageBox = document.getElementById("class-message");
|
||||
if (studentClassIdInput.value == 0) {
|
||||
messageBox.innerText = "请选择学生的班级！";
|
||||
verifyFlag = 1;
|
||||
} else {
|
||||
messageBox.innerText = "";
|
||||
}
|
||||
|
||||
//如果有问题不执行后续操作
|
||||
if (verifyFlag == 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let studentData = {
|
||||
name: "",
|
||||
classId: 0,
|
||||
gender: 0,
|
||||
birthday: "",
|
||||
address: "",
|
||||
contact: "",
|
||||
phoneNum: "",
|
||||
password: "123123",
|
||||
id: "",
|
||||
isCreateIM: false
|
||||
};
|
||||
|
||||
//向对象中填充有意义的数据
|
||||
studentData.name = document.getElementById("student-name").value;
|
||||
studentData.classId = document.getElementById("class-name").value;
|
||||
|
||||
//临时genders数组接受所有gender元素
|
||||
let genders = document.getElementsByName("gender");
|
||||
//循环判断哪一个元素被选中了
|
||||
for (var i = 0; i < genders.length; i++) {
|
||||
if (genders[i].checked) {
|
||||
studentData.gender = genders[i].value;
|
||||
}
|
||||
}
|
||||
|
||||
// 出生日期 yyyy-mm-dd
|
||||
studentData.birthday = document.getElementById("birthday").value;
|
||||
studentData.address = document.getElementById("address").value;
|
||||
studentData.contact = document.getElementById("contact").value;
|
||||
studentData.phoneNum = document.getElementById("phone-num").value;
|
||||
studentData.isCreateIM = document.getElementById("create-im").checked;
|
||||
|
||||
|
||||
let studentHiddenId = document.getElementById("hiddenId").value;
|
||||
let localStudentList = JSON.parse(localStorage.getItem("studentCollect"));
|
||||
|
||||
if (studentHiddenId == null || studentHiddenId == "") {
|
||||
// 新建学生
|
||||
// 生成一个实时id
|
||||
const options = { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
|
||||
let studentId = new Intl.DateTimeFormat('zh-CN', options).format(new Date()).replace(/[^0-9]/g, '');
|
||||
studentData.id = studentId;
|
||||
|
||||
console.log("set student data");
|
||||
console.log(studentData);
|
||||
console.log(localStudentList);
|
||||
|
||||
if (localStudentList == null) {
|
||||
localStudentList = [studentData]
|
||||
} else {
|
||||
localStudentList.push(studentData)
|
||||
}
|
||||
|
||||
localStorage.setItem("studentCollect", JSON.stringify(localStudentList));
|
||||
console.log(localStudentList);
|
||||
|
||||
alert("添加成功！");
|
||||
} else {
|
||||
// 修改学生信息
|
||||
studentData.id = studentHiddenId;
|
||||
for(let i = 0;i<localStudentList.length;i++){
|
||||
if(localStudentList[i].id == studentHiddenId){
|
||||
// localStudentList[i].name = studentData.id;
|
||||
// localStudentList[i].classId = studentData.classId;
|
||||
// localStudentList[i].gender = studentData.gender;
|
||||
// localStudentList[i].birthday = studentData.birthday;
|
||||
// localStudentList[i].address = studentData.address;
|
||||
localStudentList[i] = studentData;
|
||||
}
|
||||
}
|
||||
localStorage.setItem("studentCollect", JSON.stringify(localStudentList));
|
||||
console.log(localStudentList);
|
||||
alert("修改成功！");
|
||||
}
|
||||
|
||||
location.reload();
|
||||
}
|
||||
|
||||
// 修改学生信息
|
||||
function changeStudentPage(studentId) {
|
||||
let allStudent = JSON.parse(localStorage.getItem("studentCollect"));
|
||||
let student = {};
|
||||
for (let i = 0; i < allStudent.length; i++) {
|
||||
if (allStudent[i].id == studentId) {
|
||||
student = allStudent[i];
|
||||
}
|
||||
}
|
||||
|
||||
studentNameInput.value = student.name;
|
||||
studentClassIdInput.value = student.classId;
|
||||
let studentGender = student.gender;
|
||||
for (let i = 0; i < studentGenderInputs.length; i++) {
|
||||
if (studentGenderInputs[i].value == studentGender) {
|
||||
studentGenderInputs[i].checked = "checked";
|
||||
}
|
||||
}
|
||||
studentBirthdayInput.value = student.birthday;
|
||||
studentAddressInput.value = student.address;
|
||||
studentContactInput.value = student.contact;
|
||||
studentPhoneNumInput.value = student.phoneNum;
|
||||
studentImInput.checked = student.isCreateIM;
|
||||
|
||||
|
||||
//修改完要改回去
|
||||
let addHead = document.getElementById("add-student-head");
|
||||
addHead.innerText = "修改学生信息";
|
||||
let studentHiddentIdInput = document.getElementById("hiddenId");
|
||||
studentHiddentIdInput.setAttribute("value", studentId);
|
||||
showAddPage();
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { grade } from "@/entity/grade"
|
||||
import localStorageUtils from "@/utils/studentLsUtils"
|
||||
|
||||
|
||||
const studentController = {
|
||||
data: {
|
||||
grade
|
||||
},
|
||||
methods: {
|
||||
//获取所有的班级
|
||||
getClasses() {
|
||||
let classes = [];
|
||||
for (let i = 0; i < grade.length; i++) {
|
||||
for (let j = 0; j < grade[i].classes.length; j++) {
|
||||
classes.push(grade[i].classes[j]);
|
||||
}
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
//提交用户
|
||||
submitStudent(student, isUpdate) {
|
||||
if (isUpdate) {
|
||||
|
||||
} else {
|
||||
// 生成一个实时id
|
||||
const options = { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
|
||||
let studentId = new Intl.DateTimeFormat('zh-CN', options).format(new Date()).replace(/[^0-9]/g, '');
|
||||
student.id = studentId;
|
||||
localStorageUtils.addStudent(student);
|
||||
}
|
||||
return true;
|
||||
},
|
||||
getStudentsByCond(classId, name, phoneNum) {
|
||||
let studentList = localStorageUtils.getAllStudents();
|
||||
let showStudents = [];
|
||||
if (studentList == null) {
|
||||
return [];
|
||||
}
|
||||
for (let i = 0; i < studentList.length; i++) {
|
||||
if (classId != null) {
|
||||
if (studentList[i].class != classId) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
if (name != null) {
|
||||
if (!(studentList[i].name).includes(name)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
if (phoneNum != null) {
|
||||
if (!(studentList[i].class).includes(classId)) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
showStudents.push(studentList[i])
|
||||
}
|
||||
|
||||
return showStudents;
|
||||
},
|
||||
getStudents() {
|
||||
return localStorageUtils.getAllStudents();
|
||||
}
|
||||
}
|
||||
}
|
||||
export default studentController;
|
||||
|
|
@ -0,0 +1,251 @@
|
|||
let studentNameInput = document.getElementById("student-name");
|
||||
let studentClassIdInput = document.getElementById("class-name");
|
||||
let studentGenderInputs = document.getElementsByName("gender");
|
||||
let studentBirthdayInput = document.getElementById("birthday");
|
||||
let studentAddressInput = document.getElementById("address");
|
||||
let studentContactInput = document.getElementById("contact");
|
||||
let studentPhoneNumInput = document.getElementById("phone-num")
|
||||
let studentImInput = document.getElementById("create-im");
|
||||
|
||||
export function showAddPage() {
|
||||
var overlay = document.getElementById("overlay");
|
||||
overlay.style.display = "block"
|
||||
}
|
||||
function hideAddPage() {
|
||||
|
||||
let addHead = document.getElementById("add-student-head");
|
||||
addHead.innerText = "学生";
|
||||
|
||||
let studentHiddentIdInput = document.getElementById("hiddenId");
|
||||
studentHiddentIdInput.setAttribute("value", "");
|
||||
|
||||
studentNameInput.value = "";
|
||||
studentClassIdInput.value = 0;
|
||||
studentGenderInputs[0].checked = true;
|
||||
studentBirthdayInput.value = "";
|
||||
studentAddressInput.value = "";
|
||||
studentContactInput.value = "";
|
||||
studentPhoneNumInput.value = "";
|
||||
studentImInput.checked = false;
|
||||
var overlay = document.getElementById("overlay");
|
||||
overlay.style.display = "none"
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 获取班级列表
|
||||
window.onload = grade.forEach(getGradeList);
|
||||
window.onload = onloadPage();
|
||||
function onloadPage () {
|
||||
let url = new URL(window.location.href);
|
||||
document.getElementById("search-name").value = url.searchParams.get("name");
|
||||
document.getElementById("search-phone").value = url.searchParams.get("phone");
|
||||
}
|
||||
var menuBox;
|
||||
function getGradeList(item, index) {
|
||||
|
||||
menuBox = document.createElement("div");
|
||||
menuBox.setAttribute("class", "menu-box");
|
||||
|
||||
let menuTitle = document.createElement("div");
|
||||
menuTitle.setAttribute("class", "menu-title");
|
||||
menuTitle.innerHTML = "<i class='iconfont icon-xia'></i><span>" + item.name + "</span>"
|
||||
menuBox.appendChild(menuTitle)
|
||||
|
||||
// console.log(item);
|
||||
// console.log(item.classes);
|
||||
|
||||
let classes = item.classes;
|
||||
classes.forEach(getClassList);
|
||||
|
||||
let menuList = document.getElementById("main-left-list");
|
||||
menuList.appendChild(menuBox);
|
||||
}
|
||||
|
||||
function getClassList(item, index) {
|
||||
let menuItem = document.createElement("div");
|
||||
menuItem.setAttribute("class", "menu-item");
|
||||
menuItem.setAttribute("class-id", item.id);
|
||||
menuItem.setAttribute("onclick", "reloadByClassId(this.getAttribute('class-id'))");
|
||||
menuItem.innerHTML = item.name;
|
||||
|
||||
let urlClassId = getQueryString("classid")
|
||||
if (urlClassId == item.id) {
|
||||
menuItem.setAttribute("style", "background-color: rgb(240, 240, 240);")
|
||||
}
|
||||
|
||||
menuBox.appendChild(menuItem)
|
||||
}
|
||||
//获取请求头参数 name:参数名称
|
||||
function getQueryString(name) {
|
||||
let url = new URL(window.location.href);
|
||||
return url.searchParams.get(name);
|
||||
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
// var r = window.location.search.substr(1).match(reg);
|
||||
// if (r != null) return unescape(r[2]);
|
||||
// return null;
|
||||
}
|
||||
function selectAll() {
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete("classid");
|
||||
url.searchParams.delete("name");
|
||||
url.searchParams.delete("phone");
|
||||
location.href = url.toString();
|
||||
}
|
||||
function reloadBySearch() {
|
||||
let url = new URL(window.location.href);
|
||||
let name = document.getElementById("search-name").value;
|
||||
let phone = document.getElementById("search-phone").value;
|
||||
if (name != "" && name != null) {
|
||||
url.searchParams.set("name", name)
|
||||
} else {
|
||||
url.searchParams.delete("name");
|
||||
}
|
||||
|
||||
if (phone != "" && phone != null) {
|
||||
url.searchParams.set("phone", phone)
|
||||
} else {
|
||||
url.searchParams.delete("phone");
|
||||
}
|
||||
|
||||
location.href = url.toString();
|
||||
}
|
||||
//点击班级触发此事件，将班级id添加到请求头
|
||||
function reloadByClassId(classId) {
|
||||
|
||||
|
||||
let url = new URL(window.location.href);
|
||||
if (classId != "" && classId != null) {
|
||||
url.searchParams.set("classid", classId)
|
||||
} else {
|
||||
url.searchParams.delete("classid");
|
||||
}
|
||||
location.href = url.toString();
|
||||
|
||||
// var href = window.location.href;
|
||||
|
||||
// // 使用indexOf找到问号的位置
|
||||
// var questionMarkIndex = href.indexOf('?');
|
||||
|
||||
// var queryString = href;
|
||||
// // 如果找到了问号，则提取问号及其后面的部分
|
||||
// if (questionMarkIndex !== -1) {
|
||||
// queryString = href.substring(0, questionMarkIndex);
|
||||
// console.log(queryString);
|
||||
// }
|
||||
// location.href = queryString + (classId == "" ? "" : "?classid=" + classId);
|
||||
|
||||
}
|
||||
|
||||
//启动时初始化学生列表
|
||||
window.onload = JSON.parse(localStorage.getItem("studentCollect")).forEach(onloadStudentList);
|
||||
//填充学生列表
|
||||
function onloadStudentList(item, index) {
|
||||
//根据请求头信息判断显示哪些学生
|
||||
if (getQueryString("classid") != "" && getQueryString("classid") != null) {
|
||||
if (item.classId != getQueryString("classid")) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (getQueryString("name") != "" && getQueryString("name") != null) {
|
||||
if (!(item.name).includes(getQueryString("name"))) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
if (getQueryString("phone") != "" && getQueryString("phone") != null) {
|
||||
if (!(item.phoneNum).includes(getQueryString("phone"))) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
let studentItem = document.createElement("div");
|
||||
studentItem.setAttribute("class", "student-item")
|
||||
|
||||
let labelStr = "<label for='" + item.id + "'><div><input id='" + item.id + "' type='checkbox' class='student-checkbox' style='cursor: pointer'></div></label>"
|
||||
studentItem.innerHTML = labelStr;
|
||||
|
||||
let classNameSpan = document.createElement("span");
|
||||
let classNameStr = "";
|
||||
for (let i = 0; i < grade.length; i++) {
|
||||
let tempClasses = grade[i].classes;
|
||||
for (let j = 0; j < tempClasses.length; j++) {
|
||||
if (tempClasses[j].id == item.classId) {
|
||||
classNameStr = tempClasses[j].name;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
classNameSpan.innerText = classNameStr;
|
||||
studentItem.appendChild(classNameSpan);
|
||||
|
||||
let nameSpan = document.createElement("span");
|
||||
nameSpan.innerText = item.name;
|
||||
studentItem.appendChild(nameSpan);
|
||||
|
||||
let idSpan = document.createElement("span");
|
||||
idSpan.innerText = item.id;
|
||||
studentItem.appendChild(idSpan);
|
||||
|
||||
let genderSpan = document.createElement("span");
|
||||
let genderStr = "空缺";
|
||||
if (item.gender == '1') {
|
||||
genderStr = "男生";
|
||||
}
|
||||
if (item.gender == '2') {
|
||||
genderStr = "女生";
|
||||
}
|
||||
genderSpan.innerText = genderStr;
|
||||
studentItem.appendChild(genderSpan);
|
||||
|
||||
let contactSpan = document.createElement("span");
|
||||
contactSpan.innerText = item.contact;
|
||||
studentItem.appendChild(contactSpan);
|
||||
|
||||
let phoneNumSpan = document.createElement("span");
|
||||
phoneNumSpan.innerText = item.phoneNum;
|
||||
studentItem.appendChild(phoneNumSpan);
|
||||
|
||||
|
||||
let changeSpan = document.createElement("span");
|
||||
|
||||
let changeBtn = document.createElement("button");
|
||||
changeBtn.setAttribute("student-id", item.id)
|
||||
changeBtn.setAttribute("onclick", "changeStudentPage(this.getAttribute('student-id'))")
|
||||
changeBtn.innerText = "修改"
|
||||
changeSpan.appendChild(changeBtn);
|
||||
studentItem.appendChild(changeSpan);
|
||||
|
||||
let fatherBox = document.getElementById("main-div-bottom");
|
||||
fatherBox.appendChild(studentItem);
|
||||
|
||||
}
|
||||
//删除选中学生
|
||||
function deleteStudent() {
|
||||
//获取被选中的学生的ID
|
||||
let studentIdArr = [];
|
||||
let checkBoxArr = document.getElementsByClassName("student-checkbox");
|
||||
for (let i = 0; i < checkBoxArr.length; i++) {
|
||||
if (checkBoxArr[i].checked) {
|
||||
studentIdArr.push(checkBoxArr[i].id);
|
||||
}
|
||||
}
|
||||
|
||||
let studentArr = JSON.parse(localStorage.getItem("studentCollect"));
|
||||
let newStudentArr = [];
|
||||
for (let i = 0; i < studentArr.length; i++) {
|
||||
let studentItem = studentArr[i];
|
||||
let shouldKeep = true;
|
||||
for (let j = 0; j < studentIdArr.length; j++) {
|
||||
if (studentIdArr[j] == studentItem.id) {
|
||||
shouldKeep = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (shouldKeep) {
|
||||
newStudentArr.push(studentItem);
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem("studentCollect", JSON.stringify(newStudentArr));
|
||||
location.reload();
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
export const grade = [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "一年级",
|
||||
"classes": [
|
||||
{
|
||||
"id": 11,
|
||||
"name": "一年级1班",
|
||||
"student": {}
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"name": "一年级2班",
|
||||
"student": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "二年级",
|
||||
"classes": [
|
||||
{
|
||||
"id": 21,
|
||||
"name": "二年级1班",
|
||||
"student": {}
|
||||
},
|
||||
{
|
||||
"id": 22,
|
||||
"name": "二年级2班",
|
||||
"student": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
const app = createApp(App);
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
#main-left-list{
|
||||
/* background-color: #f5f5f5; */
|
||||
width: 180px;
|
||||
height: calc(100% - 40px);
|
||||
margin-top: 20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.menu-box{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
/* background-color: antiquewhite; */
|
||||
}
|
||||
.menu-title{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.menu-title span{
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.menu-title>i{
|
||||
font-size: 10px;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
|
||||
.menu-item{
|
||||
/* margin-left: 30px; */
|
||||
padding-left: 30px;
|
||||
font-size: 12px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
cursor: pointer;
|
||||
/* background-color: aliceblue; */
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.menu-item:hover{
|
||||
background-color: rgb(240, 240, 240);;
|
||||
}
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
*{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
/* display: block; */
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
}
|
||||
button{
|
||||
cursor: pointer;
|
||||
}
|
||||
.main-box{
|
||||
min-width: 900px;
|
||||
width: 90vw;
|
||||
min-height: 510px;
|
||||
height: 90vh;
|
||||
background-color: #ffffff;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
.main-top{
|
||||
/* background-color: rgb(196, 121, 121); */
|
||||
height:90px;
|
||||
}
|
||||
.main-top p{
|
||||
line-height: 45px;
|
||||
}
|
||||
.main-top p span{
|
||||
margin-left: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.main-top p input::placeholder{
|
||||
color: #878787;
|
||||
}
|
||||
#search{
|
||||
margin-left: 30px;
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
border: #409eff;
|
||||
}
|
||||
#reset{
|
||||
background-color: #fff;
|
||||
border: #c0c0c0 1px solid;
|
||||
}
|
||||
.main-top p:first-child button img{
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
vertical-align: middle;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.main-top p:first-child button{
|
||||
height: 30px;
|
||||
width: 80px;
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.main-top p input{
|
||||
margin-left: 6px;
|
||||
height: 30px;
|
||||
padding: 0 8px;
|
||||
border: #c0c0c0 1px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.main-top-buttons{
|
||||
height: 30px;
|
||||
width: 80px;
|
||||
margin-right: 6px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#add{
|
||||
background-color: #ebf5ff;
|
||||
border: 1px solid #409eff;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
#transfer{
|
||||
background-color: #f0f9eb;
|
||||
border: 1px solid #6ac23b;
|
||||
color: #6ac23b;
|
||||
}
|
||||
#delete{
|
||||
background-color: #fef0f0;
|
||||
border: 1px solid #fabec4;
|
||||
color: #fabec4;
|
||||
}
|
||||
#export{
|
||||
background-color: #fdf6ec;
|
||||
border: 1px solid #e8ae62;
|
||||
color: #e8ae62;
|
||||
width: 140px;
|
||||
}
|
||||
#import{
|
||||
width: 100px;
|
||||
background-color: #fff;
|
||||
border: #c0c0c0 1px solid;
|
||||
}
|
||||
.main-main{
|
||||
height: calc(100% - 90px - 5px);
|
||||
/* background-color: #9c9c9c; */
|
||||
margin-top: 5px;
|
||||
}
|
||||
#main-left{
|
||||
background-color:#fff;
|
||||
height: 100%;
|
||||
width: 240px;
|
||||
box-shadow: 2px 0 10px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width:6px;
|
||||
}
|
||||
/*定义滚动条轨道
|
||||
内阴影+圆角*/
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
border-radius:10px;
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
/*定义滑块
|
||||
内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
border-radius:10px;
|
||||
background-color:#707070;
|
||||
}
|
||||
|
||||
.main-div{
|
||||
float:left;
|
||||
}
|
||||
#main-right{
|
||||
/* background-color: #f8f8f9; */
|
||||
height: 100%;
|
||||
width: calc(100% - 240px - 80px);
|
||||
float: right;
|
||||
}
|
||||
#main-div-top{
|
||||
height: 40px;
|
||||
background-color: #f8f8f9;
|
||||
border-bottom: #eceff5 solid 2px;
|
||||
}
|
||||
#main-div-top div{
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
/* background-color: #409eff; */
|
||||
float: left;
|
||||
}
|
||||
#main-div-top > span{
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
height: 100%;
|
||||
/* background-color: #c0c0c0; */
|
||||
float: left;
|
||||
line-height: 40px;
|
||||
width:calc((100% - 60px) / 7);
|
||||
text-align: center;
|
||||
}
|
||||
.student-item{
|
||||
height: 40px;
|
||||
}
|
||||
.student-item div{
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
/* background-color: #409eff; */
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.student-item > span{
|
||||
display: block;
|
||||
height: 100%;
|
||||
/* background-color: #c0c0c0; */
|
||||
float: left;
|
||||
line-height: 40px;
|
||||
width:calc((100% - 60px) / 7);
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.student-item button{
|
||||
height: 30px;
|
||||
width: 60px;
|
||||
background-color: #fff;
|
||||
border: #c0c0c0 1px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
/* 遮罩层 */
|
||||
#overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
/* display: none; */
|
||||
}
|
||||
|
||||
/* 主体 */
|
||||
.add-student {
|
||||
background-color: #fff;
|
||||
height: 680px;
|
||||
width: 755px;
|
||||
margin: 100px auto;
|
||||
border-radius: 5px;
|
||||
padding: 15px 20px;
|
||||
/* text-align: center; */
|
||||
}
|
||||
|
||||
#add-data {
|
||||
height: 370px;
|
||||
width: 700px;
|
||||
margin: 10px auto 0;
|
||||
/* background-color: rgb(207, 255, 239); */
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
#add-data-left {
|
||||
height: 100%;
|
||||
width: 135px;
|
||||
/* border: 1px solid red; */
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
#add-data-left div {
|
||||
height: 52px;
|
||||
width: calc(100% - 15px);
|
||||
text-align: right;
|
||||
line-height: 52px;
|
||||
/* border: 1px red solid; */
|
||||
font-weight: bold;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#add-data-right {
|
||||
height: 100%;
|
||||
width: calc(100% - 135px);
|
||||
float: left;
|
||||
/* background-color: antiquewhite; */
|
||||
}
|
||||
|
||||
#add-data-right div {
|
||||
height: 52px;
|
||||
width: 100%;
|
||||
line-height: 52px;
|
||||
/* border: 1px red solid; */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#add-data-right input[type="text"] {
|
||||
height: 30px;
|
||||
width: 350px;
|
||||
padding-left: 10px;
|
||||
/* color: #dedede; */
|
||||
border: 1px #c0c0c0 solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#add-data-right input[type="text"]:focus {
|
||||
border: #767676 1px solid;
|
||||
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px;
|
||||
}
|
||||
|
||||
#add-data-right input[type="text"]::placeholder {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#add-data-right input[type="radio"] {
|
||||
/* margin-right: ; */
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
#add-data-right>div>label>span {
|
||||
margin-right: 20px;
|
||||
/* line-height: 52px;
|
||||
float: left;
|
||||
display: block;
|
||||
height: 100%; */
|
||||
}
|
||||
|
||||
#class-name {
|
||||
height: 30px;
|
||||
width: 220px;
|
||||
padding-left: 10px;
|
||||
/* color: #dedede; */
|
||||
border: 1px #c0c0c0 solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#birthday {
|
||||
height: 30px;
|
||||
width: 180px;
|
||||
padding-left: 10px;
|
||||
/* color: #dedede; */
|
||||
border: 1px #c0c0c0 solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#zhang-hao-xin-xi {
|
||||
width: calc(100% - 80px);
|
||||
height: 30px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
#zhang-hao-xin-xi span {
|
||||
display: block;
|
||||
float: left;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
width: calc((100% - 150px) / 2);
|
||||
}
|
||||
|
||||
#zhang-hao-xin-xi span:not(2) {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#zhang-hao-xin-xi span hr {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
#zhang-hao-xin-xi span:nth-child(2) {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.add-bottom {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.add-bottom-left {
|
||||
height: auto;
|
||||
width: 130px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.add-bottom-left>div {
|
||||
height: 52px;
|
||||
width: calc(100% - 15px);
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.add-bottom-right {
|
||||
float: right;
|
||||
width: calc(100% - 130px);
|
||||
}
|
||||
|
||||
.add-bottom-right>div {
|
||||
height: 52px;
|
||||
/* line-height: 52px; */
|
||||
|
||||
}
|
||||
|
||||
#im-box {
|
||||
height: 20px;
|
||||
width: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#create-im{
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 130px;
|
||||
height: 35px;
|
||||
float: right;
|
||||
/* position: relative;
|
||||
bottom: 10px; */
|
||||
}
|
||||
|
||||
.confirmBtn {
|
||||
background-color: #409eff;
|
||||
border: 1px solid #409eff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
width: 60px;
|
||||
border-radius: 4px;
|
||||
/* margin-left:6px ; */
|
||||
}
|
||||
|
||||
.cancelBtn {
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
width: 60px;
|
||||
border-radius: 4px;
|
||||
margin-left: 6px;
|
||||
|
||||
background-color: #fff;
|
||||
border: #c0c0c0 1px solid;
|
||||
float: right;
|
||||
}
|
||||
.message{
|
||||
color: red;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
const ITEM_NAME = "studentList";
|
||||
|
||||
const studentLsUtils = {
|
||||
addStudent(student){
|
||||
let studentList = this.getAllStudents();
|
||||
if(studentList==null){
|
||||
studentList = [student];
|
||||
}else{
|
||||
studentList.push(student);
|
||||
}
|
||||
this.setStudents(studentList);
|
||||
},
|
||||
|
||||
getAllStudents(){
|
||||
return JSON.parse(localStorage.getItem(ITEM_NAME));
|
||||
},
|
||||
setStudents(studentList){
|
||||
localStorage.setItem(ITEM_NAME,JSON.stringify(studentList));
|
||||
}
|
||||
}
|
||||
export default studentLsUtils;
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<!-- 左侧列表框架 -->
|
||||
<div class="main-div" id="main-left">
|
||||
<!-- 左侧列表内容 -->
|
||||
<div id="main-left-list">
|
||||
|
||||
<div class="menu-box">
|
||||
<div onclick="selectAll()" style="font-weight: bold;" class="menu-item" class-id="">
|
||||
<h1>全部学生</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 菜单盒子 -->
|
||||
<div class="menu-box" v-for="(item,index) in grades">
|
||||
<!-- 菜单标题 -->
|
||||
<div class="menu-title">
|
||||
<i class="iconfont icon-xia"></i><span>{{item.name}}</span>
|
||||
</div>
|
||||
<div class="menu-item" v-for="(i, index) in item.classes" :key="index" :class-id="i.id">
|
||||
{{ i.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import controller from '@/controller/student/index';
|
||||
export default {
|
||||
name: 'Student-Drawer',
|
||||
data(){
|
||||
return{
|
||||
grades:{
|
||||
type:Array,
|
||||
default:[]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.grades = controller.data.grade
|
||||
// 获取年级列表
|
||||
console.log("载入班级列表...");
|
||||
console.log(this.grades);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<div class="main-div" id="main-right">
|
||||
<div id="main-div-top">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<span>班级</span>
|
||||
<span>姓名</span>
|
||||
<span>账号</span>
|
||||
<span>性别</span>
|
||||
<span>联系人</span>
|
||||
<span>联系电话</span>
|
||||
<span>操作</span>
|
||||
</div>
|
||||
<div id="main-div-bottom">
|
||||
|
||||
|
||||
<div class="student-item" v-for="(item, index) in studentList" :key="index">
|
||||
<label :for="item.id">
|
||||
<div>
|
||||
<input :id="item.id" type="checkbox" class='student-checkbox' style="cursor: pointer">
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<span>{{ getClassName(item.class) }}</span>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.id }}</span>
|
||||
<span>{{ getGenderName(item.gender) }}</span>
|
||||
<span>{{ item.contact }}</span>
|
||||
<span>{{ item.phoneNum }}</span>
|
||||
<span><button v-bind:student-id="item.id">修改</button></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="student-item">
|
||||
<label for="2411271514">
|
||||
<div>
|
||||
<input id="2411271514" type="checkbox" style="cursor: pointer">
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<span>一年级1班</span>
|
||||
<span>丁磊</span>
|
||||
<span>2411271514</span>
|
||||
<span>男</span>
|
||||
<span>丁汝昌</span>
|
||||
<span>010-54823</span>
|
||||
</div> -->
|
||||
<!-- <span><button>修改</button></span> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import controller from '@/controller/student';
|
||||
|
||||
export default {
|
||||
name: 'Student-Main',
|
||||
data() {
|
||||
return {
|
||||
studentList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// localStorage.removeItem("studentList");
|
||||
this.studentList = controller.methods.getStudentsByCond(null, null, null);
|
||||
console.log("初始化获取当前条件下学生列标");
|
||||
console.log(this.studentList);
|
||||
},
|
||||
methods: {
|
||||
getClassName(classId) {
|
||||
let classes = controller.methods.getClasses();
|
||||
for (let i = 0; i < classes.length; i++) {
|
||||
if (classId == classes[i].id) {
|
||||
return classes[i].name;
|
||||
}
|
||||
}
|
||||
}, getGenderName(genderId) {
|
||||
switch (genderId) {
|
||||
case "1":
|
||||
return "男";
|
||||
case "2":
|
||||
return "女";
|
||||
default:
|
||||
return "空缺"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<!-- 最外层遮罩 -->
|
||||
<div id="overlay">
|
||||
<!-- 添加学生的主要页面 -->
|
||||
<div class="add-student">
|
||||
<h1 style="font-size: 18px;" id="add-student-head">学生</h1>
|
||||
<div id="add-data">
|
||||
<div id="add-data-left">
|
||||
<div><span style="color: red;">*</span>学生姓名</div>
|
||||
<div><span style="color: red;">*</span>班级</div>
|
||||
<div>性别</div>
|
||||
<div>出生日期</div>
|
||||
<div>住址</div>
|
||||
<div>联系人</div>
|
||||
<div>电话</div>
|
||||
</div>
|
||||
<div id="add-data-right">
|
||||
<div>
|
||||
<input v-model="student.name" type="text" id="student-name" name="student-name"
|
||||
placeholder="情输入学生姓名">
|
||||
<span v-show="message.nameMessage" class="message" id="name-message">请输入学生姓名</span>
|
||||
</div>
|
||||
<div>
|
||||
<select v-model="student.class" name="class-name" id="class-name">
|
||||
<option value="0">请选择</option>
|
||||
<!-- <option value="11">一年级1班</option> -->
|
||||
<option v-for="(item, index) in classes" :key="index" :value="item.id">{{ item.name }}</option>
|
||||
</select>
|
||||
<span v-show="message.classMessage" class="message" id="class-message">请选择学生班级</span>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input v-model="student.gender" name="gender" value="0" type="radio" checked>
|
||||
<span>空缺</span>
|
||||
</label>
|
||||
<label>
|
||||
<input v-model="student.gender" name="gender" value="1" type="radio">
|
||||
<span>男生</span>
|
||||
</label>
|
||||
<label>
|
||||
<input v-model="student.gender" name="gender" value="2" type="radio">
|
||||
<span>女生</span>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input v-model="student.birthday" type="date" id="birthday" placeholder="情输入">
|
||||
</div>
|
||||
<div><input v-model="student.address" type="text" placeholder="情输入" id="address"
|
||||
style=" width: calc(100% - 20px);" name="address">
|
||||
</div>
|
||||
<div>
|
||||
<input v-model="student.contact" type="text" id="contact" placeholder="情输入">
|
||||
</div>
|
||||
<div>
|
||||
<input v-model="student.phoneNum" type="text" placeholder="情输入" name="phone-num" id="phone-num">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="zhang-hao-xin-xi">
|
||||
<span>
|
||||
<hr />
|
||||
</span>
|
||||
<span>学生账号信息</span>
|
||||
<span>
|
||||
<hr />
|
||||
</span>
|
||||
</div>
|
||||
<div class="add-bottom">
|
||||
<div class="add-bottom-left">
|
||||
<div>平台登陆账号</div>
|
||||
<div>创建即使通信账号</div>
|
||||
<div>即使通信账号</div>
|
||||
</div>
|
||||
<div class="add-bottom-right">
|
||||
<div>
|
||||
<span>系统自动创建</span>
|
||||
<span style="float: right;">系统自动创建，默认为123123</span>
|
||||
<span style="font-weight: bold;float: right;margin-right: 15px;">平台登录密码</span>
|
||||
</div>
|
||||
<div>
|
||||
<div id="im-box">
|
||||
<input v-model="student.isCreateIM" type="checkbox" id="create-im">
|
||||
</div>
|
||||
<span style="margin-left:15px;color: #4b8b8c;">即使通信账号用于课堂教学实时互动，如未配置学生平板则无需创建</span>
|
||||
</div>
|
||||
<div><span>系统自动创建</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-btn">
|
||||
<button class="confirmBtn" @click="submitStudent()">确定</button>
|
||||
<button class="cancelBtn" @click="hideOverlay()">取消</button>
|
||||
</div>
|
||||
<input type="hidden" id="hiddenId" value="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import controller from '@/controller/student';
|
||||
|
||||
export default {
|
||||
name: 'Student-Overlay',
|
||||
data() {
|
||||
var myStudent = {
|
||||
name: "",
|
||||
class: 0,
|
||||
gender: 0,
|
||||
birthday: "",
|
||||
address: "",
|
||||
contact: "",
|
||||
phoneNum: "",
|
||||
password: "123123",
|
||||
id: "",
|
||||
isCreateIM: false
|
||||
}
|
||||
var message = {
|
||||
nameMessage: false,
|
||||
classMessage: false
|
||||
}
|
||||
return {
|
||||
classes: [],
|
||||
isUpdate: false,
|
||||
message,
|
||||
student: myStudent
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideOverlay() {
|
||||
this.$emit("hideOverlay");
|
||||
},
|
||||
submitStudent() {
|
||||
let verifyFlag = false;
|
||||
if (this.student.name == "" || this.student.name == null) {
|
||||
this.message.nameMessage = true;
|
||||
verifyFlag = true;
|
||||
} else {
|
||||
this.message.nameMessage = false;
|
||||
}
|
||||
if (this.student.class == 0 || this.student.class == null) {
|
||||
this.message.classMessage = true;
|
||||
verifyFlag = true;
|
||||
} else {
|
||||
this.message.classMessage = false;
|
||||
}
|
||||
|
||||
if (verifyFlag) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let flag = controller.methods.submitStudent(this.student, this.isUpdate);
|
||||
console.log("提交用户...");
|
||||
console.log(this.student)
|
||||
if(flag){
|
||||
location.reload();
|
||||
}
|
||||
// if(flag){
|
||||
// console.log("提交成功...");
|
||||
// alert("提交成功!");
|
||||
// }else{
|
||||
// console.error("提交失败...");
|
||||
// alert("提交失败!");
|
||||
// }
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.classes = controller.methods.getClasses();
|
||||
console.log("添加页面初始化班级列表...");
|
||||
console.log(this.classes);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div class="main-top">
|
||||
<p>
|
||||
<span>姓名</span>
|
||||
<input type="text" id="search-name" placeholder="情输入姓名">
|
||||
<span>联系电话</span>
|
||||
<input type="text" id="search-phone" placeholder="情输入联系电话">
|
||||
<!-- <input type="button" disabled="false" value="搜索">
|
||||
<input type="reset" value="重置"> -->
|
||||
<button name="search" id="search"><img src="@/assets/search.png">搜索</button>
|
||||
<button name="reset" onclick="resetSearch()" id="reset"><img src="@/assets/reset.png">重置</button>
|
||||
<!-- <script>
|
||||
function resetSearch() {
|
||||
document.getElementById("search-name").value = "";
|
||||
document.getElementById("search-phone").value = "";
|
||||
let url = new URL(window.location.href);
|
||||
url.searchParams.delete("name");
|
||||
url.searchParams.delete("phone");
|
||||
location.href = url.toString();
|
||||
}
|
||||
</script> -->
|
||||
</p>
|
||||
<p>
|
||||
<button v-on:click="showOverlay()" name="" id="add" class="main-top-buttons">新增</button>
|
||||
<button name="" id="transfer" class="main-top-buttons">转入</button>
|
||||
<button onclick="deleteStudent()" name="" id="delete" class="main-top-buttons">删除</button>
|
||||
<button name="" id="export" class="main-top-buttons">导出当前列表</button>
|
||||
<button name="" id="import" class="main-top-buttons">导入学生</button>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import studentController from '@/controller/student/index'
|
||||
export default {
|
||||
name: 'Student-Top',
|
||||
methods:{
|
||||
showOverlay(){
|
||||
this.$emit('showOverlay')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,14 +1,42 @@
|
|||
<template>
|
||||
1111
|
||||
<div class="main-box">
|
||||
<Top @showOverlay="showOverlay()"></Top>
|
||||
<div class="main-main">
|
||||
<Drawer></Drawer>
|
||||
<Main></Main>
|
||||
</div>
|
||||
<Overlay @hideOverlay="hideOverlay()" v-if="isOverlay"></Overlay>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import '@/style/index.css'
|
||||
import '@/style/overlay.css'
|
||||
import '@/style/drawer.css'
|
||||
import Top from './components/item-top.vue'
|
||||
import Drawer from './components/item-drawer.vue'
|
||||
import Overlay from './components/item-overlay.vue'
|
||||
import Main from './components/item-main.vue'
|
||||
|
||||
export default {
|
||||
name: 'Student',
|
||||
|
||||
components: {
|
||||
Top, Drawer, Overlay, Main
|
||||
},
|
||||
data() {
|
||||
return{
|
||||
isOverlay:false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
showOverlay(){
|
||||
this.isOverlay = true;
|
||||
},
|
||||
hideOverlay(){
|
||||
this.isOverlay = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Student',
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue