[Improvement-14201][UI] Improve the select component to support users to filter options. (#14202)

dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx

@@ -25,13 +25,14 @@ import {
   NSpace,
   NEllipsis
 } from 'naive-ui'
-import { defineComponent, getCurrentInstance, h, ref } from 'vue'
+import { defineComponent, getCurrentInstance, h, ref, unref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { format } from 'date-fns'
 import { workflowExecutionStateType } from '@/common/common'
 import { queryProcessDefinitionList } from '@/service/modules/process-definition'
 import { SelectMixedOption } from 'naive-ui/lib/select/src/interface'
 import { Router, useRouter } from 'vue-router'
+import { SelectOption } from 'naive-ui/es/select/src/interface'
 
 export default defineComponent({
   name: 'ProcessInstanceCondition',
@@ -111,6 +112,19 @@ export default defineComponent({
 
     const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
 
+    const selectFilter = (query: string, option: SelectOption) => {
+      return option.filterLabel
+        ? option.filterLabel
+            .toString()
+            .toLowerCase()
+            .includes(query.toLowerCase())
+        : false
+    }
+
+    const updateValue = (value: number) => {
+      processDefineCodeRef.value = value
+    }
+
     return {
       searchValRef,
       executorNameRef,
@@ -123,23 +137,37 @@ export default defineComponent({
       onClearSearchHost,
       trim,
       processDefinitionOptions,
-      processDefineCodeRef
+      processDefineCodeRef,
+      selectFilter,
+      updateValue
     }
   },
   render() {
     const { t } = useI18n()
     const options = workflowExecutionStateType(t)
+    const {
+      processDefinitionOptions,
+      processDefineCodeRef,
+      selectFilter,
+      updateValue
+    } = this
 
     return (
       <NSpace justify='end'>
-        <NSelect
-          clearable
-          filterable
-          options={this.processDefinitionOptions}
-          size='small'
-          style={{ width: '210px' }}
-          v-model:value={this.processDefineCodeRef}
-        />
+        {h(NSelect, {
+          style: {
+            width: '210px'
+          },
+          size: 'small',
+          clearable: true,
+          filterable: true,
+          options: unref(processDefinitionOptions),
+          value: processDefineCodeRef,
+          filter: selectFilter,
+          onUpdateValue: (value: any) => {
+            updateValue(value)
+          }
+        })}
         <NInput
           allowInput={this.trim}
           size='small'

dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { defineComponent, onMounted, toRefs, watch, VNode, h } from 'vue'
+import { defineComponent, onMounted, toRefs, watch, VNode, h, unref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import {
@@ -67,6 +67,16 @@ const workflowRelation = defineComponent({
         default: () => option.label
       })
 
+    const selectFilter = (query: string, option: SelectOption) => {
+      return option.label
+        ? option.label.toString().toLowerCase().includes(query.toLowerCase())
+        : false
+    }
+
+    const updateValue = (value: any) => {
+      variables.workflow = value
+    }
+
     watch(
       () => [variables.workflow, variables.labelShow, locale.value],
       () => {
@@ -74,7 +84,14 @@ const workflowRelation = defineComponent({
       }
     )
 
-    return { t, handleResetDate, ...toRefs(variables), renderOption }
+    return {
+      t,
+      handleResetDate,
+      ...toRefs(variables),
+      renderOption,
+      selectFilter,
+      updateValue
+    }
   },
   render() {
     const { t, handleResetDate } = this
@@ -103,15 +120,20 @@ const workflowRelation = defineComponent({
               ),
             'header-extra': () => (
               <NSpace>
-                <NSelect
-                  clearable
-                  filterable
-                  style={{ width: '300px' }}
-                  placeholder={t('project.workflow.workflow_name')}
-                  options={this.workflowOptions}
-                  v-model={[this.workflow, 'value']}
-                  renderOption={this.renderOption}
-                />
+                {h(NSelect, {
+                  style: {
+                    width: '300px'
+                  },
+                  clearable: true,
+                  filterable: true,
+                  placeholder: t('project.workflow.workflow_name'),
+                  options: unref(this.workflowOptions),
+                  value: this.workflow,
+                  filter: this.selectFilter,
+                  onUpdateValue: (value: any) => {
+                    this.updateValue(value)
+                  }
+                })}
                 <NTooltip trigger={'hover'}>
                   {{
                     default: () => t('project.workflow.refresh'),

dolphinscheduler-ui/src/views/projects/workflow/timing/components/timing-condition.tsx

@@ -17,10 +17,11 @@
 
 import { SearchOutlined } from '@vicons/antd'
 import { NButton, NSelect, NIcon, NSpace, NEllipsis } from 'naive-ui'
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, ref, unref } from 'vue'
 import { queryProcessDefinitionList } from '@/service/modules/process-definition'
 import { SelectMixedOption } from 'naive-ui/lib/select/src/interface'
 import { Router, useRouter } from 'vue-router'
+import { SelectOption } from 'naive-ui/es/select/src/interface'
 
 export default defineComponent({
   name: 'TimingCondition',
@@ -59,23 +60,50 @@ export default defineComponent({
       })
     }
 
+    const selectFilter = (query: string, option: SelectOption) => {
+      return option.filterLabel
+        ? option.filterLabel
+            .toString()
+            .toLowerCase()
+            .includes(query.toLowerCase())
+        : false
+    }
+
+    const updateValue = (value: number) => {
+      processDefineCodeRef.value = value
+    }
+
     return {
       handleSearch,
       processDefinitionOptions,
-      processDefineCodeRef
+      processDefineCodeRef,
+      selectFilter,
+      updateValue
     }
   },
   render() {
+    const {
+      processDefineCodeRef,
+      processDefinitionOptions,
+      selectFilter,
+      updateValue
+    } = this
     return (
       <NSpace justify='end'>
-        <NSelect
-          clearable
-          filterable
-          options={this.processDefinitionOptions}
-          size='small'
-          style={{ width: '310px' }}
-          v-model:value={this.processDefineCodeRef}
-        />
+        {h(NSelect, {
+          style: {
+            width: '310px'
+          },
+          size: 'small',
+          clearable: true,
+          filterable: true,
+          value: processDefineCodeRef,
+          options: unref(processDefinitionOptions),
+          filter: selectFilter,
+          onUpdateValue: (value: any) => {
+            updateValue(value)
+          }
+        })}
         <NButton type='primary' size='small' onClick={this.handleSearch}>
           <NIcon>
             <SearchOutlined />