添加学生筛选功能

src/api/user/index.ts

@@ -34,6 +34,9 @@ enum API {
 
   // 获取个人亲密度列表
   LIKELIST = "/wanzai/api/smartRelation/getList",
+
+  // 获取班级年级数据
+  CLASSDATA = "/wanzai/api/smartGrade/getGradeAndClass",
 }
 
 // 获取用户汇总数据
@@ -86,3 +89,6 @@ export const reqGetCheckList = (params: any) =>
 // 获取个人亲密度列表
 export const reqGetLikeList = (data: any) =>
   request.get(API.LIKELIST, { params: data });
+
+// 获取班级年级数据
+export const reqGetClassData = () => request.get(API.CLASSDATA);

src/components/user/userRight.vue

@@ -103,6 +103,17 @@
             <div class="search_input">
               <input type="text" placeholder="请输入关键字" v-model="keyword" />
             </div>
+            <div>
+              <el-cascader
+                ref="cascader"
+                v-model="classValue"
+                :options="options_class"
+                :props="props_class"
+                placeholder="请选择年级班级"
+                clearable
+                @change="handleChangeClass"
+              />
+            </div>
             <div class="search_btn" @click="handleSearch">查询</div>
           </div>
 
@@ -151,7 +162,9 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { countUpNum } from "@/utils/countUpNum";
 // 引入用户画像相关的接口
-import { reqGetUserInfo } from "@/api/user/index";
+import { reqGetUserInfo, reqGetClassData } from "@/api/user/index";
+// 引入解密函数
+import { decryptDes } from "@/utils/des";
 
 // 学生总数
 const totalStudent = ref(0);
@@ -188,6 +201,54 @@ const tableDataPop = ref([]);
 
 // 弹窗输入框绑定数据
 const keyword = ref("");
+// 年级id
+const graderId = ref();
+// 班级id
+const classId = ref();
+// 年级班级筛选框绑定数据
+const classValue = ref("");
+// 年级班级数据
+const options_class = ref([
+  {
+    value: "1",
+    label: "一年级",
+    children: [
+      {
+        value: "1-1",
+        label: "一（1）班",
+      },
+      {
+        value: "1-2",
+        label: "一（2）班",
+      },
+    ],
+  },
+  {
+    value: "2",
+    label: "二年级",
+    children: [
+      {
+        value: "2-1",
+        label: "二（1）班",
+      },
+      {
+        value: "2-2",
+        label: "二（2）班",
+      },
+      {
+        value: "2-3",
+        label: "二（3）班",
+      },
+    ],
+  },
+]);
+
+const props_class = {
+  checkStrictly: true,
+  value: "id",
+  label: "name",
+};
+const cascader = ref();
 
 const router = useRouter();
 
@@ -237,6 +298,8 @@ const handleClickMore = (value: number) => {
   popType.value = value;
   // 获取弹窗表格数据
   getPopData(popType.value);
+  // 获取年级班级数据
+  getClassData();
 };
 
 // 获取弹窗表格数据
@@ -246,6 +309,8 @@ const getPopData = async (type: number) => {
     pageCount: pageSize.value,
     identityId: type === 0 ? 2 : 3,
     key: keyword.value,
+    graderId: graderId.value,
+    classId: classId.value,
   });
   // console.log(res);
   if ((res as any).code == 200) {
@@ -254,12 +319,42 @@ const getPopData = async (type: number) => {
   }
 };
 
+// 获取年级班级数据
+const getClassData = async () => {
+  const res: any = await reqGetClassData();
+
+  if (res.code == 200) {
+    const result = JSON.parse(decryptDes(res.data));
+    // console.log(result);
+    options_class.value = result;
+  }
+};
+
 // 分页器当前页修改时的回调
 const handleCurrentChange = (value: number) => {
   currentPage.value = value;
   getPopData(popType.value);
 };
 
+// 年级班级筛选框切换回调
+const handleChangeClass = (v: any) => {
+  // console.log(v);
+  // console.log(cascader.value.getCheckedNodes()[0].label);
+  // console.log(cascader.value.getCheckedNodes()[0].value);
+
+  if (!v) {
+    graderId.value = "";
+    classId.value = "";
+    return;
+  }
+
+  graderId.value = v[0];
+  classId.value = v[1];
+
+  // 选择后关闭筛选框
+  cascader.value.togglePopperVisible();
+};
+
 // 查询按钮绑定回调
 const handleSearch = () => {
   currentPage.value = 1;
@@ -433,7 +528,7 @@ const clickPopCheck = (row: any) => {
           height: 32px;
           .search_input {
             padding: 0 10px;
-            width: 430px;
+            width: 130px;
             border-radius: 2px;
             border: 1px solid #9c9c9c;
             background-color: rgba(48, 75, 95, 0.5);
@@ -551,4 +646,8 @@ const clickPopCheck = (row: any) => {
 ::v-deep(.el-input__inner) {
   color: #fff;
 }
+
+::v-deep(.el-input__inner::placeholder) {
+  color: #606266;
+}
 </style>

src/views/school.vue

@@ -26,6 +26,7 @@ const isShow = ref(false);
 
 onMounted(() => {
   let token = sessionStorage.getItem("WANZAI-TOKEN");
+  console.log(token);
 
   if (token) {
     handleVerify(token);