【中汽测试】树状结构加查询

src/components/customField/AddForm.vue

@@ -111,6 +111,8 @@
                   tree-checkable
                   treeCheckStrictly
                   :label-in-value="false"
+                  show-search
+                  :filterTreeNode="filterTreeOption"
                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
                 <!--  14, 年份选择 -->
                 <j-date v-else-if="item.fieldShowType === FieldType.YEAR_PICKER.value"
@@ -128,6 +130,8 @@
                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)"
                                :tree-data="optionsData[item.dbFieldName]"
                                :label-in-value="false"
+                               show-search
+                               :filterTreeNode="filterTreeOption"
                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
                 <!--16、树形弹框选择-->
                 <tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value"
@@ -636,7 +640,11 @@ export default {
     },
     getFlag (fieldName) {
       return this.flagByField[fieldName] || this.flag
-    }
+    },
+    filterTreeOption (input, option) {
+      const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
+      return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
   }
 }
 </script>

src/components/customField/Search.vue

@@ -16,6 +16,8 @@
               :getPopupContainer="triggerNode=> triggerNode.parentNode"
               :tree-data="optionsData[item.dbFieldName]"
               tree-checkable
+              show-search
+              :filterTreeNode="filterTreeOption"
               :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
             />
           </a-form-item>
@@ -29,6 +31,8 @@
               :maxTagCount="1"
               :getPopupContainer="triggerNode=> triggerNode.parentNode"
               :tree-data="optionsData[item.dbFieldName]"
+              show-search
+              :filterTreeNode="filterTreeOption"
               :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
             />
           </a-form-item>
@@ -74,7 +78,7 @@
             <j-multi-select-tag v-model="queryParam[item.dbFieldName]"
                                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
                                 :type="'select'" :maxTagCount="1"
-                                :triggerChange="false" :dictCode="item.dictField"/>
+                                :triggerChange="false" :dictCode="item.dictField" />
           </a-form-item>
         </template>
         <!--   组织机构选择  -->
@@ -89,6 +93,8 @@
               class="box-input"
               style="width: 100%"
               :tree-data="categoryTreeList"
+              show-search
+              :filterTreeNode="filterTreeOption"
               :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
             />
           </a-form-item>
@@ -108,6 +114,8 @@
               :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
               treeCheckable
               treeCheckStrictly
+              show-search
+              :filterTreeNode="filterTreeOption"
             />
           </a-form-item>
         </template>
@@ -141,6 +149,8 @@
                 tree-checkable
                 treeCheckStrictly
                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                show-search
+                :filterTreeNode="filterTreeOption"
               />
             </a-form-item>
           </template>
@@ -154,6 +164,8 @@
                 :getPopupContainer="triggerNode=> triggerNode.parentNode"
                 :tree-data="optionsData[item.dbFieldName]"
                 :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                show-search
+                :filterTreeNode="filterTreeOption"
               />
             </a-form-item>
           </template>
@@ -179,6 +191,8 @@
                 style="width: 100%"
                 :tree-data="categoryTreeList"
                 :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
+                show-search
+                :filterTreeNode="filterTreeOption"
               />
             </a-form-item>
           </template>
@@ -197,6 +211,7 @@
                 :placeholder="$t('pleaseSelect') + item.dbFieldTxt"
                 treeCheckable
                 treeCheckStrictly
+                :filterTreeNode="filterTreeOption"
               />
             </a-form-item>
           </template>
@@ -223,7 +238,7 @@
               <j-multi-select-tag v-model="queryParam[item.dbFieldName]"
                                   :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
                                   :type="'select'" :maxTagCount="1"
-                                  :triggerChange="false" :dictCode="item.dictField"/>
+                                  :triggerChange="false" :dictCode="item.dictField" />
             </a-form-item>
           </template>
           <!--  年份选择 -->
@@ -244,7 +259,10 @@
           {{ !toggleSearchStatus ? $t('open') : $t('putAway') }}
           <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
         </a>
-        <a-button icon="search" type="primary" @click="searchQuery" style="margin-left: 8px" v-has="searchHas">{{ $t('query') }}</a-button>
+        <a-button icon="search" type="primary" @click="searchQuery" style="margin-left: 8px" v-has="searchHas">{{
+            $t('query')
+          }}
+        </a-button>
         <a-button icon="reload" type="primary" ghost style="margin-left: 8px" @click="searchReset">{{ $t('reset') }}</a-button>
       </div>
     </a-row>
@@ -396,6 +414,10 @@ export default {
     },
     handleToggleSearch () {
       this.toggleSearchStatus = !this.toggleSearchStatus
+    },
+    filterTreeOption (input, option) {
+      const text = option.componentOptions.propsData.title || option.componentOptions.propsData.label
+      return text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
   }
 }