添加条件筛选功能

src/controller/student/add-student.js

@@ -1,187 +0,0 @@
-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();
-}

src/controller/student/index.js

@@ -37,17 +37,17 @@ const studentController = {
                 return [];
             }
             for (let i = 0; i < studentList.length; i++) {
-                if (classId != null) {
+                if (classId != null && classId != 0) {
                     if (studentList[i].class != classId) {
                         continue;
                     }
                 }
-                if (name != null) {
+                if (name != null && name != "") {
                     if (!(studentList[i].name).includes(name)) {
                         continue;
                     }
                 }
-                if (phoneNum != null) {
+                if (phoneNum != null && phoneNum != "") {
                     if (!(studentList[i].phoneNum).includes(phoneNum)) {
                         continue;
                     }

src/controller/student/st.js

@@ -1,251 +0,0 @@
-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();
-}

src/views/student/components/item-drawer.vue

@@ -5,17 +5,18 @@
     <div id="main-left-list">
 
       <div class="menu-box">
-        <div onclick="selectAll()" style="font-weight: bold;" class="menu-item" class-id="">
+        <div @click="changeClassCond(0)" 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-box" v-for="(item, index) in grades">
         <!-- 菜单标题 -->
         <div class="menu-title">
-          <i class="iconfont icon-xia"></i><span>{{item.name}}</span>
+          <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">
+        <div class="menu-item" v-for="(i, index) in item.classes" @click="changeClassCond(i.id)" :key="index"
+          :class-id="i.id">
           {{ i.name }}
         </div>
       </div>
@@ -27,11 +28,11 @@
 import controller from '@/controller/student/index';
 export default {
   name: 'Student-Drawer',
-  data(){
+  data() {
-    return{
+    return {
-      grades:{
+      grades: {
-        type:Array,
+        type: Array,
-        default:[]
+        default: []
       }
     }
   },
@@ -40,6 +41,12 @@ export default {
     // 获取年级列表
     console.log("载入班级列表...");
     console.log(this.grades);
+  }, methods: {
+    changeClassCond(classId) {
+      //alert(classId);
+      console.log("添加年级筛选..." + classId);
+      this.$emit("changeClassCand", classId);
+    }
   }
 }
 </script>

src/views/student/components/item-main.vue

@@ -61,7 +61,10 @@ export default {
   data() {
     return {
       studentList: [],
-      deleteStudentsId: []
+      deleteStudentsId: [],
+      classCond: 0,
+      nameCond: "",
+      phoneCond: ""
     }
   },
   mounted() {
@@ -70,8 +73,9 @@ export default {
   },
   methods: {
     loadPage() {
-      this.studentList = controller.methods.getStudentsByCond(null, null, null);
+      this.studentList = controller.methods.getStudentsByCond(this.classCond, this.nameCond, this.phoneCond);
-      console.log("初始化获取当前条件下学生列标");
+      console.log("当前的筛选条件：classCond=" + this.classCond + "\tnameCond=" + this.nameCond+"\tphoneCond=" + this.phoneCond)
+      console.log("载入筛选后的学生列表...");
       console.log(this.studentList);
     },
     getClassName(classId) {
@@ -95,8 +99,8 @@ export default {
       console.log(this.deleteStudentsId);
       controller.methods.deleteStudents(this.deleteStudentsId)
       this.loadPage();
-    },updateStudent(student){
+    }, updateStudent(student) {
-      this.$emit("updateStudent",student);
+      this.$emit("updateStudent", student);
     }
 
   }

src/views/student/components/item-top.vue

@@ -2,13 +2,13 @@
   <div class="main-top">
     <p>
       <span>姓名</span>
-      <input type="text" id="search-name" placeholder="情输入姓名">
+      <input v-model="nameCond" type="text" id="search-name" placeholder="情输入姓名">
       <span>联系电话</span>
-      <input type="text" id="search-phone" placeholder="情输入联系电话">
+      <input v-model="phoneCond" 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 @click="searchStudent()" name="search" id="search"><img src="@/assets/search.png">搜索</button>
-      <button name="reset" onclick="resetSearch()" id="reset"><img src="@/assets/reset.png">重置</button>
+      <button @click="resetSearch" name="reset" id="reset"><img src="@/assets/reset.png">重置</button>
       <!-- <script>
                     function resetSearch() {
                         document.getElementById("search-name").value = "";
@@ -34,11 +34,23 @@
 import studentController from '@/controller/student/index'
 export default {
   name: 'Student-Top',
+  data(){
+    return{
+      nameCond:"",
+      phoneCond:""
+    }
+  },
   methods:{
     showOverlay(){
       this.$emit('showOverlay')
     },deleteStudent(){
       this.$emit('deleteStudent')
+    },searchStudent(){
+      this.$emit("searchStudent",this.nameCond,this.phoneCond)
+    },resetSearch(){
+      this.nameCond = "";
+      this.phoneCond = "";
+      this.searchStudent();
     }
   }
 }

src/views/student/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="main-box">
-    <Top @deleteStudent="deleteStudent()" @showOverlay="showOverlay()"></Top>
+    <Top @searchStudent="searchStudent" @deleteStudent="deleteStudent()" @showOverlay="showOverlay()"></Top>
     <div class="main-main">
-      <Drawer></Drawer>
+      <Drawer @changeClassCand="changeClassCand" ref="drawerComponent"></Drawer>
       <Main @updateStudent="updateStudent" ref="mainComponent"></Main>
     </div>
     <Overlay @hideOverlay="hideOverlay()" ref="overlayComponent" v-show="isOverlay"></Overlay>
@@ -41,6 +41,15 @@ export default {
     }, updateStudent(student) {
       this.showOverlay();
       this.$refs.overlayComponent.updateStudent(student);
+    }, changeClassCand(classId) {
+      this.$refs.mainComponent.classCond = classId;
+      this.$refs.mainComponent.loadPage();
+    }, searchStudent(nameCond, phoneCond) {
+      // console.log("添加搜索筛选");
+      // console.log("nameCond=" + nameCond + "\tphoneCond=" + phoneCond)
+      this.$refs.mainComponent.nameCond = nameCond;
+      this.$refs.mainComponent.phoneCond = phoneCond;
+      this.$refs.mainComponent.loadPage();
     }
   }
 }