refactor(测试跟踪): 下拉列表组件中增加输入筛选功能

frontend/src/business/components/track/common/SelectMenu.vue

@@ -1,53 +1,56 @@
 <template>
-  <el-menu :unique-opened="true" mode="horizontal" active-text-color="write"
-           class="project_menu">
-    <el-submenu index="1" popper-class="submenu">
-      <template v-slot:title>
-        <span class="menu-title">{{'[' + title + ']'}}</span>
-        <span> {{currentData == null ? '' : currentData.name}} </span>
-      </template>
-      <template v-slot:default>
-        <div style="height:400px;">
-          <el-scrollbar style="height:100%">
-            <label v-for="(item,index) in data" :key="index">
-              <el-menu-item @click="changeData(item)">
-                {{item.name}}
-                <i class="el-icon-check" v-if="currentData && item.id === currentData.id"></i>
-              </el-menu-item>
-            </label>
-          </el-scrollbar>
-        </div>
-      </template>
-    </el-submenu>
-  </el-menu>
+  <div>
+    <span class="menu-title">{{'[' + title + ']'}}</span>
+    <el-select filterable slot="prepend" v-model="value" @change="changeData" class="project_menu"
+               size="small">
+      <el-option v-for="(item,index) in data" :key="index" :label="item.name" :value="index"/>
+    </el-select>
+  </div>
 </template>
 
 <script>
-    export default {
-      name: "SelectMenu",
-      props: {
-        data: {
-          type: Array
-        },
-        currentData: {
-          type: Object
-        },
-        title: {
-          type: String
-        }
+  export default {
+    name: "SelectMenu",
+    props: {
+      data: {
+        type: Array
       },
-      methods: {
-        changeData(data) {
-          this.$emit("dataChange", data);
+      currentData: {
+        type: Object
+      },
+      title: {
+        type: String
+      }
+    },
+    data() {
+      return {
+        value: ''
+      }
+    },
+    watch: {
+      currentData(data) {
+        if (data != undefined && data != null) {
+          this.value = data.name;
         }
       }
+    },
+    methods: {
+      changeData(index) {
+        this.$emit("dataChange", this.data[index]);
+      }
     }
+  }
 </script>
 
 <style scoped>
+  .project_menu {
+    width: 214px;
+  }
 
   .menu-title {
     color: darkgrey;
+    margin-left: 10px;
+    margin-right: 10px;
   }
 
 </style>

frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue

@@ -180,6 +180,7 @@
                         :disabled="isReadOnly"
                         v-model="scope.row.executeResult"
                         @change="stepResultChange()"
+                        filterable
                         size="mini">
                         <el-option :label="$t('test_track.plan_view.pass')" value="Pass"
                                    style="color: #7ebf50;"></el-option>
@@ -227,6 +228,7 @@
                   {{ $t('test_track.issue.please_choose_current_owner') }}
                   <el-select v-model="testCase.tapdUsers"
                              multiple
+                             filterable
                              style="width: 20%"
                              :placeholder="$t('test_track.issue.please_choose_current_owner')"
                              collapse-tags>