support to use the clearable button of components to search (#12668)

dolphinscheduler-ui/src/views/projects/list/index.tsx

@@ -60,6 +60,14 @@ const list = defineComponent({
       requestData()
     }
 
+    const onClearSearch = () => {
+      variables.page = 1
+      getTableData({
+        pageSize: variables.pageSize,
+        pageNo: variables.page
+      })
+    }
+
     const onCancelModal = () => {
       variables.showModalRef = false
     }
@@ -93,6 +101,7 @@ const list = defineComponent({
       handleSearch,
       onCancelModal,
       onConfirmModal,
+      onClearSearch,
       handleChangePageSize,
       trim
     }
@@ -118,6 +127,7 @@ const list = defineComponent({
                 v-model={[this.searchVal, 'value']}
                 placeholder={t('project.list.project_tips')}
                 clearable
+                onClear={this.onClearSearch}
               />
               <NButton size='small' type='primary' onClick={this.handleSearch}>
                 <NIcon>

dolphinscheduler-ui/src/views/projects/task/definition/batch-task.tsx

@@ -75,6 +75,21 @@ const BatchTaskDefinition = defineComponent({
       requestData()
     }
 
+    const onClearSearchTaskName = () => {
+      variables.searchTaskName = null
+      onSearch()
+    }
+
+    const onClearSearchWorkflowName = () => {
+      variables.searchWorkflowName = null
+      onSearch()
+    }
+
+    const onClearSearchTaskType = () => {
+      variables.taskType = null
+      onSearch()
+    }
+
     const onRefresh = () => {
       variables.showVersionModalRef = false
       variables.showMoveModalRef = false
@@ -110,6 +125,9 @@ const BatchTaskDefinition = defineComponent({
       ...toRefs(variables),
       ...toRefs(task),
       onSearch,
+      onClearSearchTaskName,
+      onClearSearchWorkflowName,
+      onClearSearchTaskType,
       requestData,
       onUpdatePageSize,
       onRefresh,
@@ -145,6 +163,7 @@ const BatchTaskDefinition = defineComponent({
                 clearable
                 v-model={[this.searchTaskName, 'value']}
                 placeholder={t('project.task.task_name')}
+                onClear={this.onClearSearchTaskName}
               />
               <NInput
                 allowInput={this.trim}
@@ -152,6 +171,7 @@ const BatchTaskDefinition = defineComponent({
                 clearable
                 v-model={[this.searchWorkflowName, 'value']}
                 placeholder={t('project.task.workflow_name')}
+                onClear={this.onClearSearchWorkflowName}
               />
               <NSelect
                 v-model={[this.taskType, 'value']}
@@ -162,6 +182,7 @@ const BatchTaskDefinition = defineComponent({
                 placeholder={t('project.task.task_type')}
                 style={{ width: '180px' }}
                 clearable
+                onClear={this.onClearSearchTaskType}
               />
               <NButton size='small' type='primary' onClick={onSearch}>
                 <NIcon>

dolphinscheduler-ui/src/views/projects/task/instance/batch-task.tsx

@@ -73,6 +73,36 @@ const BatchTaskInstance = defineComponent({
       requestTableData()
     }
 
+    const onClearSearchTaskName = () => {
+      variables.searchVal = ''
+      onSearch()
+    }
+
+    const onClearSearchProcessInstanceName = () => {
+      variables.processInstanceName = null
+      onSearch()
+    }
+
+    const onClearSearchExecutorName = () => {
+      variables.executorName = null
+      onSearch()
+    }
+
+    const onClearSearchHost = () => {
+      variables.host = null
+      onSearch()
+    }
+
+    const onClearSearchStateType = () => {
+      variables.stateType = null
+      onSearch()
+    }
+
+    const onClearSearchTime = () => {
+      variables.datePickerRange = null
+      onSearch()
+    }
+
     const onConfirmModal = () => {
       variables.showModalRef = false
     }
@@ -152,6 +182,12 @@ const BatchTaskInstance = defineComponent({
       requestTableData,
       onUpdatePageSize,
       onSearch,
+      onClearSearchTaskName,
+      onClearSearchProcessInstanceName,
+      onClearSearchExecutorName,
+      onClearSearchHost,
+      onClearSearchStateType,
+      onClearSearchTime,
       onConfirmModal,
       refreshLogs,
       trim
@@ -178,6 +214,7 @@ const BatchTaskInstance = defineComponent({
               size='small'
               placeholder={t('project.task.task_name')}
               clearable
+              onClear={this.onClearSearchTaskName}
             />
             <NInput
               allowInput={this.trim}
@@ -185,6 +222,7 @@ const BatchTaskInstance = defineComponent({
               size='small'
               placeholder={t('project.task.workflow_instance')}
               clearable
+              onClear={this.onClearSearchProcessInstanceName}
             />
             <NInput
               allowInput={this.trim}
@@ -192,6 +230,7 @@ const BatchTaskInstance = defineComponent({
               size='small'
               placeholder={t('project.task.executor')}
               clearable
+              onClear={this.onClearSearchExecutorName}
             />
             <NInput
               allowInput={this.trim}
@@ -199,6 +238,7 @@ const BatchTaskInstance = defineComponent({
               size='small'
               placeholder={t('project.task.host')}
               clearable
+              onClear={this.onClearSearchHost}
             />
             <NSelect
               v-model={[this.stateType, 'value']}
@@ -207,6 +247,7 @@ const BatchTaskInstance = defineComponent({
               placeholder={t('project.task.state')}
               style={{ width: '180px' }}
               clearable
+              onClear={this.onClearSearchStateType}
             />
             <NDatePicker
               v-model={[this.datePickerRange, 'value']}
@@ -215,6 +256,7 @@ const BatchTaskInstance = defineComponent({
               start-placeholder={t('project.task.start_time')}
               end-placeholder={t('project.task.end_time')}
               clearable
+              onClear={this.onClearSearchTime}
             />
             <NButton size='small' type='primary' onClick={onSearch}>
               <NIcon>

dolphinscheduler-ui/src/views/projects/task/instance/stream-task.tsx

@@ -61,6 +61,36 @@ const BatchTaskInstance = defineComponent({
       getTableData()
     }
 
+    const onClearSearchTaskName = () => {
+      variables.searchVal = null
+      onSearch()
+    }
+
+    const onClearSearchWorkFlowName = () => {
+      variables.processDefinitionName = null
+      onSearch()
+    }
+
+    const onClearSearchExecutorName = () => {
+      variables.executorName = null
+      onSearch()
+    }
+
+    const onClearSearchHost = () => {
+      variables.host = null
+      onSearch()
+    }
+
+    const onClearSearchStateType = () => {
+      variables.stateType = null
+      onSearch()
+    }
+
+    const onClearSearchTime = () => {
+      variables.datePickerRange = null
+      onSearch()
+    }
+
     const onConfirmModal = () => {
       variables.showModalRef = false
     }
@@ -140,6 +170,12 @@ const BatchTaskInstance = defineComponent({
       getTableData,
       onUpdatePageSize,
       onSearch,
+      onClearSearchTaskName,
+      onClearSearchWorkFlowName,
+      onClearSearchExecutorName,
+      onClearSearchHost,
+      onClearSearchStateType,
+      onClearSearchTime,
       onConfirmModal,
       refreshLogs,
       trim
@@ -166,6 +202,7 @@ const BatchTaskInstance = defineComponent({
               size='small'
               placeholder={t('project.task.task_name')}
               clearable
+              onClear={this.onClearSearchTaskName}
             />
             <NInput
               allowInput={this.trim}
@@ -173,6 +210,7 @@ const BatchTaskInstance = defineComponent({
               size='small'
               placeholder={t('project.task.workflow_name')}
               clearable
+              onClear={this.onClearSearchWorkFlowName}
             />
             <NInput
               allowInput={this.trim}
@@ -180,6 +218,7 @@ const BatchTaskInstance = defineComponent({
               size='small'
               placeholder={t('project.task.executor')}
               clearable
+              onClear={this.onClearSearchExecutorName}
             />
             <NInput
               allowInput={this.trim}
@@ -187,6 +226,7 @@ const BatchTaskInstance = defineComponent({
               size='small'
               placeholder={t('project.task.host')}
               clearable
+              onClear={this.onClearSearchHost}
             />
             <NSelect
               v-model={[this.stateType, 'value']}
@@ -195,6 +235,7 @@ const BatchTaskInstance = defineComponent({
               placeholder={t('project.task.state')}
               style={{ width: '180px' }}
               clearable
+              onClear={this.onClearSearchStateType}
             />
             <NDatePicker
               v-model={[this.datePickerRange, 'value']}
@@ -203,6 +244,7 @@ const BatchTaskInstance = defineComponent({
               start-placeholder={t('project.task.start_time')}
               end-placeholder={t('project.task.end_time')}
               clearable
+              onClear={this.onClearSearchTime}
             />
             <NButton size='small' type='primary' onClick={onSearch}>
               <NIcon>

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

@@ -84,6 +84,15 @@ export default defineComponent({
       requestData()
     }
 
+    const onClearSearch = () => {
+      variables.page = 1
+      getTableData({
+        pageSize: variables.pageSize,
+        pageNo: variables.page,
+        searchVal: ''
+      })
+    }
+
     const handleChangePageSize = () => {
       variables.page = 1
       requestData()
@@ -118,6 +127,7 @@ export default defineComponent({
     return {
       requestData,
       handleSearch,
+      onClearSearch,
       handleUpdateList,
       createDefinition,
       createDefinitionDynamic,
@@ -172,6 +182,8 @@ export default defineComponent({
                 size='small'
                 placeholder={t('resource.function.enter_keyword_tips')}
                 v-model={[this.searchVal, 'value']}
+                clearable
+                onClear={this.onClearSearch}
               />
               <NButton type='primary' size='small' onClick={this.handleSearch}>
                 <NIcon>

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

@@ -56,6 +56,21 @@ export default defineComponent({
       })
     }
 
+    const onClearSearchVal = () => {
+      searchValRef.value = ''
+      handleSearch()
+    }
+
+    const onClearSearchHost = () => {
+      hostRef.value = ''
+      handleSearch()
+    }
+
+    const onClearSearchExecutor = () => {
+      executorNameRef.value = ''
+      handleSearch()
+    }
+
     const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
 
     return {
@@ -65,6 +80,9 @@ export default defineComponent({
       stateTypeRef,
       startEndTimeRef,
       handleSearch,
+      onClearSearchVal,
+      onClearSearchExecutor,
+      onClearSearchHost,
       trim
     }
   },
@@ -79,18 +97,24 @@ export default defineComponent({
           size='small'
           v-model:value={this.searchValRef}
           placeholder={t('project.workflow.name')}
+          clearable
+          onClear={this.onClearSearchVal}
         />
         <NInput
           allowInput={this.trim}
           size='small'
           v-model:value={this.executorNameRef}
           placeholder={t('project.workflow.executor')}
+          clearable
+          onClear={this.onClearSearchExecutor}
         />
         <NInput
           allowInput={this.trim}
           size='small'
           v-model:value={this.hostRef}
           placeholder={t('project.workflow.host')}
+          clearable
+          onClear={this.onClearSearchHost}
         />
         <NSelect
           options={options}