Improved UI in LookupConditions (#39)

* fix(ui): major filter will revert to default if college selection change * feat: enable search when selecting college, major and property
shuosc · Oct 29, 2023 · 45a5584 · 45a5584
1 parent 71260b6
commit 45a5584
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/mixins/LookupPanel.js b/src/mixins/LookupPanel.js
@@ -302,5 +302,8 @@ export const LookupConditionsMixin = {
         });
       }
     },
+    changeCollege() {
+      this.conditions.search['class_sort_major'] = '{"name":""}';
+    },
   },
 };
diff --git a/src/pages/index/components/LookupPanel/LookupConditions.vue b/src/pages/index/components/LookupPanel/LookupConditions.vue
@@ -36,19 +36,19 @@
         </a-select>
       </a-form-item>
       <a-form-item label="学院">
-        <a-select v-model="conditions.search['class_sort_college']"  class="w-200px">
+        <a-select show-search v-model="conditions.search['class_sort_college']" @change="changeCollege"  class="w-200px">
           <a-select-option value='{"name":""}'>全部</a-select-option>
           <a-select-option v-for="item in getCollegesList()" :key="item.name" :value="JSON.stringify({name:item.name,regex:item.regex.toString()})">{{item.name}}</a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="专业">
-        <a-select v-model="conditions.search['class_sort_major']"  class="w-200px">
+        <a-select show-search v-model="conditions.search['class_sort_major']"  class="w-200px">
           <a-select-option value='{"name":""}'>全部</a-select-option>
           <a-select-option v-for="item in getMajorsList(JSON.parse(conditions.search['class_sort_college']).name)" :key="item.name" :value="JSON.stringify({name:item.name,regex:item.regex.toString()})">{{item.name}}</a-select-option>
         </a-select>
       </a-form-item>
       <a-form-item label="课程属性">
-        <a-select v-model="conditions.search['class_sort_property']"  class="w-200px">
+        <a-select show-search v-model="conditions.search['class_sort_property']"  class="w-200px">
           <a-select-option value='{"name":""}'>全部</a-select-option>
           <a-select-option v-for="item in getLessonPropertiesList()" :key="item.name" :value="JSON.stringify({name:item.name,code:item.code,regex:item.regex.toString()})">{{item.name}}</a-select-option>
         </a-select>
@@ -140,6 +140,11 @@
     margin: 0 16px 16px;
   }
 
+  /*noinspection CssUnusedSymbol*/
+  .lookup-conditions >>> .ant-select-search__field {
+    padding: 0;
+  }
+
   .w-200px {
     width: 200px;
   }

diff --git a/src/pages/m/components/LookupPanel/LookupConditions.vue b/src/pages/m/components/LookupPanel/LookupConditions.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-form class="conditions-wrapper" layout="vertical" ref="form">
+    <a-form class="lookup-conditions" layout="vertical" ref="form">
       <a-form-item :validate-status="regexpValidateStatus['course_id']">
         <a-input allow-clear v-model="conditions.search['course_id']">
           <span class="label" slot="prefix">课程号：</span>
@@ -59,15 +59,15 @@
       <a-row>
         <a-col :xs="11">
           <a-form-item label="学院">
-            <a-select v-model="conditions.search['class_sort_college']"  class="w-200px">
+            <a-select show-search v-model="conditions.search['class_sort_college']" @change="changeCollege"  class="w-200px">
               <a-select-option value='{"name":""}'>全部</a-select-option>
               <a-select-option v-for="item in getCollegesList()" :key="item.name" :value="JSON.stringify({name:item.name,regex:item.regex.toString()})">{{item.name}}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
         <a-col :xs="{offset: 2, span: 11}">
           <a-form-item label="专业">
-            <a-select v-model="conditions.search['class_sort_major']"  class="w-200px">
+            <a-select show-search v-model="conditions.search['class_sort_major']"  class="w-200px">
               <a-select-option value='{"name":""}'>全部</a-select-option>
               <a-select-option v-for="item in getMajorsList(JSON.parse(conditions.search['class_sort_college']).name)" :key="item.name" :value="JSON.stringify({name:item.name,regex:item.regex.toString()})">{{item.name}}</a-select-option>
             </a-select>
@@ -77,7 +77,7 @@
       <a-row>
         <a-col :xs="11">
           <a-form-item label="课程属性">
-            <a-select v-model="conditions.search['class_sort_property']"  class="w-200px">
+            <a-select show-search v-model="conditions.search['class_sort_property']"  class="w-200px">
               <a-select-option value='{"name":""}'>全部</a-select-option>
               <a-select-option v-for="item in getLessonPropertiesList()" :key="item.name" :value="JSON.stringify({name:item.name,code:item.code,regex:item.regex.toString()})">{{item.name}}</a-select-option>
             </a-select>
@@ -165,10 +165,15 @@
 </script>
 
 <style scoped>
-  .conditions-wrapper {
+  .lookup-conditions {
     padding: 16px 16px 0;
   }
 
+  /*noinspection CssUnusedSymbol*/
+  .lookup-conditions >>> .ant-select-search__field {
+    padding: 0;
+  }
+
   .w-80px {
     width: 80px;
   }