From 45a5584a38b8a63661f2061ebe35b4fc64ed57e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A3=9B=E9=A8=A8=E7=89=9B?=
 <68262945+hidacow@users.noreply.github.com>
Date: Sun, 29 Oct 2023 12:13:19 +0800
Subject: [PATCH] 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
---
 src/mixins/LookupPanel.js                         |  3 +++
 .../components/LookupPanel/LookupConditions.vue   | 11 ++++++++---
 .../m/components/LookupPanel/LookupConditions.vue | 15 ++++++++++-----
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/mixins/LookupPanel.js b/src/mixins/LookupPanel.js
index 9c940c2..74a9b56 100644
--- 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
index 2fcf1b1..addf11d 100644
--- 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
index 509afa7..9ce0755 100644
--- 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,7 +59,7 @@
       <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>
@@ -67,7 +67,7 @@
         </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;
   }