This is an automated email from the ASF dual-hosted git repository.
kerwin pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new c6ac356134 [Improvement-14201][UI] Improve the select component to
support users to filter options. (#14202)
c6ac356134 is described below
commit c6ac356134504130af598a8d1d9620b67f6d3d1c
Author: calvin <[email protected]>
AuthorDate: Thu May 25 13:12:04 2023 +0800
[Improvement-14201][UI] Improve the select component to support users to
filter options. (#14202)
---
.../components/process-instance-condition.tsx | 48 +++++++++++++++++-----
.../src/views/projects/workflow/relation/index.tsx | 44 +++++++++++++++-----
.../timing/components/timing-condition.tsx | 48 +++++++++++++++++-----
3 files changed, 109 insertions(+), 31 deletions(-)
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
index 942898cb5e..8aecceb021 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/instance/components/process-instance-condition.tsx
+++
b/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'
diff --git a/dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx
index 9d1aae4965..a1be42633c 100644
--- a/dolphinscheduler-ui/src/views/projects/workflow/relation/index.tsx
+++ b/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'),
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/timing/components/timing-condition.tsx
b/dolphinscheduler-ui/src/views/projects/workflow/timing/components/timing-condition.tsx
index de69eb6254..7dbe32938e 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/timing/components/timing-condition.tsx
+++
b/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 />
