feat: 搜索和年级筛选

src/views/questionnaire-statistics/detail.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { List, Popup, DatePicker, Popover } from 'vant';
+import { List, Popup, DatePicker, Popover, Picker } from 'vant';
 import request from '@/helpers/request';
 import { useRoute, useRouter } from 'vue-router';
 import OEmpty from '@/components/m-empty';
@@ -11,6 +11,7 @@ import scIcon1 from './images/sc_icon1.png';
 import scIcon2 from './images/sc_icon2.png';
 import scIcon3 from './images/sc_icon3.png';
 import schoolIcon from './images/school_icon.png';
+import { number } from 'echarts';
 
 
 export default defineComponent({
@@ -39,8 +40,16 @@ export default defineComponent({
       classList: [] as any,
       currentSort: 1, // 当前选中的排序方式
       currentAsc: false, // 是否生序，默认是降序
+      gradeColumns: [],
+      gradeStatus: false,
+      gradePopShow: false,
+      currentGrade: "",
+      currentClass: "",
+      gradeOptionIndex: [] as any,
+      gradeContent: null as any,
     });
 
+    // 获取学校信息
     const queryInfo = async () => {
       try {
         const res = await request.post(
@@ -52,7 +61,30 @@ export default defineComponent({
           }
         );
         state.schoolInfo = res.data || {}
-        console.log('111',res)        
+        // 构建年级、班级及联选择
+        const columns: any = []
+        res.data.classData.unshift({
+          currentClassList: [],
+          currentGrade: '全部年级'
+        })
+        res.data.classData.forEach((grade: any, index: number) => {
+          let columnItem: any = {}
+          columnItem.text = grade.currentGrade
+          columnItem.value = 'grade' + index
+          columnItem.children = []
+          grade.currentClassList.unshift('全部班级')
+          if (grade.currentClassList?.length) {
+            grade.currentClassList.forEach((classObj: any, cIdx: number) => {
+              columnItem.children.push({
+                text: classObj,
+                value: 'class' + cIdx
+              })
+            })
+          }
+          columns.push(columnItem)
+        })
+        state.gradeColumns = columns
+        // console.log('555',res, state.gradeColumns)        
       } catch (error) {
         
       }
@@ -66,15 +98,15 @@ export default defineComponent({
           {
             data: {
               schoolAreaId: forms.id,
-              currentGrade: "",
-              currentClass: "",
+              currentGrade: state.currentGrade,
+              currentClass: state.currentClass,
               sortType: state.currentSort,
               asc: state.currentAsc
             }
           }
         );
         state.classList = res.data || []
-        console.log('222',res)        
+        // console.log('222',res)        
       } catch (error) {
         
       }
@@ -121,8 +153,8 @@ export default defineComponent({
         </div>
 
         {/** 选择年级班级 */}
-        <div class={styles.gradeColumn}>
-          <span>请选择年级班级</span>
+        <div class={styles.gradeColumn} onClick={() => state.gradeStatus = true}>
+          <span class={state.gradeContent && styles.gcText}>{state.gradeContent ? state.gradeContent : '请选择年级班级'}</span>
           <i></i>
         </div>
 
@@ -175,6 +207,39 @@ export default defineComponent({
           }
         </div>
 
+        {/* 班级 */}
+        <Popup
+          v-model:show={state.gradeStatus}
+          position="bottom"
+          round
+          safeAreaInsetBottom
+          lazyRender={false}
+          class={'popupBottomSearch'}
+          onOpen={() => {
+            state.gradePopShow = true;
+          }}
+          onClosed={() => {
+            state.gradePopShow = false;
+          }}>
+          {state.gradePopShow && (
+            <Picker
+              showToolbar
+              v-model={state.gradeOptionIndex}
+              columns={state.gradeColumns}
+              onCancel={() => (state.gradeStatus = false)}
+              onConfirm={(val: any) => {
+                console.log('选择1111',val)
+                state.currentGrade = val.selectedOptions[0].text === '全部年级' ? '' : val.selectedOptions[0].text
+                state.currentClass = val.selectedOptions[1].text === '全部班级' ? '' : val.selectedOptions[1].text
+                state.gradeOptionIndex = [val.selectedOptions[0].value, val.selectedOptions[1].value]
+                state.gradeContent = state.currentGrade + state.currentClass
+                state.gradeStatus = false;
+                queryList()
+              }}
+            />
+          )}
+        </Popup> 
+
         {/* <MWxTip /> */}
       </div>
     );

src/views/questionnaire-statistics/index.module.less

@@ -155,6 +155,7 @@
   display: flex;
   align-items: center;
   margin-top: 16px;
+  position: sticky;
   >li {
     display: flex;
     align-items: center;
@@ -369,6 +370,9 @@
     font-size: 14px;
     color: rgba(0,0,0,0.4);
   }
+  .gcText {
+    color: #333;
+  }
   i {
     background: url('./images/arrow_icon.png') no-repeat center;
     background-size: contain;

src/views/questionnaire-statistics/index.tsx

@@ -191,9 +191,15 @@ export default defineComponent({
                 autocomplete="off"
                 center
                 maxlength={30}
-                v-model={forms.schoolName}>
+                v-model={forms.schoolName}
+                onUpdate:modelValue={(val: any) => {
+                  // 输入框内容变化时触发
+                  // console.log('搜索内容变化',val)
+                  forms.schoolName = val
+                  getList()
+                }}>
               </Field>   
-              <img src={searchBtn} class={styles.searchBtn} />         
+              <img src={searchBtn} class={styles.searchBtn} onClick={getList} />         
         </div>
 
         {/** 排序栏 */}